ajustes visuais em todas as paginas

app/doctor/dashboard/page.tsx

@@ -1,9 +1,24 @@
 "use client";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -61,7 +76,7 @@ type Doctor = {
   updated_by: string | null;
   max_days_in_advance: number;
   rating: number | null;
-}
+};
 
 interface UserPermissions {
   isAdmin: boolean;
@@ -110,10 +125,15 @@ export default function PatientDashboard() {
   const [userData, setUserData] = useState<UserData>();
   const [availability, setAvailability] = useState<any | null>(null);
   const [exceptions, setExceptions] = useState<Exception[]>([]);
-    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+  const [schedule, setSchedule] = useState<
-    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
+    Record<string, { start: string; end: string }[]>
+  >({});
+  const formatTime = (time?: string | null) =>
+    time?.split(":")?.slice(0, 2).join(":") ?? "";
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
+  const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(
+    null
+  );
   const [error, setError] = useState<string | null>(null);
 
   // Mapa de tradução
@@ -150,16 +170,15 @@ export default function PatientDashboard() {
         const filteredExc = exceptionsList.filter(
           (exc: { doctor_id: string }) => exc.doctor_id === doctor?.id
         );
-      console.log(exceptionsList)
+        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[]) {
@@ -173,13 +192,15 @@ export default function PatientDashboard() {
 
   const handleDeleteException = async (ExceptionId: string) => {
     try {
-            alert(ExceptionId)
+      alert(ExceptionId);
       const res = await exceptionsService.delete(ExceptionId);
 
       let message = "Exceção deletada com sucesso";
       try {
         if (res) {
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+          throw new Error(
+            `${res.error} ${res.message}` || "A API retornou erro"
+          );
         } else {
           console.log(message);
         }
@@ -190,7 +211,9 @@ export default function PatientDashboard() {
         description: message,
       });
 
-            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
+      setExceptions((prev: Exception[]) =>
+        prev.filter((p) => String(p.id) !== String(ExceptionId))
+      );
     } catch (e: any) {
       toast({
         title: "Erro",
@@ -235,13 +258,17 @@ export default function PatientDashboard() {
       <div className="space-y-6">
         <div>
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-                    <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
+          <p className="text-gray-600">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Próxima Consulta
+              </CardTitle>
               <Calendar className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
@@ -252,7 +279,9 @@ export default function PatientDashboard() {
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Consultas Este Mês
+              </CardTitle>
               <Clock className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
@@ -277,12 +306,14 @@ export default function PatientDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Ações Rápidas</CardTitle>
-                            <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/doctor/medicos/consultas">
-                                <Button className="w-full justify-start">
+                <Button className="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer">
-                                    <Calendar className="mr-2 h-4 w-4" />
+                  <Calendar className="mr-2 h-4 w-4 text-white" />
                   Ver Minhas Consultas
                 </Button>
               </Link>
@@ -314,16 +345,28 @@ export default function PatientDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Horário Semanal</CardTitle>
-                            <CardDescription>Confira rapidamente a sua disponibilidade da semana</CardDescription>
+              <CardDescription>
+                Confira rapidamente 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) => {
+              {[
+                "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>
+                        <p className="font-medium capitalize">
+                          {weekdaysPT[day]}
+                        </p>
                       </div>
                       <div className="text-center">
                         {times.length > 0 ? (
@@ -333,7 +376,9 @@ export default function PatientDashboard() {
                             </p>
                           ))
                         ) : (
-                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
+                          <p className="text-sm text-gray-400 italic">
+                            Sem horário
+                          </p>
                         )}
                       </div>
                     </div>
@@ -347,7 +392,9 @@ export default function PatientDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Exceções</CardTitle>
-                            <CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
+              <CardDescription>
+                Bloqueios e liberações eventuais de agenda
+              </CardDescription>
             </CardHeader>
 
             <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
@@ -358,7 +405,7 @@ export default function PatientDashboard() {
                     weekday: "long",
                     day: "2-digit",
                     month: "long",
-                                        timeZone: "UTC"
+                    timeZone: "UTC",
                   });
 
                   const startTime = formatTime(ex.start_time);
@@ -376,11 +423,25 @@ export default function PatientDashboard() {
                           </p>
                         </div>
                         <div className="text-center mt-2">
-                                                    <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
+                          <p
-                                                    <p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p>
+                            className={`text-sm font-medium ${
+                              ex.kind === "bloqueio"
+                                ? "text-red-600"
+                                : "text-green-600"
+                            }`}
+                          >
+                            {ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}
+                          </p>
+                          <p className="text-xs text-gray-500 italic">
+                            {ex.reason || "Sem motivo especificado"}
+                          </p>
                         </div>
                         <div>
-                                                    <Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
+                          <Button
+                            className="text-red-600"
+                            variant="outline"
+                            onClick={() => openDeleteDialog(String(ex.id))}
+                          >
                             <Trash2></Trash2>
                           </Button>
                         </div>
@@ -389,7 +450,9 @@ export default function PatientDashboard() {
                   );
                 })
               ) : (
-                                <p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p>
+                <p className="text-sm text-gray-400 italic col-span-7 text-center">
+                  Nenhuma exceção registrada.
+                </p>
               )}
             </CardContent>
           </Card>
@@ -398,11 +461,19 @@ export default function PatientDashboard() {
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir esta exceção? 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={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
+              <AlertDialogAction
+                onClick={() =>
+                  exceptionToDelete && handleDeleteException(exceptionToDelete)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
                 Excluir
               </AlertDialogAction>
             </AlertDialogFooter>

app/doctor/disponibilidade/page.tsx

@@ -6,7 +6,13 @@ 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { usersService } from "@/services/usersApi.mjs";
@@ -14,11 +20,31 @@ 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 {
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Edit, 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";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import Sidebar from "@/components/Sidebar";
 
 // ... (Interfaces de tipo omitidas para brevidade, pois não foram alteradas)
@@ -80,7 +106,7 @@ type Doctor = {
   updated_by: string | null;
   max_days_in_advance: number;
   rating: number | null;
-}
+};
 
 type Availability = {
   id: string;
@@ -101,27 +127,38 @@ 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 [schedule, setSchedule] = useState<
-    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
+    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 [selectedAvailability, setSelectedAvailability] =
+    useState<Availability | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-    const selectAvailability = (schedule: { start: string; end: string;}, day: string) => {
+  const selectAvailability = (
-        const selected = availability.filter((a: Availability) =>
+    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]);
-    }
+  };
 
-    const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => {
+  const handleOpenModal = (
-        selectAvailability(schedule, day)
+    schedule: { start: string; end: string },
+    day: string
+  ) => {
+    selectAvailability(schedule, day);
     setIsModalOpen(true);
   };
 
@@ -130,7 +167,13 @@ export default function AvailabilityPage() {
     setIsModalOpen(false);
   };
 
-    const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => {
+  const handleEdit = async (formData: {
+    start_time: "";
+    end_time: "";
+    slot_minutes: "";
+    appointment_type: "";
+    id: "";
+  }) => {
     if (isLoading) return;
     setIsLoading(true);
 
@@ -149,7 +192,9 @@ export default function AvailabilityPage() {
       let message = "disponibilidade editada com sucesso";
       try {
         if (!res[0].id) {
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+          throw new Error(
+            `${res.error} ${res.message}` || "A API retornou erro"
+          );
         } else {
           console.log(message);
         }
@@ -159,16 +204,17 @@ export default function AvailabilityPage() {
         title: "Sucesso",
         description: message,
       });
-            router.push("#")
+      router.push("#");
     } catch (err: any) {
       toast({
         title: "Erro",
-                description: err?.message || "Não foi possível editar a disponibilidade",
+        description:
+          err?.message || "Não foi possível editar a disponibilidade",
       });
     } finally {
       setIsLoading(false);
       handleCloseModal();
-            fetchData()
+      fetchData();
     }
   };
 
@@ -212,7 +258,6 @@ export default function AvailabilityPage() {
     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) => {
@@ -267,7 +312,9 @@ export default function AvailabilityPage() {
       let message = "disponibilidade cadastrada com sucesso";
       try {
         if (!res[0].id) {
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+          throw new Error(
+            `${res.error} ${res.message}` || "A API retornou erro"
+          );
         } else {
           console.log(message);
         }
@@ -288,8 +335,11 @@ export default function AvailabilityPage() {
     }
   };
 
-    const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => {
+  const openDeleteDialog = (
-        selectAvailability(schedule, day)
+    schedule: { start: string; end: string },
+    day: string
+  ) => {
+    selectAvailability(schedule, day);
     setDeleteDialogOpen(true);
   };
 
@@ -300,7 +350,9 @@ export default function AvailabilityPage() {
       let message = "Disponibilidade deletada com sucesso";
       try {
         if (res) {
-                        throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+          throw new Error(
+            `${res.error} ${res.message}` || "A API retornou erro"
+          );
         } else {
           console.log(message);
         }
@@ -311,7 +363,9 @@ export default function AvailabilityPage() {
         description: message,
       });
 
-                setAvailability((prev: Availability[]) => prev.filter((p) => String(p.id) !== String(AvailabilityId)));
+      setAvailability((prev: Availability[]) =>
+        prev.filter((p) => String(p.id) !== String(AvailabilityId))
+      );
     } catch (e: any) {
       toast({
         title: "Erro",
@@ -327,8 +381,12 @@ export default function AvailabilityPage() {
       <div className="space-y-6 flex-1 overflow-y-auto p-6">
         <div className="flex items-center justify-between">
           <div>
-                        <h1 className="text-2xl font-bold text-gray-900">Definir Disponibilidade</h1>
+            <h1 className="text-2xl font-bold text-gray-900">
-                        <p className="text-gray-600">Defina sua disponibilidade para consultas </p>
+              Definir Disponibilidade
+            </h1>
+            <p className="text-gray-600">
+              Defina sua disponibilidade para consultas{" "}
+            </p>
           </div>
         </div>
 
@@ -339,35 +397,72 @@ export default function AvailabilityPage() {
             <div className="space-y-6">
               {/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */}
               <div>
-                                <Label className="text-sm font-medium text-gray-700">Dia Da Semana</Label>
+                <Label className="text-sm font-medium text-gray-700">
+                  Dia Da Semana
+                </Label>
                 {/* O antigo 'flex gap-4 mt-2 flex-nowrap' foi substituído por um grid responsivo: */}
                 <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-x-4 gap-y-2 mt-2">
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="monday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="monday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Segunda</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="tuesday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="tuesday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Terça</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="wednesday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="wednesday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Quarta</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="thursday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="thursday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Quinta</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="friday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="friday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Sexta</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="saturday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="saturday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Sábado</span>
                   </label>
                   <label className="flex items-center gap-1">
-                                        <input type="radio" name="weekday" value="sunday" className="text-blue-600" />
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="sunday"
+                      className="text-blue-600"
+                    />
                     <span className="whitespace-nowrap text-sm">Domingo</span>
                   </label>
                 </div>
@@ -377,31 +472,64 @@ export default function AvailabilityPage() {
               {/* Ajustado para 1 coluna em móvel, 2 em tablet e 5 em desktop (mantendo o que já existia com ajustes) */}
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
                 <div>
-                                    <Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
+                  <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"
+                    required
+                    className="mt-1"
+                  />
                 </div>
                 <div>
-                                    <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
+                  <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"
+                    required
+                    className="mt-1"
+                  />
                 </div>
                 <div>
-                                    <Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700">
+                  <Label
+                    htmlFor="duracaoConsulta"
+                    className="text-sm font-medium text-gray-700"
+                  >
                     Duração Da Consulta (min)
                   </Label>
-                                    <Input type="number" id="duracaoConsulta" name="duracaoConsulta" required className="mt-1" />
+                  <Input
+                    type="number"
+                    id="duracaoConsulta"
+                    name="duracaoConsulta"
+                    required
+                    className="mt-1"
+                  />
                 </div>
                 {/* O Select de modalidade fica fora deste grid para ocupar uma linha inteira em telas menores, como no original, garantindo clareza */}
               </div>
 
               <div>
-                                <Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700">
+                <Label
+                  htmlFor="modalidadeConsulta"
+                  className="text-sm font-medium text-gray-700"
+                >
                   Modalidade De Consulta
                 </Label>
-                                <Select onValueChange={(value) => setModalidadeConsulta(value)} value={modalidadeConsulta}>
+                <Select
+                  onValueChange={(value) => setModalidadeConsulta(value)}
+                  value={modalidadeConsulta}
+                >
                   <SelectTrigger className="mt-1">
                     <SelectValue placeholder="Selecione" />
                   </SelectTrigger>
@@ -418,14 +546,32 @@ export default function AvailabilityPage() {
           {/* Alinha à direita em telas maiores e empilha (com o botão primário no final) em telas menores */}
           {/* Alteração aqui: Adicionado w-full aos Links e Buttons para ocuparem a largura total em telas pequenas */}
           <div className="flex flex-col-reverse sm:flex-row sm:justify-between gap-4">
-                        <Link href="/doctor/disponibilidade/excecoes" className="w-full sm:w-auto">
+            <Link
-                            <Button variant="default" className="w-full sm:w-auto">Adicionar Exceção</Button>
+              href="/doctor/disponibilidade/excecoes"
+              className="w-full sm:w-auto"
+            >
+              <Button
+                variant="default"
+                className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"
+              >
+                Adicionar Exceção
+              </Button>
             </Link>
-                        <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"> {/* Ajustado para empilhar os botões Cancelar e Salvar em telas pequenas */}
+            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+              {" "}
+              {/* Ajustado para empilhar os botões Cancelar e Salvar em telas pequenas */}
               <Link href="/doctor/dashboard" className="w-full sm:w-auto">
-                                <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button>
+                <Button
+                  variant="outline"
+                  className="w-full sm:w-auto cursor-pointer"
+                >
+                  Cancelar
+                </Button>
               </Link>
-                            <Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto">
+              <Button
+                type="submit"
+                className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto cursor-pointer"
+              >
                 Salvar Disponibilidade
               </Button>
             </div>
@@ -437,16 +583,28 @@ export default function AvailabilityPage() {
           <Card>
             <CardHeader>
               <CardTitle>Horário Semanal</CardTitle>
-                            <CardDescription>Confira ou altere a sua disponibilidade da semana</CardDescription>
+              <CardDescription>
+                Confira ou altere a sua disponibilidade da semana
+              </CardDescription>
             </CardHeader>
             {/* Define um grid responsivo para os dias da semana (1 coluna em móvel, 2 em pequeno, 3 em médio e 7 em telas grandes) */}
             <CardContent className="space-y-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-2">
-                            {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
+              {[
+                "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 h-full">
-                                            <p className="font-medium capitalize text-center mb-2">{weekdaysPT[day]}</p>
+                      <p className="font-medium capitalize text-center mb-2">
+                        {weekdaysPT[day]}
+                      </p>
                       <div className="text-center w-full">
                         {times.length > 0 ? (
                           times.map((t, i) => (
@@ -458,13 +616,16 @@ export default function AvailabilityPage() {
                                   </p>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent align="end">
-                                                                    <DropdownMenuItem onClick={() => handleOpenModal(t, day)}>
+                                  <DropdownMenuItem
+                                    onClick={() => handleOpenModal(t, day)}
+                                  >
                                     <Edit className="w-4 h-4 mr-2" />
                                     Editar
                                   </DropdownMenuItem>
                                   <DropdownMenuItem
                                     onClick={() => openDeleteDialog(t, day)}
-                                                                    className="text-red-600 focus:bg-red-50 focus:text-red-600">
+                                    className="text-red-600 focus:bg-red-50 focus:text-red-600"
+                                  >
                                     <Trash2 className="w-4 h-4 mr-2" />
                                     Excluir
                                   </DropdownMenuItem>
@@ -473,7 +634,9 @@ export default function AvailabilityPage() {
                             </div>
                           ))
                         ) : (
-                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
+                          <p className="text-sm text-gray-400 italic">
+                            Sem horário
+                          </p>
                         )}
                       </div>
                     </div>
@@ -489,11 +652,20 @@ export default function AvailabilityPage() {
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir esta disponibilidade? Esta ação não pode ser desfeita.</AlertDialogDescription>
+              <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">
+              <AlertDialogAction
+                onClick={() =>
+                  selectedAvailability &&
+                  handleDeleteAvailability(selectedAvailability.id)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
                 Excluir
               </AlertDialogAction>
             </AlertDialogFooter>
@@ -506,7 +678,6 @@ export default function AvailabilityPage() {
         onClose={handleCloseModal}
         onSubmit={handleEdit}
       />
-            
     </Sidebar>
   );
 }

app/doctor/medicos/page.tsx

@@ -2,11 +2,22 @@
 
 import { useEffect, useState, useCallback } from "react";
 import Link from "next/link";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Eye, Edit, Calendar, Trash2, Loader2 } from "lucide-react";
 import { api } from "@/services/api.mjs";
 import { PatientDetailsModal } from "@/components/ui/patient-details-modal";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import Sidebar from "@/components/Sidebar";
 
@@ -91,7 +102,6 @@ export default function PacientesPage() {
   };
   // --- Lógica de Paginação FIM ---
 
-
   const handleOpenModal = (patient: Paciente) => {
     setSelectedPatient(patient);
     setIsModalOpen(true);
@@ -162,7 +172,9 @@ export default function PacientesPage() {
     <Sidebar>
       <div className="space-y-6 px-2 sm:px-4 md:px-6">
         {/* Cabeçalho */}
-                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3"> {/* Ajustado para flex-col em telas pequenas */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          {" "}
+          {/* Ajustado para flex-col em telas pequenas */}
           <div>
             <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
             <p className="text-muted-foreground text-sm sm:text-base">
@@ -186,21 +198,27 @@ export default function PacientesPage() {
               </SelectContent>
             </Select>
             <Link href="/doctor/pacientes/novo" className="w-full sm:w-auto">
-                            <Button variant="default" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto">
+              <Button
+                variant="default"
+                className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto"
+              >
                 Novo Paciente
               </Button>
             </Link>
           </div>
         </div>
 
-
         <div className="bg-card rounded-lg border border-border overflow-hidden shadow-md">
           {/* Tabela para Telas Médias e Grandes */}
-                    <div className="overflow-x-auto hidden md:block"> {/* Esconde em telas pequenas */}
+          <div className="overflow-x-auto hidden md:block">
+            {" "}
+            {/* Esconde em telas pequenas */}
             <table className="min-w-[600px] w-full">
               <thead className="bg-muted border-b border-border">
                 <tr>
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground">Nome</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">
+                    Nome
+                  </th>
                   <th className="text-left p-3 sm:p-4 font-medium text-foreground">
                     Telefone
                   </th>
@@ -216,24 +234,35 @@ export default function PacientesPage() {
                   <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell">
                     Próximo atendimento
                   </th>
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground">Ações</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">
+                    Ações
+                  </th>
                 </tr>
               </thead>
               <tbody>
                 {loading ? (
                   <tr>
-                                        <td colSpan={7} className="p-6 text-muted-foreground text-center">
+                    <td
+                      colSpan={7}
+                      className="p-6 text-muted-foreground text-center"
+                    >
                       <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
                       Carregando pacientes...
                     </td>
                   </tr>
                 ) : error ? (
                   <tr>
-                                        <td colSpan={7} className="p-6 text-red-600 text-center">{`Erro: ${error}`}</td>
+                    <td
+                      colSpan={7}
+                      className="p-6 text-red-600 text-center"
+                    >{`Erro: ${error}`}</td>
                   </tr>
                 ) : pacientes.length === 0 ? (
                   <tr>
-                                        <td colSpan={7} className="p-8 text-center text-muted-foreground">
+                    <td
+                      colSpan={7}
+                      className="p-8 text-center text-muted-foreground"
+                    >
                       Nenhum paciente encontrado
                     </td>
                   </tr>
@@ -267,7 +296,9 @@ export default function PacientesPage() {
                             </button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
-                                                        <DropdownMenuItem onClick={() => handleOpenModal(p)}>
+                            <DropdownMenuItem
+                              onClick={() => handleOpenModal(p)}
+                            >
                               <Eye className="w-4 h-4 mr-2" />
                               Ver detalhes
                             </DropdownMenuItem>
@@ -277,13 +308,19 @@ export default function PacientesPage() {
                                 Laudos
                               </Link>
                             </DropdownMenuItem>
-                                                        <DropdownMenuItem onClick={() => alert(`Agenda para paciente ID: ${p.id}`)}>
+                            <DropdownMenuItem
+                              onClick={() =>
+                                alert(`Agenda para paciente ID: ${p.id}`)
+                              }
+                            >
                               <Calendar className="w-4 h-4 mr-2" />
                               Ver agenda
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               onClick={() => {
-                                                                const newPacientes = pacientes.filter((pac) => pac.id !== p.id);
+                                const newPacientes = pacientes.filter(
+                                  (pac) => pac.id !== p.id
+                                );
                                 setPacientes(newPacientes);
                                 alert(`Paciente ID: ${p.id} excluído`);
                               }}
@@ -303,7 +340,9 @@ export default function PacientesPage() {
           </div>
 
           {/* Layout em Cards/Lista para Telas Pequenas */}
-                    <div className="md:hidden divide-y divide-border"> {/* Visível apenas em telas pequenas */}
+          <div className="md:hidden divide-y divide-border">
+            {" "}
+            {/* Visível apenas em telas pequenas */}
             {loading ? (
               <div className="p-6 text-muted-foreground text-center">
                 <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
@@ -317,9 +356,16 @@ export default function PacientesPage() {
               </div>
             ) : (
               currentItems.map((p) => (
-                                <div key={p.id} className="flex items-center justify-between p-4 hover:bg-accent/40 transition-colors">
+                <div
-                                    <div className="flex-1 min-w-0 pr-4"> {/* Adicionado padding à direita */}
+                  key={p.id}
-                                        <div className="text-base font-semibold text-foreground break-words"> {/* Aumentado a fonte e break-words para evitar corte do nome */}
+                  className="flex items-center justify-between p-4 hover:bg-accent/40 transition-colors"
+                >
+                  <div className="flex-1 min-w-0 pr-4">
+                    {" "}
+                    {/* Adicionado padding à direita */}
+                    <div className="text-base font-semibold text-foreground break-words">
+                      {" "}
+                      {/* Aumentado a fonte e break-words para evitar corte do nome */}
                       {p.nome || "—"}
                     </div>
                     {/* Removido o 'truncate' e adicionado 'break-words' no telefone */}
@@ -345,13 +391,19 @@ export default function PacientesPage() {
                             Laudos
                           </Link>
                         </DropdownMenuItem>
-                                                <DropdownMenuItem onClick={() => alert(`Agenda para paciente ID: ${p.id}`)}>
+                        <DropdownMenuItem
+                          onClick={() =>
+                            alert(`Agenda para paciente ID: ${p.id}`)
+                          }
+                        >
                           <Calendar className="w-4 h-4 mr-2" />
                           Ver agenda
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() => {
-                                                        const newPacientes = pacientes.filter((pac) => pac.id !== p.id);
+                            const newPacientes = pacientes.filter(
+                              (pac) => pac.id !== p.id
+                            );
                             setPacientes(newPacientes);
                             alert(`Paciente ID: ${p.id} excluído`);
                           }}
@@ -368,11 +420,9 @@ export default function PacientesPage() {
             )}
           </div>
 
-
           {/* Paginação */}
           {totalPages > 1 && (
             <div className="flex flex-wrap justify-center items-center gap-2 border-t border-border p-4 bg-muted/40">
-
               {/* Botão Anterior */}
               <button
                 onClick={goToPrevPage}
@@ -389,7 +439,7 @@ export default function PacientesPage() {
                   onClick={() => paginate(number)}
                   className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-border ${
                     currentPage === number
-                                            ? "bg-green-600 text-primary-foreground shadow-md border-green-600"
+                      ? "bg-blue-600 text-primary-foreground shadow-md border-blue-600"
                       : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
                   }`}
                 >
@@ -405,7 +455,6 @@ export default function PacientesPage() {
               >
                 {"Próximo >"}
               </button>
-
             </div>
           )}
         </div>

app/manager/dashboard/page.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Calendar, Clock, Plus, User } from "lucide-react";
 import Link from "next/link";
@@ -60,7 +66,9 @@ export default function ManagerDashboard() {
         {/* Cabeçalho */}
         <div>
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-                    <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
+          <p className="text-gray-600">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
         </div>
 
         {/* Cards principais */}
@@ -68,33 +76,45 @@ export default function ManagerDashboard() {
           {/* Card 1 */}
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Relatórios gerenciais
+              </CardTitle>
               <Calendar className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold">0</div>
-                            <p className="text-xs text-muted-foreground">Relatórios disponíveis</p>
+              <p className="text-xs text-muted-foreground">
+                Relatórios disponíveis
+              </p>
             </CardContent>
           </Card>
 
           {/* Card 2 — Gestão de usuários */}
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Gestão de usuários</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Gestão de usuários
+              </CardTitle>
               <Clock className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
               {loadingUser ? (
-                                <div className="text-gray-500 text-sm">Carregando usuário...</div>
+                <div className="text-gray-500 text-sm">
+                  Carregando usuário...
+                </div>
               ) : firstUser ? (
                 <>
-                                    <div className="text-2xl font-bold">{firstUser.full_name || "Sem nome"}</div>
+                  <div className="text-2xl font-bold">
+                    {firstUser.full_name || "Sem nome"}
+                  </div>
                   <p className="text-xs text-muted-foreground">
                     {firstUser.email || "Sem e-mail cadastrado"}
                   </p>
                 </>
               ) : (
-                                <div className="text-sm text-gray-500">Nenhum usuário encontrado</div>
+                <div className="text-sm text-gray-500">
+                  Nenhum usuário encontrado
+                </div>
               )}
             </CardContent>
           </Card>
@@ -118,29 +138,40 @@ export default function ManagerDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Ações Rápidas</CardTitle>
-                            <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/manager/home">
-                                <Button className="w-full justify-start">
+                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                                    <User className="mr-2 h-4 w-4" />
+                  <User className="mr-2 h-4 w-4 text-white" />
                   Gestão de Médicos
                 </Button>
               </Link>
               <Link href="/manager/usuario">
-                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
                   <User className="mr-2 h-4 w-4" />
                   Usuários Cadastrados
                 </Button>
               </Link>
               <Link href="/manager/home/novo">
-                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
                   <Plus className="mr-2 h-4 w-4" />
                   Adicionar Novo Médico
                 </Button>
               </Link>
               <Link href="/manager/usuario/novo">
-                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
                   <Plus className="mr-2 h-4 w-4" />
                   Criar novo Usuário
                 </Button>
@@ -152,13 +183,17 @@ export default function ManagerDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Gestão de Médicos</CardTitle>
-                            <CardDescription>Médicos cadastrados recentemente</CardDescription>
+              <CardDescription>
+                Médicos cadastrados recentemente
+              </CardDescription>
             </CardHeader>
             <CardContent>
               {loadingDoctors ? (
                 <p className="text-sm text-gray-500">Carregando médicos...</p>
               ) : doctors.length === 0 ? (
-                                <p className="text-sm text-gray-500">Nenhum médico cadastrado.</p>
+                <p className="text-sm text-gray-500">
+                  Nenhum médico cadastrado.
+                </p>
               ) : (
                 <div className="space-y-4">
                   {doctors.map((doc, index) => (
@@ -167,7 +202,9 @@ export default function ManagerDashboard() {
                       className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-100"
                     >
                       <div>
-                                                <p className="font-medium">{doc.full_name || "Sem nome"}</p>
+                        <p className="font-medium">
+                          {doc.full_name || "Sem nome"}
+                        </p>
                         <p className="text-sm text-gray-600">
                           {doc.specialty || "Sem especialidade"}
                         </p>

app/manager/home/page.tsx

@@ -1,18 +1,37 @@
 "use client";
 
-import React, { useEffect, useState, useCallback, useMemo } from "react"
+import React, { useEffect, useState, useCallback, useMemo } from "react";
-import Link from "next/link"
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+  DropdownMenu,
-import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react"
+  DropdownMenuContent,
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 import { doctorsService } from "services/doctorsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
-
 interface Doctor {
   id: number;
   full_name: string;
@@ -51,7 +70,9 @@ export default function DoctorsPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-    const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(null);
+  const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(
+    null
+  );
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [doctorToDeleteId, setDoctorToDeleteId] = useState<number | null>(null);
 
@@ -70,13 +91,16 @@ export default function DoctorsPage() {
       const data: Doctor[] = await doctorsService.list();
       const dataWithStatus = data.map((doc, index) => ({
         ...doc,
-                status: index % 3 === 0 ? "Inativo" : index % 2 === 0 ? "Férias" : "Ativo",
+        status:
+          index % 3 === 0 ? "Inativo" : index % 2 === 0 ? "Férias" : "Ativo",
       }));
       setDoctors(dataWithStatus || []);
       setCurrentPage(1);
     } catch (e: any) {
       console.error("Erro ao carregar lista de médicos:", e);
-            setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
+      setError(
+        "Não foi possível carregar a lista de médicos. Verifique a conexão com a API."
+      );
       setDoctors([]);
     } finally {
       setLoading(false);
@@ -94,7 +118,10 @@ export default function DoctorsPage() {
       crm: doctor.crm,
       especialidade: doctor.specialty,
       contato: { celular: doctor.phone_mobile ?? undefined },
-            endereco: { cidade: doctor.city ?? undefined, estado: doctor.state ?? undefined },
+      endereco: {
+        cidade: doctor.city ?? undefined,
+        estado: doctor.state ?? undefined,
+      },
       status: doctor.status || "Ativo",
       convenio: "Particular",
       vip: false,
@@ -125,13 +152,17 @@ export default function DoctorsPage() {
   };
 
   const uniqueSpecialties = useMemo(() => {
-        const specialties = doctors.map((doctor) => doctor.specialty).filter(Boolean);
+    const specialties = doctors
+      .map((doctor) => doctor.specialty)
+      .filter(Boolean);
     return [...new Set(specialties)];
   }, [doctors]);
 
   const filteredDoctors = doctors.filter((doctor) => {
-        const specialtyMatch = specialtyFilter === "all" || doctor.specialty === specialtyFilter;
+    const specialtyMatch =
-        const statusMatch = statusFilter === "all" || doctor.status === statusFilter;
+      specialtyFilter === "all" || doctor.specialty === specialtyFilter;
+    const statusMatch =
+      statusFilter === "all" || doctor.status === statusFilter;
     return specialtyMatch && statusMatch;
   });
 
@@ -184,15 +215,21 @@ export default function DoctorsPage() {
         {/* Cabeçalho */}
         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
           <div>
-                        <h1 className="text-2xl font-bold text-gray-900">Médicos Cadastrados</h1>
+            <h1 className="text-2xl font-bold text-gray-900">
-                        <p className="text-sm text-gray-500">Gerencie todos os profissionais de saúde.</p>
+              Médicos Cadastrados
+            </h1>
+            <p className="text-sm text-gray-500">
+              Gerencie todos os profissionais de saúde.
+            </p>
           </div>
         </div>
 
         {/* Filtros e Itens por Página */}
         <div className="flex flex-wrap items-center gap-3 bg-white p-3 sm:p-4 rounded-lg border border-gray-200">
           <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Especialidade</span>
+            <span className="text-sm font-medium text-foreground">
+              Especialidade
+            </span>
             <Select value={specialtyFilter} onValueChange={setSpecialtyFilter}>
               <SelectTrigger className="w-[160px] sm:w-[180px]">
                 <SelectValue placeholder="Especialidade" />
@@ -222,8 +259,13 @@ export default function DoctorsPage() {
             </Select>
           </div>
           <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-foreground">Itens por página</span>
+            <span className="text-sm font-medium text-foreground">
-                        <Select onValueChange={handleItemsPerPageChange} defaultValue={String(itemsPerPage)}>
+              Itens por página
+            </span>
+            <Select
+              onValueChange={handleItemsPerPageChange}
+              defaultValue={String(itemsPerPage)}
+            >
               <SelectTrigger className="w-[140px]">
                 <SelectValue placeholder="Itens por pág." />
               </SelectTrigger>
@@ -251,43 +293,79 @@ export default function DoctorsPage() {
             <div className="p-8 text-center text-red-600">{error}</div>
           ) : filteredDoctors.length === 0 ? (
             <div className="p-8 text-center text-gray-500">
-                            {doctors.length === 0
+              {doctors.length === 0 ? (
-                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</>
+                <>
-                                : "Nenhum médico encontrado com os filtros aplicados."
+                  Nenhum médico cadastrado.{" "}
-                            }
+                  <Link
+                    href="/manager/home/novo"
+                    className="text-green-600 hover:underline"
+                  >
+                    Adicione um novo
+                  </Link>
+                  .
+                </>
+              ) : (
+                "Nenhum médico encontrado com os filtros aplicados."
+              )}
             </div>
           ) : (
             <div className="overflow-x-auto">
               <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">
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">CRM</th>
+                      Nome
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Especialidade</th>
+                    </th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden lg:table-cell">Status</th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden xl:table-cell">Cidade/Estado</th>
+                      CRM
-                                        <th className="text-right p-4 font-medium text-gray-700">Ações</th>
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700">
+                      Especialidade
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden lg:table-cell">
+                      Status
+                    </th>
+                    <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden xl:table-cell">
+                      Cidade/Estado
+                    </th>
+                    <th className="text-right p-4 font-medium text-gray-700">
+                      Ações
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="bg-white divide-y divide-gray-200">
                   {currentItems.map((doctor) => (
                     <tr key={doctor.id} className="hover:bg-gray-50 transition">
-                                            <td className="px-4 py-3 font-medium text-gray-900">{doctor.full_name}</td>
+                      <td className="px-4 py-3 font-medium text-gray-900">
-                                            <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{doctor.crm}</td>
+                        {doctor.full_name}
-                                            <td className="px-4 py-3 text-gray-500 hidden md:table-cell">{doctor.specialty}</td>
+                      </td>
-                                            <td className="px-4 py-3 text-gray-500 hidden lg:table-cell">{doctor.status || "N/A"}</td>
+                      <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">
+                        {doctor.crm}
+                      </td>
+                      <td className="px-4 py-3 text-gray-500 hidden md:table-cell">
+                        {doctor.specialty}
+                      </td>
+                      <td className="px-4 py-3 text-gray-500 hidden lg:table-cell">
+                        {doctor.status || "N/A"}
+                      </td>
                       <td className="px-4 py-3 text-gray-500 hidden xl:table-cell">
-                                                {(doctor.city || doctor.state)
+                        {doctor.city || doctor.state
-                                                    ? `${doctor.city || ""}${doctor.city && doctor.state ? '/' : ''}${doctor.state || ""}`
+                          ? `${doctor.city || ""}${
+                              doctor.city && doctor.state ? "/" : ""
+                            }${doctor.state || ""}`
                           : "N/A"}
                       </td>
                       <td className="px-4 py-3 text-right">
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                                                        <div className="text-blue-600 cursor-pointer inline-block">Ações</div>
+                            <div className="text-blue-600 cursor-pointer inline-block">
+                              Ações
+                            </div>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
-                                                        <DropdownMenuItem onClick={() => openDetailsDialog(doctor)}>
+                            <DropdownMenuItem
+                              onClick={() => openDetailsDialog(doctor)}
+                            >
                               <Eye className="mr-2 h-4 w-4" />
                               Ver detalhes
                             </DropdownMenuItem>
@@ -301,7 +379,10 @@ export default function DoctorsPage() {
                               <Calendar className="mr-2 h-4 w-4" />
                               Marcar consulta
                             </DropdownMenuItem>
-                                                        <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}>
+                            <DropdownMenuItem
+                              className="text-red-600"
+                              onClick={() => openDeleteDialog(doctor.id)}
+                            >
                               <Trash2 className="mr-2 h-4 w-4" />
                               Excluir
                             </DropdownMenuItem>
@@ -327,25 +408,46 @@ export default function DoctorsPage() {
             <div className="p-8 text-center text-red-600">{error}</div>
           ) : filteredDoctors.length === 0 ? (
             <div className="p-8 text-center text-gray-500">
-                            {doctors.length === 0
+              {doctors.length === 0 ? (
-                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</>
+                <>
-                                : "Nenhum médico encontrado com os filtros aplicados."
+                  Nenhum médico cadastrado.{" "}
-                            }
+                  <Link
+                    href="/manager/home/novo"
+                    className="text-green-600 hover:underline"
+                  >
+                    Adicione um novo
+                  </Link>
+                  .
+                </>
+              ) : (
+                "Nenhum médico encontrado com os filtros aplicados."
+              )}
             </div>
           ) : (
             <div className="space-y-4">
               {currentItems.map((doctor) => (
-                                <div key={doctor.id} className="bg-white-50 rounded-lg p-4 flex justify-between items-center border border-white-200">
+                <div
+                  key={doctor.id}
+                  className="bg-white-50 rounded-lg p-4 flex justify-between items-center border border-white-200"
+                >
                   <div>
-                                        <div className="font-semibold text-gray-900">{doctor.full_name}</div>
+                    <div className="font-semibold text-gray-900">
-                                        <div className="text-sm text-gray-600">{doctor.specialty}</div>
+                      {doctor.full_name}
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      {doctor.specialty}
+                    </div>
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                                            <div className="text-blue-600 cursor-pointer inline-block">Ações</div>
+                      <div className="text-blue-600 cursor-pointer inline-block">
+                        Ações
+                      </div>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                                            <DropdownMenuItem onClick={() => openDetailsDialog(doctor)}>
+                      <DropdownMenuItem
+                        onClick={() => openDetailsDialog(doctor)}
+                      >
                         <Eye className="mr-2 h-4 w-4" />
                         Ver detalhes
                       </DropdownMenuItem>
@@ -359,7 +461,10 @@ export default function DoctorsPage() {
                         <Calendar className="mr-2 h-4 w-4" />
                         Marcar consulta
                       </DropdownMenuItem>
-                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}>
+                      <DropdownMenuItem
+                        className="text-red-600"
+                        onClick={() => openDeleteDialog(doctor.id)}
+                      >
                         <Trash2 className="mr-2 h-4 w-4" />
                         Excluir
                       </DropdownMenuItem>
@@ -388,7 +493,7 @@ export default function DoctorsPage() {
                 onClick={() => paginate(number)}
                 className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
                   currentPage === number
-                                        ? "bg-green-600 text-white shadow-md border-green-600"
+                    ? "bg-blue-600 text-white shadow-md border-blue-600"
                     : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                 }`}
               >
@@ -411,62 +516,91 @@ export default function DoctorsPage() {
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle>
-                            <AlertDialogDescription>Esta ação é irreversível e excluirá permanentemente o registro deste médico.</AlertDialogDescription>
+              <AlertDialogDescription>
+                Esta ação é irreversível e excluirá permanentemente o registro
+                deste médico.
+              </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
               <AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700" disabled={loading}>
+              <AlertDialogAction
-                                {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+                onClick={handleDelete}
+                className="bg-red-600 hover:bg-red-700"
+                disabled={loading}
+              >
+                {loading ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : null}
                 Excluir
               </AlertDialogAction>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
 
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
           <AlertDialogContent className="max-w-[95%] sm:max-w-lg">
             <AlertDialogHeader>
-                            <AlertDialogTitle className="text-2xl">{doctorDetails?.nome}</AlertDialogTitle>
+              <AlertDialogTitle className="text-2xl">
+                {doctorDetails?.nome}
+              </AlertDialogTitle>
               <AlertDialogDescription className="text-left text-gray-700">
                 {doctorDetails && (
                   <div className="space-y-3 text-left">
-                                        <h3 className="font-semibold mt-2">Informações Principais</h3>
+                    <h3 className="font-semibold mt-2">
+                      Informações Principais
+                    </h3>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
                       <div>
                         <strong>CRM:</strong> {doctorDetails.crm}
                       </div>
                       <div>
-                                                <strong>Especialidade:</strong> {doctorDetails.especialidade}
+                        <strong>Especialidade:</strong>{" "}
+                        {doctorDetails.especialidade}
                       </div>
                       <div>
-                                                <strong>Celular:</strong> {doctorDetails.contato.celular || "N/A"}
+                        <strong>Celular:</strong>{" "}
+                        {doctorDetails.contato.celular || "N/A"}
                       </div>
                       <div>
-                                                <strong>Localização:</strong> {`${doctorDetails.endereco.cidade || "N/A"}/${doctorDetails.endereco.estado || "N/A"}`}
+                        <strong>Localização:</strong>{" "}
+                        {`${doctorDetails.endereco.cidade || "N/A"}/${
+                          doctorDetails.endereco.estado || "N/A"
+                        }`}
                       </div>
                     </div>
 
-                                        <h3 className="font-semibold mt-4">Atendimento e Convênio</h3>
+                    <h3 className="font-semibold mt-4">
+                      Atendimento e Convênio
+                    </h3>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
                       <div>
-                                                <strong>Convênio:</strong> {doctorDetails.convenio || "N/A"}
+                        <strong>Convênio:</strong>{" "}
+                        {doctorDetails.convenio || "N/A"}
                       </div>
                       <div>
-                                                <strong>VIP:</strong> {doctorDetails.vip ? "Sim" : "Não"}
+                        <strong>VIP:</strong>{" "}
+                        {doctorDetails.vip ? "Sim" : "Não"}
                       </div>
                       <div>
                         <strong>Status:</strong> {doctorDetails.status || "N/A"}
                       </div>
                       <div>
-                                                <strong>Último atendimento:</strong> {doctorDetails.ultimo_atendimento || "N/A"}
+                        <strong>Último atendimento:</strong>{" "}
+                        {doctorDetails.ultimo_atendimento || "N/A"}
                       </div>
                       <div>
-                                                <strong>Próximo atendimento:</strong> {doctorDetails.proximo_atendimento || "N/A"}
+                        <strong>Próximo atendimento:</strong>{" "}
+                        {doctorDetails.proximo_atendimento || "N/A"}
                       </div>
                     </div>
                   </div>
                 )}
-                                {doctorDetails === null && !loading && <div className="text-red-600">Detalhes não disponíveis.</div>}
+                {doctorDetails === null && !loading && (
+                  <div className="text-red-600">Detalhes não disponíveis.</div>
+                )}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>

app/manager/pacientes/page.tsx

@@ -3,10 +3,30 @@
 import { useState, useEffect, 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 {
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } 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 { patientsService } from "@/services/patientsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
@@ -46,8 +66,7 @@ export default function PacientesPage() {
   // --- FUNÇÕES DE LÓGICA ---
 
   // 1. Função para carregar TODOS os pacientes da API
-    const fetchAllPacientes = useCallback(
+  const fetchAllPacientes = useCallback(async () => {
-        async () => {
     setLoading(true);
     setError(null);
     try {
@@ -61,8 +80,8 @@ export default function PacientesPage() {
         cidade: p.city ?? "—",
         estado: p.state ?? "—",
         // Formate as datas se necessário, aqui usamos como string
-                    ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—", 
+        ultimoAtendimento: p.last_visit_at?.split("T")[0] ?? "—",
-                    proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+        proximoAtendimento: p.next_appointment_at?.split("T")[0] ?? "—",
         vip: Boolean(p.vip ?? false),
         convenio: p.convenio ?? "Particular", // Define um valor padrão
         status: p.status ?? undefined,
@@ -75,9 +94,7 @@ export default function PacientesPage() {
     } finally {
       setLoading(false);
     }
-        },
+  }, []);
-        []
-    );
 
   // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
   useEffect(() => {
@@ -89,8 +106,7 @@ export default function PacientesPage() {
 
       // Filtro por Convênio
       const matchesConvenio =
-                convenioFilter === "all" || 
+        convenioFilter === "all" || patient.convenio === convenioFilter;
-                patient.convenio === convenioFilter;
 
       // Filtro por VIP
       const matchesVip =
@@ -112,7 +128,6 @@ export default function PacientesPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
 
   const openDetailsDialog = async (patientId: string) => {
@@ -130,9 +145,11 @@ export default function PacientesPage() {
     try {
       await patientsService.delete(patientId);
       // Atualiza a lista completa para refletir a exclusão
-            setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
+      setAllPatients((prev) =>
+        prev.filter((p) => String(p.id) !== String(patientId))
+      );
     } catch (e: any) {
-            alert(`Erro ao deletar paciente: ${e?.message || 'Erro desconhecido'}`);
+      alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
     }
     setDeleteDialogOpen(false);
     setPatientToDelete(null);
@@ -149,8 +166,12 @@ export default function PacientesPage() {
         {/* Header (Responsividade OK) */}
         <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>
+            <h1 className="text-xl md:text-2xl font-bold text-foreground">
-                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+              Pacientes
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Gerencie as informações de seus pacientes
+            </p>
           </div>
         </div>
 
@@ -171,9 +192,13 @@ export default function PacientesPage() {
 
           {/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */}
           <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">Convênio</span>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+              Convênio
+            </span>
             <Select value={convenioFilter} onValueChange={setConvenioFilter}>
-                            <SelectTrigger className="w-full sm:w-40"> {/* w-full para mobile, w-40 para sm+ */}
+              <SelectTrigger className="w-full sm:w-40">
+                {" "}
+                {/* w-full para mobile, w-40 para sm+ */}
                 <SelectValue placeholder="Convênio" />
               </SelectTrigger>
               <SelectContent>
@@ -188,9 +213,13 @@ export default function PacientesPage() {
 
           {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
           <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+              VIP
+            </span>
             <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
+              <SelectTrigger className="w-full sm:w-32">
+                {" "}
+                {/* w-full para mobile, w-32 para sm+ */}
                 <SelectValue placeholder="VIP" />
               </SelectTrigger>
               <SelectContent>
@@ -211,69 +240,115 @@ export default function PacientesPage() {
         {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
         {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
         <div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
-                    <div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */}
+          <div className="overflow-x-auto">
+            {" "}
+            {/* Permite rolagem horizontal se a tabela for muito larga */}
             {error ? (
               <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
             ) : loading ? (
               <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
+                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+                Carregando pacientes...
               </div>
             ) : (
-                            <table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */}
+              <table className="w-full min-w-[650px]">
+                {" "}
+                {/* min-w para evitar que a tabela se contraia demais */}
                 <thead className="bg-gray-50 border-b border-gray-200">
                   <tr>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[20%]">
+                      Nome
+                    </th>
                     {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
+                      Telefone
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
+                    </th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
+                      Cidade / Estado
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
+                      Convênio
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                      Último atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                      Próximo atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[5%]">
+                      Ações
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
                   {currentPatients.length === 0 ? (
                     <tr>
                       <td colSpan={7} className="p-8 text-center text-gray-500">
-                                                {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
+                        {allPatients.length === 0
+                          ? "Nenhum paciente cadastrado"
+                          : "Nenhum paciente encontrado com os filtros aplicados"}
                       </td>
                     </tr>
                   ) : (
                     currentPatients.map((patient) => (
-                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <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-green-100 rounded-full flex items-center justify-center">
+                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                                                            <span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
+                              <span className="text-blue-600 font-medium text-sm">
+                                {patient.nome?.charAt(0) || "?"}
+                              </span>
                             </div>
+
                             <span className="font-medium text-gray-900">
                               {patient.nome}
                               {patient.vip && (
-                                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
+                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                                  VIP
+                                </span>
                               )}
                             </span>
                           </div>
                         </td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
+                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                          {patient.telefone}
+                        </td>
                         <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
+                        <td className="p-4 text-gray-600 hidden sm:table-cell">
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
+                          {patient.convenio}
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
+                        </td>
+                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                          {patient.ultimoAtendimento}
+                        </td>
+                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                          {patient.proximoAtendimento}
+                        </td>
 
                         <td className="p-4">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                                            <div className="text-blue-600 cursor-pointer">Ações</div>
+                              <div className="text-blue-600 cursor-pointer">
+                                Ações
+                              </div>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
+                              <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`} className="flex items-center w-full">
+                                <Link
+                                  href={`/secretary/pacientes/${patient.id}/editar`}
+                                  className="flex items-center w-full"
+                                >
                                   <Edit className="w-4 h-4 mr-2" />
                                   Editar
                                 </Link>
@@ -283,7 +358,12 @@ export default function PacientesPage() {
                                 <Calendar className="w-4 h-4 mr-2" />
                                 Marcar consulta
                               </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
+                              <DropdownMenuItem
+                                className="text-red-600"
+                                onClick={() =>
+                                  openDeleteDialog(String(patient.id))
+                                }
+                              >
                                 <Trash2 className="w-4 h-4 mr-2" />
                                 Excluir
                               </DropdownMenuItem>
@@ -306,38 +386,59 @@ export default function PacientesPage() {
             <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
           ) : loading ? (
             <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                            <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
+              <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+              Carregando pacientes...
             </div>
           ) : filteredPatients.length === 0 ? (
             <div className="p-8 text-center text-gray-500">
-                            {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
+              {allPatients.length === 0
+                ? "Nenhum paciente cadastrado"
+                : "Nenhum paciente encontrado com os filtros aplicados"}
             </div>
           ) : (
             <div className="space-y-4">
               {currentPatients.map((patient) => (
-                                <div key={patient.id} className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200">
+                <div
+                  key={patient.id}
+                  className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200"
+                >
                   <div className="flex-grow mb-2 sm:mb-0">
                     <div className="font-semibold text-lg text-gray-900 flex items-center">
                       {patient.nome}
                       {patient.vip && (
-                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
+                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                          VIP
+                        </span>
                       )}
                     </div>
-                                        <div className="text-sm text-gray-600">Telefone: {patient.telefone}</div>
+                    <div className="text-sm text-gray-600">
-                                        <div className="text-sm text-gray-600">Convênio: {patient.convenio}</div>
+                      Telefone: {patient.telefone}
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      Convênio: {patient.convenio}
+                    </div>
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                                                            <div  className="w-full"><Button variant="outline" className="w-full">Ações</Button></div>
+                      <div className="w-full">
+                        <Button variant="outline" className="w-full">
+                          Ações
+                        </Button>
+                      </div>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
+                      <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`} className="flex items-center w-full">
+                        <Link
+                          href={`/secretary/pacientes/${patient.id}/editar`}
+                          className="flex items-center w-full"
+                        >
                           <Edit className="w-4 h-4 mr-2" />
                           Editar
                         </Link>
@@ -347,7 +448,10 @@ export default function PacientesPage() {
                         <Calendar className="w-4 h-4 mr-2" />
                         Marcar consulta
                       </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
+                      <DropdownMenuItem
+                        className="text-red-600"
+                        onClick={() => openDeleteDialog(String(patient.id))}
+                      >
                         <Trash2 className="w-4 h-4 mr-2" />
                         Excluir
                       </DropdownMenuItem>
@@ -362,7 +466,9 @@ export default function PacientesPage() {
         {/* Paginação */}
         {totalPages > 1 && !loading && (
           <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
-                        <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
+            <div className="flex space-x-2 flex-wrap justify-center">
+              {" "}
+              {/* Adicionado flex-wrap e justify-center para botões da paginação */}
               <Button
                 onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                 disabled={page === 1}
@@ -371,7 +477,6 @@ export default function PacientesPage() {
               >
                 &lt; Anterior
               </Button>
-
               {Array.from({ length: totalPages }, (_, index) => index + 1)
                 .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
                 .map((pageNumber) => (
@@ -380,14 +485,19 @@ export default function PacientesPage() {
                     onClick={() => setPage(pageNumber)}
                     variant={pageNumber === page ? "default" : "outline"}
                     size="lg"
-                                        className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"}
+                    className={
+                      pageNumber === page
+                        ? "bg-blue-600 hover:bg-blue-700 text-white"
+                        : "text-gray-700"
+                    }
                   >
                     {pageNumber}
                   </Button>
                 ))}
-
               <Button
-                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                onClick={() =>
+                  setPage((prev) => Math.min(totalPages, prev + 1))
+                }
                 disabled={page === totalPages}
                 variant="outline"
                 size="lg"
@@ -403,18 +513,29 @@ export default function PacientesPage() {
           <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 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">
+              <AlertDialogAction
+                onClick={() =>
+                  patientToDelete && handleDeletePatient(patientToDelete)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
                 Excluir
               </AlertDialogAction>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
 
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>

app/manager/usuario/page.tsx

@@ -3,9 +3,23 @@
 import React, { useEffect, useState, useCallback } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Plus, Eye, Filter, Loader2 } from "lucide-react";
-import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { api, login } from "services/api.mjs";
 import { usersService } from "services/usersApi.mjs";
 import Sidebar from "@/components/Sidebar";
@@ -31,9 +45,7 @@ export default function UsersPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-    const [userDetails, setUserDetails] = useState<UserInfoResponse | null>(
+  const [userDetails, setUserDetails] = useState<UserInfoResponse | null>(null);
-        null
-    );
   const [selectedRole, setSelectedRole] = useState<string>("all");
 
   // --- Lógica de Paginação INÍCIO ---
@@ -166,7 +178,6 @@ export default function UsersPage() {
   return (
     <Sidebar>
       <div className="space-y-6 px-2 sm:px-4 md:px-8">
-
         {/* Header */}
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div>
@@ -174,7 +185,7 @@ export default function UsersPage() {
             <p className="text-sm text-gray-500">Gerencie usuários.</p>
           </div>
           <Link href="/manager/usuario/novo" className="w-full sm:w-auto">
-                        <Button className="w-full sm:w-auto bg-green-600 hover:bg-green-700">
+            <Button className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700">
               <Plus className="w-4 h-4 mr-2" /> Novo Usuário
             </Button>
           </Link>
@@ -182,7 +193,6 @@ export default function UsersPage() {
 
         {/* Filtro e Itens por Página */}
         <div className="flex flex-wrap items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
-
           {/* Select de Filtro por Papel - Ajustado para resetar a página */}
           <div className="flex items-center gap-2 w-full md:w-auto">
             <span className="text-sm font-medium text-foreground whitespace-nowrap">
@@ -193,9 +203,11 @@ export default function UsersPage() {
                 setSelectedRole(value);
                 setCurrentPage(1);
               }}
-                            value={selectedRole}>
+              value={selectedRole}
-
+            >
-                            <SelectTrigger className="w-full sm:w-[180px]"> {/* w-full para mobile, w-[180px] para sm+ */}
+              <SelectTrigger className="w-full sm:w-[180px]">
+                {" "}
+                {/* w-full para mobile, w-[180px] para sm+ */}
                 <SelectValue placeholder="Filtrar por papel" />
               </SelectTrigger>
               <SelectContent>
@@ -218,7 +230,9 @@ export default function UsersPage() {
               onValueChange={handleItemsPerPageChange}
               defaultValue={String(itemsPerPage)}
             >
-                            <SelectTrigger className="w-full sm:w-[140px]"> {/* w-full para mobile, w-[140px] para sm+ */}
+              <SelectTrigger className="w-full sm:w-[140px]">
+                {" "}
+                {/* w-full para mobile, w-[140px] para sm+ */}
                 <SelectValue placeholder="Itens por pág." />
               </SelectTrigger>
               <SelectContent>
@@ -254,11 +268,21 @@ export default function UsersPage() {
               <table className="min-w-full divide-y divide-gray-200 hidden md:table">
                 <thead className="bg-gray-50">
                   <tr>
-                                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">E-mail</th>
+                      Nome
-                                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Telefone</th>
+                    </th>
-                                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cargo</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                                        <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Ações</th>
+                      E-mail
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Telefone
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Cargo
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                      Ações
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="bg-white divide-y divide-gray-200">
@@ -294,7 +318,10 @@ export default function UsersPage() {
               {/* Layout em Cards/Lista para Telas Pequenas */}
               <div className="md:hidden divide-y divide-gray-200">
                 {currentItems.map((u) => (
-                                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-gray-50">
+                  <div
+                    key={u.id}
+                    className="flex items-center justify-between p-4 hover:bg-gray-50"
+                  >
                     <div className="flex-1 min-w-0">
                       <div className="text-sm font-medium text-gray-900 truncate">
                         {u.full_name || "—"}
@@ -320,7 +347,6 @@ export default function UsersPage() {
               {/* Paginação */}
               {totalPages > 1 && (
                 <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t border-gray-200">
-
                   {/* Botão Anterior */}
                   <button
                     onClick={goToPrevPage}
@@ -335,8 +361,9 @@ export default function UsersPage() {
                     <button
                       key={number}
                       onClick={() => paginate(number)}
-                                            className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${currentPage === number
+                      className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
-                                                ? "bg-green-600 text-white shadow-md border-green-600"
+                        currentPage === number
+                          ? "bg-blue-600 text-white shadow-md border-blue-600"
                           : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                       }`}
                     >
@@ -352,7 +379,6 @@ export default function UsersPage() {
                   >
                     {"Próximo >"}
                   </button>
-
                 </div>
               )}
             </>
@@ -360,7 +386,10 @@ export default function UsersPage() {
         </div>
 
         {/* Modal de Detalhes */}
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle className="text-2xl">
@@ -388,19 +417,25 @@ export default function UsersPage() {
                       <strong>Telefone:</strong> {userDetails.profile.phone}
                     </div>
                     <div>
-                                            <strong>Roles:</strong>{" "}
+                      <strong>Roles:</strong> {userDetails.roles?.join(", ")}
-                                            {userDetails.roles?.join(", ")}
                     </div>
                     <div className="pt-2">
                       <strong className="block mb-1">Permissões:</strong>
                       <ul className="list-disc list-inside space-y-0.5 text-sm">
-                                                {Object.entries(
+                        {Object.entries(userDetails.permissions || {}).map(
-                                                    userDetails.permissions || {}
+                          ([k, v]) => (
-                                                ).map(([k, v]) => (
                             <li key={k}>
-                                                        {k}: <span className={`font-semibold ${v ? 'text-green-600' : 'text-red-600'}`}>{v ? "Sim" : "Não"}</span>
+                              {k}:{" "}
+                              <span
+                                className={`font-semibold ${
+                                  v ? "text-green-600" : "text-red-600"
+                                }`}
+                              >
+                                {v ? "Sim" : "Não"}
+                              </span>
                             </li>
-                                                ))}
+                          )
+                        )}
                       </ul>
                     </div>
                   </div>

app/patient/dashboard/page.tsx

@@ -1,8 +1,14 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
-import { Button } from "@/components/ui/button"
+  Card,
-import { Calendar, Clock, User, Plus } from "lucide-react"
+  CardContent,
-import Link from "next/link"
+  CardDescription,
-import Sidebar from "@/components/Sidebar"
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Calendar, Clock, User, Plus } from "lucide-react";
+import Link from "next/link";
+import Sidebar from "@/components/Sidebar";
 
 export default function PatientDashboard() {
   return (
@@ -10,13 +16,17 @@ export default function PatientDashboard() {
       <div className="space-y-6">
         <div>
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
+          <p className="text-gray-600">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Próxima Consulta
+              </CardTitle>
               <Calendar className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
@@ -27,12 +37,16 @@ export default function PatientDashboard() {
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Consultas Este Mês
+              </CardTitle>
               <Clock className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold">3</div>
-              <p className="text-xs text-muted-foreground">2 realizadas, 1 agendada</p>
+              <p className="text-xs text-muted-foreground">
+                2 realizadas, 1 agendada
+              </p>
             </CardContent>
           </Card>
 
@@ -52,23 +66,31 @@ export default function PatientDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Ações Rápidas</CardTitle>
-              <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/patient/schedule">
-                <Button className="w-full justify-start">
+                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                  <Plus className="mr-2 h-4 w-4" />
+                  <User className="mr-2 h-4 w-4 text-white" />
                   Agendar Nova Consulta
                 </Button>
               </Link>
               <Link href="/patient/appointments">
-                <Button variant="outline" className="w-full justify-start bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
                   <Calendar className="mr-2 h-4 w-4" />
                   Ver Minhas Consultas
                 </Button>
               </Link>
               <Link href="/patient/profile">
-                <Button variant="outline" className="w-full justify-start bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
                   <User className="mr-2 h-4 w-4" />
                   Atualizar Dados
                 </Button>
@@ -109,5 +131,5 @@ export default function PatientDashboard() {
         </div>
       </div>
     </Sidebar>
-  )
+  );
 }

app/patient/profile/page.tsx

@@ -31,8 +31,12 @@ interface PatientProfileData {
 }
 
 export default function PatientProfile() {
-    const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"] });
+  const { user, isLoading: isAuthLoading } = useAuthLayout({
-    const [patientData, setPatientData] = useState<PatientProfileData | null>(null);
+    requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
+  });
+  const [patientData, setPatientData] = useState<PatientProfileData | null>(
+    null
+  );
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -56,14 +60,21 @@ export default function PatientProfile() {
           });
         } catch (error) {
           console.error("Erro ao buscar detalhes do paciente:", error);
-                    toast({ title: "Erro", description: "Não foi possível carregar seus dados completos.", variant: "destructive" });
+          toast({
+            title: "Erro",
+            description: "Não foi possível carregar seus dados completos.",
+            variant: "destructive",
+          });
         }
       };
       fetchPatientDetails();
     }
   }, [user]);
 
-    const handleInputChange = (field: keyof PatientProfileData, value: string) => {
+  const handleInputChange = (
+    field: keyof PatientProfileData,
+    value: string
+  ) => {
     setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
   };
 
@@ -82,11 +93,18 @@ export default function PatientProfile() {
         city: patientData.city,
       };
       await patientsService.update(user.id, patientPayload);
-            toast({ title: "Sucesso!", description: "Seus dados foram atualizados." });
+      toast({
+        title: "Sucesso!",
+        description: "Seus dados foram atualizados.",
+      });
       setIsEditing(false);
     } catch (error) {
       console.error("Erro ao salvar dados:", error);
-            toast({ title: "Erro", description: "Não foi possível salvar suas alterações.", variant: "destructive" });
+      toast({
+        title: "Erro",
+        description: "Não foi possível salvar suas alterações.",
+        variant: "destructive",
+      });
     } finally {
       setIsSaving(false);
     }
@@ -96,7 +114,9 @@ export default function PatientProfile() {
     fileInputRef.current?.click();
   };
 
-    const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAvatarUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const file = event.target.files?.[0];
     if (!file || !user) return;
 
@@ -108,15 +128,26 @@ export default function PatientProfile() {
 
     try {
       await api.storage.upload("avatars", filePath, file);
-            await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, { avatar_url: filePath });
+      await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, {
+        avatar_url: filePath,
+      });
 
       const newFullUrl = `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${filePath}?t=${new Date().getTime()}`;
-            setPatientData((prev) => (prev ? { ...prev, avatarFullUrl: newFullUrl } : null));
+      setPatientData((prev) =>
+        prev ? { ...prev, avatarFullUrl: newFullUrl } : null
+      );
 
-            toast({ title: "Sucesso!", description: "Sua foto de perfil foi atualizada." });
+      toast({
+        title: "Sucesso!",
+        description: "Sua foto de perfil foi atualizada.",
+      });
     } catch (error) {
       console.error("Erro no upload do avatar:", error);
-            toast({ title: "Erro de Upload", description: "Não foi possível enviar sua foto.", variant: "destructive" });
+      toast({
+        title: "Erro de Upload",
+        description: "Não foi possível enviar sua foto.",
+        variant: "destructive",
+      });
     }
   };
 
@@ -136,8 +167,16 @@ export default function PatientProfile() {
             <h1 className="text-3xl font-bold text-gray-900">Meus Dados</h1>
             <p className="text-gray-600">Gerencie suas informações pessoais</p>
           </div>
-                    <Button onClick={() => (isEditing ? handleSave() : setIsEditing(true))} disabled={isSaving}>
+          <Button
-                        {isEditing ? (isSaving ? "Salvando..." : "Salvar Alterações") : "Editar Dados"}
+            onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
+            disabled={isSaving}
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            {isEditing
+              ? isSaving
+                ? "Salvando..."
+                : "Salvar Alterações"
+              : "Editar Dados"}
           </Button>
         </div>
 
@@ -154,16 +193,36 @@ export default function PatientProfile() {
                 <div className="grid md:grid-cols-2 gap-4">
                   <div>
                     <Label htmlFor="name">Nome Completo</Label>
-                                        <Input id="name" value={patientData.name} onChange={(e) => handleInputChange("name", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="name"
+                      value={patientData.name}
+                      onChange={(e) =>
+                        handleInputChange("name", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
                   </div>
                   <div>
                     <Label htmlFor="cpf">CPF</Label>
-                                        <Input id="cpf" value={patientData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="cpf"
+                      value={patientData.cpf}
+                      onChange={(e) => handleInputChange("cpf", e.target.value)}
+                      disabled={!isEditing}
+                    />
                   </div>
                 </div>
                 <div>
                   <Label htmlFor="birthDate">Data de Nascimento</Label>
-                                    <Input id="birthDate" type="date" value={patientData.birthDate} onChange={(e) => handleInputChange("birthDate", e.target.value)} disabled={!isEditing} />
+                  <Input
+                    id="birthDate"
+                    type="date"
+                    value={patientData.birthDate}
+                    onChange={(e) =>
+                      handleInputChange("birthDate", e.target.value)
+                    }
+                    disabled={!isEditing}
+                  />
                 </div>
               </CardContent>
             </Card>
@@ -178,31 +237,69 @@ export default function PatientProfile() {
                 <div className="grid md:grid-cols-2 gap-4">
                   <div>
                     <Label htmlFor="email">Email</Label>
-                                        <Input id="email" type="email" value={patientData.email} disabled />
+                    <Input
+                      id="email"
+                      type="email"
+                      value={patientData.email}
+                      disabled
+                    />
                   </div>
                   <div>
                     <Label htmlFor="phone">Telefone</Label>
-                                        <Input id="phone" value={patientData.phone} onChange={(e) => handleInputChange("phone", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="phone"
+                      value={patientData.phone}
+                      onChange={(e) =>
+                        handleInputChange("phone", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
                   </div>
                 </div>
                 <div className="grid md:grid-cols-3 gap-4">
                   <div>
                     <Label htmlFor="cep">CEP</Label>
-                                        <Input id="cep" value={patientData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="cep"
+                      value={patientData.cep}
+                      onChange={(e) => handleInputChange("cep", e.target.value)}
+                      disabled={!isEditing}
+                    />
                   </div>
                   <div className="md:col-span-2">
                     <Label htmlFor="street">Rua / Logradouro</Label>
-                                        <Input id="street" value={patientData.street} onChange={(e) => handleInputChange("street", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="street"
+                      value={patientData.street}
+                      onChange={(e) =>
+                        handleInputChange("street", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
                   </div>
                 </div>
                 <div className="grid md:grid-cols-2 gap-4">
                   <div>
                     <Label htmlFor="number">Número</Label>
-                                        <Input id="number" value={patientData.number} onChange={(e) => handleInputChange("number", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="number"
+                      value={patientData.number}
+                      onChange={(e) =>
+                        handleInputChange("number", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
                   </div>
                   <div>
                     <Label htmlFor="city">Cidade</Label>
-                                        <Input id="city" value={patientData.city} onChange={(e) => handleInputChange("city", e.target.value)} disabled={!isEditing} />
+                    <Input
+                      id="city"
+                      value={patientData.city}
+                      onChange={(e) =>
+                        handleInputChange("city", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
                   </div>
                 </div>
               </CardContent>
@@ -217,7 +314,10 @@ export default function PatientProfile() {
               <CardContent className="space-y-4">
                 <div className="flex items-center space-x-3">
                   <div className="relative">
-                                        <Avatar className="w-16 h-16 cursor-pointer" onClick={handleAvatarClick}>
+                    <Avatar
+                      className="w-16 h-16 cursor-pointer"
+                      onClick={handleAvatarClick}
+                    >
                       <AvatarImage src={patientData.avatarFullUrl} />
                       <AvatarFallback className="text-2xl">
                         {patientData.name
@@ -226,10 +326,19 @@ export default function PatientProfile() {
                           .join("")}
                       </AvatarFallback>
                     </Avatar>
-                                        <div className="absolute bottom-0 right-0 bg-primary text-primary-foreground rounded-full p-1 cursor-pointer hover:bg-primary/80" onClick={handleAvatarClick}>
+                    <div
+                      className="absolute bottom-0 right-0 bg-primary text-primary-foreground rounded-full p-1 cursor-pointer hover:bg-primary/80"
+                      onClick={handleAvatarClick}
+                    >
                       <Upload className="w-3 h-3" />
                     </div>
-                                        <input type="file" ref={fileInputRef} onChange={handleAvatarUpload} className="hidden" accept="image/png, image/jpeg" />
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      onChange={handleAvatarUpload}
+                      className="hidden"
+                      accept="image/png, image/jpeg"
+                    />
                   </div>
                   <div>
                     <p className="font-medium">{patientData.name}</p>
@@ -247,7 +356,14 @@ export default function PatientProfile() {
                   </div>
                   <div className="flex items-center text-sm">
                     <Calendar className="mr-2 h-4 w-4 text-gray-500" />
-                                        <span>{patientData.birthDate ? new Date(patientData.birthDate).toLocaleDateString("pt-BR", { timeZone: "UTC" }) : "Não informado"}</span>
+                    <span>
+                      {patientData.birthDate
+                        ? new Date(patientData.birthDate).toLocaleDateString(
+                            "pt-BR",
+                            { timeZone: "UTC" }
+                          )
+                        : "Não informado"}
+                    </span>
                   </div>
                 </div>
               </CardContent>

app/secretary/appointments/page.tsx

@@ -1,11 +1,25 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Dialog } from "@/components/ui/dialog";
-import { Calendar, Clock, MapPin, Phone, User, Trash2, Pencil } from "lucide-react";
+import {
+  Calendar,
+  Clock,
+  MapPin,
+  Phone,
+  User,
+  Trash2,
+  Pencil,
+} from "lucide-react";
 import { toast } from "sonner";
 import Link from "next/link";
 import { appointmentsService } from "@/services/appointmentsApi.mjs";
@@ -34,7 +48,7 @@ export default function SecretaryAppointments() {
     try {
       // 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
       // 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
-            const queryParams = 'order=scheduled_at.desc';
+      const queryParams = "order=scheduled_at.desc";
 
       const [appointmentList, patientList, doctorList] = await Promise.all([
         // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
@@ -48,8 +62,13 @@ export default function SecretaryAppointments() {
 
       const enrichedAppointments = appointmentList.map((apt: any) => ({
         ...apt,
-                patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
+        patient: patientMap.get(apt.patient_id) || {
-                doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
+          full_name: "Paciente não encontrado",
+        },
+        doctor: doctorMap.get(apt.doctor_id) || {
+          full_name: "Médico não encontrado",
+          specialty: "N/A",
+        },
       }));
 
       setAppointments(enrichedAppointments);
@@ -71,21 +90,32 @@ export default function SecretaryAppointments() {
     const appointmentDate = new Date(appointment.scheduled_at);
 
     setEditFormData({
-            date: appointmentDate.toISOString().split('T')[0],
+      date: appointmentDate.toISOString().split("T")[0],
-            time: appointmentDate.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }),
+      time: appointmentDate.toLocaleTimeString("pt-BR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: "UTC",
+      }),
       status: appointment.status,
     });
     setEditModal(true);
   };
 
   const confirmEdit = async () => {
-        if (!selectedAppointment || !editFormData.date || !editFormData.time || !editFormData.status) {
+    if (
+      !selectedAppointment ||
+      !editFormData.date ||
+      !editFormData.time ||
+      !editFormData.status
+    ) {
       toast.error("Todos os campos são obrigatórios para a edição.");
       return;
     }
 
     try {
-            const newScheduledAt = new Date(`${editFormData.date}T${editFormData.time}:00Z`).toISOString();
+      const newScheduledAt = new Date(
+        `${editFormData.date}T${editFormData.time}:00Z`
+      ).toISOString();
       const updatePayload = {
         scheduled_at: newScheduledAt,
         status: editFormData.status,
@@ -99,7 +129,6 @@ export default function SecretaryAppointments() {
 
       setEditModal(false);
       toast.success("Consulta atualizada com sucesso!");
-
     } catch (error) {
       console.error("Erro ao atualizar consulta:", error);
       toast.error("Não foi possível atualizar a consulta.");
@@ -116,7 +145,9 @@ export default function SecretaryAppointments() {
     if (!selectedAppointment) return;
     try {
       await appointmentsService.delete(selectedAppointment.id);
-            setAppointments((prev) => prev.filter((apt) => apt.id !== selectedAppointment.id));
+      setAppointments((prev) =>
+        prev.filter((apt) => apt.id !== selectedAppointment.id)
+      );
       setDeleteModal(false);
       toast.success("Consulta deletada com sucesso!");
     } catch (error) {
@@ -127,41 +158,89 @@ export default function SecretaryAppointments() {
 
   const getStatusBadge = (status: string) => {
     switch (status) {
-            case "requested": return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
+      case "requested":
-            case "confirmed": return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
+        return (
-            case "checked_in": return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
+          <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>
-            case "completed": return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
+        );
-            case "cancelled": return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
+      case "confirmed":
-            case "no_show": return <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>;
+        return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
-            default: return <Badge variant="secondary">{status}</Badge>;
+      case "checked_in":
+        return (
+          <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>
+        );
+      case "completed":
+        return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
+      case "cancelled":
+        return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
+      case "no_show":
+        return (
+          <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>
+        );
+      default:
+        return <Badge variant="secondary">{status}</Badge>;
     }
   };
 
-    const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"];
+  const timeSlots = [
-    const appointmentStatuses = ["requested", "confirmed", "checked_in", "completed", "cancelled", "no_show"];
+    "08:00",
+    "08:30",
+    "09:00",
+    "09:30",
+    "10:00",
+    "10:30",
+    "11:00",
+    "11:30",
+    "14:00",
+    "14:30",
+    "15:00",
+    "15:30",
+    "16:00",
+    "16:30",
+    "17:00",
+    "17:30",
+  ];
+  const appointmentStatuses = [
+    "requested",
+    "confirmed",
+    "checked_in",
+    "completed",
+    "cancelled",
+    "no_show",
+  ];
 
   return (
     <Sidebar>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
           <div>
-                        <h1 className="text-3xl font-bold text-gray-900">Consultas Agendadas</h1>
+            <h1 className="text-3xl font-bold text-gray-900">
+              Consultas Agendadas
+            </h1>
             <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
           </div>
           <Link href="/secretary/schedule">
-                        <Button><Calendar className="mr-2 h-4 w-4" /> Agendar Nova Consulta</Button>
+            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+              <Calendar className="mr-2 h-4 w-4 text-white" />
+              Agendar Nova Consulta
+            </Button>
           </Link>
         </div>
 
         <div className="grid gap-6">
-                    {isLoading ? <p>Carregando consultas...</p> : appointments.length > 0 ? (
+          {isLoading ? (
+            <p>Carregando consultas...</p>
+          ) : appointments.length > 0 ? (
             appointments.map((appointment) => (
               <Card key={appointment.id}>
                 <CardHeader>
                   <div className="flex justify-between items-start">
                     <div>
-                                            <CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
+                      <CardTitle className="text-lg">
-                                            <CardDescription>{appointment.doctor.specialty}</CardDescription>
+                        {appointment.doctor.full_name}
+                      </CardTitle>
+                      <CardDescription>
+                        {appointment.doctor.specialty}
+                      </CardDescription>
                     </div>
                     {getStatusBadge(appointment.status)}
                   </div>
@@ -175,11 +254,21 @@ export default function SecretaryAppointments() {
                       </div>
                       <div className="flex items-center text-sm text-gray-600">
                         <Calendar className="mr-2 h-4 w-4" />
-                                                {new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
+                        {new Date(appointment.scheduled_at).toLocaleDateString(
+                          "pt-BR",
+                          { timeZone: "UTC" }
+                        )}
                       </div>
                       <div className="flex items-center text-sm text-gray-600">
                         <Clock className="mr-2 h-4 w-4" />
-                                                {new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", { hour: '2-digit', minute: '2-digit', timeZone: "UTC" })}
+                        {new Date(appointment.scheduled_at).toLocaleTimeString(
+                          "pt-BR",
+                          {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            timeZone: "UTC",
+                          }
+                        )}
                       </div>
                     </div>
                     <div className="space-y-3">
@@ -195,11 +284,20 @@ export default function SecretaryAppointments() {
                   </div>
 
                   <div className="flex gap-2 mt-4 pt-4 border-t">
-                                        <Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleEdit(appointment)}
+                    >
                       <Pencil className="mr-2 h-4 w-4" />
                       Editar
                     </Button>
-                                        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleDelete(appointment)}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
+                      onClick={() => handleDelete(appointment)}
+                    >
                       <Trash2 className="mr-2 h-4 w-4" />
                       Deletar
                     </Button>

app/secretary/dashboard/page.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { Card, CardContent, CardDescription,
+import {
+  Card,
+  CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
@@ -102,7 +105,9 @@ export default function SecretaryDashboard() {
         {/* Cabeçalho */}
         <div>
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-                    <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
+          <p className="text-gray-600">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
         </div>
 
         {/* Cards principais */}
@@ -132,12 +137,13 @@ export default function SecretaryDashboard() {
                       ? `Dr(a). ${firstConfirmed.doctor_name}`
                       : "Médico não informado"}{" "}
                     -{" "}
-                                        {new Date(
+                    {new Date(firstConfirmed.scheduled_at).toLocaleTimeString(
-                                            firstConfirmed.scheduled_at
+                      "pt-BR",
-                                        ).toLocaleTimeString("pt-BR", {
+                      {
                         hour: "2-digit",
                         minute: "2-digit",
-                                        })}
+                      }
+                    )}
                   </p>
                 </>
               ) : (
@@ -164,20 +170,22 @@ export default function SecretaryDashboard() {
               ) : nextAgendada ? (
                 <>
                   <div className="text-lg font-bold text-gray-900">
-                                        {new Date(
+                    {new Date(nextAgendada.scheduled_at).toLocaleDateString(
-                                            nextAgendada.scheduled_at
+                      "pt-BR",
-                                        ).toLocaleDateString("pt-BR", {
+                      {
                         day: "2-digit",
                         month: "2-digit",
                         year: "numeric",
-                                        })}{" "}
+                      }
+                    )}{" "}
                     às{" "}
-                                        {new Date(
+                    {new Date(nextAgendada.scheduled_at).toLocaleTimeString(
-                                            nextAgendada.scheduled_at
+                      "pt-BR",
-                                        ).toLocaleTimeString("pt-BR", {
+                      {
                         hour: "2-digit",
                         minute: "2-digit",
-                                        })}
+                      }
+                    )}
                   </div>
                   <p className="text-xs text-muted-foreground">
                     {nextAgendada.doctor_name
@@ -223,8 +231,8 @@ export default function SecretaryDashboard() {
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/secretary/schedule">
-                                <Button className="w-full justify-start">
+                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                                    <Plus className="mr-2 h-4 w-4" />
+                  <User className="mr-2 h-4 w-4 text-white" />
                   Agendar Nova Consulta
                 </Button>
               </Link>
@@ -253,15 +261,11 @@ export default function SecretaryDashboard() {
           <Card>
             <CardHeader>
               <CardTitle>Pacientes</CardTitle>
-                            <CardDescription>
+              <CardDescription>Últimos pacientes cadastrados</CardDescription>
-                                Últimos pacientes cadastrados
-                            </CardDescription>
             </CardHeader>
             <CardContent>
               {loadingPatients ? (
-                                <p className="text-sm text-gray-500">
+                <p className="text-sm text-gray-500">Carregando pacientes...</p>
-                                    Carregando pacientes...
-                                </p>
               ) : patients.length === 0 ? (
                 <p className="text-sm text-gray-500">
                   Nenhum paciente cadastrado.

app/secretary/pacientes/page.tsx

@@ -4,10 +4,38 @@
 import { useState, useEffect, 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 {
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  DropdownMenu,
-import { Plus, Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react";
+  DropdownMenuContent,
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Plus,
+  Edit,
+  Trash2,
+  Eye,
+  Calendar,
+  Filter,
+  Loader2,
+} from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { patientsService } from "@/services/patientsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
@@ -47,8 +75,7 @@ export default function PacientesPage() {
   // --- FUNÇÕES DE LÓGICA ---
 
   // 1. Função para carregar TODOS os pacientes da API
-    const fetchAllPacientes = useCallback(
+  const fetchAllPacientes = useCallback(async () => {
-        async () => {
     setLoading(true);
     setError(null);
     try {
@@ -62,8 +89,8 @@ export default function PacientesPage() {
         cidade: p.city ?? "—",
         estado: p.state ?? "—",
         // Formate as datas se necessário, aqui usamos como string
-                    ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—", 
+        ultimoAtendimento: p.last_visit_at?.split("T")[0] ?? "—",
-                    proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+        proximoAtendimento: p.next_appointment_at?.split("T")[0] ?? "—",
         vip: Boolean(p.vip ?? false),
         convenio: p.convenio ?? "Particular", // Define um valor padrão
         status: p.status ?? undefined,
@@ -76,9 +103,7 @@ export default function PacientesPage() {
     } finally {
       setLoading(false);
     }
-        },
+  }, []);
-        []
-    );
 
   // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
   useEffect(() => {
@@ -90,8 +115,7 @@ export default function PacientesPage() {
 
       // Filtro por Convênio
       const matchesConvenio =
-                convenioFilter === "all" || 
+        convenioFilter === "all" || patient.convenio === convenioFilter;
-                patient.convenio === convenioFilter;
 
       // Filtro por VIP
       const matchesVip =
@@ -113,7 +137,6 @@ export default function PacientesPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
 
   const openDetailsDialog = async (patientId: string) => {
@@ -131,9 +154,11 @@ export default function PacientesPage() {
     try {
       await patientsService.delete(patientId);
       // Atualiza a lista completa para refletir a exclusão
-            setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
+      setAllPatients((prev) =>
+        prev.filter((p) => String(p.id) !== String(patientId))
+      );
     } catch (e: any) {
-            alert(`Erro ao deletar paciente: ${e?.message || 'Erro desconhecido'}`);
+      alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
     }
     setDeleteDialogOpen(false);
     setPatientToDelete(null);
@@ -150,12 +175,16 @@ export default function PacientesPage() {
         {/* Header (Responsividade OK) */}
         <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>
+            <h1 className="text-xl md:text-2xl font-bold text-foreground">
-                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+              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" className="w-full md:w-auto">
-                            <Button className="w-full bg-green-600 hover:bg-green-700">
+              <Button className="w-full bg-blue-600 hover:bg-blue-700">
                 <Plus className="w-4 h-4 mr-2" />
                 Adicionar
               </Button>
@@ -179,9 +208,13 @@ export default function PacientesPage() {
 
           {/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */}
           <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">Convênio</span>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+              Convênio
+            </span>
             <Select value={convenioFilter} onValueChange={setConvenioFilter}>
-                            <SelectTrigger className="w-full sm:w-40"> {/* w-full para mobile, w-40 para sm+ */}
+              <SelectTrigger className="w-full sm:w-40">
+                {" "}
+                {/* w-full para mobile, w-40 para sm+ */}
                 <SelectValue placeholder="Convênio" />
               </SelectTrigger>
               <SelectContent>
@@ -196,9 +229,13 @@ export default function PacientesPage() {
 
           {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
           <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+              VIP
+            </span>
             <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
+              <SelectTrigger className="w-full sm:w-32">
+                {" "}
+                {/* w-full para mobile, w-32 para sm+ */}
                 <SelectValue placeholder="VIP" />
               </SelectTrigger>
               <SelectContent>
@@ -219,69 +256,115 @@ export default function PacientesPage() {
         {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
         {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
         <div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
-                    <div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */}
+          <div className="overflow-x-auto">
+            {" "}
+            {/* Permite rolagem horizontal se a tabela for muito larga */}
             {error ? (
               <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
             ) : loading ? (
               <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
+                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+                Carregando pacientes...
               </div>
             ) : (
-                            <table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */}
+              <table className="w-full min-w-[650px]">
+                {" "}
+                {/* min-w para evitar que a tabela se contraia demais */}
                 <thead className="bg-gray-50 border-b border-gray-200">
                   <tr>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[20%]">
+                      Nome
+                    </th>
                     {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
+                      Telefone
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
+                    </th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
+                      Cidade / Estado
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
+                      Convênio
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                      Último atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                      Próximo atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-gray-700 w-[5%]">
+                      Ações
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
                   {currentPatients.length === 0 ? (
                     <tr>
                       <td colSpan={7} className="p-8 text-center text-gray-500">
-                                                {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
+                        {allPatients.length === 0
+                          ? "Nenhum paciente cadastrado"
+                          : "Nenhum paciente encontrado com os filtros aplicados"}
                       </td>
                     </tr>
                   ) : (
                     currentPatients.map((patient) => (
-                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <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-green-100 rounded-full flex items-center justify-center">
+                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                                                            <span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
+                              <span className="text-blue-600 font-medium text-sm">
+                                {patient.nome?.charAt(0) || "?"}
+                              </span>
                             </div>
+
                             <span className="font-medium text-gray-900">
                               {patient.nome}
                               {patient.vip && (
-                                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
+                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                                  VIP
+                                </span>
                               )}
                             </span>
                           </div>
                         </td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
+                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                          {patient.telefone}
+                        </td>
                         <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
+                        <td className="p-4 text-gray-600 hidden sm:table-cell">
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
+                          {patient.convenio}
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
+                        </td>
+                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                          {patient.ultimoAtendimento}
+                        </td>
+                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                          {patient.proximoAtendimento}
+                        </td>
 
                         <td className="p-4">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                                            <div className="text-blue-600 cursor-pointer">Ações</div>
+                              <div className="text-blue-600 cursor-pointer">
+                                Ações
+                              </div>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
+                              <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`} className="flex items-center w-full">
+                                <Link
+                                  href={`/secretary/pacientes/${patient.id}/editar`}
+                                  className="flex items-center w-full"
+                                >
                                   <Edit className="w-4 h-4 mr-2" />
                                   Editar
                                 </Link>
@@ -291,7 +374,12 @@ export default function PacientesPage() {
                                 <Calendar className="w-4 h-4 mr-2" />
                                 Marcar consulta
                               </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
+                              <DropdownMenuItem
+                                className="text-red-600"
+                                onClick={() =>
+                                  openDeleteDialog(String(patient.id))
+                                }
+                              >
                                 <Trash2 className="w-4 h-4 mr-2" />
                                 Excluir
                               </DropdownMenuItem>
@@ -314,38 +402,59 @@ export default function PacientesPage() {
             <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
           ) : loading ? (
             <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                            <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
+              <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+              Carregando pacientes...
             </div>
           ) : filteredPatients.length === 0 ? (
             <div className="p-8 text-center text-gray-500">
-                            {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
+              {allPatients.length === 0
+                ? "Nenhum paciente cadastrado"
+                : "Nenhum paciente encontrado com os filtros aplicados"}
             </div>
           ) : (
             <div className="space-y-4">
               {currentPatients.map((patient) => (
-                                <div key={patient.id} className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200">
+                <div
+                  key={patient.id}
+                  className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200"
+                >
                   <div className="flex-grow mb-2 sm:mb-0">
                     <div className="font-semibold text-lg text-gray-900 flex items-center">
                       {patient.nome}
                       {patient.vip && (
-                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
+                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                          VIP
+                        </span>
                       )}
                     </div>
-                                        <div className="text-sm text-gray-600">Telefone: {patient.telefone}</div>
+                    <div className="text-sm text-gray-600">
-                                        <div className="text-sm text-gray-600">Convênio: {patient.convenio}</div>
+                      Telefone: {patient.telefone}
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      Convênio: {patient.convenio}
+                    </div>
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                                                            <div  className="w-full"><Button variant="outline" className="w-full">Ações</Button></div>
+                      <div className="w-full">
+                        <Button variant="outline" className="w-full">
+                          Ações
+                        </Button>
+                      </div>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
+                      <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`} className="flex items-center w-full">
+                        <Link
+                          href={`/secretary/pacientes/${patient.id}/editar`}
+                          className="flex items-center w-full"
+                        >
                           <Edit className="w-4 h-4 mr-2" />
                           Editar
                         </Link>
@@ -355,7 +464,10 @@ export default function PacientesPage() {
                         <Calendar className="w-4 h-4 mr-2" />
                         Marcar consulta
                       </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
+                      <DropdownMenuItem
+                        className="text-red-600"
+                        onClick={() => openDeleteDialog(String(patient.id))}
+                      >
                         <Trash2 className="w-4 h-4 mr-2" />
                         Excluir
                       </DropdownMenuItem>
@@ -370,7 +482,9 @@ export default function PacientesPage() {
         {/* Paginação */}
         {totalPages > 1 && !loading && (
           <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
-                        <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
+            <div className="flex space-x-2 flex-wrap justify-center">
+              {" "}
+              {/* Adicionado flex-wrap e justify-center para botões da paginação */}
               <Button
                 onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                 disabled={page === 1}
@@ -379,7 +493,6 @@ export default function PacientesPage() {
               >
                 &lt; Anterior
               </Button>
-
               {Array.from({ length: totalPages }, (_, index) => index + 1)
                 .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
                 .map((pageNumber) => (
@@ -388,14 +501,19 @@ export default function PacientesPage() {
                     onClick={() => setPage(pageNumber)}
                     variant={pageNumber === page ? "default" : "outline"}
                     size="lg"
-                                        className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"}
+                    className={
+                      pageNumber === page
+                        ? "bg-blue-600 hover:bg-blue-700 text-white"
+                        : "text-gray-700"
+                    }
                   >
                     {pageNumber}
                   </Button>
                 ))}
-
               <Button
-                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                onClick={() =>
+                  setPage((prev) => Math.min(totalPages, prev + 1))
+                }
                 disabled={page === totalPages}
                 variant="outline"
                 size="lg"
@@ -411,18 +529,29 @@ export default function PacientesPage() {
           <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 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">
+              <AlertDialogAction
+                onClick={() =>
+                  patientToDelete && handleDeletePatient(patientToDelete)
+                }
+                className="bg-red-600 hover:bg-red-700"
+              >
                 Excluir
               </AlertDialogAction>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
 
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>

components/ui/userToolTip.tsx

@@ -126,7 +126,7 @@ export default function SidebarUserSection({
         className={
           sidebarCollapsed
             ? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200"
-            : "w-full bg-white text-black hover:bg-gray-200"
+            : "w-full bg-white text-black hover:bg-gray-200 cursor-pointer"
         }
         onClick={handleLogout}
       >