From f0f65ed10e51323b920e0f228ce3657913908b0c Mon Sep 17 00:00:00 2001
From: m1guelmcf <miguelmouracf@gmail.com>
Date: Wed, 29 Oct 2025 20:57:33 -0300
Subject: [PATCH 1/9] ajuste

---
 app/doctor/disponibilidade/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/doctor/disponibilidade/page.tsx b/app/doctor/disponibilidade/page.tsx
index 127b93f..93165e7 100644
--- a/app/doctor/disponibilidade/page.tsx
+++ b/app/doctor/disponibilidade/page.tsx
@@ -15,11 +15,12 @@ export default function AvailabilityPage() {
     const [error, setError] = useState<string | null>(null);
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
-    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    var userInfo;
     const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
     const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
 
     useEffect(() => {
+        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
         const fetchData = async () => {
             try {
                 const response = await AvailabilityService.list();

From ec640c5564d109bc966ded3520fc2af91b20192c Mon Sep 17 00:00:00 2001
From: m1guelmcf <miguelmouracf@gmail.com>
Date: Wed, 29 Oct 2025 21:07:34 -0300
Subject: [PATCH 2/9] ajustes finais

---
 app/doctor/dashboard/page.tsx                | 5 +++--
 app/doctor/disponibilidade/excecoes/page.tsx | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/doctor/dashboard/page.tsx b/app/doctor/dashboard/page.tsx
index bf91156..5f77eaa 100644
--- a/app/doctor/dashboard/page.tsx
+++ b/app/doctor/dashboard/page.tsx
@@ -31,7 +31,7 @@ type Schedule = {
 };
 
 export default function PatientDashboard() {
-    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    var userInfo;
     const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
     const [availability, setAvailability] = useState<any | null>(null);
     const [exceptions, setExceptions] = useState<any | null>(null);
@@ -52,7 +52,8 @@ export default function PatientDashboard() {
         saturday: "Sábado",
     };
 
-    useEffect(() => {
+    useEffect(() => { 
+        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
         const fetchData = async () => {
             try {
                 // fetch para disponibilidade
diff --git a/app/doctor/disponibilidade/excecoes/page.tsx b/app/doctor/disponibilidade/excecoes/page.tsx
index 115ff54..f66e712 100644
--- a/app/doctor/disponibilidade/excecoes/page.tsx
+++ b/app/doctor/disponibilidade/excecoes/page.tsx
@@ -18,6 +18,7 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
 // IMPORTAR O COMPONENTE CALENDÁRIO DA SHADCN
 import { Calendar } from "@/components/ui/calendar";
 import { format } from "date-fns"; // Usaremos o date-fns para formatação e comparação de datas
+import { userInfo } from "os";
 
 const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
 
@@ -48,9 +49,13 @@ export default function ExceptionPage() {
     const router = useRouter();
     const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
     const [isLoading, setIsLoading] = useState(false);
-    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    var userInfo;
     const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
     const [tipo, setTipo] = useState<string>("");
+   
+    useEffect (()=>{
+        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
+    })
 
     // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
     const [bookedDays, setBookedDays] = useState<Date[]>([]);
@@ -110,7 +115,7 @@ export default function ExceptionPage() {
             <div className="space-y-6">
                 <div>
                     <h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1>
-                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. {userInfo.user_metadata.full_name}</p>
+                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
                 </div>
 
                 <div className="flex justify-between items-center">

From 271aaef2beaaf924a912ed01d4f60c16c04a758b Mon Sep 17 00:00:00 2001
From: StsDanilo <dsb.danilo07@gmail.com>
Date: Thu, 30 Oct 2025 19:21:56 -0300
Subject: [PATCH 3/9] ajustes

---
 app/doctor/dashboard/page.tsx                | 5 +++--
 app/doctor/disponibilidade/excecoes/page.tsx | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/doctor/dashboard/page.tsx b/app/doctor/dashboard/page.tsx
index bf91156..a75a8c4 100644
--- a/app/doctor/dashboard/page.tsx
+++ b/app/doctor/dashboard/page.tsx
@@ -31,7 +31,7 @@ type Schedule = {
 };
 
 export default function PatientDashboard() {
-    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    var userInfo;
     const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
     const [availability, setAvailability] = useState<any | null>(null);
     const [exceptions, setExceptions] = useState<any | null>(null);
@@ -54,6 +54,7 @@ export default function PatientDashboard() {
 
     useEffect(() => {
         const fetchData = async () => {
+            userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
             try {
                 // fetch para disponibilidade
                 const response = await AvailabilityService.list();
@@ -273,7 +274,7 @@ export default function PatientDashboard() {
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
                                                     <p className="text-sm text-gray-600">
-                                                        {startTime} - {endTime} <br/> -
+                                                        {startTime} - {endTime} <br /> -
                                                     </p>
                                                 </div>
                                                 <div className="text-center mt-2">
diff --git a/app/doctor/disponibilidade/excecoes/page.tsx b/app/doctor/disponibilidade/excecoes/page.tsx
index 115ff54..fd0639d 100644
--- a/app/doctor/disponibilidade/excecoes/page.tsx
+++ b/app/doctor/disponibilidade/excecoes/page.tsx
@@ -18,6 +18,7 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
 // IMPORTAR O COMPONENTE CALENDÁRIO DA SHADCN
 import { Calendar } from "@/components/ui/calendar";
 import { format } from "date-fns"; // Usaremos o date-fns para formatação e comparação de datas
+import { userInfo } from "os";
 
 const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
 
@@ -48,10 +49,14 @@ export default function ExceptionPage() {
     const router = useRouter();
     const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
     const [isLoading, setIsLoading] = useState(false);
-    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    var userInfo;
     const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
     const [tipo, setTipo] = useState<string>("");
 
+    useEffect(() => {
+        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    });
+
     // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
     const [bookedDays, setBookedDays] = useState<Date[]>([]);
 
@@ -110,7 +115,7 @@ export default function ExceptionPage() {
             <div className="space-y-6">
                 <div>
                     <h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1>
-                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. {userInfo.user_metadata.full_name}</p>
+                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
                 </div>
 
                 <div className="flex justify-between items-center">

From 6c5b0604c26f24411fc186cadd37189953546c6c Mon Sep 17 00:00:00 2001
From: StsDanilo <dsb.danilo07@gmail.com>
Date: Fri, 31 Oct 2025 18:02:40 -0300
Subject: [PATCH 4/9] hotfix no login de admin

---
 components/LoginForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
index 3c68beb..fb68573 100644
--- a/components/LoginForm.tsx
+++ b/components/LoginForm.tsx
@@ -61,7 +61,7 @@ export function LoginForm({ children }: LoginFormProps) {
             case "secretary":
                 redirectPath = "/secretary/pacientes";
                 break;
-            case "patient":
+            case "paciente":
                 redirectPath = "/patient/dashboard";
                 break;
             case "finance":

From 425f63f8a7b7b909c93fa0141c30d28a0dd28265 Mon Sep 17 00:00:00 2001
From: StsDanilo <dsb.danilo07@gmail.com>
Date: Mon, 3 Nov 2025 19:39:08 -0300
Subject: [PATCH 5/9] Disponibilidade completa

---
 app/doctor/dashboard/page.tsx                | 173 +++++++---
 app/doctor/disponibilidade/excecoes/page.tsx |  70 ++--
 app/doctor/disponibilidade/page.tsx          | 319 +++++++++++++++++--
 components/ui/availability-edit-modal.tsx    | 130 ++++++++
 4 files changed, 617 insertions(+), 75 deletions(-)
 create mode 100644 components/ui/availability-edit-modal.tsx

diff --git a/app/doctor/dashboard/page.tsx b/app/doctor/dashboard/page.tsx
index 2033ca6..cf9bad5 100644
--- a/app/doctor/dashboard/page.tsx
+++ b/app/doctor/dashboard/page.tsx
@@ -4,12 +4,16 @@ import DoctorLayout from "@/components/doctor-layout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Calendar, Clock, User, Trash2 } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { toast } from "@/hooks/use-toast";
+
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { exceptionsService } from "@/services/exceptionApi.mjs";
-import { toast } from "@/hooks/use-toast";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs";
 
 type Availability = {
     id: string;
@@ -30,15 +34,86 @@ type Schedule = {
     weekday: object;
 };
 
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
+
+interface UserPermissions {
+    isAdmin: boolean;
+    isManager: boolean;
+    isDoctor: boolean;
+    isSecretary: boolean;
+    isAdminOrManager: boolean;
+}
+
+interface UserData {
+    user: {
+        id: string;
+        email: string;
+        email_confirmed_at: string | null;
+        created_at: string | null;
+        last_sign_in_at: string | null;
+    };
+    profile: {
+        id: string;
+        full_name: string;
+        email: string;
+        phone: string;
+        avatar_url: string | null;
+        disabled: boolean;
+        created_at: string | null;
+        updated_at: string | null;
+    };
+    roles: string[];
+    permissions: UserPermissions;
+}
+
+interface Exception {
+  id: string; // id da exceção
+  doctor_id: string;
+  date: string; // formato YYYY-MM-DD
+  start_time: string | null; // null = dia inteiro
+  end_time: string | null;   // null = dia inteiro
+  kind: "bloqueio" | "disponibilidade"; // tipos conhecidos
+  reason: string | null; // pode ser null
+  created_at: string; // timestamp ISO
+  created_by: string;
+}
+
 export default function PatientDashboard() {
-    var userInfo;
-    const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
+    const [userData, setUserData] = useState<UserData>();
     const [availability, setAvailability] = useState<any | null>(null);
-    const [exceptions, setExceptions] = useState<any | null>(null);
+    const [exceptions, setExceptions] = useState<Exception[]>([]);
     const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
-    const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
 
     // Mapa de tradução
@@ -52,35 +127,54 @@ export default function PatientDashboard() {
         saturday: "Sábado",
     };
 
-    useEffect(() => { 
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
-        const fetchData = async () => {
-            userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
-            try {
-                // fetch para disponibilidade
-                const response = await AvailabilityService.list();
-                const filteredResponse = response.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
-                setAvailability(filteredResponse);
-                // fetch para exceções
-                const res = await exceptionsService.list();
-                const filteredRes = res.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
-                setExceptions(filteredRes);
-            } catch (e: any) {
-                alert(`${e?.error} ${e?.message}`);
-            }
-        };
-        fetchData();
-    }, []);
+    useEffect(() => {
+  const fetchData = async () => {
+    try {
+      const doctorsList: Doctor[] = await doctorsService.list();
+      const doctor = doctorsList[0];
 
-    const openDeleteDialog = (patientId: string) => {
-        setPatientToDelete(patientId);
+      // Salva no estado
+      setLoggedDoctor(doctor);
+
+      // Busca disponibilidade
+      const availabilityList = await AvailabilityService.list();
+      
+      // Filtra já com a variável local
+      const filteredAvail = availabilityList.filter(
+        (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+      );
+      setAvailability(filteredAvail);
+
+      // Busca exceções
+      const exceptionsList = await exceptionsService.list();
+      const filteredExc = exceptionsList.filter(
+        (exc: { doctor_id: string }) => exc.doctor_id === doctor?.id
+      );
+      console.log(exceptionsList)
+      setExceptions(filteredExc);
+
+    } catch (e: any) {
+      alert(`${e?.error} ${e?.message}`);
+    }
+  };
+
+  fetchData();
+}, []);
+
+    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
+    function findDoctorById(id: string, doctors: Doctor[]) {
+        return doctors.find((doctor) => doctor.user_id === id);
+    }
+    
+    const openDeleteDialog = (exceptionId: string) => {
+        setExceptionToDelete(exceptionId);
         setDeleteDialogOpen(true);
     };
 
-    const handleDeletePatient = async (patientId: string) => {
-        // Remove from current list (client-side deletion)
+    const handleDeleteException = async (ExceptionId: string) => {
         try {
-            const res = await exceptionsService.delete(patientId);
+            alert(ExceptionId)
+            const res = await exceptionsService.delete(ExceptionId);
 
             let message = "Exceção deletada com sucesso";
             try {
@@ -96,7 +190,7 @@ export default function PatientDashboard() {
                 description: message,
             });
 
-            setExceptions((prev: any[]) => prev.filter((p) => String(p.id) !== String(patientId)));
+            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
         } catch (e: any) {
             toast({
                 title: "Erro",
@@ -104,7 +198,7 @@ export default function PatientDashboard() {
             });
         }
         setDeleteDialogOpen(false);
-        setPatientToDelete(null);
+        setExceptionToDelete(null);
     };
 
     function formatAvailability(data: Availability[]) {
@@ -258,12 +352,13 @@ export default function PatientDashboard() {
 
                         <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
                             {exceptions && exceptions.length > 0 ? (
-                                exceptions.map((ex: any) => {
+                                exceptions.map((ex: Exception) => {
                                     // Formata data e hora
                                     const date = new Date(ex.date).toLocaleDateString("pt-BR", {
                                         weekday: "long",
                                         day: "2-digit",
                                         month: "long",
+                                        timeZone: "UTC"
                                     });
 
                                     const startTime = formatTime(ex.start_time);
@@ -274,8 +369,10 @@ export default function PatientDashboard() {
                                             <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
-                                                    <p className="text-sm text-gray-600">
-                                                        {startTime} - {endTime} <br /> -
+                                                   <p className="text-sm text-gray-600">
+                                                        {startTime && endTime
+                                                        ? `${startTime} - ${endTime}`
+                                                        : "Dia todo"}
                                                     </p>
                                                 </div>
                                                 <div className="text-center mt-2">
@@ -301,11 +398,11 @@ export default function PatientDashboard() {
                     <AlertDialogContent>
                         <AlertDialogHeader>
                             <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                            <AlertDialogDescription>Tem certeza que deseja excluir esta exceção? Esta ação não pode ser desfeita.</AlertDialogDescription>
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
+                            <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
                                 Excluir
                             </AlertDialogAction>
                         </AlertDialogFooter>
diff --git a/app/doctor/disponibilidade/excecoes/page.tsx b/app/doctor/disponibilidade/excecoes/page.tsx
index 2669c40..3e7b316 100644
--- a/app/doctor/disponibilidade/excecoes/page.tsx
+++ b/app/doctor/disponibilidade/excecoes/page.tsx
@@ -18,9 +18,36 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
 // IMPORTAR O COMPONENTE CALENDÁRIO DA SHADCN
 import { Calendar } from "@/components/ui/calendar";
 import { format } from "date-fns"; // Usaremos o date-fns para formatação e comparação de datas
-import { userInfo } from "os";
+import { doctorsService } from "@/services/doctorsApi.mjs";
 
-const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
 
 // --- TIPAGEM DA CONSULTA SALVA NO LOCALSTORAGE ---
 interface LocalStorageAppointment {
@@ -35,8 +62,6 @@ interface LocalStorageAppointment {
     phone: string;
 }
 
-const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
-
 // Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
 const isSameDay = (date1: Date, date2: Date) => {
     return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
@@ -49,17 +74,24 @@ export default function ExceptionPage() {
     const router = useRouter();
     const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
     const [isLoading, setIsLoading] = useState(false);
-    var userInfo;
-    const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
     const [tipo, setTipo] = useState<string>("");
    
-    useEffect (()=>{
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
-    })
-
     useEffect(() => {
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
-    });
+      const fetchData = async () => {
+        try {
+          const doctorsList: Doctor[] = await doctorsService.list();
+          const doctor = doctorsList[0];
+    
+          // Salva no estado
+          setLoggedDoctor(doctor);
+        } catch (e: any) {
+          alert(`${e?.error} ${e?.message}`);
+        }
+      };
+    
+      fetchData();
+    }, []);
 
     // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
     const [bookedDays, setBookedDays] = useState<Date[]>([]);
@@ -75,11 +107,11 @@ export default function ExceptionPage() {
         const formData = new FormData(form);
 
         const apiPayload = {
-            doctor_id: doctorIdTemp,
-            created_by: doctorIdTemp,
+            doctor_id: loggedDoctor?.id,
+            created_by: loggedDoctor?.user_id,
             date: selectedCalendarDate ? format(selectedCalendarDate, "yyyy-MM-dd") : "",
-            start_time: ((formData.get("horarioEntrada") + ":00") as string) || undefined,
-            end_time: ((formData.get("horarioSaida") + ":00") as string) || undefined,
+            start_time: ((formData.get("horarioEntrada")?formData.get("horarioEntrada") + ":00":null) as string) || null,
+            end_time: ((formData.get("horarioSaida")?formData.get("horarioSaida") + ":00":null) as string) || null,
             kind: tipo || undefined,
             reason: formData.get("reason"),
         };
@@ -176,13 +208,13 @@ export default function ExceptionPage() {
                                                 <Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
                                                     Horario De Entrada
                                                 </Label>
-                                                <Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" />
+                                                <Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
                                             </div>
                                             <div>
                                                 <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
                                                     Horario De Saida
                                                 </Label>
-                                                <Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" />
+                                                <Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
                                             </div>
                                         </div>
 
@@ -196,7 +228,7 @@ export default function ExceptionPage() {
                                                 </SelectTrigger>
                                                 <SelectContent>
                                                     <SelectItem value="bloqueio">Bloqueio </SelectItem>
-                                                    <SelectItem value="liberacao">Liberação</SelectItem>
+                                                    <SelectItem value="disponibilidade_extra">Disponibilidade extra</SelectItem>
                                                 </SelectContent>
                                             </Select>
                                         </div>
diff --git a/app/doctor/disponibilidade/page.tsx b/app/doctor/disponibilidade/page.tsx
index dc304cc..0e2cf70 100644
--- a/app/doctor/disponibilidade/page.tsx
+++ b/app/doctor/disponibilidade/page.tsx
@@ -2,15 +2,24 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import DoctorLayout from "@/components/doctor-layout";
+
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { usersService } from "@/services/usersApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+
 import { toast } from "@/hooks/use-toast";
 import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Eye, Edit, Calendar, Trash2 } from "lucide-react";
+import { AvailabilityEditModal } from "@/components/ui/availability-edit-modal";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 
 interface UserPermissions {
     isAdmin: boolean;
@@ -42,29 +51,195 @@ interface UserData {
     permissions: UserPermissions;
 }
 
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+    slot_minutes: number;
+    appointment_type: string;
+    active: boolean;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string | null;
+};
+
 export default function AvailabilityPage() {
     const [error, setError] = useState<string | null>(null);
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
     const [userData, setUserData] = useState<UserData>();
+    const [availability, setAvailability] = useState<any | null>(null);
+    const [doctorId, setDoctorId] = useState<string>();
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
+    const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    
+    const selectAvailability = (schedule: { start: string; end: string;}, day: string) => {
+        const selected = availability.filter((a: Availability) =>
+            a.start_time === schedule.start &&
+            a.end_time === schedule.end &&
+            a.weekday === day
+        );
+        setSelectedAvailability(selected[0]);
+    }
 
-    useEffect(() => {
-        const fetchData = async () => {
+    const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => {
+        selectAvailability(schedule, day)
+        setIsModalOpen(true);
+    };
+    
+    const handleCloseModal = () => {
+        setSelectedAvailability(null);
+        setIsModalOpen(false);
+    };
+
+    const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => {
+        if (isLoading) return;
+        setIsLoading(true);
+
+        const apiPayload = {
+            start_time: formData.start_time,
+            end_time: formData.end_time,
+            slot_minutes: formData.slot_minutes,
+            appointment_type: formData.appointment_type,
+        };
+        console.log(apiPayload);
+
+        try {
+            const res = await AvailabilityService.update(formData.id, apiPayload);
+            console.log(res);
+
+            let message = "disponibilidade editada com sucesso";
             try {
-                const response = await AvailabilityService.list();
-                console.log(response);
-                const user = await usersService.getMe();
-                console.log(user);
-                setUserData(user);
+                if (!res[0].id) {
+                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+                } else {
+                    console.log(message);
+                }
+            } catch {}
+
+            toast({
+                title: "Sucesso",
+                description: message,
+            });
+            router.push("#")
+        } catch (err: any) {
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível editar a disponibilidade",
+            });
+        } finally {
+            setIsLoading(false);
+            handleCloseModal();
+            fetchData()
+        }
+    };
+
+        // Mapa de tradução
+    const weekdaysPT: Record<string, string> = {
+        sunday: "Domingo",
+        monday: "Segunda",
+        tuesday: "Terça",
+        wednesday: "Quarta",
+        thursday: "Quinta",
+        friday: "Sexta",
+        saturday: "Sábado",
+    };
+    const fetchData = async () => {
+            try {
+                const loggedUser = await usersService.getMe();
+                const doctorList = await doctorsService.list();
+                setUserData(loggedUser);
+                const doctor = findDoctorById(loggedUser.user.id, doctorList);
+                setDoctorId(doctor?.id);
+                console.log(doctor);
+                // Busca disponibilidade
+                const availabilityList = await AvailabilityService.list();
+              
+                // Filtra já com a variável local
+                const filteredAvail = availabilityList.filter(
+                (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+                );
+                setAvailability(filteredAvail);
             } catch (e: any) {
                 alert(`${e?.error} ${e?.message}`);
             }
         };
 
+    useEffect(() => {        
         fetchData();
     }, []);
 
+    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
+    function findDoctorById(id: string, doctors: Doctor[]) {
+        return doctors.find((doctor) => doctor.user_id === id);
+    }
+    
+    
+    function formatAvailability(data: Availability[]) {
+        // Agrupar os horários por dia da semana
+        const schedule = data.reduce((acc: any, item) => {
+            const { weekday, start_time, end_time } = item;
+            
+            // Se o dia ainda não existe, cria o array
+            if (!acc[weekday]) {
+                acc[weekday] = [];
+            }
+            
+            // Adiciona o horário do dia
+            acc[weekday].push({
+                start: start_time,
+                end: end_time,
+            });
+            
+            return acc;
+        }, {} as Record<string, { start: string; end: string }[]>);
+        
+        return schedule;
+    }
+    
+    useEffect(() => {
+        if (availability) {
+            const formatted = formatAvailability(availability);
+            setSchedule(formatted);
+        }
+    }, [availability]);
+
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (isLoading) return;
@@ -73,7 +248,7 @@ export default function AvailabilityPage() {
         const formData = new FormData(form);
 
         const apiPayload = {
-            doctor_id: userData?.user.id,
+            doctor_id: doctorId,
             weekday: (formData.get("weekday") as string) || undefined,
             start_time: (formData.get("horarioEntrada") as string) || undefined,
             end_time: (formData.get("horarioSaida") as string) || undefined,
@@ -104,13 +279,47 @@ export default function AvailabilityPage() {
         } catch (err: any) {
             toast({
                 title: "Erro",
-                description: err?.message || "Não foi possível cadastrar o paciente",
+                description: err?.message || "Não foi possível criar a disponibilidade",
             });
         } finally {
             setIsLoading(false);
         }
     };
 
+    const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => {
+        selectAvailability(schedule, day)
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeleteAvailability = async (AvailabilityId: string) => {
+            try {
+                const res = await AvailabilityService.delete(AvailabilityId);
+    
+                let message = "Disponibilidade deletada com sucesso";
+                try {
+                    if (res) {
+                        throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+                    } else {
+                        console.log(message);
+                    }
+                } catch {}
+    
+                toast({
+                    title: "Sucesso",
+                    description: message,
+                });
+    
+                setAvailability((prev: Availability[]) => prev.filter((p) => String(p.id) !== String(AvailabilityId)));
+            } catch (e: any) {
+                toast({
+                    title: "Erro",
+                    description: e?.message || "Não foi possível deletar a disponibilidade",
+                });
+            }
+            setDeleteDialogOpen(false);
+            setSelectedAvailability(null);
+        };
+
     return (
         <DoctorLayout>
             <div className="space-y-6">
@@ -152,7 +361,7 @@ export default function AvailabilityPage() {
                                         </label>
                                         <label className="flex items-center gap-2">
                                             <input type="radio" name="weekday" value="saturday" className="text-blue-600" />
-                                            <span className="whitespace-nowrap text-sm">Sabado</span>
+                                            <span className="whitespace-nowrap text-sm">Sábado</span>
                                         </label>
                                         <label className="flex items-center gap-2">
                                             <input type="radio" name="weekday" value="sunday" className="text-blue-600" />
@@ -200,19 +409,93 @@ export default function AvailabilityPage() {
                         </div>
                     </div>
 
-                    <div className="flex justify-end gap-4">
+                    <div className="flex justify-between gap-4">
                         <Link href="/doctor/disponibilidade/excecoes">
-                            <Button variant="outline">Adicionar Exceção</Button>
+                            <Button variant="default">Adicionar Exceção</Button>
                         </Link>
-                        <Link href="/doctor/dashboard">
-                            <Button variant="outline">Cancelar</Button>
-                        </Link>
-                        <Button type="submit" className="bg-green-600 hover:bg-green-700">
-                            Salvar Disponibilidade
-                        </Button>
+                        <div>
+                            <Link href="/doctor/dashboard">
+                                <Button variant="outline">Cancelar</Button>
+                            </Link>
+                            <Button type="submit" className="bg-green-600 hover:bg-green-700">
+                                Salvar Disponibilidade
+                            </Button>
+                        </div>
                     </div>
                 </form>
+                <div>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Horário Semanal</CardTitle>
+                            <CardDescription>Confira ou altere a sua disponibilidade da semana</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
+                            {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
+                                const times = schedule[day] || [];
+                                return (
+                                    <div key={day} className="space-y-4">
+                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
+                                            <div>
+                                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
+                                            </div>
+                                            <div className="text-center">
+                                                {times.length > 0 ? (
+                                                    times.map((t, i) => (
+                                                        <div key={i}>
+                                                            <DropdownMenu>
+                                                                <DropdownMenuTrigger asChild>
+                                                                    <p  className="text-sm text-gray-600 hover:text-accent-foreground hover:bg-gray-200">
+                                                                        {formatTime(t.start)} <br /> {formatTime(t.end)}
+                                                                    </p>
+                                                                </DropdownMenuTrigger>
+                                                                <DropdownMenuContent align="end">
+                                                                    <DropdownMenuItem onClick={() => handleOpenModal(t, day)}>
+                                                                    <Eye className="w-4 h-4 mr-2" />
+                                                                    Editar
+                                                                    </DropdownMenuItem>
+                                                                    <DropdownMenuItem
+                                                                    onClick={() => openDeleteDialog(t, day)}
+                                                                    className="text-red-600">
+                                                                    <Trash2 className="w-4 h-4 mr-2" />
+                                                                    Excluir
+                                                                    </DropdownMenuItem>
+                                                                </DropdownMenuContent>
+                                                            </DropdownMenu>
+                                                        </div>
+                                                    ))
+                                                ) : (
+                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </CardContent>
+                    </Card>
+                </div>
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+                            <AlertDialogDescription>Tem certeza que deseja excluir esta disponibilidade? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                                <AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-red-600 hover:bg-red-700">
+                                    Excluir
+                                </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </div>
+            <AvailabilityEditModal
+                availability={selectedAvailability}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSubmit={handleEdit}
+            />
+            
         </DoctorLayout>
     );
 }
diff --git a/components/ui/availability-edit-modal.tsx b/components/ui/availability-edit-modal.tsx
new file mode 100644
index 0000000..62b6e78
--- /dev/null
+++ b/components/ui/availability-edit-modal.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import { start } from "repl";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+    slot_minutes: number;
+    appointment_type: string;
+    active: boolean;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string | null;
+};
+
+interface AvailabilityEditModalProps {
+  isOpen: boolean;
+  availability: Availability | null;
+  onClose: () => void;
+  onSubmit: (formData: any) => void;
+}
+
+export function AvailabilityEditModal({ availability, isOpen, onClose, onSubmit }: AvailabilityEditModalProps) {
+  const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
+  const [form, setForm] = useState({ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:availability?.id});
+    // Mapa de tradução
+  const weekdaysPT: Record<string, string> = {
+    sunday: "Domingo",
+    monday: "Segunda-Feira",
+    tuesday: "Terça-Feira",
+    wednesday: "Quarta-Feira",
+    thursday: "Quinta-Feira",
+    friday: "Sexta-Feira",
+    saturday: "Sábado",
+  };
+  
+  const handleInputChange = (field: string, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+  
+  const handleFormSubmit = () => {
+    onSubmit(form);
+  };
+  
+  useEffect(() => {
+    if (availability) {
+    setModalidadeConsulta(availability.appointment_type);
+    setForm({
+      start_time: availability.start_time,
+      end_time: availability.end_time,
+      slot_minutes: availability.slot_minutes.toString(),
+      appointment_type: availability.appointment_type,
+      id: availability.id
+    });
+  }
+  }, [availability])
+
+  if (!availability) {
+  return null;
+}
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Edite a disponibilidade</DialogTitle>
+          <DialogDescription>Altere a disponibilidade atual.</DialogDescription>
+        </DialogHeader>
+          <form  onSubmit={(e) => { e.preventDefault(); handleFormSubmit(); }}>
+            <div className="grid gap-4 py-1" >
+                <h3 className="font-semibold mb-2">{weekdaysPT[availability.weekday]}</h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="start_time" className="font-semibold">Horário de entrada *</Label>
+                  <Input id="start_time" type="time" value={form.start_time} onChange={(e) => handleInputChange("start_time", e.target.value)}/>
+                </div>
+                <div>
+                  <Label htmlFor="end_time" className="font-semibold">Horário de saída *</Label>
+                  <Input id="end_time" type="time" value={form.end_time} onChange={(e) => handleInputChange("end_time", e.target.value)}/>
+                </div>              
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700">
+                    Duração Da Consulta (min)
+                  </Label>
+                  <Input type="number" id="duracaoConsulta" value={form.slot_minutes} onChange={(e) => handleInputChange("slot_minutes", e.target.value)} name="duracaoConsulta" required  className="mt-1" />
+                </div>
+                <div>
+                  <Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700">
+                    Modalidade De Consulta
+                    </Label>
+                    <Select value={form.appointment_type} onValueChange={(value) => {setModalidadeConsulta(value); handleInputChange("appointment_type", value);}}>
+                      <SelectTrigger className="mt-1">
+                        <SelectValue placeholder="Selecione" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="presencial">Presencial </SelectItem>
+                        <SelectItem value="telemedicina">Telemedicina</SelectItem>
+                      </SelectContent>
+                    </Select>
+                </div>           
+              </div>   
+              <div className="grid grid-cols-5 gap-4">           
+                <Button type="submit" className="col-start-5 bg-green-600 hover:bg-green-700">Confirmar</Button>
+              </div>
+            </div>  
+          </form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline" className="px-4 py-2 bg-gray-200 rounded-md">Fechar</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

From ce938a7f2c64727aeb55b01f3ac8d1b03da9bd68 Mon Sep 17 00:00:00 2001
From: m1guelmcf <miguelmouracf@gmail.com>
Date: Tue, 4 Nov 2025 08:53:45 -0300
Subject: [PATCH 6/9] remocao das barras de persquisas

---
 components/doctor-layout.tsx    | 773 ++++++++++++++++++--------------
 components/finance-layout.tsx   |  77 ++--
 components/manager-layout.tsx   | 128 ++++--
 components/patient-layout.tsx   | 150 ++++---
 components/secretary-layout.tsx | 174 +++----
 5 files changed, 759 insertions(+), 543 deletions(-)

diff --git a/components/doctor-layout.tsx b/components/doctor-layout.tsx
index 2dd2300..4415b4f 100644
--- a/components/doctor-layout.tsx
+++ b/components/doctor-layout.tsx
@@ -11,352 +11,459 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Search,
+  Bell,
+  Calendar,
+  Clock,
+  User,
+  LogOut,
+  Menu,
+  X,
+  Home,
+  FileText,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 
 interface DoctorData {
-    id: string;
-    name: string;
-    email: string;
-    phone: string;
-    cpf: string;
-    crm: string;
-    specialty: string;
-    department: string;
-    permissions: object;
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  cpf: string;
+  crm: string;
+  specialty: string;
+  department: string;
+  permissions: object;
 }
 
 interface PatientLayoutProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function DoctorLayout({ children }: PatientLayoutProps) {
-    const [doctorData, setDoctorData] = useState<DoctorData | null>(null);
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-    const [showLogoutDialog, setShowLogoutDialog] = useState(false);
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-    const [windowWidth, setWindowWidth] = useState(0);
-    const isMobile = windowWidth < 1024;
-    const router = useRouter();
-    const pathname = usePathname();
+  const [doctorData, setDoctorData] = useState<DoctorData | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(0);
+  const isMobile = windowWidth < 1024;
+  const router = useRouter();
+  const pathname = usePathname();
 
-    useEffect(() => {
-        const userInfoString = localStorage.getItem("user_info");
-        // --- ALTERAÇÃO PRINCIPAL AQUI ---
-        // Procurando o token no localStorage, onde ele foi realmente salvo.
-        const token = localStorage.getItem("token");
+  useEffect(() => {
+    const userInfoString = localStorage.getItem("user_info");
+    // --- ALTERAÇÃO PRINCIPAL AQUI ---
+    // Procurando o token no localStorage, onde ele foi realmente salvo.
+    const token = localStorage.getItem("token");
 
-        if (userInfoString && token) {
-            const userInfo = JSON.parse(userInfoString);
+    if (userInfoString && token) {
+      const userInfo = JSON.parse(userInfoString);
 
-            setDoctorData({
-                id: userInfo.id || "",
-                name: userInfo.user_metadata?.full_name || "Doutor(a)",
-                email: userInfo.email || "",
-                specialty: userInfo.user_metadata?.specialty || "Especialidade",
-                phone: userInfo.phone || "",
-                cpf: "",
-                crm: "",
-                department: "",
-                permissions: {},
-            });
-        } else {
-            // Se não encontrar, aí sim redireciona.
-            router.push("/login");
-        }
-    }, [router]);
-
-    // O restante do seu código permanece exatamente o mesmo...
-    useEffect(() => {
-        const handleResize = () => setWindowWidth(window.innerWidth);
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-
-    useEffect(() => {
-        if (isMobile) {
-            setSidebarCollapsed(true);
-        } else {
-            setSidebarCollapsed(false);
-        }
-    }, [isMobile]);
-
-    const handleLogout = () => {
-        setShowLogoutDialog(true);
-    };
-
-    // --- ALTERAÇÃO 2: A função de logout agora é MUITO mais simples ---
-    const confirmLogout = async () => {
-        try {
-            // Chama a função centralizada para fazer o logout no servidor
-            await api.logout();
-        } catch (error) {
-            // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
-        } finally {
-            // A responsabilidade do componente é apenas limpar o estado local e redirecionar
-            localStorage.removeItem("user_info");
-            localStorage.removeItem("token");
-            Cookies.remove("access_token"); // Limpeza de segurança
-
-            setShowLogoutDialog(false);
-            router.push("/"); // Redireciona para a home
-        }
-    };
-
-    const cancelLogout = () => {
-        setShowLogoutDialog(false);
-    };
-
-    const toggleMobileMenu = () => {
-        setIsMobileMenuOpen(!isMobileMenuOpen);
-    };
-
-    const menuItems = [
-        {
-            href: "/doctor/dashboard",
-            icon: Home,
-            label: "Dashboard",
-            // Botão para o dashboard do médico
-        },
-        {
-            href: "/doctor/consultas",
-            icon: Calendar,
-            label: "Consultas",
-            // Botão para página de consultas marcadas do médico atual
-        },
-        {
-            href: "/doctor/medicos/editorlaudo",
-            icon: Clock,
-            label: "Editor de Laudo",
-            // Botão para página do editor de laudo
-        },
-        {
-            href: "/doctor/medicos",
-            icon: User,
-            label: "Pacientes",
-            // Botão para a página de visualização de todos os pacientes
-        },
-        {
-            href: "/doctor/disponibilidade",
-            icon: Calendar,
-            label: "Disponibilidade",
-            // Botão para o dashboard do médico
-        },
-    ];
-
-    if (!doctorData) {
-        return <div>Carregando...</div>;
+      setDoctorData({
+        id: userInfo.id || "",
+        name: userInfo.user_metadata?.full_name || "Doutor(a)",
+        email: userInfo.email || "",
+        specialty: userInfo.user_metadata?.specialty || "Especialidade",
+        phone: userInfo.phone || "",
+        cpf: "",
+        crm: "",
+        department: "",
+        permissions: {},
+      });
+    } else {
+      // Se não encontrar, aí sim redireciona.
+      router.push("/login");
     }
+  }, [router]);
 
-    return (
-        // O restante do seu código JSX permanece exatamente o mesmo
-        <div className="min-h-screen bg-background flex">
-            <div className={`bg-card border-r border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                <div className="p-4 border-b border">
-                    <div className="flex items-center justify-between">
-                        {!sidebarCollapsed && (
-                            <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-white rounded-sm"></div>
-                                </div>
-                                <span className="font-semibold text-gray-900">MediConnect</span>
-                            </div>
-                        )}
-                        <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
-                            {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
-                        </Button>
-                    </div>
+  // O restante do seu código permanece exatamente o mesmo...
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (isMobile) {
+      setSidebarCollapsed(true);
+    } else {
+      setSidebarCollapsed(false);
+    }
+  }, [isMobile]);
+
+  const handleLogout = () => {
+    setShowLogoutDialog(true);
+  };
+
+  // --- ALTERAÇÃO 2: A função de logout agora é MUITO mais simples ---
+  const confirmLogout = async () => {
+    try {
+      // Chama a função centralizada para fazer o logout no servidor
+      await api.logout();
+    } catch (error) {
+      // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
+    } finally {
+      // A responsabilidade do componente é apenas limpar o estado local e redirecionar
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token"); // Limpeza de segurança
+
+      setShowLogoutDialog(false);
+      router.push("/"); // Redireciona para a home
+    }
+  };
+
+  const cancelLogout = () => {
+    setShowLogoutDialog(false);
+  };
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const menuItems = [
+    {
+      href: "/doctor/dashboard",
+      icon: Home,
+      label: "Dashboard",
+      // Botão para o dashboard do médico
+    },
+    {
+      href: "/doctor/consultas",
+      icon: Calendar,
+      label: "Consultas",
+      // Botão para página de consultas marcadas do médico atual
+    },
+    {
+      href: "/doctor/medicos/editorlaudo",
+      icon: Clock,
+      label: "Editor de Laudo",
+      // Botão para página do editor de laudo
+    },
+    {
+      href: "/doctor/medicos",
+      icon: User,
+      label: "Pacientes",
+      // Botão para a página de visualização de todos os pacientes
+    },
+    {
+      href: "/doctor/disponibilidade",
+      icon: Calendar,
+      label: "Disponibilidade",
+      // Botão para o dashboard do médico
+    },
+  ];
+
+  if (!doctorData) {
+    return <div>Carregando...</div>;
+  }
+
+  return (
+    // O restante do seu código JSX permanece exatamente o mesmo
+    <div className="min-h-screen bg-background flex">
+      <div
+        className={`bg-card border-r border transition-all duration-300 ${
+          sidebarCollapsed ? "w-16" : "w-64"
+        } fixed left-0 top-0 h-screen flex flex-col z-50`}
+      >
+        <div className="p-4 border-b border">
+          <div className="flex items-center justify-between">
+            {!sidebarCollapsed && (
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                  <div className="w-4 h-4 bg-white rounded-sm"></div>
                 </div>
-                <nav className="flex-1 p-2 overflow-y-auto">
-                    {menuItems.map((item) => {
-                        const Icon = item.icon;
-                        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
-
-                        return (
-                            <Link key={item.href} href={item.href}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
-                                    <Icon className="w-5 h-5 flex-shrink-0" />
-                                    {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
-                                </div>
-                            </Link>
-                        );
-                    })}
-                </nav>
-                // ... (seu código anterior)
-                {/* Sidebar para desktop */}
-                <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                    <div className="p-4 border-b border-gray-200">
-                        <div className="flex items-center justify-between">
-                            {!sidebarCollapsed && (
-                                <div className="flex items-center gap-2">
-                                    <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                                        <div className="w-4 h-4 bg-white rounded-sm"></div>
-                                    </div>
-                                    <span className="font-semibold text-gray-900">MediConnect</span>
-                                </div>
-                            )}
-                            <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
-                                {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
-                            </Button>
-                        </div>
-                    </div>
-
-                    <nav className="flex-1 p-2 overflow-y-auto">
-                        {menuItems.map((item) => {
-                            const Icon = item.icon;
-                            const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
-
-                            return (
-                                <Link key={item.href} href={item.href}>
-                                    <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
-                                        <Icon className="w-5 h-5 flex-shrink-0" />
-                                        {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
-                                    </div>
-                                </Link>
-                            );
-                        })}
-                    </nav>
-
-                    <div className="border-t p-4 mt-auto">
-                        <div className="flex items-center space-x-3 mb-4">
-                            {!sidebarCollapsed && (
-                                <>
-                                    <Avatar>
-                                        <AvatarImage src="/placeholder.svg?height=40&width=40" />
-                                        <AvatarFallback>
-                                            {doctorData.name
-                                                .split(" ")
-                                                .map((n) => n[0])
-                                                .join("")}
-                                        </AvatarFallback>
-                                    </Avatar>
-                                    <div className="flex-1 min-w-0">
-                                        <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
-                                        <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
-                                    </div>
-                                </>
-                            )}
-                            {sidebarCollapsed && (
-                                <Avatar className="mx-auto">
-                                    <AvatarImage src="/placeholder.svg?height=40&width=40" />
-                                    <AvatarFallback>
-                                        {doctorData.name
-                                            .split(" ")
-                                            .map((n) => n[0])
-                                            .join("")}
-                                    </AvatarFallback>
-                                </Avatar>
-                            )}
-                        </div>
-
-                        <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`} onClick={handleLogout}>
-                            <LogOut className="w-5 h-5 flex-shrink-0" />
-                            {!sidebarCollapsed && <span className="font-medium">Sair</span>}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {isMobileMenuOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>}
-            <div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
-                <div className="p-4 border-b border-gray-200 flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                            <div className="w-4 h-4 bg-white rounded-sm"></div>
-                        </div>
-                        <span className="font-semibold text-gray-900">Hospital System</span>
-                    </div>
-                    <Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
-                        <X className="w-4 h-4" />
-                    </Button>
-                </div>
-
-                <nav className="flex-1 p-2 overflow-y-auto">
-                    {menuItems.map((item) => {
-                        const Icon = item.icon;
-                        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
-
-                        return (
-                            <Link key={item.href} href={item.href} onClick={toggleMobileMenu}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground border-r-2 border-primary" : "text-muted-foreground hover:bg-accent"}`}>
-                                    <Icon className="w-5 h-5 flex-shrink-0" />
-                                    <span className="font-medium">{item.label}</span>
-                                </div>
-                            </Link>
-                        );
-                    })}
-                </nav>
-
-                <div className="border-t p-4 mt-auto">
-                    <div className="flex items-center space-x-3 mb-4">
-                        <Avatar>
-                            <AvatarImage src="/placeholder.svg?height=40&width=40" />
-                            <AvatarFallback>
-                                {doctorData.name
-                                    .split(" ")
-                                    .map((n) => n[0])
-                                    .join("")}
-                            </AvatarFallback>
-                        </Avatar>
-                        <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
-                            <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
-                        </div>
-                    </div>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full bg-transparent"
-                        onClick={() => {
-                            handleLogout();
-                            toggleMobileMenu();
-                        }}
-                    >
-                        <LogOut className="mr-2 h-4 w-4" />
-                        Sair
-                    </Button>
-                </div>
-            </div>
-
-            <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
-                <header className="bg-card border-b border px-6 py-4">
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-4 flex-1">
-                            <div className="relative flex-1 max-w-md">
-                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                                <Input placeholder="Buscar paciente" className="pl-10 bg-background border" />
-                            </div>
-                        </div>
-
-                        <div className="flex items-center gap-4">
-                            <Button variant="ghost" size="sm" className="relative">
-                                <Bell className="w-5 h-5" />
-                                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
-                            </Button>
-                        </div>
-                    </div>
-                </header>
-
-                <main className="flex-1 p-6">{children}</main>
-            </div>
-
-            <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
-                <DialogContent className="sm:max-w-md">
-                    <DialogHeader>
-                        <DialogTitle>Confirmar Saída</DialogTitle>
-                        <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
-                    </DialogHeader>
-                    <DialogFooter className="flex gap-2">
-                        <Button variant="outline" onClick={cancelLogout}>
-                            Cancelar
-                        </Button>
-                        <Button variant="destructive" onClick={confirmLogout}>
-                            <LogOut className="mr-2 h-4 w-4" />
-                            Sair
-                        </Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
+                <span className="font-semibold text-gray-900">MediConnect</span>
+              </div>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="p-1"
+            >
+              {sidebarCollapsed ? (
+                <ChevronRight className="w-4 h-4" />
+              ) : (
+                <ChevronLeft className="w-4 h-4" />
+              )}
+            </Button>
+          </div>
         </div>
-    );
+        <nav className="flex-1 p-2 overflow-y-auto">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              pathname === item.href ||
+              (item.href !== "/" && pathname.startsWith(item.href));
+
+            return (
+              <Link key={item.href} href={item.href}>
+                <div
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
+                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                      : "text-gray-600 hover:bg-gray-50"
+                  }`}
+                >
+                  <Icon className="w-5 h-5 flex-shrink-0" />
+                  {!sidebarCollapsed && (
+                    <span className="font-medium">{item.label}</span>
+                  )}
+                </div>
+              </Link>
+            );
+          })}
+        </nav>
+        // ... (seu código anterior)
+        {/* Sidebar para desktop */}
+        <div
+          className={`bg-white border-r border-gray-200 transition-all duration-300 ${
+            sidebarCollapsed ? "w-16" : "w-64"
+          } fixed left-0 top-0 h-screen flex flex-col z-50`}
+        >
+          <div className="p-4 border-b border-gray-200">
+            <div className="flex items-center justify-between">
+              {!sidebarCollapsed && (
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  </div>
+                  <span className="font-semibold text-gray-900">
+                    MediConnect
+                  </span>
+                </div>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                className="p-1"
+              >
+                {sidebarCollapsed ? (
+                  <ChevronRight className="w-4 h-4" />
+                ) : (
+                  <ChevronLeft className="w-4 h-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          <nav className="flex-1 p-2 overflow-y-auto">
+            {menuItems.map((item) => {
+              const Icon = item.icon;
+              const isActive =
+                pathname === item.href ||
+                (item.href !== "/" && pathname.startsWith(item.href));
+
+              return (
+                <Link key={item.href} href={item.href}>
+                  <div
+                    className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                      isActive
+                        ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                        : "text-gray-600 hover:bg-gray-50"
+                    }`}
+                  >
+                    <Icon className="w-5 h-5 flex-shrink-0" />
+                    {!sidebarCollapsed && (
+                      <span className="font-medium">{item.label}</span>
+                    )}
+                  </div>
+                </Link>
+              );
+            })}
+          </nav>
+
+          <div className="border-t p-4 mt-auto">
+            <div className="flex items-center space-x-3 mb-4">
+              {!sidebarCollapsed && (
+                <>
+                  <Avatar>
+                    <AvatarImage src="/placeholder.svg?height=40&width=40" />
+                    <AvatarFallback>
+                      {doctorData.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-900 truncate">
+                      {doctorData.name}
+                    </p>
+                    <p className="text-xs text-gray-500 truncate">
+                      {doctorData.specialty}
+                    </p>
+                  </div>
+                </>
+              )}
+              {sidebarCollapsed && (
+                <Avatar className="mx-auto">
+                  <AvatarImage src="/placeholder.svg?height=40&width=40" />
+                  <AvatarFallback>
+                    {doctorData.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+              )}
+            </div>
+
+            <div
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${
+                sidebarCollapsed ? "justify-center" : ""
+              }`}
+              onClick={handleLogout}
+            >
+              <LogOut className="w-5 h-5 flex-shrink-0" />
+              {!sidebarCollapsed && <span className="font-medium">Sair</span>}
+            </div>
+          </div>
+        </div>
+      </div>
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
+          onClick={toggleMobileMenu}
+        ></div>
+      )}
+      <div
+        className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${
+          isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"
+        }`}
+      >
+        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+              <div className="w-4 h-4 bg-white rounded-sm"></div>
+            </div>
+            <span className="font-semibold text-gray-900">Hospital System</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={toggleMobileMenu}
+            className="p-1"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <nav className="flex-1 p-2 overflow-y-auto">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              pathname === item.href ||
+              (item.href !== "/" && pathname.startsWith(item.href));
+
+            return (
+              <Link key={item.href} href={item.href} onClick={toggleMobileMenu}>
+                <div
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
+                      ? "bg-accent text-accent-foreground border-r-2 border-primary"
+                      : "text-muted-foreground hover:bg-accent"
+                  }`}
+                >
+                  <Icon className="w-5 h-5 flex-shrink-0" />
+                  <span className="font-medium">{item.label}</span>
+                </div>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="border-t p-4 mt-auto">
+          <div className="flex items-center space-x-3 mb-4">
+            <Avatar>
+              <AvatarImage src="/placeholder.svg?height=40&width=40" />
+              <AvatarFallback>
+                {doctorData.name
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-gray-900 truncate">
+                {doctorData.name}
+              </p>
+              <p className="text-xs text-gray-500 truncate">
+                {doctorData.specialty}
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full bg-transparent"
+            onClick={() => {
+              handleLogout();
+              toggleMobileMenu();
+            }}
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            Sair
+          </Button>
+        </div>
+      </div>
+
+      <div
+        className={`flex-1 flex flex-col transition-all duration-300 ${
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
+      >
+        <header className="bg-card border-b border px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4 flex-1"></div>
+
+            <div className="flex items-center gap-4">
+              <Button variant="ghost" size="sm" className="relative">
+                <Bell className="w-5 h-5" />
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                  1
+                </Badge>
+              </Button>
+            </div>
+          </div>
+        </header>
+
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+
+      <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Confirmar Saída</DialogTitle>
+            <DialogDescription>
+              Deseja realmente sair do sistema? Você precisará fazer login
+              novamente para acessar sua conta.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="flex gap-2">
+            <Button variant="outline" onClick={cancelLogout}>
+              Cancelar
+            </Button>
+            <Button variant="destructive" onClick={confirmLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Sair
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
 }
diff --git a/components/finance-layout.tsx b/components/finance-layout.tsx
index d1904b7..5f1b07b 100644
--- a/components/finance-layout.tsx
+++ b/components/finance-layout.tsx
@@ -6,14 +6,34 @@ import type React from "react";
 import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
-import { api } from '@/services/api.mjs';
+import { api } from "@/services/api.mjs";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Search,
+  Bell,
+  Calendar,
+  Clock,
+  User,
+  LogOut,
+  Menu,
+  X,
+  Home,
+  FileText,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 
 interface FinancierData {
   id: string;
@@ -30,7 +50,9 @@ interface PatientLayoutProps {
 }
 
 export default function FinancierLayout({ children }: PatientLayoutProps) {
-  const [financierData, setFinancierData] = useState<FinancierData | null>(null);
+  const [financierData, setFinancierData] = useState<FinancierData | null>(
+    null
+  );
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [showLogoutDialog, setShowLogoutDialog] = useState(false);
   const router = useRouter();
@@ -43,12 +65,13 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
 
     if (userInfoString && token) {
       const userInfo = JSON.parse(userInfoString);
-      
+
       setFinancierData({
         id: userInfo.id || "",
         name: userInfo.user_metadata?.full_name || "Financeiro",
         email: userInfo.email || "",
-        department: userInfo.user_metadata?.department || "Departamento Financeiro",
+        department:
+          userInfo.user_metadata?.department || "Departamento Financeiro",
         phone: userInfo.phone || "",
         cpf: "",
         permissions: {},
@@ -79,18 +102,18 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
   // --- ALTERAÇÃO 2: A função de logout agora é MUITO mais simples ---
   const confirmLogout = async () => {
     try {
-        // Chama a função centralizada para fazer o logout no servidor
-        await api.logout();
+      // Chama a função centralizada para fazer o logout no servidor
+      await api.logout();
     } catch (error) {
-        // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
+      // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
     } finally {
-        // A responsabilidade do componente é apenas limpar o estado local e redirecionar
-        localStorage.removeItem("user_info");
-        localStorage.removeItem("token");
-        Cookies.remove("access_token"); // Limpeza de segurança
-        
-        setShowLogoutDialog(false);
-        router.push("/"); // Redireciona para a home
+      // A responsabilidade do componente é apenas limpar o estado local e redirecionar
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token"); // Limpeza de segurança
+
+      setShowLogoutDialog(false);
+      router.push("/"); // Redireciona para a home
     }
   };
 
@@ -106,7 +129,11 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
   ];
 
   if (!financierData) {
-    return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        Carregando...
+      </div>
+    );
   }
 
   return (
@@ -202,9 +229,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
             }
             onClick={handleLogout}
           >
-            <LogOut
-              className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
-            />
+            <LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
             {!sidebarCollapsed && "Sair"}
           </Button>
         </div>
@@ -217,15 +242,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
       >
         <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4 flex-1 max-w-md">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                <Input
-                  placeholder="Buscar paciente"
-                  className="pl-10 bg-background border-border"
-                />
-              </div>
-            </div>
+            <div className="flex items-center gap-4 flex-1 max-w-md"></div>
 
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
@@ -263,4 +280,4 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
       </Dialog>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/manager-layout.tsx b/components/manager-layout.tsx
index 7c1e3fe..40cf0df 100644
--- a/components/manager-layout.tsx
+++ b/components/manager-layout.tsx
@@ -6,14 +6,30 @@ import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
 import Cookies from "js-cookie"; // Mantido apenas para a limpeza de segurança no logout
-import { api } from '@/services/api.mjs';
+import { api } from "@/services/api.mjs";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Search, Bell, Calendar, User, LogOut, ChevronLeft, ChevronRight, Home } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Search,
+  Bell,
+  Calendar,
+  User,
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+  Home,
+} from "lucide-react";
 
 interface ManagerData {
   id: string;
@@ -43,7 +59,7 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
 
     if (userInfoString && token) {
       const userInfo = JSON.parse(userInfoString);
-      
+
       setManagerData({
         id: userInfo.id || "",
         name: userInfo.user_metadata?.full_name || "Gestor(a)",
@@ -77,18 +93,18 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
   // --- ALTERAÇÃO 2: A função de logout agora é MUITO mais simples ---
   const confirmLogout = async () => {
     try {
-        // Chama a função centralizada para fazer o logout no servidor
-        await api.logout();
+      // Chama a função centralizada para fazer o logout no servidor
+      await api.logout();
     } catch (error) {
-        // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
+      // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
     } finally {
-        // A responsabilidade do componente é apenas limpar o estado local e redirecionar
-        localStorage.removeItem("user_info");
-        localStorage.removeItem("token");
-        Cookies.remove("access_token"); // Limpeza de segurança
-        
-        setShowLogoutDialog(false);
-        router.push("/"); // Redireciona para a home
+      // A responsabilidade do componente é apenas limpar o estado local e redirecionar
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token"); // Limpeza de segurança
+
+      setShowLogoutDialog(false);
+      router.push("/"); // Redireciona para a home
     }
   };
 
@@ -103,13 +119,19 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
   ];
 
   if (!managerData) {
-    return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        Carregando...
+      </div>
+    );
   }
 
   return (
     <div className="min-h-screen bg-gray-50 flex">
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${sidebarCollapsed ? "w-16" : "w-64"}`}
+        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${
+          sidebarCollapsed ? "w-16" : "w-64"
+        }`}
       >
         <div className="p-4 border-b border-gray-200 flex items-center justify-between">
           {!sidebarCollapsed && (
@@ -117,9 +139,7 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
               <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                 <div className="w-4 h-4 bg-white rounded-sm"></div>
               </div>
-              <span className="font-semibold text-gray-900">
-                MediConnect
-              </span>
+              <span className="font-semibold text-gray-900">MediConnect</span>
             </div>
           )}
           <Button
@@ -128,7 +148,11 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
             onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
             className="p-1"
           >
-            {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+            {sidebarCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronLeft className="w-4 h-4" />
+            )}
           </Button>
         </div>
 
@@ -139,10 +163,16 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
             return (
               <Link key={item.label} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
+                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                      : "text-gray-600 hover:bg-gray-50"
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
-                  {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
+                  {!sidebarCollapsed && (
+                    <span className="font-medium">{item.label}</span>
+                  )}
                 </div>
               </Link>
             );
@@ -153,19 +183,32 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
           <div className="flex items-center space-x-3 mb-4">
             <Avatar>
               <AvatarImage src="/placeholder.svg?height=40&width=40" />
-              <AvatarFallback>{managerData.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback>
+              <AvatarFallback>
+                {managerData.name
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")}
+              </AvatarFallback>
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">{managerData.name}</p>
-                <p className="text-xs text-gray-500 truncate">{managerData.department}</p>
+                <p className="text-sm font-medium text-gray-900 truncate">
+                  {managerData.name}
+                </p>
+                <p className="text-xs text-gray-500 truncate">
+                  {managerData.department}
+                </p>
               </div>
             )}
           </div>
           <Button
             variant="outline"
             size="sm"
-            className={sidebarCollapsed ? "w-full bg-transparent flex justify-center items-center p-2" : "w-full bg-transparent"}
+            className={
+              sidebarCollapsed
+                ? "w-full bg-transparent flex justify-center items-center p-2"
+                : "w-full bg-transparent"
+            }
             onClick={handleLogout}
           >
             <LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
@@ -174,18 +217,19 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
         </div>
       </div>
 
-      <div className={`flex-1 flex flex-col transition-all duration-300 w-full ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
+      <div
+        className={`flex-1 flex flex-col transition-all duration-300 w-full ${
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
+      >
         <header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-4 flex-1 max-w-md">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-              <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
-            </div>
-          </div>
+          <div className="flex items-center gap-4 flex-1 max-w-md"></div>
           <div className="flex items-center gap-4 ml-auto">
             <Button variant="ghost" size="sm" className="relative">
               <Bell className="w-5 h-5" />
-              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
+              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                1
+              </Badge>
             </Button>
           </div>
         </header>
@@ -196,14 +240,22 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Confirmar Saída</DialogTitle>
-            <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
+            <DialogDescription>
+              Deseja realmente sair do sistema? Você precisará fazer login
+              novamente para acessar sua conta.
+            </DialogDescription>
           </DialogHeader>
           <DialogFooter className="flex gap-2">
-            <Button variant="outline" onClick={cancelLogout}>Cancelar</Button>
-            <Button variant="destructive" onClick={confirmLogout}><LogOut className="mr-2 h-4 w-4" />Sair</Button>
+            <Button variant="outline" onClick={cancelLogout}>
+              Cancelar
+            </Button>
+            <Button variant="destructive" onClick={confirmLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Sair
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/patient-layout.tsx b/components/patient-layout.tsx
index 7ac9415..a7cc9fb 100644
--- a/components/patient-layout.tsx
+++ b/components/patient-layout.tsx
@@ -1,52 +1,70 @@
-"use client"
+"use client";
 
 import Cookies from "js-cookie";
-import type React from "react"
-import { useState, useEffect } from "react"
-import Link from "next/link"
-import { useRouter, usePathname } from "next/navigation"
+import type React from "react";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter, usePathname } from "next/navigation";
 import { api } from "@/services/api.mjs"; // Importando nosso cliente de API
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Search, Bell, User, LogOut, FileText, Clock, Calendar, Home, ChevronLeft, ChevronRight } from "lucide-react"
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Search,
+  Bell,
+  User,
+  LogOut,
+  FileText,
+  Clock,
+  Calendar,
+  Home,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 interface PatientData {
-  name: string
-  email: string
-  phone: string
-  cpf: string
-  birthDate: string
-  address: string
+  name: string;
+  email: string;
+  phone: string;
+  cpf: string;
+  birthDate: string;
+  address: string;
 }
 
 interface PatientLayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 // --- ALTERAÇÃO 1: Renomeando o componente para maior clareza ---
 export default function PatientLayout({ children }: PatientLayoutProps) {
-  const [patientData, setPatientData] = useState<PatientData | null>(null)
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const [showLogoutDialog, setShowLogoutDialog] = useState(false)
-  const router = useRouter()
-  const pathname = usePathname()
+  const [patientData, setPatientData] = useState<PatientData | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 1024) {
-        setSidebarCollapsed(true)
+        setSidebarCollapsed(true);
       } else {
-        setSidebarCollapsed(false)
+        setSidebarCollapsed(false);
       }
-    }
-    handleResize()
-    window.addEventListener("resize", handleResize)
-    return () => window.removeEventListener("resize", handleResize)
-  }, [])
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   useEffect(() => {
     const userInfoString = localStorage.getItem("user_info");
@@ -55,12 +73,12 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
 
     if (userInfoString && token) {
       const userInfo = JSON.parse(userInfoString);
-      
+
       setPatientData({
         name: userInfo.user_metadata?.full_name || "Paciente",
         email: userInfo.email || "",
         phone: userInfo.phone || "",
-        cpf: "", 
+        cpf: "",
         birthDate: "",
         address: "",
       });
@@ -69,39 +87,47 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
       router.push("/login");
     }
   }, [router]);
-  
-  const handleLogout = () => setShowLogoutDialog(true)
+
+  const handleLogout = () => setShowLogoutDialog(true);
 
   // --- ALTERAÇÃO 4: Função de logout completa e padronizada ---
   const confirmLogout = async () => {
     try {
-        // Chama a função centralizada para fazer o logout no servidor
-        await api.logout();
+      // Chama a função centralizada para fazer o logout no servidor
+      await api.logout();
     } catch (error) {
-        console.error("Erro ao tentar fazer logout no servidor:", error);
+      console.error("Erro ao tentar fazer logout no servidor:", error);
     } finally {
-        // Limpeza completa e consistente do estado local
-        localStorage.removeItem("user_info");
-        localStorage.removeItem("token");
-        Cookies.remove("access_token"); // Limpeza de segurança
-        
-        setShowLogoutDialog(false);
-        router.push("/"); // Redireciona para a página inicial
+      // Limpeza completa e consistente do estado local
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token"); // Limpeza de segurança
+
+      setShowLogoutDialog(false);
+      router.push("/"); // Redireciona para a página inicial
     }
   };
 
-  const cancelLogout = () => setShowLogoutDialog(false)
+  const cancelLogout = () => setShowLogoutDialog(false);
 
   const menuItems = [
     { href: "/patient/dashboard", icon: Home, label: "Dashboard" },
-    { href: "/patient/appointments", icon: Calendar, label: "Minhas Consultas" },
+    {
+      href: "/patient/appointments",
+      icon: Calendar,
+      label: "Minhas Consultas",
+    },
     { href: "/patient/schedule", icon: Clock, label: "Agendar Consulta" },
     { href: "/patient/reports", icon: FileText, label: "Meus Laudos" },
     { href: "/patient/profile", icon: User, label: "Meus Dados" },
-  ]
+  ];
 
   if (!patientData) {
-    return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        Carregando...
+      </div>
+    );
   }
 
   return (
@@ -120,7 +146,9 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
                 <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                   <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-foreground">MediConnect</span>
+                <span className="font-semibold text-foreground">
+                  MediConnect
+                </span>
               </div>
             )}
             <Button
@@ -141,10 +169,10 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
         {/* Menu */}
         <nav className="flex-1 p-2 overflow-y-auto">
           {menuItems.map((item) => {
-            const Icon = item.icon
+            const Icon = item.icon;
             const isActive =
               pathname === item.href ||
-              (item.href !== "/" && pathname.startsWith(item.href))
+              (item.href !== "/" && pathname.startsWith(item.href));
 
             return (
               <Link key={item.href} href={item.href}>
@@ -161,7 +189,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
                   )}
                 </div>
               </Link>
-            )
+            );
           })}
         </nav>
 
@@ -199,9 +227,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
             }
             onClick={handleLogout}
           >
-            <LogOut
-              className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
-            />{" "}
+            <LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />{" "}
             {/* Remove margem quando colapsado */}
             {!sidebarCollapsed && "Sair"}{" "}
             {/* Mostra o texto apenas quando não está colapsado */}
@@ -218,15 +244,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
         {/* Header */}
         <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4 flex-1 max-w-md">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                <Input
-                  placeholder="Buscar paciente"
-                  className="pl-10 bg-background border-border"
-                />
-              </div>
-            </div>
+            <div className="flex items-center gap-4 flex-1 max-w-md"></div>
 
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
@@ -265,5 +283,5 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
         </DialogContent>
       </Dialog>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/components/secretary-layout.tsx b/components/secretary-layout.tsx
index 5bd51fd..edfc4b4 100644
--- a/components/secretary-layout.tsx
+++ b/components/secretary-layout.tsx
@@ -1,41 +1,60 @@
 // Caminho: app/(secretary)/layout.tsx (ou o caminho do seu arquivo)
-"use client"
+"use client";
 
-import type React from "react"
-import { useState, useEffect } from "react"
-import { useRouter, usePathname } from "next/navigation"
-import Link from "next/link"
+import type React from "react";
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
 import Cookies from "js-cookie";
-import { api } from '@/services/api.mjs'; // Importando nosso cliente de API central
+import { api } from "@/services/api.mjs"; // Importando nosso cliente de API central
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Search, Bell, Calendar, Clock, User, LogOut, Home, ChevronLeft, ChevronRight } from "lucide-react"
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Search,
+  Bell,
+  Calendar,
+  Clock,
+  User,
+  LogOut,
+  Home,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 
 interface SecretaryData {
-  id: string
-  name: string
-  email: string
-  phone: string
-  cpf: string
-  employeeId: string
-  department: string
-  permissions: object
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  cpf: string;
+  employeeId: string;
+  department: string;
+  permissions: object;
 }
 
 interface SecretaryLayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
-  const [secretaryData, setSecretaryData] = useState<SecretaryData | null>(null);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const [showLogoutDialog, setShowLogoutDialog] = useState(false)
-  const router = useRouter()
-  const pathname = usePathname()
+  const [secretaryData, setSecretaryData] = useState<SecretaryData | null>(
+    null
+  );
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     const userInfoString = localStorage.getItem("user_info");
@@ -44,7 +63,7 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
 
     if (userInfoString && token) {
       const userInfo = JSON.parse(userInfoString);
-      
+
       setSecretaryData({
         id: userInfo.id || "",
         name: userInfo.user_metadata?.full_name || "Secretária",
@@ -64,50 +83,53 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 1024) {
-        setSidebarCollapsed(true)
+        setSidebarCollapsed(true);
       } else {
-        setSidebarCollapsed(false)
+        setSidebarCollapsed(false);
       }
-    }
-    handleResize()
-    window.addEventListener("resize", handleResize)
-    return () => window.removeEventListener("resize", handleResize)
-  }, [])
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
-  const handleLogout = () => setShowLogoutDialog(true)
+  const handleLogout = () => setShowLogoutDialog(true);
 
   // --- ALTERAÇÃO 3: Função de logout completa e padronizada ---
   const confirmLogout = async () => {
     try {
-        // Chama a função centralizada para fazer o logout no servidor
-        await api.logout();
+      // Chama a função centralizada para fazer o logout no servidor
+      await api.logout();
     } catch (error) {
-        console.error("Erro ao tentar fazer logout no servidor:", error);
+      console.error("Erro ao tentar fazer logout no servidor:", error);
     } finally {
-        // Limpeza completa e consistente do estado local
-        localStorage.removeItem("user_info");
-        localStorage.removeItem("token");
-        Cookies.remove("access_token"); // Limpeza de segurança
-        
-        setShowLogoutDialog(false);
-        router.push("/"); // Redireciona para a página inicial
+      // Limpeza completa e consistente do estado local
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token"); // Limpeza de segurança
+
+      setShowLogoutDialog(false);
+      router.push("/"); // Redireciona para a página inicial
     }
   };
 
-  const cancelLogout = () => setShowLogoutDialog(false)
+  const cancelLogout = () => setShowLogoutDialog(false);
 
   const menuItems = [
     { href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
     { href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
     { href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
     { href: "/secretary/pacientes", icon: User, label: "Pacientes" },
-  ]
+  ];
 
   if (!secretaryData) {
-    return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        Carregando...
+      </div>
+    );
   }
 
-
   return (
     <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
@@ -123,7 +145,9 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
                 <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                   <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-foreground">MediConnect</span>
+                <span className="font-semibold text-foreground">
+                  MediConnect
+                </span>
               </div>
             )}
             <Button
@@ -143,23 +167,27 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
 
         <nav className="flex-1 p-2 overflow-y-auto">
           {menuItems.map((item) => {
-            const Icon = item.icon
+            const Icon = item.icon;
             const isActive =
-              pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
+              pathname === item.href ||
+              (item.href !== "/" && pathname.startsWith(item.href));
 
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
-                    ? "bg-accent text-accent-foreground"
-                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                    }`}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
-                  {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
+                  {!sidebarCollapsed && (
+                    <span className="font-medium">{item.label}</span>
+                  )}
                 </div>
               </Link>
-            )
+            );
           })}
         </nav>
 
@@ -179,7 +207,9 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
                 <p className="text-sm font-medium text-foreground truncate">
                   {secretaryData.name}
                 </p>
-                <p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
+                <p className="text-xs text-muted-foreground truncate">
+                  {secretaryData.email}
+                </p>
               </div>
             )}
           </div>
@@ -193,9 +223,7 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
             }
             onClick={handleLogout}
           >
-            <LogOut
-              className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
-            />
+            <LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
             {!sidebarCollapsed && "Sair"}
           </Button>
         </div>
@@ -203,20 +231,13 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
 
       {/* Main Content */}
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
-          }`}
+        className={`flex-1 flex flex-col transition-all duration-300 ${
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
       >
         <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4 flex-1 max-w-md">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                <Input
-                  placeholder="Buscar paciente"
-                  className="pl-10 bg-background border-border"
-                />
-              </div>
-            </div>
+            <div className="flex items-center gap-4 flex-1 max-w-md"></div>
 
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
@@ -238,7 +259,8 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
           <DialogHeader>
             <DialogTitle>Confirmar Saída</DialogTitle>
             <DialogDescription>
-              Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.
+              Deseja realmente sair do sistema? Você precisará fazer login
+              novamente para acessar sua conta.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="flex gap-2">
@@ -253,5 +275,5 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
         </DialogContent>
       </Dialog>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}

From 63fc99c15156d65d92bd167f2fec0613a838d983 Mon Sep 17 00:00:00 2001
From: m1guelmcf <miguelmouracf@gmail.com>
Date: Tue, 4 Nov 2025 09:12:45 -0300
Subject: [PATCH 7/9] ajuste do filtro de paciente

---
 app/secretary/pacientes/page.tsx | 804 +++++++++++++++++--------------
 1 file changed, 439 insertions(+), 365 deletions(-)

diff --git a/app/secretary/pacientes/page.tsx b/app/secretary/pacientes/page.tsx
index 3715261..ca02124 100644
--- a/app/secretary/pacientes/page.tsx
+++ b/app/secretary/pacientes/page.tsx
@@ -3,391 +3,465 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import SecretaryLayout from "@/components/secretary-layout";
 import { patientsService } from "@/services/patientsApi.mjs";
 
 export default function PacientesPage() {
-    const [searchTerm, setSearchTerm] = useState("");
-    const [convenioFilter, setConvenioFilter] = useState("all");
-    const [vipFilter, setVipFilter] = useState("all");
-    const [patients, setPatients] = useState<any[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [page, setPage] = useState(1);
-    const [hasNext, setHasNext] = useState(true);
-    const [isFetching, setIsFetching] = useState(false);
-    const observerRef = useRef<HTMLDivElement | null>(null);
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
-    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-    const [patientDetails, setPatientDetails] = useState<any | null>(null);
-    const openDetailsDialog = async (patientId: string) => {
-        setDetailsDialogOpen(true);
-        setPatientDetails(null);
-        try {
-            const res = await patientsService.getById(patientId);
-            setPatientDetails(res[0]);
-        } catch (e: any) {
-            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
-        }
-    };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [convenioFilter, setConvenioFilter] = useState("all");
+  const [vipFilter, setVipFilter] = useState("all");
+  const [patients, setPatients] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [hasNext, setHasNext] = useState(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [patientDetails, setPatientDetails] = useState<any | null>(null);
+  const openDetailsDialog = async (patientId: string) => {
+    setDetailsDialogOpen(true);
+    setPatientDetails(null);
+    try {
+      const res = await patientsService.getById(patientId);
+      setPatientDetails(res[0]);
+    } catch (e: any) {
+      setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+    }
+  };
 
-    const fetchPacientes = useCallback(
-        async (pageToFetch: number) => {
-            if (isFetching || !hasNext) return;
-            setIsFetching(true);
-            setError(null);
-            try {
-                const res = await patientsService.list();
-                const mapped = res.map((p: any) => ({
-                    id: String(p.id ?? ""),
-                    nome: p.full_name ?? "",
-                    telefone: p.phone_mobile ?? p.phone1 ?? "",
-                    cidade: p.city ?? "",
-                    estado: p.state ?? "",
-                    ultimoAtendimento: p.last_visit_at ?? "",
-                    proximoAtendimento: p.next_appointment_at ?? "",
-                    vip: Boolean(p.vip ?? false),
-                    convenio: p.convenio ?? "", // se não existir, fica vazio
-                    status: p.status ?? undefined,
-                }));
+  const fetchPacientes = useCallback(
+    async (pageToFetch: number) => {
+      if (isFetching || !hasNext) return;
+      setIsFetching(true);
+      setError(null);
+      try {
+        const res = await patientsService.list();
+        const mapped = res.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.full_name ?? "",
+          telefone: p.phone_mobile ?? p.phone1 ?? "",
+          cidade: p.city ?? "",
+          estado: p.state ?? "",
+          ultimoAtendimento: p.last_visit_at ?? "",
+          proximoAtendimento: p.next_appointment_at ?? "",
+          vip: Boolean(p.vip ?? false),
+          convenio: p.convenio ?? "", // se não existir, fica vazio
+          status: p.status ?? undefined,
+        }));
 
-                setPatients((prev) => {
-                    const all = [...prev, ...mapped];
-                    const unique = Array.from(new Map(all.map((p) => [p.id, p])).values());
-                    return unique;
-                });
-
-                if (!mapped.id) setHasNext(false); // parar carregamento
-                else setPage((prev) => prev + 1);
-            } catch (e: any) {
-                setError(e?.message || "Erro ao buscar pacientes");
-            } finally {
-                setIsFetching(false);
-            }
-        },
-        [isFetching, hasNext]
-    );
-
-    useEffect(() => {
-        fetchPacientes(page);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (!observerRef.current || !hasNext) return;
-        const observer = new window.IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting && !isFetching && hasNext) {
-                fetchPacientes(page);
-            }
+        setPatients((prev) => {
+          const all = [...prev, ...mapped];
+          const unique = Array.from(
+            new Map(all.map((p) => [p.id, p])).values()
+          );
+          return unique;
         });
-        observer.observe(observerRef.current);
-        return () => {
-            if (observerRef.current) observer.unobserve(observerRef.current);
-        };
-    }, [fetchPacientes, page, hasNext, isFetching]);
 
-    const handleDeletePatient = async (patientId: string) => {
-        // Remove from current list (client-side deletion)
-        try {
-            const res = await patientsService.delete(patientId);
+        if (!mapped.id) setHasNext(false); // parar carregamento
+        else setPage((prev) => prev + 1);
+      } catch (e: any) {
+        setError(e?.message || "Erro ao buscar pacientes");
+      } finally {
+        setIsFetching(false);
+      }
+    },
+    [isFetching, hasNext]
+  );
 
-            if (res) {
-                alert(`${res.error} ${res.message}`);
-            }
+  useEffect(() => {
+    fetchPacientes(page);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-            setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
-        } catch (e: any) {
-            setError(e?.message || "Erro ao deletar paciente");
-        }
-        setDeleteDialogOpen(false);
-        setPatientToDelete(null);
-    };
-
-    const openDeleteDialog = (patientId: string) => {
-        setPatientToDelete(patientId);
-        setDeleteDialogOpen(true);
-    };
-
-    const filteredPatients = patients.filter((patient) => {
-        const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
-        const matchesConvenio = convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
-        const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);
-
-        return matchesSearch && matchesConvenio && matchesVip;
+  useEffect(() => {
+    if (!observerRef.current || !hasNext) return;
+    const observer = new window.IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && !isFetching && hasNext) {
+        fetchPacientes(page);
+      }
     });
+    observer.observe(observerRef.current);
+    return () => {
+      if (observerRef.current) observer.unobserve(observerRef.current);
+    };
+  }, [fetchPacientes, page, hasNext, isFetching]);
 
-    return (
-        <SecretaryLayout>
-            <div className="space-y-6">
-                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                    <div>
-                        <h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
-                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
-                    </div>
-                    <div className="flex gap-2">
-                        <Link href="/secretary/pacientes/novo">
-                            <Button className="w-full md:w-auto">
-                                <Plus className="w-4 h-4 mr-2" />
-                                Adicionar
-                            </Button>
-                        </Link>
-                    </div>
-                </div>
+  const handleDeletePatient = async (patientId: string) => {
+    // Remove from current list (client-side deletion)
+    try {
+      const res = await patientsService.delete(patientId);
 
-                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
-                    {/* Convênio */}
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Convênio</span>
-                        <Select value={convenioFilter} onValueChange={setConvenioFilter}>
-                            <SelectTrigger className="w-full md:w-40">
-                                <SelectValue placeholder="Selecione o Convênio" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="Particular">Particular</SelectItem>
-                                <SelectItem value="SUS">SUS</SelectItem>
-                                <SelectItem value="Unimed">Unimed</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+      if (res) {
+        alert(`${res.error} ${res.message}`);
+      }
 
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">VIP</span>
-                        <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full md:w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
-                        <Select>
-                            <SelectTrigger className="w-full md:w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="today">Hoje</SelectItem>
-                                <SelectItem value="week">Esta semana</SelectItem>
-                                <SelectItem value="month">Este mês</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+      setPatients((prev) =>
+        prev.filter((p) => String(p.id) !== String(patientId))
+      );
+    } catch (e: any) {
+      setError(e?.message || "Erro ao deletar paciente");
+    }
+    setDeleteDialogOpen(false);
+    setPatientToDelete(null);
+  };
 
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-foreground">VIP</span>
-                        <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+  const openDeleteDialog = (patientId: string) => {
+    setPatientToDelete(patientId);
+    setDeleteDialogOpen(true);
+  };
 
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
-                        <Select>
-                            <SelectTrigger className="w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="today">Hoje</SelectItem>
-                                <SelectItem value="week">Esta semana</SelectItem>
-                                <SelectItem value="month">Este mês</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+  const filteredPatients = patients.filter((patient) => {
+    const matchesSearch =
+      patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      patient.telefone?.includes(searchTerm);
+    const matchesConvenio =
+      convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
+    const matchesVip =
+      vipFilter === "all" ||
+      (vipFilter === "vip" && patient.vip) ||
+      (vipFilter === "regular" && !patient.vip);
 
-                    <Button variant="outline" className="ml-auto w-full md:w-auto">
-                        <Filter className="w-4 h-4 mr-2" />
-                        Filtro avançado
-                    </Button>
-                </div>
+    return matchesSearch && matchesConvenio && matchesVip;
+  });
 
-                <div className="bg-white rounded-lg border border-gray-200">
-                    <div className="overflow-x-auto">
-                        {error ? (
-                            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
-                        ) : (
-                            <table className="w-full min-w-[600px]">
-                                <thead className="bg-gray-50 border-b border-gray-200">
-                                    <tr>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {filteredPatients.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={7} className="p-8 text-center text-gray-500">
-                                                {patients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
-                                            </td>
-                                        </tr>
-                                    ) : (
-                                        filteredPatients.map((patient) => (
-                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
-                                                <td className="p-4">
-                                                    <div className="flex items-center gap-3">
-                                                        <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
-                                                            <span className="text-gray-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
-                                                        </div>
-                                                        <span className="font-medium text-gray-900">{patient.nome}</span>
-                                                    </div>
-                                                </td>
-                                                <td className="p-4 text-gray-600">{patient.telefone}</td>
-                                                <td className="p-4 text-gray-600">{patient.cidade}</td>
-                                                <td className="p-4 text-gray-600">{patient.estado}</td>
-                                                <td className="p-4 text-gray-600">{patient.ultimoAtendimento}</td>
-                                                <td className="p-4 text-gray-600">{patient.proximoAtendimento}</td>
-                                                <td className="p-4">
-                                                    <DropdownMenu>
-                                                        <DropdownMenuTrigger asChild>
-                                                            <div className="text-blue-600">Ações</div>
-                                                        </DropdownMenuTrigger>
-                                                        <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
-                                                                <Eye className="w-4 h-4 mr-2" />
-                                                                Ver detalhes
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem asChild>
-                                                                <Link href={`/secretary/pacientes/${patient.id}/editar`}>
-                                                                    <Edit className="w-4 h-4 mr-2" />
-                                                                    Editar
-                                                                </Link>
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem>
-                                                                <Calendar className="w-4 h-4 mr-2" />
-                                                                Marcar consulta
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
-                                                                <Trash2 className="w-4 h-4 mr-2" />
-                                                                Excluir
-                                                            </DropdownMenuItem>
-                                                        </DropdownMenuContent>
-                                                    </DropdownMenu>
-                                                </td>
-                                            </tr>
-                                        ))
-                                    )}
-                                </tbody>
-                            </table>
-                        )}
-                        <div ref={observerRef} style={{ height: 1 }} />
-                        {isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>}
-                    </div>
-                </div>
+  return (
+    <SecretaryLayout>
+      <div className="space-y-6">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h1 className="text-xl md:text-2xl font-bold text-foreground">
+              Pacientes
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Gerencie as informações de seus pacientes
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Link href="/secretary/pacientes/novo">
+              <Button className="w-full md:w-auto">
+                <Plus className="w-4 h-4 mr-2" />
+                Adicionar
+              </Button>
+            </Link>
+          </div>
+        </div>
 
-                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
+        <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
+          {/* Convênio */}
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">
+              Convênio
+            </span>
+            <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+              <SelectTrigger className="w-full md:w-40">
+                <SelectValue placeholder="Selecione o Convênio" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="Particular">Particular</SelectItem>
+                <SelectItem value="SUS">SUS</SelectItem>
+                <SelectItem value="Unimed">Unimed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">VIP</span>
+            <Select value={vipFilter} onValueChange={setVipFilter}>
+              <SelectTrigger className="w-full md:w-32">
+                <SelectValue placeholder="Selecione" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="vip">VIP</SelectItem>
+                <SelectItem value="regular">Regular</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">
+              Aniversariantes
+            </span>
+            <Select>
+              <SelectTrigger className="w-full md:w-32">
+                <SelectValue placeholder="Selecione" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="today">Hoje</SelectItem>
+                <SelectItem value="week">Esta semana</SelectItem>
+                <SelectItem value="month">Este mês</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button variant="outline" className="ml-auto w-full md:w-auto">
+            <Filter className="w-4 h-4 mr-2" />
+            Filtro avançado
+          </Button>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200">
+          <div className="overflow-x-auto">
+            {error ? (
+              <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
+            ) : (
+              <table className="w-full min-w-[600px]">
+                <thead className="bg-gray-50 border-b border-gray-200">
+                  <tr>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Nome
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Telefone
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Cidade
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Estado
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Último atendimento
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Próximo atendimento
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Ações
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredPatients.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="p-8 text-center text-gray-500">
+                        {patients.length === 0
+                          ? "Nenhum paciente cadastrado"
+                          : "Nenhum paciente encontrado com os filtros aplicados"}
+                      </td>
+                    </tr>
+                  ) : (
+                    filteredPatients.map((patient) => (
+                      <tr
+                        key={patient.id}
+                        className="border-b border-gray-100 hover:bg-gray-50"
+                      >
+                        <td className="p-4">
+                          <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
+                              <span className="text-gray-600 font-medium text-sm">
+                                {patient.nome?.charAt(0) || "?"}
+                              </span>
+                            </div>
+                            <span className="font-medium text-gray-900">
+                              {patient.nome}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="p-4 text-gray-600">
+                          {patient.telefone}
+                        </td>
+                        <td className="p-4 text-gray-600">{patient.cidade}</td>
+                        <td className="p-4 text-gray-600">{patient.estado}</td>
+                        <td className="p-4 text-gray-600">
+                          {patient.ultimoAtendimento}
+                        </td>
+                        <td className="p-4 text-gray-600">
+                          {patient.proximoAtendimento}
+                        </td>
+                        <td className="p-4">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <div className="text-blue-600">Ações</div>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  openDetailsDialog(String(patient.id))
+                                }
+                              >
+                                <Eye className="w-4 h-4 mr-2" />
+                                Ver detalhes
+                              </DropdownMenuItem>
+                              <DropdownMenuItem asChild>
+                                <Link
+                                  href={`/secretary/pacientes/${patient.id}/editar`}
+                                >
+                                  <Edit className="w-4 h-4 mr-2" />
+                                  Editar
+                                </Link>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                <Calendar className="w-4 h-4 mr-2" />
+                                Marcar consulta
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="text-red-600"
+                                onClick={() =>
+                                  openDeleteDialog(String(patient.id))
+                                }
+                              >
+                                <Trash2 className="w-4 h-4 mr-2" />
                                 Excluir
-                            </AlertDialogAction>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            )}
+            <div ref={observerRef} style={{ height: 1 }} />
+            {isFetching && (
+              <div className="p-4 text-center text-gray-500">
+                Carregando mais pacientes...
+              </div>
+            )}
+          </div>
+        </div>
 
-                {/* Modal de detalhes do paciente */}
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
-                            <AlertDialogDescription>
-                                {patientDetails === null ? (
-                                    <div className="text-gray-500">Carregando...</div>
-                                ) : patientDetails?.error ? (
-                                    <div className="text-red-600">{patientDetails.error}</div>
-                                ) : (
-                                    <div className="space-y-2 text-left">
-                                        <p>
-                                            <strong>Nome:</strong> {patientDetails.full_name}
-                                        </p>
-                                        <p>
-                                            <strong>CPF:</strong> {patientDetails.cpf}
-                                        </p>
-                                        <p>
-                                            <strong>Email:</strong> {patientDetails.email}
-                                        </p>
-                                        <p>
-                                            <strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Nome social:</strong> {patientDetails.social_name ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
-                                            {patientDetails.weight_kg ? "kg" : ""}
-                                        </p>
-                                        <p>
-                                            <strong>Altura:</strong> {patientDetails.height_m ?? "-"}
-                                            {patientDetails.height_m ? "m" : ""}
-                                        </p>
-                                        <p>
-                                            <strong>IMC:</strong> {patientDetails.bmi ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Endereço:</strong> {patientDetails.street ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Cidade:</strong> {patientDetails.city ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Estado:</strong> {patientDetails.state ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>CEP:</strong> {patientDetails.cep ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Criado em:</strong> {patientDetails.created_at ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Id:</strong> {patientDetails.id ?? "-"}
-                                        </p>
-                                    </div>
-                                )}
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Fechar</AlertDialogCancel>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
-            </div>
-        </SecretaryLayout>
-    );
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+              <AlertDialogDescription>
+                Tem certeza que deseja excluir este paciente? Esta ação não pode
+                ser desfeita.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancelar</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() =>
+                  patientToDelete && handleDeletePatient(patientToDelete)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
+                Excluir
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* Modal de detalhes do paciente */}
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
+              <AlertDialogDescription>
+                {patientDetails === null ? (
+                  <div className="text-gray-500">Carregando...</div>
+                ) : patientDetails?.error ? (
+                  <div className="text-red-600">{patientDetails.error}</div>
+                ) : (
+                  <div className="space-y-2 text-left">
+                    <p>
+                      <strong>Nome:</strong> {patientDetails.full_name}
+                    </p>
+                    <p>
+                      <strong>CPF:</strong> {patientDetails.cpf}
+                    </p>
+                    <p>
+                      <strong>Email:</strong> {patientDetails.email}
+                    </p>
+                    <p>
+                      <strong>Telefone:</strong>{" "}
+                      {patientDetails.phone_mobile ??
+                        patientDetails.phone1 ??
+                        patientDetails.phone2 ??
+                        "-"}
+                    </p>
+                    <p>
+                      <strong>Nome social:</strong>{" "}
+                      {patientDetails.social_name ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Tipo sanguíneo:</strong>{" "}
+                      {patientDetails.blood_type ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
+                      {patientDetails.weight_kg ? "kg" : ""}
+                    </p>
+                    <p>
+                      <strong>Altura:</strong> {patientDetails.height_m ?? "-"}
+                      {patientDetails.height_m ? "m" : ""}
+                    </p>
+                    <p>
+                      <strong>IMC:</strong> {patientDetails.bmi ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Endereço:</strong> {patientDetails.street ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Bairro:</strong>{" "}
+                      {patientDetails.neighborhood ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Cidade:</strong> {patientDetails.city ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Estado:</strong> {patientDetails.state ?? "-"}
+                    </p>
+                    <p>
+                      <strong>CEP:</strong> {patientDetails.cep ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Criado em:</strong>{" "}
+                      {patientDetails.created_at ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Atualizado em:</strong>{" "}
+                      {patientDetails.updated_at ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Id:</strong> {patientDetails.id ?? "-"}
+                    </p>
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </SecretaryLayout>
+  );
 }

From 66212930e8c5f1fa70ac075eb4793da071a13004 Mon Sep 17 00:00:00 2001
From: StsDanilo <dsb.danilo07@gmail.com>
Date: Tue, 4 Nov 2025 14:26:45 -0300
Subject: [PATCH 8/9] =?UTF-8?q?Adicionado=20gest=C3=A3o=20de=20pacientes?=
 =?UTF-8?q?=20para=20o=20gestor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/manager/pacientes/[id]/editar/page.tsx | 682 +++++++++++++++++++++
 app/manager/pacientes/loading.tsx          |   3 +
 app/manager/pacientes/novo/page.tsx        | 676 ++++++++++++++++++++
 app/manager/pacientes/page.tsx             | 393 ++++++++++++
 components/manager-layout.tsx              |   1 +
 5 files changed, 1755 insertions(+)
 create mode 100644 app/manager/pacientes/[id]/editar/page.tsx
 create mode 100644 app/manager/pacientes/loading.tsx
 create mode 100644 app/manager/pacientes/novo/page.tsx
 create mode 100644 app/manager/pacientes/page.tsx

diff --git a/app/manager/pacientes/[id]/editar/page.tsx b/app/manager/pacientes/[id]/editar/page.tsx
new file mode 100644
index 0000000..254be97
--- /dev/null
+++ b/app/manager/pacientes/[id]/editar/page.tsx
@@ -0,0 +1,682 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowLeft, Save, Trash2, Paperclip, Upload } from "lucide-react";
+import Link from "next/link";
+import { useToast } from "@/hooks/use-toast";
+import SecretaryLayout from "@/components/secretary-layout";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { json } from "stream/consumers";
+
+export default function EditarPacientePage() {
+    const router = useRouter();
+    const params = useParams();
+    const patientId = params.id;
+    const { toast } = useToast();
+
+    // Photo upload state
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
+    const [photoUrl, setPhotoUrl] = useState<string | null>(null);
+    // Anexos state
+    const [anexos, setAnexos] = useState<any[]>([]);
+    const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
+    const anexoInputRef = useRef<HTMLInputElement | null>(null);
+
+    type FormData = {
+        nome: string; // full_name
+        cpf: string;
+        dataNascimento: string; // birth_date
+        sexo: string; // sex
+        id?: string;
+        nomeSocial?: string; // social_name
+        rg?: string;
+        documentType?: string; // document_type
+        documentNumber?: string; // document_number
+        ethnicity?: string;
+        race?: string;
+        naturality?: string;
+        nationality?: string;
+        profession?: string;
+        maritalStatus?: string; // marital_status
+        motherName?: string; // mother_name
+        motherProfession?: string; // mother_profession
+        fatherName?: string; // father_name
+        fatherProfession?: string; // father_profession
+        guardianName?: string; // guardian_name
+        guardianCpf?: string; // guardian_cpf
+        spouseName?: string; // spouse_name
+        rnInInsurance?: boolean; // rn_in_insurance
+        legacyCode?: string; // legacy_code
+        notes?: string;
+        email?: string;
+        phoneMobile?: string; // phone_mobile
+        phone1?: string;
+        phone2?: string;
+        cep?: string;
+        street?: string;
+        number?: string;
+        complement?: string;
+        neighborhood?: string;
+        city?: string;
+        state?: string;
+        reference?: string;
+        vip?: boolean;
+        lastVisitAt?: string;
+        nextAppointmentAt?: string;
+        createdAt?: string;
+        updatedAt?: string;
+        createdBy?: string;
+        updatedBy?: string;
+        weightKg?: string;
+        heightM?: string;
+        bmi?: string;
+        bloodType?: string;
+    };
+
+
+    const [formData, setFormData] = useState<FormData>({
+        nome: "",
+        cpf: "",
+        dataNascimento: "",
+        sexo: "",
+        id: "",
+        nomeSocial: "",
+        rg: "",
+        documentType: "",
+        documentNumber: "",
+        ethnicity: "",
+        race: "",
+        naturality: "",
+        nationality: "",
+        profession: "",
+        maritalStatus: "",
+        motherName: "",
+        motherProfession: "",
+        fatherName: "",
+        fatherProfession: "",
+        guardianName: "",
+        guardianCpf: "",
+        spouseName: "",
+        rnInInsurance: false,
+        legacyCode: "",
+        notes: "",
+        email: "",
+        phoneMobile: "",
+        phone1: "",
+        phone2: "",
+        cep: "",
+        street: "",
+        number: "",
+        complement: "",
+        neighborhood: "",
+        city: "",
+        state: "",
+        reference: "",
+        vip: false,
+        lastVisitAt: "",
+        nextAppointmentAt: "",
+        createdAt: "",
+        updatedAt: "",
+        createdBy: "",
+        updatedBy: "",
+        weightKg: "",
+        heightM: "",
+        bmi: "",
+        bloodType: "",
+    });
+
+    const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
+    const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);
+
+    useEffect(() => {
+        async function fetchPatient() {
+            try {
+                const res = await patientsService.getById(patientId); 
+                // Map API snake_case/nested to local camelCase form
+                setFormData({
+                    id: res[0]?.id ?? "",
+                    nome: res[0]?.full_name ?? "",
+                    nomeSocial: res[0]?.social_name ?? "",
+                    cpf: res[0]?.cpf ?? "",
+                    rg: res[0]?.rg ?? "",
+                    documentType: res[0]?.document_type ?? "",
+                    documentNumber: res[0]?.document_number ?? "",
+                    sexo: res[0]?.sex ?? "",
+                    dataNascimento: res[0]?.birth_date ?? "",
+                    ethnicity: res[0]?.ethnicity ?? "",
+                    race: res[0]?.race ?? "",
+                    naturality: res[0]?.naturality ?? "",
+                    nationality: res[0]?.nationality ?? "",
+                    profession: res[0]?.profession ?? "",
+                    maritalStatus: res[0]?.marital_status ?? "",
+                    motherName: res[0]?.mother_name ?? "",
+                    motherProfession: res[0]?.mother_profession ?? "",
+                    fatherName: res[0]?.father_name ?? "",
+                    fatherProfession: res[0]?.father_profession ?? "",
+                    guardianName: res[0]?.guardian_name ?? "",
+                    guardianCpf: res[0]?.guardian_cpf ?? "",
+                    spouseName: res[0]?.spouse_name ?? "",
+                    rnInInsurance: res[0]?.rn_in_insurance ?? false,
+                    legacyCode: res[0]?.legacy_code ?? "",
+                    notes: res[0]?.notes ?? "",
+                    email: res[0]?.email ?? "",
+                    phoneMobile: res[0]?.phone_mobile ?? "",
+                    phone1: res[0]?.phone1 ?? "",
+                    phone2: res[0]?.phone2 ?? "",
+                    cep: res[0]?.cep ?? "",
+                    street: res[0]?.street ?? "",
+                    number: res[0]?.number ?? "",
+                    complement: res[0]?.complement ?? "",
+                    neighborhood: res[0]?.neighborhood ?? "",
+                    city: res[0]?.city ?? "",
+                    state: res[0]?.state ?? "",
+                    reference: res[0]?.reference ?? "",
+                    vip: res[0]?.vip ?? false,
+                    lastVisitAt: res[0]?.last_visit_at ?? "",
+                    nextAppointmentAt: res[0]?.next_appointment_at ?? "",
+                    createdAt: res[0]?.created_at ?? "",
+                    updatedAt: res[0]?.updated_at ?? "",
+                    createdBy: res[0]?.created_by ?? "",
+                    updatedBy: res[0]?.updated_by ?? "",
+                    weightKg: res[0]?.weight_kg ? String(res[0].weight_kg) : "",
+                    heightM: res[0]?.height_m ? String(res[0].height_m) : "",
+                    bmi: res[0]?.bmi ? String(res[0].bmi) : "",
+                    bloodType: res[0]?.blood_type ?? "",
+                });
+
+            } catch (e: any) {
+                toast({ title: "Erro", description: e?.message || "Falha ao carregar paciente" });
+            }
+        }
+        fetchPatient();
+    }, [patientId, toast]);
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        // Build API payload (snake_case)
+        const payload = {
+            full_name: formData.nome || null,
+            cpf: formData.cpf || null,
+            email: formData.email || null,
+            phone_mobile: formData.phoneMobile || null,
+            birth_date: formData.dataNascimento || null,
+            social_name: formData.nomeSocial || null,
+            sex: formData.sexo || null,
+            blood_type: formData.bloodType || null,
+            weight_kg: formData.weightKg ? Number(formData.weightKg) : null,
+            height_m: formData.heightM ? Number(formData.heightM) : null,
+            street: formData.street || null,
+            number: formData.number || null,
+            complement: formData.complement || null,
+            neighborhood: formData.neighborhood || null,
+            city: formData.city || null,
+            state: formData.state || null,
+            cep: formData.cep || null,
+        };
+
+        try {
+            await patientsService.update(patientId, payload);
+            toast({
+                title: "Sucesso",
+                description: "Paciente atualizado com sucesso",
+                variant: "default"
+            });
+            router.push("/manager/pacientes");
+        } catch (err: any) {
+            console.error("Erro ao atualizar paciente:", err);
+            toast({ 
+                title: "Erro", 
+                description: err?.message || "Não foi possível atualizar o paciente",
+                variant: "destructive"
+            });
+        }
+    };
+
+    return (
+        <SecretaryLayout>
+            <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                    <Link href="/manager/pacientes">
+                        <Button variant="ghost" size="sm">
+                            <ArrowLeft className="w-4 h-4 mr-2" />
+                            Voltar
+                        </Button>
+                    </Link>
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1>
+                        <p className="text-gray-600">Atualize as informações do paciente</p>
+                    </div>
+
+                    {/* Anexos Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Anexos</h2>
+                        <div className="flex items-center gap-3 mb-4">
+                            <input ref={anexoInputRef} type="file" className="hidden" />
+                            <Button type="button" variant="outline" disabled={isUploadingAnexo}>
+                                <Paperclip className="w-4 h-4 mr-2" /> {isUploadingAnexo ? "Enviando..." : "Adicionar anexo"}
+                            </Button>
+                        </div>
+                        {anexos.length === 0 ? (
+                            <p className="text-sm text-gray-500">Nenhum anexo encontrado.</p>
+                        ) : (
+                            <ul className="divide-y">
+                                {anexos.map((a) => (
+                                    <li key={a.id} className="flex items-center justify-between py-2">
+                                        <div className="flex items-center gap-2 min-w-0">
+                                            <Paperclip className="w-4 h-4 text-gray-500 shrink-0" />
+                                            <span className="text-sm text-gray-800 truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
+                                        </div>
+                                        <Button type="button" variant="ghost" className="text-red-600">
+                                            <Trash2 className="w-4 h-4 mr-1" /> Remover
+                                        </Button>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-8">
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {/* Photo upload */}
+                            <div className="space-y-2">
+                                <Label>Foto do paciente</Label>
+                                <div className="flex items-center gap-4">
+                                    <div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center">
+                                        {photoUrl ? (
+                                            // eslint-disable-next-line @next/next/no-img-element
+                                            <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
+                                        ) : (
+                                            <span className="text-gray-400 text-sm">Sem foto</span>
+                                        )}
+                                    </div>
+                                    <div className="flex gap-2">
+                                        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
+                                        <Button type="button" variant="outline" disabled={isUploadingPhoto}>
+                                            {isUploadingPhoto ? "Enviando..." : "Enviar foto"}
+                                        </Button>
+                                        {photoUrl && (
+                                            <Button type="button" variant="ghost" disabled={isUploadingPhoto}>
+                                                Remover
+                                            </Button>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="nome">Nome *</Label>
+                                <Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpf">CPF *</Label>
+                                <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="rg">RG</Label>
+                                <Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Sexo *</Label>
+                                <div className="flex gap-4">
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <Label htmlFor="Masculino">Masculino</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <Label htmlFor="Feminino">Feminino</Label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="dataNascimento">Data de nascimento *</Label>
+                                <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="etnia">Etnia</Label>
+                                <Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="branca">Branca</SelectItem>
+                                        <SelectItem value="preta">Preta</SelectItem>
+                                        <SelectItem value="parda">Parda</SelectItem>
+                                        <SelectItem value="amarela">Amarela</SelectItem>
+                                        <SelectItem value="indigena">Indígena</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="raca">Raça</Label>
+                                <Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="caucasiana">Caucasiana</SelectItem>
+                                        <SelectItem value="negroide">Negroide</SelectItem>
+                                        <SelectItem value="mongoloide">Mongoloide</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="naturalidade">Naturalidade</Label>
+                                <Input id="naturalidade" value={formData.naturality} onChange={(e) => handleInputChange("naturality", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nacionalidade">Nacionalidade</Label>
+                                <Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="brasileira">Brasileira</SelectItem>
+                                        <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissao">Profissão</Label>
+                                <Input id="profissao" value={formData.profession} onChange={(e) => handleInputChange("profession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estadoCivil">Estado civil</Label>
+                                <Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                        <SelectItem value="casado">Casado(a)</SelectItem>
+                                        <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                        <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeMae">Nome da mãe</Label>
+                                <Input id="nomeMae" value={formData.motherName} onChange={(e) => handleInputChange("motherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoMae">Profissão da mãe</Label>
+                                <Input id="profissaoMae" value={formData.motherProfession} onChange={(e) => handleInputChange("motherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomePai">Nome do pai</Label>
+                                <Input id="nomePai" value={formData.fatherName} onChange={(e) => handleInputChange("fatherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoPai">Profissão do pai</Label>
+                                <Input id="profissaoPai" value={formData.fatherProfession} onChange={(e) => handleInputChange("fatherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeResponsavel">Nome do responsável</Label>
+                                <Input id="nomeResponsavel" value={formData.guardianName} onChange={(e) => handleInputChange("guardianName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpfResponsavel">CPF do responsável</Label>
+                                <Input id="cpfResponsavel" value={formData.guardianCpf} onChange={(e) => handleInputChange("guardianCpf", e.target.value)} placeholder="000.000.000-00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
+                                <Input id="nomeEsposo" value={formData.spouseName} onChange={(e) => handleInputChange("spouseName", e.target.value)} />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="guiaConvenio" checked={isGuiaConvenio} onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)} />
+                                <Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="observacoes">Observações</Label>
+                            <Textarea id="observacoes" value={formData.notes} onChange={(e) => handleInputChange("notes", e.target.value)} placeholder="Digite observações sobre o paciente..." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Contact Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail *</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required/>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="celular">Celular *</Label>
+                                <Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required/>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone1">Telefone 1</Label>
+                                <Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone2">Telefone 2</Label>
+                                <Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Address Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="cep">CEP</Label>
+                                <Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="endereco">Endereço</Label>
+                                <Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numero">Número</Label>
+                                <Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="complemento">Complemento</Label>
+                                <Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="bairro">Bairro</Label>
+                                <Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cidade">Cidade</Label>
+                                <Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estado">Estado</Label>
+                                <Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="AC">Acre</SelectItem>
+                                        <SelectItem value="AL">Alagoas</SelectItem>
+                                        <SelectItem value="AP">Amapá</SelectItem>
+                                        <SelectItem value="AM">Amazonas</SelectItem>
+                                        <SelectItem value="BA">Bahia</SelectItem>
+                                        <SelectItem value="CE">Ceará</SelectItem>
+                                        <SelectItem value="DF">Distrito Federal</SelectItem>
+                                        <SelectItem value="ES">Espírito Santo</SelectItem>
+                                        <SelectItem value="GO">Goiás</SelectItem>
+                                        <SelectItem value="MA">Maranhão</SelectItem>
+                                        <SelectItem value="MT">Mato Grosso</SelectItem>
+                                        <SelectItem value="MS">Mato Grosso do Sul</SelectItem>
+                                        <SelectItem value="MG">Minas Gerais</SelectItem>
+                                        <SelectItem value="PA">Pará</SelectItem>
+                                        <SelectItem value="PB">Paraíba</SelectItem>
+                                        <SelectItem value="PR">Paraná</SelectItem>
+                                        <SelectItem value="PE">Pernambuco</SelectItem>
+                                        <SelectItem value="PI">Piauí</SelectItem>
+                                        <SelectItem value="RJ">Rio de Janeiro</SelectItem>
+                                        <SelectItem value="RN">Rio Grande do Norte</SelectItem>
+                                        <SelectItem value="RS">Rio Grande do Sul</SelectItem>
+                                        <SelectItem value="RO">Rondônia</SelectItem>
+                                        <SelectItem value="RR">Roraima</SelectItem>
+                                        <SelectItem value="SC">Santa Catarina</SelectItem>
+                                        <SelectItem value="SP">São Paulo</SelectItem>
+                                        <SelectItem value="SE">Sergipe</SelectItem>
+                                        <SelectItem value="TO">Tocantins</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Medical Information Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
+                                <Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="A+">A+</SelectItem>
+                                        <SelectItem value="A-">A-</SelectItem>
+                                        <SelectItem value="B+">B+</SelectItem>
+                                        <SelectItem value="B-">B-</SelectItem>
+                                        <SelectItem value="AB+">AB+</SelectItem>
+                                        <SelectItem value="AB-">AB-</SelectItem>
+                                        <SelectItem value="O+">O+</SelectItem>
+                                        <SelectItem value="O-">O-</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="peso">Peso (kg)</Label>
+                                <Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="altura">Altura (m)</Label>
+                                <Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>IMC</Label>
+                                <Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="alergias">Alergias</Label>
+                            <Textarea id="alergias" onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Insurance Information Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="convenio">Convênio</Label>
+                                <Select  onValueChange={(value) => handleInputChange("convenio", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="Particular">Particular</SelectItem>
+                                        <SelectItem value="SUS">SUS</SelectItem>
+                                        <SelectItem value="Unimed">Unimed</SelectItem>
+                                        <SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
+                                        <SelectItem value="Amil">Amil</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="plano">Plano</Label>
+                                <Input id="plano"  onChange={(e) => handleInputChange("plano", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numeroMatricula">Nº de matrícula</Label>
+                                <Input id="numeroMatricula"  onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="validadeCarteira">Validade da Carteira</Label>
+                                <Input id="validadeCarteira" type="date" onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
+                            </div>
+                        </div>
+
+                        <div className="mt-4">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
+                                <Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex justify-end gap-4">
+                        <Link href="/manager/pacientes">
+                            <Button type="button" variant="outline">
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+                            <Save className="w-4 h-4 mr-2" />
+                            Salvar Alterações
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </SecretaryLayout>
+    );
+}
diff --git a/app/manager/pacientes/loading.tsx b/app/manager/pacientes/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/manager/pacientes/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/manager/pacientes/novo/page.tsx b/app/manager/pacientes/novo/page.tsx
new file mode 100644
index 0000000..3964896
--- /dev/null
+++ b/app/manager/pacientes/novo/page.tsx
@@ -0,0 +1,676 @@
+"use client";
+
+import type React from "react";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Upload, Plus, X, ChevronDown } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { useToast } from "@/hooks/use-toast";
+import SecretaryLayout from "@/components/secretary-layout";
+import { patientsService } from "@/services/patientsApi.mjs";
+
+export default function NovoPacientePage() {
+    const [anexosOpen, setAnexosOpen] = useState(false);
+    const [anexos, setAnexos] = useState<string[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const router = useRouter();
+    const { toast } = useToast();
+
+    const adicionarAnexo = () => {
+        setAnexos([...anexos, `Documento ${anexos.length + 1}`]);
+    };
+
+    const removerAnexo = (index: number) => {
+        setAnexos(anexos.filter((_, i) => i !== index));
+    };
+
+
+    const cleanNumber = (value: string): string => value.replace(/\D/g, '');
+
+    const formatCPF = (value: string): string => {
+        const cleaned = cleanNumber(value).substring(0, 11);
+        return cleaned.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
+    };
+
+    const formatCEP = (value: string): string => {
+        const cleaned = cleanNumber(value).substring(0, 8);
+        return cleaned.replace(/(\d{5})(\d{3})/, '$1-$2');
+    };
+
+    const formatPhoneMobile = (value: string): string => {
+        const cleaned = cleanNumber(value).substring(0, 11);
+        if (cleaned.length > 10) {
+            return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '+55 ($1) $2-$3');
+        }
+        return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '+55 ($1) $2-$3');
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (isLoading) return;
+        setIsLoading(true);
+        const form = e.currentTarget;
+        const formData = new FormData(form);
+
+        const apiPayload = {
+            full_name: (formData.get("nome") as string) || "", // obrigatório
+            social_name: (formData.get("nomeSocial") as string) || undefined,
+            cpf: (formatCPF(formData.get("cpf") as string)) || "", // obrigatório
+            email: (formData.get("email") as string) || "", // obrigatório
+            phone_mobile: (formatPhoneMobile(formData.get("celular") as string)) || "", // obrigatório
+            birth_date: formData.get("dataNascimento") ? new Date(formData.get("dataNascimento") as string) : undefined,
+            sex: (formData.get("sexo") as string) || undefined,
+            blood_type: (formData.get("tipoSanguineo") as string) || undefined,
+            weight_kg: formData.get("peso") ? parseFloat(formData.get("peso") as string) : undefined,
+            height_m: formData.get("altura") ? parseFloat(formData.get("altura") as string) : undefined,
+            cep: (formatCEP(formData.get("cep") as string)) || undefined,
+            street: (formData.get("endereco") as string) || undefined,
+            number: (formData.get("numero") as string) || undefined,
+            complement: (formData.get("complemento") as string) || undefined,
+            neighborhood: (formData.get("bairro") as string) || undefined,
+            city: (formData.get("cidade") as string) || undefined,
+            state: (formData.get("estado") as string) || undefined,
+        };
+
+        console.log(apiPayload.email)
+        console.log(apiPayload.cep)
+        console.log(apiPayload.phone_mobile)
+
+        const errors: string[] = [];
+        const fullName = apiPayload.full_name?.trim() || "";
+        if (!fullName || fullName.length < 2 || fullName.length > 255) {
+            errors.push("Nome deve ter entre 2 e 255 caracteres.");
+        }
+
+        const cpf = apiPayload.cpf || "";
+        if (!/^\d{3}\.\d{3}\.\d{3}-\d{2}$/.test(cpf)) {
+            errors.push("CPF deve estar no formato XXX.XXX.XXX-XX.");
+        }
+
+        const sex = apiPayload.sex;
+        const allowedSex = ["Masculino", "Feminino", "outro"];
+        if (!sex || !allowedSex.includes(sex)) {
+            errors.push("Sexo é obrigatório e deve ser masculino, feminino ou outro.");
+        }
+
+        if (!apiPayload.birth_date) {
+            errors.push("Data de nascimento é obrigatória.");
+        }
+
+        const phoneMobile = apiPayload.phone_mobile || "";
+        if (phoneMobile && !/^\+55 \(\d{2}\) \d{4,5}-\d{4}$/.test(phoneMobile)) {
+            errors.push("Celular deve estar no formato +55 (XX) XXXXX-XXXX.");
+        }
+
+        const cep = apiPayload.cep || "";
+        if (cep && !/^\d{5}-\d{3}$/.test(cep)) {
+            errors.push("CEP deve estar no formato XXXXX-XXX.");
+        }
+
+        const state = apiPayload.state || "";
+        if (state && state.length !== 2) {
+            errors.push("Estado (UF) deve ter 2 caracteres.");
+        }
+        if (errors.length) {
+            toast({ title: "Corrija os campos", description: errors[0] });
+            console.log("campos errados")
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const res = await patientsService.create(apiPayload);
+            console.log(res)
+
+            let message = "Paciente cadastrado com sucesso";
+            try {
+                if (!res[0].id) {
+                    throw new Error(`${res.error} ${res.message}`|| "A API retornou erro");
+                } else {
+                    console.log(message)
+                }
+            } catch {}
+
+            toast({
+                title: "Sucesso",
+                description: message,
+            });
+            router.push("/manager/pacientes");
+        } catch (err: any) {
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível cadastrar o paciente",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <SecretaryLayout>
+            <div className="space-y-6">
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900">Novo Paciente</h1>
+                        <p className="text-gray-600">Cadastre um novo paciente no sistema</p>
+                    </div>
+                </div>
+
+                <form className="space-y-6" onSubmit={handleSubmit}>
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+
+                        <div className="space-y-6">
+                            <div className="flex items-center gap-4">
+                                <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
+                                    <Upload className="w-8 h-8 text-gray-400" />
+                                </div>
+                                <Button variant="outline" type="button" size="sm">
+                                    <Upload className="w-4 h-4 mr-2" />
+                                    Carregar Foto
+                                </Button>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nome" className="text-sm font-medium text-gray-700">
+                                        Nome *
+                                    </Label>
+                                    <Input id="nome" name="nome" placeholder="Nome completo" required className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="nomeSocial" className="text-sm font-medium text-gray-700">
+                                        Nome Social
+                                    </Label>
+                                    <Input id="nomeSocial" name="nomeSocial" placeholder="Nome social ou apelido" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="cpf" className="text-sm font-medium text-gray-700">
+                                        CPF *
+                                    </Label>
+                                    <Input id="cpf" name="cpf" placeholder="000.000.000-00" required className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="rg" className="text-sm font-medium text-gray-700">
+                                        RG
+                                    </Label>
+                                    <Input id="rg" name="rg" placeholder="00.000.000-0" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="outrosDocumentos" className="text-sm font-medium text-gray-700">
+                                        Outros Documentos
+                                    </Label>
+                                    <Select name="outrosDocumentos">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="cnh">CNH</SelectItem>
+                                            <SelectItem value="passaporte">Passaporte</SelectItem>
+                                            <SelectItem value="carteira-trabalho">Carteira de Trabalho</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label className="text-sm font-medium text-gray-700">Sexo *</Label>
+                                    <div className="flex gap-4 mt-2">
+                                        <label className="flex items-center gap-2">
+                                            <input type="radio" name="sexo" value="Masculino" className="text-blue-600" required/>
+                                            <span className="text-sm">Masculino</span>
+                                        </label>
+                                        <label className="flex items-center gap-2">
+                                            <input type="radio" name="sexo" value="Feminino" className="text-blue-600" required/>
+                                            <span className="text-sm">Feminino</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="dataNascimento" className="text-sm font-medium text-gray-700">
+                                        Data de Nascimento *
+                                    </Label>
+                                    <Input id="dataNascimento" name="dataNascimento" type="date" className="mt-1" required/>
+                                </div>
+                                <div>
+                                    <Label htmlFor="estadoCivil" className="text-sm font-medium text-gray-700">
+                                        Estado Civil
+                                    </Label>
+                                    <Select name="estadoCivil">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                            <SelectItem value="casado">Casado(a)</SelectItem>
+                                            <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                            <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="etnia" className="text-sm font-medium text-gray-700">
+                                        Etnia
+                                    </Label>
+                                    <Select name="etnia">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="branca">Branca</SelectItem>
+                                            <SelectItem value="preta">Preta</SelectItem>
+                                            <SelectItem value="parda">Parda</SelectItem>
+                                            <SelectItem value="amarela">Amarela</SelectItem>
+                                            <SelectItem value="indigena">Indígena</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="raca" className="text-sm font-medium text-gray-700">
+                                        Raça
+                                    </Label>
+                                    <Select name="raca">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="branca">Branca</SelectItem>
+                                            <SelectItem value="preta">Preta</SelectItem>
+                                            <SelectItem value="parda">Parda</SelectItem>
+                                            <SelectItem value="amarela">Amarela</SelectItem>
+                                            <SelectItem value="indigena">Indígena</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="naturalidade" className="text-sm font-medium text-gray-700">
+                                        Naturalidade
+                                    </Label>
+                                    <Select name="naturalidade">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="aracaju">Aracaju</SelectItem>
+                                            <SelectItem value="salvador">Salvador</SelectItem>
+                                            <SelectItem value="recife">Recife</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="nacionalidade" className="text-sm font-medium text-gray-700">
+                                        Nacionalidade
+                                    </Label>
+                                    <Select name="nacionalidade">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="brasileira">Brasileira</SelectItem>
+                                            <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="profissao" className="text-sm font-medium text-gray-700">
+                                    Profissão
+                                </Label>
+                                <Input id="profissao" name="profissao" placeholder="Profissão" className="mt-1" />
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nomeMae" className="text-sm font-medium text-gray-700">
+                                        Nome da Mãe
+                                    </Label>
+                                    <Input id="nomeMae" name="nomeMae" placeholder="Nome da mãe" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="profissaoMae" className="text-sm font-medium text-gray-700">
+                                        Profissão da Mãe
+                                    </Label>
+                                    <Input id="profissaoMae" name="profissaoMae" placeholder="Profissão da mãe" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nomePai" className="text-sm font-medium text-gray-700">
+                                        Nome do Pai
+                                    </Label>
+                                    <Input id="nomePai" name="nomePai" placeholder="Nome do pai" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="profissaoPai" className="text-sm font-medium text-gray-700">
+                                        Profissão do Pai
+                                    </Label>
+                                    <Input id="profissaoPai" name="profissaoPai" placeholder="Profissão do pai" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nomeResponsavel" className="text-sm font-medium text-gray-700">
+                                        Nome do Responsável
+                                    </Label>
+                                    <Input id="nomeResponsavel" name="nomeResponsavel" placeholder="Nome do responsável" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="cpfResponsavel" className="text-sm font-medium text-gray-700">
+                                        CPF do Responsável
+                                    </Label>
+                                    <Input id="cpfResponsavel" name="cpfResponsavel" placeholder="000.000.000-00" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="nomeEsposo" className="text-sm font-medium text-gray-700">
+                                    Nome do Esposo(a)
+                                </Label>
+                                <Input id="nomeEsposo" name="nomeEsposo" placeholder="Nome do esposo(a)" className="mt-1" />
+                            </div>
+
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="rnGuia" name="rnGuia" />
+                                <Label htmlFor="rnGuia" className="text-sm text-gray-700">
+                                    RN na Guia do convênio
+                                </Label>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="codigoLegado" className="text-sm font-medium text-gray-700">
+                                    Código Legado
+                                </Label>
+                                <Input id="codigoLegado" name="codigoLegado" placeholder="Código do sistema anterior" className="mt-1" />
+                            </div>
+
+                            <div>
+                                <Label htmlFor="observacoes" className="text-sm font-medium text-gray-700">
+                                    Observações
+                                </Label>
+                                <Textarea id="observacoes" name="observacoes" placeholder="Observações gerais sobre o paciente" className="min-h-[100px] mt-1" />
+                            </div>
+
+                            <Collapsible open={anexosOpen} onOpenChange={setAnexosOpen}>
+                                <CollapsibleTrigger asChild>
+                                    <Button variant="ghost" type="button" className="w-full justify-between p-0 h-auto text-left">
+                                        <div className="flex items-center gap-2">
+                                            <div className="w-4 h-4 bg-gray-400 rounded-sm flex items-center justify-center">
+                                                <span className="text-white text-xs">📎</span>
+                                            </div>
+                                            <span className="text-sm font-medium text-gray-700">Anexos do paciente</span>
+                                        </div>
+                                        <ChevronDown className={`w-4 h-4 transition-transform ${anexosOpen ? "rotate-180" : ""}`} />
+                                    </Button>
+                                </CollapsibleTrigger>
+                                <CollapsibleContent className="space-y-4 mt-4">
+                                    {anexos.map((anexo, index) => (
+                                        <div key={index} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
+                                            <span className="text-sm">{anexo}</span>
+                                            <Button variant="ghost" size="sm" onClick={() => removerAnexo(index)} type="button">
+                                                <X className="w-4 h-4" />
+                                            </Button>
+                                        </div>
+                                    ))}
+                                    <Button variant="outline" onClick={adicionarAnexo} type="button" size="sm">
+                                        <Plus className="w-4 h-4 mr-2" />
+                                        Adicionar Anexo
+                                    </Button>
+                                </CollapsibleContent>
+                            </Collapsible>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
+
+                        <div className="space-y-4">
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+                                        E-mail *
+                                    </Label>
+                                    <Input id="email" name="email" type="email" placeholder="email@exemplo.com" className="mt-1" required/>
+                                </div>
+                                <div>
+                                    <Label htmlFor="celular" className="text-sm font-medium text-gray-700">
+                                        Celular *
+                                    </Label>
+                                    <div className="flex mt-1">
+                                        <Select>
+                                            <SelectTrigger className="w-20 rounded-r-none">
+                                                <SelectValue placeholder="+55" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="+55">+55</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <Input id="celular" name="celular" placeholder="(XX) XXXXX-XXXX" className="rounded-l-none" required/>
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="telefone1" className="text-sm font-medium text-gray-700">
+                                        Telefone 1
+                                    </Label>
+                                    <Input id="telefone1" name="telefone1" placeholder="(XX) XXXX-XXXX" className="mt-1" />
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="telefone2" className="text-sm font-medium text-gray-700">
+                                    Telefone 2
+                                </Label>
+                                <Input id="telefone2" name="telefone2" placeholder="(XX) XXXX-XXXX" className="mt-1" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
+
+                        <div className="space-y-4">
+                            <div>
+                                <Label htmlFor="cep" className="text-sm font-medium text-gray-700">
+                                    CEP
+                                </Label>
+                                <Input id="cep" name="cep" placeholder="00000-000" className="mt-1 max-w-xs" />
+                            </div>
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div className="md:col-span-2">
+                                    <Label htmlFor="endereco" className="text-sm font-medium text-gray-700">
+                                        Endereço
+                                    </Label>
+                                    <Input id="endereco" name="endereco" placeholder="Rua, Avenida..." className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="numero" className="text-sm font-medium text-gray-700">
+                                        Número
+                                    </Label>
+                                    <Input id="numero" name="numero" placeholder="123" className="mt-1" />
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="complemento" className="text-sm font-medium text-gray-700">
+                                    Complemento
+                                </Label>
+                                <Input id="complemento" name="complemento" placeholder="Apto, Bloco..." className="mt-1" />
+                            </div>
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="bairro" className="text-sm font-medium text-gray-700">
+                                        Bairro
+                                    </Label>
+                                    <Input id="bairro" name="bairro" placeholder="Bairro" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="cidade" className="text-sm font-medium text-gray-700">
+                                        Cidade
+                                    </Label>
+                                    <Input id="cidade" name="cidade" placeholder="Cidade" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="estado" className="text-sm font-medium text-gray-700">
+                                        Estado
+                                    </Label>
+                                    <Select name="estado">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="SE">Sergipe</SelectItem>
+                                            <SelectItem value="BA">Bahia</SelectItem>
+                                            <SelectItem value="AL">Alagoas</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
+
+                        <div className="space-y-4">
+                            <div className="grid md:grid-cols-4 gap-4">
+                                <div>
+                                    <Label htmlFor="tipoSanguineo" className="text-sm font-medium text-gray-700">
+                                        Tipo Sanguíneo
+                                    </Label>
+                                    <Select name="tipoSanguineo">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="A+">A+</SelectItem>
+                                            <SelectItem value="A-">A-</SelectItem>
+                                            <SelectItem value="B+">B+</SelectItem>
+                                            <SelectItem value="B-">B-</SelectItem>
+                                            <SelectItem value="AB+">AB+</SelectItem>
+                                            <SelectItem value="AB-">AB-</SelectItem>
+                                            <SelectItem value="O+">O+</SelectItem>
+                                            <SelectItem value="O-">O-</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="peso" className="text-sm font-medium text-gray-700">
+                                        Peso
+                                    </Label>
+                                    <div className="relative mt-1">
+                                        <Input id="peso" name="peso" type="number" placeholder="70" />
+                                        <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">kg</span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="altura" className="text-sm font-medium text-gray-700">
+                                        Altura
+                                    </Label>
+                                    <div className="relative mt-1">
+                                        <Input id="altura" name="altura" type="number" step="0.01" placeholder="1.70" />
+                                        <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">m</span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="imc" className="text-sm font-medium text-gray-700">
+                                        IMC
+                                    </Label>
+                                    <div className="relative mt-1">
+                                        <Input id="imc" name="imc" placeholder="Calculado automaticamente" disabled />
+                                        <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">kg/m²</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="alergias" className="text-sm font-medium text-gray-700">
+                                    Alergias
+                                </Label>
+                                <Textarea id="alergias" name="alergias" placeholder="Ex: AAS, Dipirona, etc." className="min-h-[80px] mt-1" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de Convênio</h2>
+
+                        <div className="space-y-4">
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="convenio" className="text-sm font-medium text-gray-700">
+                                        Convênio
+                                    </Label>
+                                    <Select name="convenio">
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="particular">Particular</SelectItem>
+                                            <SelectItem value="sus">SUS</SelectItem>
+                                            <SelectItem value="unimed">Unimed</SelectItem>
+                                            <SelectItem value="bradesco">Bradesco Saúde</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="plano" className="text-sm font-medium text-gray-700">
+                                        Plano
+                                    </Label>
+                                    <Input id="plano" name="plano" placeholder="Nome do plano" className="mt-1" />
+                                </div>
+                            </div>
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="numeroMatricula" className="text-sm font-medium text-gray-700">
+                                        Nº de Matrícula
+                                    </Label>
+                                    <Input id="numeroMatricula" name="numeroMatricula" placeholder="Número da matrícula" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="validadeCarteira" className="text-sm font-medium text-gray-700">
+                                        Validade da Carteira
+                                    </Label>
+                                    <Input id="validadeCarteira" name="validadeCarteira" type="date" className="mt-1" />
+                                </div>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="validadeIndeterminada" name="validadeIndeterminada" />
+                                <Label htmlFor="validadeIndeterminada" className="text-sm text-gray-700">
+                                    Validade Indeterminada
+                                </Label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex justify-end gap-4">
+                        <Link href="/manager/pacientes">
+                            <Button variant="outline" type="button">
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button type="submit" className="bg-blue-600 hover:bg-blue-700" disabled={isLoading}>
+                            {isLoading ? "Salvando..." : "Salvar Paciente"}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </SecretaryLayout>
+    );
+}
diff --git a/app/manager/pacientes/page.tsx b/app/manager/pacientes/page.tsx
new file mode 100644
index 0000000..7ad7704
--- /dev/null
+++ b/app/manager/pacientes/page.tsx
@@ -0,0 +1,393 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import ManagerLayout from "@/components/manager-layout";
+import { patientsService } from "@/services/patientsApi.mjs";
+
+export default function PacientesPage() {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [convenioFilter, setConvenioFilter] = useState("all");
+    const [vipFilter, setVipFilter] = useState("all");
+    const [patients, setPatients] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [page, setPage] = useState(1);
+    const [hasNext, setHasNext] = useState(true);
+    const [isFetching, setIsFetching] = useState(false);
+    const observerRef = useRef<HTMLDivElement | null>(null);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+    const [patientDetails, setPatientDetails] = useState<any | null>(null);
+    const openDetailsDialog = async (patientId: string) => {
+        setDetailsDialogOpen(true);
+        setPatientDetails(null);
+        try {
+            const res = await patientsService.getById(patientId);
+            setPatientDetails(res[0]);
+        } catch (e: any) {
+            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+        }
+    };
+
+    const fetchPacientes = useCallback(
+        async (pageToFetch: number) => {
+            if (isFetching || !hasNext) return;
+            setIsFetching(true);
+            setError(null);
+            try {
+                const res = await patientsService.list();
+                const mapped = res.map((p: any) => ({
+                    id: String(p.id ?? ""),
+                    nome: p.full_name ?? "",
+                    telefone: p.phone_mobile ?? p.phone1 ?? "",
+                    cidade: p.city ?? "",
+                    estado: p.state ?? "",
+                    ultimoAtendimento: p.last_visit_at ?? "",
+                    proximoAtendimento: p.next_appointment_at ?? "",
+                    vip: Boolean(p.vip ?? false),
+                    convenio: p.convenio ?? "", // se não existir, fica vazio
+                    status: p.status ?? undefined,
+                }));
+
+                setPatients((prev) => {
+                    const all = [...prev, ...mapped];
+                    const unique = Array.from(new Map(all.map((p) => [p.id, p])).values());
+                    return unique;
+                });
+
+                if (!mapped.id) setHasNext(false); // parar carregamento
+                else setPage((prev) => prev + 1);
+            } catch (e: any) {
+                setError(e?.message || "Erro ao buscar pacientes");
+            } finally {
+                setIsFetching(false);
+            }
+        },
+        [isFetching, hasNext]
+    );
+
+    useEffect(() => {
+        fetchPacientes(page);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!observerRef.current || !hasNext) return;
+        const observer = new window.IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !isFetching && hasNext) {
+                fetchPacientes(page);
+            }
+        });
+        observer.observe(observerRef.current);
+        return () => {
+            if (observerRef.current) observer.unobserve(observerRef.current);
+        };
+    }, [fetchPacientes, page, hasNext, isFetching]);
+
+    const handleDeletePatient = async (patientId: string) => {
+        // Remove from current list (client-side deletion)
+        try {
+            const res = await patientsService.delete(patientId);
+
+            if (res) {
+                alert(`${res.error} ${res.message}`);
+            }
+
+            setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
+        } catch (e: any) {
+            setError(e?.message || "Erro ao deletar paciente");
+        }
+        setDeleteDialogOpen(false);
+        setPatientToDelete(null);
+    };
+
+    const openDeleteDialog = (patientId: string) => {
+        setPatientToDelete(patientId);
+        setDeleteDialogOpen(true);
+    };
+
+    const filteredPatients = patients.filter((patient) => {
+        const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
+        const matchesConvenio = convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
+        const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);
+
+        return matchesSearch && matchesConvenio && matchesVip;
+    });
+
+    return (
+        <ManagerLayout>
+            <div className="space-y-6">
+                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                    <div>
+                        <h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
+                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+                    </div>
+                    <div className="flex gap-2">
+                        <Link href="/manager/pacientes/novo">
+                            <Button className="w-full md:w-auto">
+                                <Plus className="w-4 h-4 mr-2" />
+                                Adicionar
+                            </Button>
+                        </Link>
+                    </div>
+                </div>
+
+                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
+                    {/* Convênio */}
+                    <div className="flex items-center gap-2 w-full md:w-auto">
+                        <span className="text-sm font-medium text-foreground">Convênio</span>
+                        <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+                            <SelectTrigger className="w-full md:w-40">
+                                <SelectValue placeholder="Selecione o Convênio" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">Todos</SelectItem>
+                                <SelectItem value="Particular">Particular</SelectItem>
+                                <SelectItem value="SUS">SUS</SelectItem>
+                                <SelectItem value="Unimed">Unimed</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-2 w-full md:w-auto">
+                        <span className="text-sm font-medium text-foreground">VIP</span>
+                        <Select value={vipFilter} onValueChange={setVipFilter}>
+                            <SelectTrigger className="w-full md:w-32">
+                                <SelectValue placeholder="Selecione" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">Todos</SelectItem>
+                                <SelectItem value="vip">VIP</SelectItem>
+                                <SelectItem value="regular">Regular</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2 w-full md:w-auto">
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
+                        <Select>
+                            <SelectTrigger className="w-full md:w-32">
+                                <SelectValue placeholder="Selecione" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="today">Hoje</SelectItem>
+                                <SelectItem value="week">Esta semana</SelectItem>
+                                <SelectItem value="month">Este mês</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-foreground">VIP</span>
+                        <Select value={vipFilter} onValueChange={setVipFilter}>
+                            <SelectTrigger className="w-32">
+                                <SelectValue placeholder="Selecione" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">Todos</SelectItem>
+                                <SelectItem value="vip">VIP</SelectItem>
+                                <SelectItem value="regular">Regular</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
+                        <Select>
+                            <SelectTrigger className="w-32">
+                                <SelectValue placeholder="Selecione" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="today">Hoje</SelectItem>
+                                <SelectItem value="week">Esta semana</SelectItem>
+                                <SelectItem value="month">Este mês</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <Button variant="outline" className="ml-auto w-full md:w-auto">
+                        <Filter className="w-4 h-4 mr-2" />
+                        Filtro avançado
+                    </Button>
+                </div>
+
+                <div className="bg-white rounded-lg border border-gray-200">
+                    <div className="overflow-x-auto">
+                        {error ? (
+                            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
+                        ) : (
+                            <table className="w-full min-w-[600px]">
+                                <thead className="bg-gray-50 border-b border-gray-200">
+                                    <tr>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {filteredPatients.length === 0 ? (
+                                        <tr>
+                                            <td colSpan={7} className="p-8 text-center text-gray-500">
+                                                {patients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        filteredPatients.map((patient) => (
+                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
+                                                <td className="p-4">
+                                                    <div className="flex items-center gap-3">
+                                                        <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
+                                                            <span className="text-gray-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
+                                                        </div>
+                                                        <span className="font-medium text-gray-900">{patient.nome}</span>
+                                                    </div>
+                                                </td>
+                                                <td className="p-4 text-gray-600">{patient.telefone}</td>
+                                                <td className="p-4 text-gray-600">{patient.cidade}</td>
+                                                <td className="p-4 text-gray-600">{patient.estado}</td>
+                                                <td className="p-4 text-gray-600">{patient.ultimoAtendimento}</td>
+                                                <td className="p-4 text-gray-600">{patient.proximoAtendimento}</td>
+                                                <td className="p-4">
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger asChild>
+                                                            <div className="text-blue-600">Ações</div>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent align="end">
+                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
+                                                                <Eye className="w-4 h-4 mr-2" />
+                                                                Ver detalhes
+                                                            </DropdownMenuItem>
+                                                            <DropdownMenuItem asChild>
+                                                                <Link href={`/manager/pacientes/${patient.id}/editar`}>
+                                                                    <Edit className="w-4 h-4 mr-2" />
+                                                                    Editar
+                                                                </Link>
+                                                            </DropdownMenuItem>
+                                                            <DropdownMenuItem>
+                                                                <Calendar className="w-4 h-4 mr-2" />
+                                                                Marcar consulta
+                                                            </DropdownMenuItem>
+                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
+                                                                <Trash2 className="w-4 h-4 mr-2" />
+                                                                Excluir
+                                                            </DropdownMenuItem>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
+                                                </td>
+                                            </tr>
+                                        ))
+                                    )}
+                                </tbody>
+                            </table>
+                        )}
+                        <div ref={observerRef} style={{ height: 1 }} />
+                        {isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>}
+                    </div>
+                </div>
+
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
+                                Excluir
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+
+                {/* Modal de detalhes do paciente */}
+                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                {patientDetails === null ? (
+                                    <div className="text-gray-500">Carregando...</div>
+                                ) : patientDetails?.error ? (
+                                    <div className="text-red-600">{patientDetails.error}</div>
+                                ) : (
+                                    <div className="space-y-2 text-left">
+                                        <p>
+                                            <strong>Nome:</strong> {patientDetails.full_name}
+                                        </p>
+                                        <p>
+                                            <strong>CPF:</strong> {patientDetails.cpf}
+                                        </p>
+                                        <p>
+                                            <strong>Email:</strong> {patientDetails.email}
+                                        </p>
+                                        <p>
+                                            <strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Nome social:</strong> {patientDetails.social_name ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
+                                            {patientDetails.weight_kg ? "kg" : ""}
+                                        </p>
+                                        <p>
+                                            <strong>Altura:</strong> {patientDetails.height_m ?? "-"}
+                                            {patientDetails.height_m ? "m" : ""}
+                                        </p>
+                                        <p>
+                                            <strong>IMC:</strong> {patientDetails.bmi ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Endereço:</strong> {patientDetails.street ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Cidade:</strong> {patientDetails.city ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Estado:</strong> {patientDetails.state ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>CEP:</strong> {patientDetails.cep ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Criado em:</strong> {patientDetails.created_at ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"}
+                                        </p>
+                                        <p>
+                                            <strong>Id:</strong> {patientDetails.id ?? "-"}
+                                        </p>
+                                    </div>
+                                )}
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Fechar</AlertDialogCancel>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+        </ManagerLayout>
+    );
+}
diff --git a/components/manager-layout.tsx b/components/manager-layout.tsx
index 7c1e3fe..ad25236 100644
--- a/components/manager-layout.tsx
+++ b/components/manager-layout.tsx
@@ -99,6 +99,7 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
     { href: "#", icon: Calendar, label: "Relatórios gerenciais" },
     { href: "/manager/usuario", icon: User, label: "Gestão de Usuários" },
     { href: "/manager/home", icon: User, label: "Gestão de Médicos" },
+    { href: "/manager/pacientes", icon: User, label: "Gestão de Pacientes" },
     { href: "#", icon: Calendar, label: "Configurações" },
   ];
 

From 14db6b422e90b681ad00a05aed2e5cb1e612b908 Mon Sep 17 00:00:00 2001
From: m1guelmcf <miguelmouracf@gmail.com>
Date: Wed, 5 Nov 2025 10:51:30 -0300
Subject: [PATCH 9/9] ajuste no manager

---
 app/manager/pacientes/page.tsx | 804 ++++++++++++++++++---------------
 1 file changed, 439 insertions(+), 365 deletions(-)

diff --git a/app/manager/pacientes/page.tsx b/app/manager/pacientes/page.tsx
index 7ad7704..83f1a65 100644
--- a/app/manager/pacientes/page.tsx
+++ b/app/manager/pacientes/page.tsx
@@ -3,391 +3,465 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import ManagerLayout from "@/components/manager-layout";
 import { patientsService } from "@/services/patientsApi.mjs";
 
 export default function PacientesPage() {
-    const [searchTerm, setSearchTerm] = useState("");
-    const [convenioFilter, setConvenioFilter] = useState("all");
-    const [vipFilter, setVipFilter] = useState("all");
-    const [patients, setPatients] = useState<any[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [page, setPage] = useState(1);
-    const [hasNext, setHasNext] = useState(true);
-    const [isFetching, setIsFetching] = useState(false);
-    const observerRef = useRef<HTMLDivElement | null>(null);
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
-    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-    const [patientDetails, setPatientDetails] = useState<any | null>(null);
-    const openDetailsDialog = async (patientId: string) => {
-        setDetailsDialogOpen(true);
-        setPatientDetails(null);
-        try {
-            const res = await patientsService.getById(patientId);
-            setPatientDetails(res[0]);
-        } catch (e: any) {
-            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
-        }
-    };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [convenioFilter, setConvenioFilter] = useState("all");
+  const [vipFilter, setVipFilter] = useState("all");
+  const [patients, setPatients] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [hasNext, setHasNext] = useState(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [patientDetails, setPatientDetails] = useState<any | null>(null);
+  const openDetailsDialog = async (patientId: string) => {
+    setDetailsDialogOpen(true);
+    setPatientDetails(null);
+    try {
+      const res = await patientsService.getById(patientId);
+      setPatientDetails(res[0]);
+    } catch (e: any) {
+      setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+    }
+  };
 
-    const fetchPacientes = useCallback(
-        async (pageToFetch: number) => {
-            if (isFetching || !hasNext) return;
-            setIsFetching(true);
-            setError(null);
-            try {
-                const res = await patientsService.list();
-                const mapped = res.map((p: any) => ({
-                    id: String(p.id ?? ""),
-                    nome: p.full_name ?? "",
-                    telefone: p.phone_mobile ?? p.phone1 ?? "",
-                    cidade: p.city ?? "",
-                    estado: p.state ?? "",
-                    ultimoAtendimento: p.last_visit_at ?? "",
-                    proximoAtendimento: p.next_appointment_at ?? "",
-                    vip: Boolean(p.vip ?? false),
-                    convenio: p.convenio ?? "", // se não existir, fica vazio
-                    status: p.status ?? undefined,
-                }));
+  const fetchPacientes = useCallback(
+    async (pageToFetch: number) => {
+      if (isFetching || !hasNext) return;
+      setIsFetching(true);
+      setError(null);
+      try {
+        const res = await patientsService.list();
+        const mapped = res.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.full_name ?? "",
+          telefone: p.phone_mobile ?? p.phone1 ?? "",
+          cidade: p.city ?? "",
+          estado: p.state ?? "",
+          ultimoAtendimento: p.last_visit_at ?? "",
+          proximoAtendimento: p.next_appointment_at ?? "",
+          vip: Boolean(p.vip ?? false),
+          convenio: p.convenio ?? "", // se não existir, fica vazio
+          status: p.status ?? undefined,
+        }));
 
-                setPatients((prev) => {
-                    const all = [...prev, ...mapped];
-                    const unique = Array.from(new Map(all.map((p) => [p.id, p])).values());
-                    return unique;
-                });
-
-                if (!mapped.id) setHasNext(false); // parar carregamento
-                else setPage((prev) => prev + 1);
-            } catch (e: any) {
-                setError(e?.message || "Erro ao buscar pacientes");
-            } finally {
-                setIsFetching(false);
-            }
-        },
-        [isFetching, hasNext]
-    );
-
-    useEffect(() => {
-        fetchPacientes(page);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (!observerRef.current || !hasNext) return;
-        const observer = new window.IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting && !isFetching && hasNext) {
-                fetchPacientes(page);
-            }
+        setPatients((prev) => {
+          const all = [...prev, ...mapped];
+          const unique = Array.from(
+            new Map(all.map((p) => [p.id, p])).values()
+          );
+          return unique;
         });
-        observer.observe(observerRef.current);
-        return () => {
-            if (observerRef.current) observer.unobserve(observerRef.current);
-        };
-    }, [fetchPacientes, page, hasNext, isFetching]);
 
-    const handleDeletePatient = async (patientId: string) => {
-        // Remove from current list (client-side deletion)
-        try {
-            const res = await patientsService.delete(patientId);
+        if (!mapped.id) setHasNext(false); // parar carregamento
+        else setPage((prev) => prev + 1);
+      } catch (e: any) {
+        setError(e?.message || "Erro ao buscar pacientes");
+      } finally {
+        setIsFetching(false);
+      }
+    },
+    [isFetching, hasNext]
+  );
 
-            if (res) {
-                alert(`${res.error} ${res.message}`);
-            }
+  useEffect(() => {
+    fetchPacientes(page);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-            setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
-        } catch (e: any) {
-            setError(e?.message || "Erro ao deletar paciente");
-        }
-        setDeleteDialogOpen(false);
-        setPatientToDelete(null);
-    };
-
-    const openDeleteDialog = (patientId: string) => {
-        setPatientToDelete(patientId);
-        setDeleteDialogOpen(true);
-    };
-
-    const filteredPatients = patients.filter((patient) => {
-        const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
-        const matchesConvenio = convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
-        const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);
-
-        return matchesSearch && matchesConvenio && matchesVip;
+  useEffect(() => {
+    if (!observerRef.current || !hasNext) return;
+    const observer = new window.IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && !isFetching && hasNext) {
+        fetchPacientes(page);
+      }
     });
+    observer.observe(observerRef.current);
+    return () => {
+      if (observerRef.current) observer.unobserve(observerRef.current);
+    };
+  }, [fetchPacientes, page, hasNext, isFetching]);
 
-    return (
-        <ManagerLayout>
-            <div className="space-y-6">
-                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                    <div>
-                        <h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
-                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
-                    </div>
-                    <div className="flex gap-2">
-                        <Link href="/manager/pacientes/novo">
-                            <Button className="w-full md:w-auto">
-                                <Plus className="w-4 h-4 mr-2" />
-                                Adicionar
-                            </Button>
-                        </Link>
-                    </div>
-                </div>
+  const handleDeletePatient = async (patientId: string) => {
+    // Remove from current list (client-side deletion)
+    try {
+      const res = await patientsService.delete(patientId);
 
-                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
-                    {/* Convênio */}
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Convênio</span>
-                        <Select value={convenioFilter} onValueChange={setConvenioFilter}>
-                            <SelectTrigger className="w-full md:w-40">
-                                <SelectValue placeholder="Selecione o Convênio" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="Particular">Particular</SelectItem>
-                                <SelectItem value="SUS">SUS</SelectItem>
-                                <SelectItem value="Unimed">Unimed</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+      if (res) {
+        alert(`${res.error} ${res.message}`);
+      }
 
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">VIP</span>
-                        <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full md:w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
-                        <Select>
-                            <SelectTrigger className="w-full md:w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="today">Hoje</SelectItem>
-                                <SelectItem value="week">Esta semana</SelectItem>
-                                <SelectItem value="month">Este mês</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+      setPatients((prev) =>
+        prev.filter((p) => String(p.id) !== String(patientId))
+      );
+    } catch (e: any) {
+      setError(e?.message || "Erro ao deletar paciente");
+    }
+    setDeleteDialogOpen(false);
+    setPatientToDelete(null);
+  };
 
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-foreground">VIP</span>
-                        <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+  const openDeleteDialog = (patientId: string) => {
+    setPatientToDelete(patientId);
+    setDeleteDialogOpen(true);
+  };
 
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
-                        <Select>
-                            <SelectTrigger className="w-32">
-                                <SelectValue placeholder="Selecione" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="today">Hoje</SelectItem>
-                                <SelectItem value="week">Esta semana</SelectItem>
-                                <SelectItem value="month">Este mês</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
+  const filteredPatients = patients.filter((patient) => {
+    const matchesSearch =
+      patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      patient.telefone?.includes(searchTerm);
+    const matchesConvenio =
+      convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
+    const matchesVip =
+      vipFilter === "all" ||
+      (vipFilter === "vip" && patient.vip) ||
+      (vipFilter === "regular" && !patient.vip);
 
-                    <Button variant="outline" className="ml-auto w-full md:w-auto">
-                        <Filter className="w-4 h-4 mr-2" />
-                        Filtro avançado
-                    </Button>
-                </div>
+    return matchesSearch && matchesConvenio && matchesVip;
+  });
 
-                <div className="bg-white rounded-lg border border-gray-200">
-                    <div className="overflow-x-auto">
-                        {error ? (
-                            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
-                        ) : (
-                            <table className="w-full min-w-[600px]">
-                                <thead className="bg-gray-50 border-b border-gray-200">
-                                    <tr>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {filteredPatients.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={7} className="p-8 text-center text-gray-500">
-                                                {patients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
-                                            </td>
-                                        </tr>
-                                    ) : (
-                                        filteredPatients.map((patient) => (
-                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
-                                                <td className="p-4">
-                                                    <div className="flex items-center gap-3">
-                                                        <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
-                                                            <span className="text-gray-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
-                                                        </div>
-                                                        <span className="font-medium text-gray-900">{patient.nome}</span>
-                                                    </div>
-                                                </td>
-                                                <td className="p-4 text-gray-600">{patient.telefone}</td>
-                                                <td className="p-4 text-gray-600">{patient.cidade}</td>
-                                                <td className="p-4 text-gray-600">{patient.estado}</td>
-                                                <td className="p-4 text-gray-600">{patient.ultimoAtendimento}</td>
-                                                <td className="p-4 text-gray-600">{patient.proximoAtendimento}</td>
-                                                <td className="p-4">
-                                                    <DropdownMenu>
-                                                        <DropdownMenuTrigger asChild>
-                                                            <div className="text-blue-600">Ações</div>
-                                                        </DropdownMenuTrigger>
-                                                        <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
-                                                                <Eye className="w-4 h-4 mr-2" />
-                                                                Ver detalhes
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem asChild>
-                                                                <Link href={`/manager/pacientes/${patient.id}/editar`}>
-                                                                    <Edit className="w-4 h-4 mr-2" />
-                                                                    Editar
-                                                                </Link>
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem>
-                                                                <Calendar className="w-4 h-4 mr-2" />
-                                                                Marcar consulta
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
-                                                                <Trash2 className="w-4 h-4 mr-2" />
-                                                                Excluir
-                                                            </DropdownMenuItem>
-                                                        </DropdownMenuContent>
-                                                    </DropdownMenu>
-                                                </td>
-                                            </tr>
-                                        ))
-                                    )}
-                                </tbody>
-                            </table>
-                        )}
-                        <div ref={observerRef} style={{ height: 1 }} />
-                        {isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>}
-                    </div>
-                </div>
+  return (
+    <ManagerLayout>
+      <div className="space-y-6">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h1 className="text-xl md:text-2xl font-bold text-foreground">
+              Pacientes
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Gerencie as informações de seus pacientes
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Link href="/manager/pacientes/novo">
+              <Button className="w-full md:w-auto">
+                <Plus className="w-4 h-4 mr-2" />
+                Adicionar
+              </Button>
+            </Link>
+          </div>
+        </div>
 
-                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
+        <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
+          {/* Convênio */}
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">
+              Convênio
+            </span>
+            <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+              <SelectTrigger className="w-full md:w-40">
+                <SelectValue placeholder="Selecione o Convênio" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="Particular">Particular</SelectItem>
+                <SelectItem value="SUS">SUS</SelectItem>
+                <SelectItem value="Unimed">Unimed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">VIP</span>
+            <Select value={vipFilter} onValueChange={setVipFilter}>
+              <SelectTrigger className="w-full md:w-32">
+                <SelectValue placeholder="Selecione" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="vip">VIP</SelectItem>
+                <SelectItem value="regular">Regular</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <span className="text-sm font-medium text-foreground">
+              Aniversariantes
+            </span>
+            <Select>
+              <SelectTrigger className="w-full md:w-32">
+                <SelectValue placeholder="Selecione" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="today">Hoje</SelectItem>
+                <SelectItem value="week">Esta semana</SelectItem>
+                <SelectItem value="month">Este mês</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button variant="outline" className="ml-auto w-full md:w-auto">
+            <Filter className="w-4 h-4 mr-2" />
+            Filtro avançado
+          </Button>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200">
+          <div className="overflow-x-auto">
+            {error ? (
+              <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
+            ) : (
+              <table className="w-full min-w-[600px]">
+                <thead className="bg-gray-50 border-b border-gray-200">
+                  <tr>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Nome
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Telefone
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Cidade
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Estado
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Último atendimento
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Próximo atendimento
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Ações
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredPatients.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="p-8 text-center text-gray-500">
+                        {patients.length === 0
+                          ? "Nenhum paciente cadastrado"
+                          : "Nenhum paciente encontrado com os filtros aplicados"}
+                      </td>
+                    </tr>
+                  ) : (
+                    filteredPatients.map((patient) => (
+                      <tr
+                        key={patient.id}
+                        className="border-b border-gray-100 hover:bg-gray-50"
+                      >
+                        <td className="p-4">
+                          <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
+                              <span className="text-gray-600 font-medium text-sm">
+                                {patient.nome?.charAt(0) || "?"}
+                              </span>
+                            </div>
+                            <span className="font-medium text-gray-900">
+                              {patient.nome}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="p-4 text-gray-600">
+                          {patient.telefone}
+                        </td>
+                        <td className="p-4 text-gray-600">{patient.cidade}</td>
+                        <td className="p-4 text-gray-600">{patient.estado}</td>
+                        <td className="p-4 text-gray-600">
+                          {patient.ultimoAtendimento}
+                        </td>
+                        <td className="p-4 text-gray-600">
+                          {patient.proximoAtendimento}
+                        </td>
+                        <td className="p-4">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <div className="text-blue-600">Ações</div>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  openDetailsDialog(String(patient.id))
+                                }
+                              >
+                                <Eye className="w-4 h-4 mr-2" />
+                                Ver detalhes
+                              </DropdownMenuItem>
+                              <DropdownMenuItem asChild>
+                                <Link
+                                  href={`/manager/pacientes/${patient.id}/editar`}
+                                >
+                                  <Edit className="w-4 h-4 mr-2" />
+                                  Editar
+                                </Link>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                <Calendar className="w-4 h-4 mr-2" />
+                                Marcar consulta
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="text-red-600"
+                                onClick={() =>
+                                  openDeleteDialog(String(patient.id))
+                                }
+                              >
+                                <Trash2 className="w-4 h-4 mr-2" />
                                 Excluir
-                            </AlertDialogAction>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            )}
+            <div ref={observerRef} style={{ height: 1 }} />
+            {isFetching && (
+              <div className="p-4 text-center text-gray-500">
+                Carregando mais pacientes...
+              </div>
+            )}
+          </div>
+        </div>
 
-                {/* Modal de detalhes do paciente */}
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
-                            <AlertDialogDescription>
-                                {patientDetails === null ? (
-                                    <div className="text-gray-500">Carregando...</div>
-                                ) : patientDetails?.error ? (
-                                    <div className="text-red-600">{patientDetails.error}</div>
-                                ) : (
-                                    <div className="space-y-2 text-left">
-                                        <p>
-                                            <strong>Nome:</strong> {patientDetails.full_name}
-                                        </p>
-                                        <p>
-                                            <strong>CPF:</strong> {patientDetails.cpf}
-                                        </p>
-                                        <p>
-                                            <strong>Email:</strong> {patientDetails.email}
-                                        </p>
-                                        <p>
-                                            <strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Nome social:</strong> {patientDetails.social_name ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
-                                            {patientDetails.weight_kg ? "kg" : ""}
-                                        </p>
-                                        <p>
-                                            <strong>Altura:</strong> {patientDetails.height_m ?? "-"}
-                                            {patientDetails.height_m ? "m" : ""}
-                                        </p>
-                                        <p>
-                                            <strong>IMC:</strong> {patientDetails.bmi ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Endereço:</strong> {patientDetails.street ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Cidade:</strong> {patientDetails.city ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Estado:</strong> {patientDetails.state ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>CEP:</strong> {patientDetails.cep ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Criado em:</strong> {patientDetails.created_at ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"}
-                                        </p>
-                                        <p>
-                                            <strong>Id:</strong> {patientDetails.id ?? "-"}
-                                        </p>
-                                    </div>
-                                )}
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Fechar</AlertDialogCancel>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
-            </div>
-        </ManagerLayout>
-    );
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+              <AlertDialogDescription>
+                Tem certeza que deseja excluir este paciente? Esta ação não pode
+                ser desfeita.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancelar</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() =>
+                  patientToDelete && handleDeletePatient(patientToDelete)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
+                Excluir
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* Modal de detalhes do paciente */}
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
+              <AlertDialogDescription>
+                {patientDetails === null ? (
+                  <div className="text-gray-500">Carregando...</div>
+                ) : patientDetails?.error ? (
+                  <div className="text-red-600">{patientDetails.error}</div>
+                ) : (
+                  <div className="space-y-2 text-left">
+                    <p>
+                      <strong>Nome:</strong> {patientDetails.full_name}
+                    </p>
+                    <p>
+                      <strong>CPF:</strong> {patientDetails.cpf}
+                    </p>
+                    <p>
+                      <strong>Email:</strong> {patientDetails.email}
+                    </p>
+                    <p>
+                      <strong>Telefone:</strong>{" "}
+                      {patientDetails.phone_mobile ??
+                        patientDetails.phone1 ??
+                        patientDetails.phone2 ??
+                        "-"}
+                    </p>
+                    <p>
+                      <strong>Nome social:</strong>{" "}
+                      {patientDetails.social_name ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Tipo sanguíneo:</strong>{" "}
+                      {patientDetails.blood_type ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
+                      {patientDetails.weight_kg ? "kg" : ""}
+                    </p>
+                    <p>
+                      <strong>Altura:</strong> {patientDetails.height_m ?? "-"}
+                      {patientDetails.height_m ? "m" : ""}
+                    </p>
+                    <p>
+                      <strong>IMC:</strong> {patientDetails.bmi ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Endereço:</strong> {patientDetails.street ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Bairro:</strong>{" "}
+                      {patientDetails.neighborhood ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Cidade:</strong> {patientDetails.city ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Estado:</strong> {patientDetails.state ?? "-"}
+                    </p>
+                    <p>
+                      <strong>CEP:</strong> {patientDetails.cep ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Criado em:</strong>{" "}
+                      {patientDetails.created_at ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Atualizado em:</strong>{" "}
+                      {patientDetails.updated_at ?? "-"}
+                    </p>
+                    <p>
+                      <strong>Id:</strong> {patientDetails.id ?? "-"}
+                    </p>
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </ManagerLayout>
+  );
 }