Merge branch 'Stage' of https://github.com/m1guelmcf/MedConnect into ajustes-agendamentio

app/doctor/consultas/page.tsx

@@ -31,7 +31,7 @@ interface EnrichedAppointment {
 }
 
 export default function DoctorAppointmentsPage() {
-  const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole: 'medico' });
+  const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole: "medico" });
   
   const [allAppointments, setAllAppointments] = useState<EnrichedAppointment[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -111,13 +111,22 @@ export default function DoctorAppointmentsPage() {
     return format(date, "EEEE, dd 'de' MMMM", { locale: ptBR });
   };
 
+  const statusPT: Record<string, string> = {
+      confirmed: "Confirmada",
+      completed: "Concluída",
+      cancelled: "Cancelada",
+      requested: "Solicitada",
+      no_show: "oculta",
+      checked_in: "Aguardando",
+  };
+
   const getStatusVariant = (status: EnrichedAppointment['status']) => {
     switch (status) {
-      case "confirmed": case "checked_in": return "default";
+      case "confirmed": case "checked_in": return "text-foreground bg-blue-100 hover:bg-blue-150";
-      case "completed": return "secondary";
+      case "completed": return "text-foreground bg-green-100 hover:bg-green-150";
-      case "cancelled": case "no_show": return "destructive";
+      case "cancelled": case "no_show": return "text-foreground bg-red-200 hover:bg-red-250";
-      case "requested": return "outline";
+      case "requested": return "text-foreground bg-yellow-100 hover:bg-yellow-150";
-      default: return "outline";
+      default: return "border-gray bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90";
     }
   };
 
@@ -191,7 +200,7 @@ export default function DoctorAppointmentsPage() {
                             
                             {/* Coluna 2: Status e Telefone */}
                             <div className="col-span-1 flex flex-col items-center gap-2">
-                               <Badge variant={getStatusVariant(appointment.status)} className="capitalize text-xs">{appointment.status.replace('_', ' ')}</Badge>
+                               <Badge variant="outline" className={getStatusVariant(appointment.status)}>{statusPT[appointment.status].replace('_', ' ')}</Badge>
                                <div className="flex items-center text-sm text-muted-foreground">
                                 <Phone className="mr-2 h-4 w-4" />
                                 {appointment.patientPhone}

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";
@@ -14,24 +29,25 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
 import { doctorsService } from "@/services/doctorsApi.mjs";
 import { usersService } from "@/services/usersApi.mjs";
 import Sidebar from "@/components/Sidebar";
+import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
 
 type Availability = {
-    id: string;
+  id: string;
-    doctor_id: string;
+  doctor_id: string;
-    weekday: string;
+  weekday: string;
-    start_time: string;
+  start_time: string;
-    end_time: string;
+  end_time: string;
-    slot_minutes: number;
+  slot_minutes: number;
-    appointment_type: string;
+  appointment_type: string;
-    active: boolean;
+  active: boolean;
-    created_at: string;
+  created_at: string;
-    updated_at: string;
+  updated_at: string;
-    created_by: string;
+  created_by: string;
-    updated_by: string | null;
+  updated_by: string | null;
 };
 
 type Schedule = {
-    weekday: object;
+  weekday: object;
 };
 
 type Doctor = {
@@ -61,36 +77,36 @@ type Doctor = {
   updated_by: string | null;
   max_days_in_advance: number;
   rating: number | null;
-}
+};
 
 interface UserPermissions {
-    isAdmin: boolean;
+  isAdmin: boolean;
-    isManager: boolean;
+  isManager: boolean;
-    isDoctor: boolean;
+  isDoctor: boolean;
-    isSecretary: boolean;
+  isSecretary: boolean;
-    isAdminOrManager: boolean;
+  isAdminOrManager: boolean;
 }
 
 interface UserData {
-    user: {
+  user: {
-        id: string;
+    id: string;
-        email: string;
+    email: string;
-        email_confirmed_at: string | null;
+    email_confirmed_at: string | null;
-        created_at: string | null;
+    created_at: string | null;
-        last_sign_in_at: string | null;
+    last_sign_in_at: string | null;
-    };
+  };
-    profile: {
+  profile: {
-        id: string;
+    id: string;
-        full_name: string;
+    full_name: string;
-        email: string;
+    email: string;
-        phone: string;
+    phone: string;
-        avatar_url: string | null;
+    avatar_url: string | null;
-        disabled: boolean;
+    disabled: boolean;
-        created_at: string | null;
+    created_at: string | null;
-        updated_at: string | null;
+    updated_at: string | null;
-    };
+  };
-    roles: string[];
+  roles: string[];
-    permissions: UserPermissions;
+  permissions: UserPermissions;
 }
 
 interface Exception {
@@ -98,7 +114,7 @@ interface Exception {
   doctor_id: string;
   date: string; // formato YYYY-MM-DD
   start_time: string | null; // null = dia inteiro
-  end_time: string | null;   // null = dia inteiro
+  end_time: string | null; // null = dia inteiro
   kind: "bloqueio" | "disponibilidade"; // tipos conhecidos
   reason: string | null; // pode ser null
   created_at: string; // timestamp ISO
@@ -106,188 +122,201 @@ interface Exception {
 }
 
 export default function PatientDashboard() {
-    const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
+  const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
-    const [userData, setUserData] = useState<UserData>();
+  const [userData, setUserData] = useState<UserData>();
-    const [availability, setAvailability] = useState<any | null>(null);
+  const [availability, setAvailability] = useState<any | null>(null);
-    const [exceptions, setExceptions] = useState<Exception[]>([]);
+  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 [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  >({});
-    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
+  const formatTime = (time?: string | null) =>
-    const [error, setError] = useState<string | null>(null);
+    time?.split(":")?.slice(0, 2).join(":") ?? "";
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(
+    null
+  );
+  const [error, setError] = useState<string | null>(null);
 
-    // Mapa de tradução
+  // Mapa de tradução
-    const weekdaysPT: Record<string, string> = {
+  const weekdaysPT: Record<string, string> = {
-        sunday: "Domingo",
+    sunday: "Domingo",
-        monday: "Segunda",
+    monday: "Segunda",
-        tuesday: "Terça",
+    tuesday: "Terça",
-        wednesday: "Quarta",
+    wednesday: "Quarta",
-        thursday: "Quinta",
+    thursday: "Quinta",
-        friday: "Sexta",
+    friday: "Sexta",
-        saturday: "Sábado",
+    saturday: "Sábado",
-    };
-
-    useEffect(() => {
-  const fetchData = async () => {
-    try {
-      const doctorsList: Doctor[] = await doctorsService.list();
-      const doctor = doctorsList[0];
-
-      // Salva no estado
-      setLoggedDoctor(doctor);
-
-      // Busca disponibilidade
-      const availabilityList = await AvailabilityService.list();
-      
-      // Filtra já com a variável local
-      const filteredAvail = availabilityList.filter(
-        (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
-      );
-      setAvailability(filteredAvail);
-
-      // Busca exceções
-      const exceptionsList = await exceptionsService.list();
-      const filteredExc = exceptionsList.filter(
-        (exc: { doctor_id: string }) => exc.doctor_id === doctor?.id
-      );
-      console.log(exceptionsList)
-      setExceptions(filteredExc);
-
-    } catch (e: any) {
-      alert(`${e?.error} ${e?.message}`);
-    }
   };
 
-  fetchData();
+  useEffect(() => {
-}, []);
+    const fetchData = async () => {
+      try {
+        const doctorsList: Doctor[] = await doctorsService.list();
+        const doctor = doctorsList[0];
 
-    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
+        // Salva no estado
-    function findDoctorById(id: string, doctors: Doctor[]) {
+        setLoggedDoctor(doctor);
-        return doctors.find((doctor) => doctor.user_id === id);
-    }
-    
-    const openDeleteDialog = (exceptionId: string) => {
-        setExceptionToDelete(exceptionId);
-        setDeleteDialogOpen(true);
-    };
 
-    const handleDeleteException = async (ExceptionId: string) => {
+        // Busca disponibilidade
-        try {
+        const availabilityList = await AvailabilityService.list();
-            alert(ExceptionId)
-            const res = await exceptionsService.delete(ExceptionId);
 
-            let message = "Exceção deletada com sucesso";
+        // Filtra já com a variável local
-            try {
+        const filteredAvail = availabilityList.filter(
-                if (res) {
+          (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+        );
-                } else {
+        setAvailability(filteredAvail);
-                    console.log(message);
-                }
-            } catch {}
 
-            toast({
+                // Busca exceções
-                title: "Sucesso",
+                const exceptionsList = await exceptionsService.list();
-                description: message,
+                const filteredExc = exceptionsList.filter((exc: { doctor_id: string }) => exc.doctor_id === doctor?.id);
-            });
+                setExceptions(filteredExc);
-
+            } catch (e: any) {
-            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
+                alert(`${e?.error} ${e?.message}`);
-        } catch (e: any) {
-            toast({
-                title: "Erro",
-                description: e?.message || "Não foi possível deletar a exceção",
-            });
-        }
-        setDeleteDialogOpen(false);
-        setExceptionToDelete(null);
-    };
-
-    function formatAvailability(data: Availability[]) {
-        // Agrupar os horários por dia da semana
-        const schedule = data.reduce((acc: any, item) => {
-            const { weekday, start_time, end_time } = item;
-
-            // Se o dia ainda não existe, cria o array
-            if (!acc[weekday]) {
-                acc[weekday] = [];
             }
+        };
 
-            // Adiciona o horário do dia
+          fetchData();
-            acc[weekday].push({
+      }, []);
-                start: start_time,
-                end: end_time,
-            });
 
-            return acc;
+  // Função auxiliar para filtrar o id do doctor correspondente ao user logado
-        }, {} as Record<string, { start: string; end: string }[]>);
+  function findDoctorById(id: string, doctors: Doctor[]) {
+    return doctors.find((doctor) => doctor.user_id === id);
+  }
 
-        return schedule;
+  const openDeleteDialog = (exceptionId: string) => {
-    }
+    setExceptionToDelete(exceptionId);
+    setDeleteDialogOpen(true);
+  };
 
-    useEffect(() => {
+  const handleDeleteException = async (ExceptionId: string) => {
-        if (availability) {
+    try {
-            const formatted = formatAvailability(availability);
+      alert(ExceptionId);
-            setSchedule(formatted);
+      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"
+          );
+        } else {
+          console.log(message);
         }
-    }, [availability]);
+      } catch {}
 
-    return (
+      toast({
-        <Sidebar>
+        title: "Sucesso",
-            <div className="space-y-6">
+        description: message,
-                <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>
-                </div>
 
-                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+      setExceptions((prev: Exception[]) =>
-                    <Card>
+        prev.filter((p) => String(p.id) !== String(ExceptionId))
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      );
-                            <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
+    } catch (e: any) {
-                            <Calendar className="h-4 w-4 text-muted-foreground" />
+      toast({
-                        </CardHeader>
+        title: "Erro",
-                        <CardContent>
+        description: e?.message || "Não foi possível deletar a exceção",
-                            <div className="text-2xl font-bold">02 out</div>
+      });
-                            <p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
+    }
-                        </CardContent>
+    setDeleteDialogOpen(false);
-                    </Card>
+    setExceptionToDelete(null);
+  };
 
-                    <Card>
+  function formatAvailability(data: Availability[]) {
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    // Agrupar os horários por dia da semana
-                            <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
+    const schedule = data.reduce((acc: any, item) => {
-                            <Clock className="h-4 w-4 text-muted-foreground" />
+      const { weekday, start_time, end_time } = item;
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">4</div>
-                            <p className="text-xs text-muted-foreground">4 agendadas</p>
-                        </CardContent>
-                    </Card>
 
-                    <Card>
+      // Se o dia ainda não existe, cria o array
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      if (!acc[weekday]) {
-                            <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+        acc[weekday] = [];
-                            <User className="h-4 w-4 text-muted-foreground" />
+      }
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">100%</div>
-                            <p className="text-xs text-muted-foreground">Dados completos</p>
-                        </CardContent>
-                    </Card>
-                </div>
 
-                <div className="grid md:grid-cols-2 gap-6">
+      // Adiciona o horário do dia
-                    <Card>
+      acc[weekday].push({
-                        <CardHeader>
+        start: start_time,
-                            <CardTitle>Ações Rápidas</CardTitle>
+        end: end_time,
-                            <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+      });
-                        </CardHeader>
+
-                        <CardContent className="space-y-4">
+      return acc;
-                            <Link href="/doctor/medicos/consultas">
+    }, {} as Record<string, { start: string; end: string }[]>);
-                                <Button className="w-full justify-start">
+
-                                    <Calendar className="mr-2 h-4 w-4" />
+    return schedule;
-                                    Ver Minhas Consultas
+  }
-                                </Button>
+
-                            </Link>
+  useEffect(() => {
-                        </CardContent>
+    if (availability) {
-                    </Card>
+      const formatted = formatAvailability(availability);
+      setSchedule(formatted);
+    }
+  }, [availability]);
+
+  return (
+    <Sidebar>
+      <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>
+        </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>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">02 out</div>
+              <p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
+            </CardContent>
+          </Card>
+
+          <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>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">4</div>
+              <p className="text-xs text-muted-foreground">4 agendadas</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+              <User className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">100%</div>
+              <p className="text-xs text-muted-foreground">Dados completos</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Link href="/doctor/medicos/consultas">
+                <Button className="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer">
+                  <Calendar className="mr-2 h-4 w-4 text-white" />
+                  Ver Minhas Consultas
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
 
                     <Card>
                         <CardHeader>
@@ -316,31 +345,7 @@ export default function PatientDashboard() {
                             <CardTitle>Horário Semanal</CardTitle>
                             <CardDescription>Confira rapidamente a sua disponibilidade da semana</CardDescription>
                         </CardHeader>
-                        <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
+                        <CardContent>{loggedDoctor && <WeeklyScheduleCard doctorId={loggedDoctor.id} />}</CardContent>
-                            {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
-                                const times = schedule[day] || [];
-                                return (
-                                    <div key={day} className="space-y-4">
-                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
-                                            <div>
-                                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
-                                            </div>
-                                            <div className="text-center">
-                                                {times.length > 0 ? (
-                                                    times.map((t, i) => (
-                                                        <p key={i} className="text-sm text-gray-600">
-                                                            {formatTime(t.start)} <br /> {formatTime(t.end)}
-                                                        </p>
-                                                    ))
-                                                ) : (
-                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </CardContent>
                     </Card>
                 </div>
                 <div className="grid md:grid-cols-1 gap-6">
@@ -350,30 +355,26 @@ export default function PatientDashboard() {
                             <CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
                         </CardHeader>
 
-                        <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
+            <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
-                            {exceptions && exceptions.length > 0 ? (
+              {exceptions && exceptions.length > 0 ? (
-                                exceptions.map((ex: Exception) => {
+                exceptions.map((ex: Exception) => {
-                                    // Formata data e hora
+                  // Formata data e hora
-                                    const date = new Date(ex.date).toLocaleDateString("pt-BR", {
+                  const date = new Date(ex.date).toLocaleDateString("pt-BR", {
-                                        weekday: "long",
+                    weekday: "long",
-                                        day: "2-digit",
+                    day: "2-digit",
-                                        month: "long",
+                    month: "long",
-                                        timeZone: "UTC"
+                    timeZone: "UTC",
-                                    });
+                  });
 
-                                    const startTime = formatTime(ex.start_time);
+                  const startTime = formatTime(ex.start_time);
-                                    const endTime = formatTime(ex.end_time);
+                  const endTime = formatTime(ex.end_time);
 
                                     return (
                                         <div key={ex.id} className="space-y-4">
                                             <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
-                                                   <p className="text-sm text-gray-600">
+                                                    <p className="text-sm text-gray-600">{startTime && endTime ? `${startTime} - ${endTime}` : "Dia todo"}</p>
-                                                        {startTime && endTime
-                                                        ? `${startTime} - ${endTime}`
-                                                        : "Dia todo"}
-                                                    </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>

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,163 +20,203 @@ 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)
 
 interface UserPermissions {
-    isAdmin: boolean;
+  isAdmin: boolean;
-    isManager: boolean;
+  isManager: boolean;
-    isDoctor: boolean;
+  isDoctor: boolean;
-    isSecretary: boolean;
+  isSecretary: boolean;
-    isAdminOrManager: boolean;
+  isAdminOrManager: boolean;
 }
 
 interface UserData {
-    user: {
+  user: {
-        id: string;
+    id: string;
-        email: string;
+    email: string;
-        email_confirmed_at: string | null;
+    email_confirmed_at: string | null;
-        created_at: string | null;
+    created_at: string | null;
-        last_sign_in_at: string | null;
+    last_sign_in_at: string | null;
-    };
+  };
-    profile: {
+  profile: {
-        id: string;
+    id: string;
-        full_name: string;
+    full_name: string;
-        email: string;
+    email: string;
-        phone: string;
+    phone: string;
-        avatar_url: string | null;
+    avatar_url: string | null;
-        disabled: boolean;
+    disabled: boolean;
-        created_at: string | null;
+    created_at: string | null;
-        updated_at: string | null;
+    updated_at: string | null;
-    };
+  };
-    roles: string[];
+  roles: string[];
-    permissions: UserPermissions;
+  permissions: UserPermissions;
 }
 
 type Doctor = {
-    id: string;
+  id: string;
-    user_id: string | null;
+  user_id: string | null;
-    crm: string;
+  crm: string;
-    crm_uf: string;
+  crm_uf: string;
-    specialty: string;
+  specialty: string;
-    full_name: string;
+  full_name: string;
-    cpf: string;
+  cpf: string;
-    email: string;
+  email: string;
-    phone_mobile: string | null;
+  phone_mobile: string | null;
-    phone2: string | null;
+  phone2: string | null;
-    cep: string | null;
+  cep: string | null;
-    street: string | null;
+  street: string | null;
-    number: string | null;
+  number: string | null;
-    complement: string | null;
+  complement: string | null;
-    neighborhood: string | null;
+  neighborhood: string | null;
-    city: string | null;
+  city: string | null;
-    state: string | null;
+  state: string | null;
-    birth_date: string | null;
+  birth_date: string | null;
-    rg: string | null;
+  rg: string | null;
-    active: boolean;
+  active: boolean;
-    created_at: string;
+  created_at: string;
-    updated_at: string;
+  updated_at: string;
-    created_by: string;
+  created_by: string;
-    updated_by: string | null;
+  updated_by: string | null;
-    max_days_in_advance: number;
+  max_days_in_advance: number;
-    rating: number | null;
+  rating: number | null;
-}
+};
 
 type Availability = {
-    id: string;
+  id: string;
-    doctor_id: string;
+  doctor_id: string;
-    weekday: string;
+  weekday: string;
-    start_time: string;
+  start_time: string;
-    end_time: string;
+  end_time: string;
-    slot_minutes: number;
+  slot_minutes: number;
-    appointment_type: string;
+  appointment_type: string;
-    active: boolean;
+  active: boolean;
-    created_at: string;
+  created_at: string;
-    updated_at: string;
+  updated_at: string;
-    created_by: string;
+  created_by: string;
-    updated_by: string | null;
+  updated_by: string | null;
 };
 
 export default function AvailabilityPage() {
-    const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
-    const router = useRouter();
+  const router = useRouter();
-    const [isLoading, setIsLoading] = useState(false);
+  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 [userData, setUserData] = useState<UserData>();
+  >({});
-    const [availability, setAvailability] = useState<any | null>(null);
+  const formatTime = (time?: string | null) =>
-    const [doctorId, setDoctorId] = useState<string>();
+    time?.split(":")?.slice(0, 2).join(":") ?? "";
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [userData, setUserData] = useState<UserData>();
-    const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
+  const [availability, setAvailability] = useState<any | null>(null);
-    const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+  const [doctorId, setDoctorId] = useState<string>();
-    const [isModalOpen, setIsModalOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    
+  const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
-    const selectAvailability = (schedule: { start: string; end: string;}, day: string) => {
+  const [selectedAvailability, setSelectedAvailability] =
-        const selected = availability.filter((a: Availability) =>
+    useState<Availability | null>(null);
-            a.start_time === schedule.start &&
+  const [isModalOpen, setIsModalOpen] = useState(false);
-            a.end_time === schedule.end &&
-            a.weekday === day
-        );
-        setSelectedAvailability(selected[0]);
-    }
 
-    const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => {
+  const selectAvailability = (
-        selectAvailability(schedule, day)
+    schedule: { start: string; end: string },
-        setIsModalOpen(true);
+    day: string
-    };
+  ) => {
-    
+    const selected = availability.filter(
-    const handleCloseModal = () => {
+      (a: Availability) =>
-        setSelectedAvailability(null);
+        a.start_time === schedule.start &&
-        setIsModalOpen(false);
+        a.end_time === schedule.end &&
+        a.weekday === day
+    );
+    setSelectedAvailability(selected[0]);
+  };
+
+  const handleOpenModal = (
+    schedule: { start: string; end: string },
+    day: string
+  ) => {
+    selectAvailability(schedule, day);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedAvailability(null);
+    setIsModalOpen(false);
+  };
+
+  const handleEdit = async (formData: {
+    start_time: "";
+    end_time: "";
+    slot_minutes: "";
+    appointment_type: "";
+    id: "";
+  }) => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    const apiPayload = {
+      start_time: formData.start_time,
+      end_time: formData.end_time,
+      slot_minutes: formData.slot_minutes,
+      appointment_type: formData.appointment_type,
     };
+    console.log(apiPayload);
 
-    const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => {
+    try {
-        if (isLoading) return;
+      const res = await AvailabilityService.update(formData.id, apiPayload);
-        setIsLoading(true);
+      console.log(res);
 
-        const apiPayload = {
+      let message = "disponibilidade editada com sucesso";
-            start_time: formData.start_time,
+      try {
-            end_time: formData.end_time,
+        if (!res[0].id) {
-            slot_minutes: formData.slot_minutes,
+          throw new Error(
-            appointment_type: formData.appointment_type,
+            `${res.error} ${res.message}` || "A API retornou erro"
-        };
+          );
-        console.log(apiPayload);
+        } else {
-
+          console.log(message);
-        try {
-            const res = await AvailabilityService.update(formData.id, apiPayload);
-            console.log(res);
-
-            let message = "disponibilidade editada com sucesso";
-            try {
-                if (!res[0].id) {
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
-                } else {
-                    console.log(message);
-                }
-            } catch {}
-
-            toast({
-                title: "Sucesso",
-                description: message,
-            });
-            router.push("#")
-        } catch (err: any) {
-            toast({
-                title: "Erro",
-                description: err?.message || "Não foi possível editar a disponibilidade",
-            });
-        } finally {
-            setIsLoading(false);
-            handleCloseModal();
-            fetchData()
         }
-    };
+      } catch {}
+
+      toast({
+        title: "Sucesso",
+        description: message,
+      });
+      router.push("#");
+    } catch (err: any) {
+      toast({
+        title: "Erro",
+        description:
+          err?.message || "Não foi possível editar a disponibilidade",
+      });
+    } finally {
+      setIsLoading(false);
+      handleCloseModal();
+      fetchData();
+    }
+  };
 
         // Mapa de tradução
     const weekdaysPT: Record<string, string> = {
@@ -183,95 +229,96 @@ export default function AvailabilityPage() {
         saturday: "Sábado",
     };
     const fetchData = async () => {
-            try {
-                const loggedUser = await usersService.getMe();
-                const doctorList = await doctorsService.list();
-                setUserData(loggedUser);
-                const doctor = findDoctorById(loggedUser.user.id, doctorList);
-                setDoctorId(doctor?.id);
-                console.log(doctor);
-                // Busca disponibilidade
-                const availabilityList = await AvailabilityService.list();
-            
-                // Filtra já com a variável local
-                const filteredAvail = availabilityList.filter(
-                (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
-                );
-                setAvailability(filteredAvail);
-            } catch (e: any) {
-                alert(`${e?.error} ${e?.message}`);
-            }
-        };
-
-    useEffect(() => {        
-        fetchData();
-    }, []);
-
-    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
-    function findDoctorById(id: string, doctors: Doctor[]) {
-        return doctors.find((doctor) => doctor.user_id === id);
-    }
-    
-    
-    function formatAvailability(data: Availability[]) {
-        // Agrupar os horários por dia da semana
-        const schedule = data.reduce((acc: any, item) => {
-            const { weekday, start_time, end_time } = item;
-            
-            // Se o dia ainda não existe, cria o array
-            if (!acc[weekday]) {
-                acc[weekday] = [];
-            }
-            
-            // Adiciona o horário do dia
-            acc[weekday].push({
-                start: start_time,
-                end: end_time,
-            });
-            
-            return acc;
-        }, {} as Record<string, { start: string; end: string }[]>);
-        
-        return schedule;
-    }
-    
-    useEffect(() => {
-        if (availability) {
-            const formatted = formatAvailability(availability);
-            setSchedule(formatted);
-        }
-    }, [availability]);
-
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (isLoading) return;
-        setIsLoading(true);
-        const form = e.currentTarget;
-        const formData = new FormData(form);
-
-        const apiPayload = {
-            doctor_id: doctorId,
-            weekday: (formData.get("weekday") as string) || undefined,
-            start_time: (formData.get("horarioEntrada") as string) || undefined,
-            end_time: (formData.get("horarioSaida") as string) || undefined,
-            slot_minutes: Number(formData.get("duracaoConsulta")) || undefined,
-            appointment_type: modalidadeConsulta || undefined,
-            active: true,
-        };
-        console.log(apiPayload);
-
         try {
-            const res = await AvailabilityService.create(apiPayload);
+            const loggedUser = await usersService.getMe();
-            console.log(res);
+            const doctorList = await doctorsService.list();
+            setUserData(loggedUser);
+            const doctor = findDoctorById(loggedUser.user.id, doctorList);
+            setDoctorId(doctor?.id);
+            console.log(doctor);
+            // Busca disponibilidade
+            const availabilityList = await AvailabilityService.list();
+        
+            // Filtra já com a variável local
+            const filteredAvail = availabilityList.filter(
+            (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+            );
+            setAvailability(filteredAvail);
+        } catch (e: any) {
+            alert(`${e?.error} ${e?.message}`);
+        }
+    };
 
-            let message = "disponibilidade cadastrada com sucesso";
+  useEffect(() => {
-            try {
+    fetchData();
-                if (!res[0].id) {
+  }, []);
-                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+
-                } else {
+  // Função auxiliar para filtrar o id do doctor correspondente ao user logado
-                    console.log(message);
+  function findDoctorById(id: string, doctors: Doctor[]) {
-                }
+    return doctors.find((doctor) => doctor.user_id === id);
-            } catch {}
+  }
+
+  function formatAvailability(data: Availability[]) {
+    // Agrupar os horários por dia da semana
+    const schedule = data.reduce((acc: any, item) => {
+      const { weekday, start_time, end_time } = item;
+
+      // Se o dia ainda não existe, cria o array
+      if (!acc[weekday]) {
+        acc[weekday] = [];
+      }
+
+      // Adiciona o horário do dia
+      acc[weekday].push({
+        start: start_time,
+        end: end_time,
+      });
+
+      return acc;
+    }, {} as Record<string, { start: string; end: string }[]>);
+
+    return schedule;
+  }
+
+  useEffect(() => {
+    if (availability) {
+      const formatted = formatAvailability(availability);
+      setSchedule(formatted);
+    }
+  }, [availability]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isLoading) return;
+    setIsLoading(true);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+
+    const apiPayload = {
+      doctor_id: doctorId,
+      weekday: (formData.get("weekday") as string) || undefined,
+      start_time: (formData.get("horarioEntrada") as string) || undefined,
+      end_time: (formData.get("horarioSaida") as string) || undefined,
+      slot_minutes: Number(formData.get("duracaoConsulta")) || undefined,
+      appointment_type: modalidadeConsulta || undefined,
+      active: true,
+    };
+    console.log(apiPayload);
+
+    try {
+      const res = await AvailabilityService.create(apiPayload);
+      console.log(res);
+
+      let message = "disponibilidade cadastrada com sucesso";
+      try {
+        if (!res[0].id) {
+          throw new Error(
+            `${res.error} ${res.message}` || "A API retornou erro"
+          );
+        } else {
+          console.log(message);
+        }
+      } catch {}
 
             toast({
                 title: "Sucesso",
@@ -284,14 +331,18 @@ export default function AvailabilityPage() {
                 description: err?.message || "Não foi possível criar a disponibilidade",
             });
         } finally {
+            fetchData()
             setIsLoading(false);
         }
     };
 
-    const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => {
+  const openDeleteDialog = (
-        selectAvailability(schedule, day)
+    schedule: { start: string; end: string },
-        setDeleteDialogOpen(true);
+    day: string
-    };
+  ) => {
+    selectAvailability(schedule, day);
+    setDeleteDialogOpen(true);
+  };
 
     const handleDeleteAvailability = async (AvailabilityId: string) => {
             try {
@@ -318,101 +369,176 @@ export default function AvailabilityPage() {
                     description: e?.message || "Não foi possível deletar a disponibilidade",
                 });
             }
+            fetchData()
             setDeleteDialogOpen(false);
             setSelectedAvailability(null);
         };
 
-    return (
+  return (
-        <Sidebar>
+    <Sidebar>
-            <div className="space-y-6 flex-1 overflow-y-auto p-6">
+      <div className="space-y-6 flex-1 overflow-y-auto p-6">
-                <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between">
-                    <div>
+          <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
-                    </div>
+            </h1>
+            <p className="text-gray-600">
+              Defina sua disponibilidade para consultas{" "}
+            </p>
+          </div>
+        </div>
+
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          <div className="bg-white rounded-lg border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2>
+
+            <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>
+                {/* 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"
+                    />
+                    <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"
+                    />
+                    <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"
+                    />
+                    <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"
+                    />
+                    <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"
+                    />
+                    <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"
+                    />
+                    <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"
+                    />
+                    <span className="whitespace-nowrap text-sm">Domingo</span>
+                  </label>
                 </div>
+              </div>
 
-                <form className="space-y-6" onSubmit={handleSubmit}>
+              {/* **AJUSTE DE RESPONSIVIDADE: HORÁRIO E DURAÇÃO** */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+              {/* Ajustado para 1 coluna em móvel, 2 em tablet e 5 em desktop (mantendo o que já existia com ajustes) */}
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2>
+              <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"
+                  >
+                    Horario De Entrada
+                  </Label>
+                  <Input
+                    type="time"
+                    id="horarioEntrada"
+                    name="horarioEntrada"
+                    required
+                    className="mt-1"
+                  />
+                </div>
+                <div>
+                  <Label
+                    htmlFor="horarioSaida"
+                    className="text-sm font-medium text-gray-700"
+                  >
+                    Horario De Saida
+                  </Label>
+                  <Input
+                    type="time"
+                    id="horarioSaida"
+                    name="horarioSaida"
+                    required
+                    className="mt-1"
+                  />
+                </div>
+                <div>
+                  <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"
+                  />
+                </div>
+                {/* O Select de modalidade fica fora deste grid para ocupar uma linha inteira em telas menores, como no original, garantindo clareza */}
+              </div>
 
-                        <div className="space-y-6">
+              <div>
-                            {/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */}
+                <Label
-                            <div>
+                  htmlFor="modalidadeConsulta"
-                                <Label className="text-sm font-medium text-gray-700">Dia Da Semana</Label>
+                  className="text-sm font-medium text-gray-700"
-                                {/* 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">
+                  Modalidade De Consulta
-                                    <label className="flex items-center gap-1">
+                </Label>
-                                        <input type="radio" name="weekday" value="monday" className="text-blue-600" />
+                <Select
-                                        <span className="whitespace-nowrap text-sm">Segunda</span>
+                  onValueChange={(value) => setModalidadeConsulta(value)}
-                                    </label>
+                  value={modalidadeConsulta}
-                                    <label className="flex items-center gap-1">
+                >
-                                        <input type="radio" name="weekday" value="tuesday" className="text-blue-600" />
+                  <SelectTrigger className="mt-1">
-                                        <span className="whitespace-nowrap text-sm">Terça</span>
+                    <SelectValue placeholder="Selecione" />
-                                    </label>
+                  </SelectTrigger>
-                                    <label className="flex items-center gap-1">
+                  <SelectContent>
-                                        <input type="radio" name="weekday" value="wednesday" className="text-blue-600" />
+                    <SelectItem value="presencial">Presencial </SelectItem>
-                                        <span className="whitespace-nowrap text-sm">Quarta</span>
+                    <SelectItem value="telemedicina">Telemedicina</SelectItem>
-                                    </label>
+                  </SelectContent>
-                                    <label className="flex items-center gap-1">
+                </Select>
-                                        <input type="radio" name="weekday" value="thursday" className="text-blue-600" />
+              </div>
-                                        <span className="whitespace-nowrap text-sm">Quinta</span>
+            </div>
-                                    </label>
+          </div>
-                                    <label className="flex items-center gap-1">
-                                        <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" />
-                                        <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" />
-                                        <span className="whitespace-nowrap text-sm">Domingo</span>
-                                    </label>
-                                </div>
-                            </div>
-
-                            {/* **AJUSTE DE RESPONSIVIDADE: HORÁRIO E DURAÇÃO** */}
-                            {/* 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">
-                                        Horario De Entrada
-                                    </Label>
-                                    <Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" />
-                                </div>
-                                <div>
-                                    <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
-                                        Horario De Saida
-                                    </Label>
-                                    <Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" />
-                                </div>
-                                <div>
-                                    <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" />
-                                </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">
-                                    Modalidade De Consulta
-                                </Label>
-                                <Select onValueChange={(value) => setModalidadeConsulta(value)} value={modalidadeConsulta}>
-                                    <SelectTrigger className="mt-1">
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="presencial">Presencial </SelectItem>
-                                        <SelectItem value="telemedicina">Telemedicina</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-                    </div>
 
                     {/* **AJUSTE DE RESPONSIVIDADE: BOTÕES DE AÇÃO** */}
                     {/* Alinha à direita em telas maiores e empilha (com o botão primário no final) em telas menores */}
@@ -453,7 +579,7 @@ export default function AvailabilityPage() {
                                                         <div key={i}>
                                                             <DropdownMenu>
                                                                 <DropdownMenuTrigger asChild>
-                                                                    <p  className="text-sm text-gray-600 cursor-pointer p-1 rounded hover:text-accent-foreground hover:bg-gray-200 transition-colors duration-150">
+                                                                    <p  className="text-sm text-gray-600 cursor-pointer rounded hover:text-accent-foreground hover:bg-gray-200 transition-colors duration-150">
                                                                         {formatTime(t.start)} - {formatTime(t.end)}
                                                                     </p>
                                                                 </DropdownMenuTrigger>
@@ -509,4 +635,4 @@ export default function AvailabilityPage() {
             
         </Sidebar>
     );
-}
+}

app/doctor/medicos/page.tsx

@@ -2,414 +2,463 @@
 
 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";
 
 interface Paciente {
-    id: string;
+  id: string;
-    nome: string;
+  nome: string;
-    telefone: string;
+  telefone: string;
-    cidade: string;
+  cidade: string;
-    estado: string;
+  estado: string;
-    ultimoAtendimento?: string;
+  ultimoAtendimento?: string;
-    proximoAtendimento?: string;
+  proximoAtendimento?: string;
-    email?: string;
+  email?: string;
-    birth_date?: string;
+  birth_date?: string;
-    cpf?: string;
+  cpf?: string;
-    blood_type?: string;
+  blood_type?: string;
-    weight_kg?: number;
+  weight_kg?: number;
-    height_m?: number;
+  height_m?: number;
-    street?: string;
+  street?: string;
-    number?: string;
+  number?: string;
-    complement?: string;
+  complement?: string;
-    neighborhood?: string;
+  neighborhood?: string;
-    cep?: string;
+  cep?: string;
 }
 
 export default function PacientesPage() {
-    const [pacientes, setPacientes] = useState<Paciente[]>([]);
+  const [pacientes, setPacientes] = useState<Paciente[]>([]);
-    const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
-    const [selectedPatient, setSelectedPatient] = useState<Paciente | null>(null);
+  const [selectedPatient, setSelectedPatient] = useState<Paciente | null>(null);
-    const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // --- Lógica de Paginação INÍCIO ---
+  // --- Lógica de Paginação INÍCIO ---
-    const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
-    const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
 
-    const totalPages = Math.ceil(pacientes.length / itemsPerPage);
+  const totalPages = Math.ceil(pacientes.length / itemsPerPage);
 
-    const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfLastItem = currentPage * itemsPerPage;
-    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    const currentItems = pacientes.slice(indexOfFirstItem, indexOfLastItem);
+  const currentItems = pacientes.slice(indexOfFirstItem, indexOfLastItem);
 
-    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
-    // Funções de Navegação
+  // Funções de Navegação
-    const goToPrevPage = () => {
+  const goToPrevPage = () => {
-        setCurrentPage((prev) => Math.max(1, prev - 1));
+    setCurrentPage((prev) => Math.max(1, prev - 1));
-    };
+  };
 
-    const goToNextPage = () => {
+  const goToNextPage = () => {
-        setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
-    };
+  };
 
-    // Lógica para gerar os números das páginas visíveis (máximo de 5)
+  // Lógica para gerar os números das páginas visíveis (máximo de 5)
-    const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
+  const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
-        const pages: number[] = [];
+    const pages: number[] = [];
-        const maxVisiblePages = 5;
+    const maxVisiblePages = 5;
-        const halfRange = Math.floor(maxVisiblePages / 2);
+    const halfRange = Math.floor(maxVisiblePages / 2);
-        let startPage = Math.max(1, currentPage - halfRange);
+    let startPage = Math.max(1, currentPage - halfRange);
-        let endPage = Math.min(totalPages, currentPage + halfRange);
+    let endPage = Math.min(totalPages, currentPage + halfRange);
 
-        if (endPage - startPage + 1 < maxVisiblePages) {
+    if (endPage - startPage + 1 < maxVisiblePages) {
-            if (endPage === totalPages) {
+      if (endPage === totalPages) {
-                startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+        startPage = Math.max(1, totalPages - maxVisiblePages + 1);
-            }
+      }
-            if (startPage === 1) {
+      if (startPage === 1) {
-                endPage = Math.min(totalPages, maxVisiblePages);
+        endPage = Math.min(totalPages, maxVisiblePages);
-            }
+      }
-        }
+    }
 
-        for (let i = startPage; i <= endPage; i++) {
+    for (let i = startPage; i <= endPage; i++) {
-            pages.push(i);
+      pages.push(i);
-        }
+    }
-        return pages;
+    return pages;
-    };
+  };
 
-    const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
+  const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
 
-    // Lógica para mudar itens por página, resetando para a página 1
+  // Lógica para mudar itens por página, resetando para a página 1
-    const handleItemsPerPageChange = (value: string) => {
+  const handleItemsPerPageChange = (value: string) => {
-        setItemsPerPage(Number(value));
+    setItemsPerPage(Number(value));
-        setCurrentPage(1);
+    setCurrentPage(1);
-    };
+  };
-    // --- Lógica de Paginação FIM ---
+  // --- Lógica de Paginação FIM ---
 
+  const handleOpenModal = (patient: Paciente) => {
+    setSelectedPatient(patient);
+    setIsModalOpen(true);
+  };
 
-    const handleOpenModal = (patient: Paciente) => {
+  const handleCloseModal = () => {
-        setSelectedPatient(patient);
+    setSelectedPatient(null);
-        setIsModalOpen(true);
+    setIsModalOpen(false);
-    };
+  };
 
-    const handleCloseModal = () => {
+  const formatDate = (dateString: string | null | undefined) => {
-        setSelectedPatient(null);
+    if (!dateString) return "N/A";
-        setIsModalOpen(false);
+    try {
-    };
+      const date = new Date(dateString);
+      return new Intl.DateTimeFormat("pt-BR").format(date);
+    } catch (e) {
+      return dateString; // Retorna o string original se o formato for inválido
+    }
+  };
 
-    const formatDate = (dateString: string | null | undefined) => {
+  const fetchPacientes = useCallback(async () => {
-        if (!dateString) return "N/A";
+    try {
-        try {
+      setLoading(true);
-            const date = new Date(dateString);
+      setError(null);
-            return new Intl.DateTimeFormat("pt-BR").format(date);
+      const json = await api.get("/rest/v1/patients");
-        } catch (e) {
+      const items = Array.isArray(json)
-            return dateString; // Retorna o string original se o formato for inválido
+        ? json
-        }
+        : Array.isArray(json?.data)
-    };
+        ? json.data
+        : [];
 
-    const fetchPacientes = useCallback(async () => {
+      const mapped: Paciente[] = items.map((p: any) => ({
-        try {
+        id: String(p.id ?? ""),
-            setLoading(true);
+        nome: p.full_name ?? "—",
-            setError(null);
+        telefone: p.phone_mobile ?? "N/A",
-            const json = await api.get("/rest/v1/patients");
+        cidade: p.city ?? "N/A",
-            const items = Array.isArray(json)
+        estado: p.state ?? "N/A",
-                ? json
+        ultimoAtendimento: formatDate(p.created_at),
-                : Array.isArray(json?.data)
+        proximoAtendimento: "N/A", // Necessita de lógica de agendamento real
-                    ? json.data
+        email: p.email ?? "N/A",
-                    : [];
+        birth_date: p.birth_date ?? "N/A",
+        cpf: p.cpf ?? "N/A",
+        blood_type: p.blood_type ?? "N/A",
+        weight_kg: p.weight_kg ?? 0,
+        height_m: p.height_m ?? 0,
+        street: p.street ?? "N/A",
+        number: p.number ?? "N/A",
+        complement: p.complement ?? "N/A",
+        neighborhood: p.neighborhood ?? "N/A",
+        cep: p.cep ?? "N/A",
+      }));
 
-            const mapped: Paciente[] = items.map((p: any) => ({
+      setPacientes(mapped);
-                id: String(p.id ?? ""),
+      setCurrentPage(1); // Resetar a página ao carregar novos dados
-                nome: p.full_name ?? "—",
+    } catch (e: any) {
-                telefone: p.phone_mobile ?? "N/A",
+      console.error("Erro ao carregar pacientes:", e);
-                cidade: p.city ?? "N/A",
+      setError(e?.message || "Erro ao carregar pacientes");
-                estado: p.state ?? "N/A",
+    } finally {
-                ultimoAtendimento: formatDate(p.created_at),
+      setLoading(false);
-                proximoAtendimento: "N/A", // Necessita de lógica de agendamento real
+    }
-                email: p.email ?? "N/A",
+  }, []);
-                birth_date: p.birth_date ?? "N/A",
-                cpf: p.cpf ?? "N/A",
-                blood_type: p.blood_type ?? "N/A",
-                weight_kg: p.weight_kg ?? 0,
-                height_m: p.height_m ?? 0,
-                street: p.street ?? "N/A",
-                number: p.number ?? "N/A",
-                complement: p.complement ?? "N/A",
-                neighborhood: p.neighborhood ?? "N/A",
-                cep: p.cep ?? "N/A",
-            }));
 
-            setPacientes(mapped);
+  useEffect(() => {
-            setCurrentPage(1); // Resetar a página ao carregar novos dados
+    fetchPacientes();
-        } catch (e: any) {
+  }, [fetchPacientes]);
-            console.error("Erro ao carregar pacientes:", e);
-            setError(e?.message || "Erro ao carregar pacientes");
-        } finally {
-            setLoading(false);
-        }
-    }, []);
 
-    useEffect(() => {
+  return (
-        fetchPacientes();
+    <Sidebar>
-    }, [fetchPacientes]);
+      <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>
+            <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
+            <p className="text-muted-foreground text-sm sm:text-base">
+              Lista de pacientes vinculados
+            </p>
+          </div>
+          {/* Controles de filtro e novo paciente */}
+          {/* Alterado para que o Select e o Link ocupem a largura total em telas pequenas e fiquem lado a lado em telas maiores */}
+          <div className="flex flex-wrap gap-3 mt-4 sm:mt-0 w-full sm:w-auto justify-start sm:justify-end">
+            <Select
+              onValueChange={handleItemsPerPageChange}
+              defaultValue={String(itemsPerPage)}
+            >
+              <SelectTrigger className="w-full sm:w-[140px]">
+                <SelectValue placeholder="Itens por pág." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5 por página</SelectItem>
+                <SelectItem value="10">10 por página</SelectItem>
+                <SelectItem value="20">20 por página</SelectItem>
+              </SelectContent>
+            </Select>
+            <Link href="/doctor/pacientes/novo" className="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>
 
-    return (
+        <div className="bg-card rounded-lg border border-border overflow-hidden shadow-md">
-        <Sidebar>
+          {/* Tabela para Telas Médias e Grandes */}
-            <div className="space-y-6 px-2 sm:px-4 md:px-6">
+          <div className="overflow-x-auto hidden md:block">
-                {/* Cabeçalho */}
+            {" "}
-                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3"> {/* Ajustado para flex-col em telas pequenas */}
+            {/* Esconde em telas pequenas */}
-                    <div>
+            <table className="min-w-[600px] w-full">
-                        <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
+              <thead className="bg-muted border-b border-border">
-                        <p className="text-muted-foreground text-sm sm:text-base">
+                <tr>
-                            Lista de pacientes vinculados
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">
-                        </p>
+                    Nome
+                  </th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">
+                    Telefone
+                  </th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">
+                    Cidade
+                  </th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">
+                    Estado
+                  </th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell">
+                    Último atendimento
+                  </th>
+                  <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>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <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>
+                  </tr>
+                ) : pacientes.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={7}
+                      className="p-8 text-center text-muted-foreground"
+                    >
+                      Nenhum paciente encontrado
+                    </td>
+                  </tr>
+                ) : (
+                  currentItems.map((p) => (
+                    <tr
+                      key={p.id}
+                      className="border-b border-border hover:bg-accent/40 transition-colors"
+                    >
+                      <td className="p-3 sm:p-4">{p.nome}</td>
+                      <td className="p-3 sm:p-4 text-muted-foreground">
+                        {p.telefone}
+                      </td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">
+                        {p.cidade}
+                      </td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">
+                        {p.estado}
+                      </td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden xl:table-cell">
+                        {p.ultimoAtendimento}
+                      </td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden xl:table-cell">
+                        {p.proximoAtendimento}
+                      </td>
+                      <td className="p-3 sm:p-4">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button className="text-primary hover:underline text-sm sm:text-base">
+                              Ações
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() => handleOpenModal(p)}
+                            >
+                              <Eye className="w-4 h-4 mr-2" />
+                              Ver detalhes
+                            </DropdownMenuItem>
+                            <DropdownMenuItem asChild>
+                              <Link href={`/doctor/pacientes/${p.id}/laudos`}>
+                                <Edit className="w-4 h-4 mr-2" />
+                                Laudos
+                              </Link>
+                            </DropdownMenuItem>
+                            <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
+                                );
+                                setPacientes(newPacientes);
+                                alert(`Paciente ID: ${p.id} excluído`);
+                              }}
+                              className="text-red-600 focus:bg-red-50 focus:text-red-600"
+                            >
+                              <Trash2 className="w-4 h-4 mr-2" />
+                              Excluir
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Layout em Cards/Lista para 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" />
+                Carregando pacientes...
+              </div>
+            ) : error ? (
+              <div className="p-6 text-red-600 text-center">{`Erro: ${error}`}</div>
+            ) : pacientes.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                Nenhum paciente encontrado
+              </div>
+            ) : (
+              currentItems.map((p) => (
+                <div
+                  key={p.id}
+                  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>
-                    {/* Controles de filtro e novo paciente */}
+                    {/* Removido o 'truncate' e adicionado 'break-words' no telefone */}
-                    {/* Alterado para que o Select e o Link ocupem a largura total em telas pequenas e fiquem lado a lado em telas maiores */}
+                    <div className="text-sm text-muted-foreground break-words">
-                    <div className="flex flex-wrap gap-3 mt-4 sm:mt-0 w-full sm:w-auto justify-start sm:justify-end">
+                      Telefone: **{p.telefone || "N/A"}**
-                        <Select
+                    </div>
-                            onValueChange={handleItemsPerPageChange}
+                  </div>
-                            defaultValue={String(itemsPerPage)}
+                  <div className="ml-4 flex-shrink-0">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="icon">
+                          <Eye className="w-4 h-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handleOpenModal(p)}>
+                          <Eye className="w-4 h-4 mr-2" />
+                          Ver detalhes
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                          <Link href={`/doctor/pacientes/${p.id}/laudos`}>
+                            <Edit className="w-4 h-4 mr-2" />
+                            Laudos
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() =>
+                            alert(`Agenda para paciente ID: ${p.id}`)
+                          }
                         >
-                            <SelectTrigger className="w-full sm:w-[140px]">
+                          <Calendar className="w-4 h-4 mr-2" />
-                                <SelectValue placeholder="Itens por pág." />
+                          Ver agenda
-                            </SelectTrigger>
+                        </DropdownMenuItem>
-                            <SelectContent>
+                        <DropdownMenuItem
-                                <SelectItem value="5">5 por página</SelectItem>
+                          onClick={() => {
-                                <SelectItem value="10">10 por página</SelectItem>
+                            const newPacientes = pacientes.filter(
-                                <SelectItem value="20">20 por página</SelectItem>
+                              (pac) => pac.id !== p.id
-                            </SelectContent>
+                            );
-                        </Select>
+                            setPacientes(newPacientes);
-                        <Link href="/doctor/pacientes/novo" className="w-full sm:w-auto">
+                            alert(`Paciente ID: ${p.id} excluído`);
-                            <Button variant="default" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto">
+                          }}
-                                Novo Paciente
+                          className="text-red-600 focus:bg-red-50 focus:text-red-600"
-                            </Button>
+                        >
-                        </Link>
+                          <Trash2 className="w-4 h-4 mr-2" />
-                    </div>
+                          Excluir
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
                 </div>
+              ))
+            )}
+          </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}
+                disabled={currentPage === 1}
+                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
+              >
+                {"< Anterior"}
+              </button>
 
-                <div className="bg-card rounded-lg border border-border overflow-hidden shadow-md">
+              {/* Números das Páginas */}
-                    {/* Tabela para Telas Médias e Grandes */}
+              {visiblePageNumbers.map((number) => (
-                    <div className="overflow-x-auto hidden md:block"> {/* Esconde em telas pequenas */}
+                <button
-                        <table className="min-w-[600px] w-full">
+                  key={number}
-                            <thead className="bg-muted border-b border-border">
+                  onClick={() => paginate(number)}
-                                <tr>
+                  className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-border ${
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground">Nome</th>
+                    currentPage === number
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground">
+                      ? "bg-blue-600 text-primary-foreground shadow-md border-blue-600"
-                                        Telefone
+                      : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
-                                    </th>
+                  }`}
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">
+                >
-                                        Cidade
+                  {number}
-                                    </th>
+                </button>
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">
+              ))}
-                                        Estado
-                                    </th>
-                                    <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell">
-                                        Último atendimento
-                                    </th>
-                                    <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>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {loading ? (
-                                    <tr>
-                                        <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>
-                                    </tr>
-                                ) : pacientes.length === 0 ? (
-                                    <tr>
-                                        <td colSpan={7} className="p-8 text-center text-muted-foreground">
-                                            Nenhum paciente encontrado
-                                        </td>
-                                    </tr>
-                                ) : (
-                                    currentItems.map((p) => (
-                                        <tr
-                                            key={p.id}
-                                            className="border-b border-border hover:bg-accent/40 transition-colors"
-                                        >
-                                            <td className="p-3 sm:p-4">{p.nome}</td>
-                                            <td className="p-3 sm:p-4 text-muted-foreground">
-                                                {p.telefone}
-                                            </td>
-                                            <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">
-                                                {p.cidade}
-                                            </td>
-                                            <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">
-                                                {p.estado}
-                                            </td>
-                                            <td className="p-3 sm:p-4 text-muted-foreground hidden xl:table-cell">
-                                                {p.ultimoAtendimento}
-                                            </td>
-                                            <td className="p-3 sm:p-4 text-muted-foreground hidden xl:table-cell">
-                                                {p.proximoAtendimento}
-                                            </td>
-                                            <td className="p-3 sm:p-4">
-                                                <DropdownMenu>
-                                                    <DropdownMenuTrigger asChild>
-                                                        <button className="text-primary hover:underline text-sm sm:text-base">
-                                                          Ações
-                                                        </button>
-                                                    </DropdownMenuTrigger>
-                                                    <DropdownMenuContent align="end">
-                                                        <DropdownMenuItem onClick={() => handleOpenModal(p)}>
-                                                            <Eye className="w-4 h-4 mr-2" />
-                                                            Ver detalhes
-                                                        </DropdownMenuItem>
-                                                        <DropdownMenuItem asChild>
-                                                            <Link href={`/doctor/pacientes/${p.id}/laudos`}>
-                                                                <Edit className="w-4 h-4 mr-2" />
-                                                                Laudos
-                                                            </Link>
-                                                        </DropdownMenuItem>
-                                                        <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);
-                                                                setPacientes(newPacientes);
-                                                                alert(`Paciente ID: ${p.id} excluído`);
-                                                            }}
-                                                            className="text-red-600 focus:bg-red-50 focus:text-red-600"
-                                                        >
-                                                            <Trash2 className="w-4 h-4 mr-2" />
-                                                            Excluir
-                                                        </DropdownMenuItem>
-                                                    </DropdownMenuContent>
-                                                </DropdownMenu>
-                                            </td>
-                                        </tr>
-                                    ))
-                                )}
-                            </tbody>
-                        </table>
-                    </div>
 
-                    {/* Layout em Cards/Lista para Telas Pequenas */}
+              {/* Botão Próximo */}
-                    <div className="md:hidden divide-y divide-border"> {/* Visível apenas em telas pequenas */}
+              <button
-                        {loading ? (
+                onClick={goToNextPage}
-                            <div className="p-6 text-muted-foreground text-center">
+                disabled={currentPage === totalPages}
-                                <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
+                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
-                                Carregando pacientes...
+              >
-                            </div>
+                {"Próximo >"}
-                        ) : error ? (
+              </button>
-                            <div className="p-6 text-red-600 text-center">{`Erro: ${error}`}</div>
-                        ) : pacientes.length === 0 ? (
-                            <div className="p-8 text-center text-muted-foreground">
-                                Nenhum paciente encontrado
-                            </div>
-                        ) : (
-                            currentItems.map((p) => (
-                                <div key={p.id} 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 */}
-                                        <div className="text-sm text-muted-foreground break-words"> 
-                                            Telefone: **{p.telefone || "N/A"}**
-                                        </div>
-                                    </div>
-                                    <div className="ml-4 flex-shrink-0">
-                                        <DropdownMenu>
-                                            <DropdownMenuTrigger asChild>
-                                                <Button variant="outline" size="icon">
-                                                    <Eye className="w-4 h-4" />
-                                                </Button>
-                                            </DropdownMenuTrigger>
-                                            <DropdownMenuContent align="end">
-                                                <DropdownMenuItem onClick={() => handleOpenModal(p)}>
-                                                    <Eye className="w-4 h-4 mr-2" />
-                                                    Ver detalhes
-                                                </DropdownMenuItem>
-                                                <DropdownMenuItem asChild>
-                                                    <Link href={`/doctor/pacientes/${p.id}/laudos`}>
-                                                        <Edit className="w-4 h-4 mr-2" />
-                                                        Laudos
-                                                    </Link>
-                                                </DropdownMenuItem>
-                                                <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);
-                                                        setPacientes(newPacientes);
-                                                        alert(`Paciente ID: ${p.id} excluído`);
-                                                    }}
-                                                    className="text-red-600 focus:bg-red-50 focus:text-red-600"
-                                                >
-                                                    <Trash2 className="w-4 h-4 mr-2" />
-                                                    Excluir
-                                                </DropdownMenuItem>
-                                            </DropdownMenuContent>
-                                        </DropdownMenu>
-                                    </div>
-                                </div>
-                            ))
-                        )}
-                    </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}
-                                disabled={currentPage === 1}
-                                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
-                            >
-                                {"< Anterior"}
-                            </button>
-
-                            {/* Números das Páginas */}
-                            {visiblePageNumbers.map((number) => (
-                                <button
-                                    key={number}
-                                    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-secondary text-secondary-foreground hover:bg-secondary/80"
-                                    }`}
-                                >
-                                    {number}
-                                </button>
-                            ))}
-
-                            {/* Botão Próximo */}
-                            <button
-                                onClick={goToNextPage}
-                                disabled={currentPage === totalPages}
-                                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
-                            >
-                                {"Próximo >"}
-                            </button>
-
-                        </div>
-                    )}
-                </div>
             </div>
+          )}
+        </div>
+      </div>
 
       <PatientDetailsModal
         patient={selectedPatient}
@@ -418,4 +467,4 @@ export default function PacientesPage() {
       />
     </Sidebar>
   );
-}
+}

app/login/page.tsx

@@ -138,7 +138,7 @@ export default function LoginPage() {
                 Não tem uma conta de paciente?{" "}
               </span>
               <Link href="/patient/register">
-                <span className="font-semibold text-primary hover:underline cursor-pointer">
+                <span className="font-semibold text-blue-600 hover:text-blue-700 hover:underline cursor-pointer">
                   Crie uma agora
                 </span>
               </Link>
@@ -232,18 +232,21 @@ export default function LoginPage() {
 
               {/* Botões */}
               <div className="flex gap-3 pt-2">
+                {/* Botão Cancelar – Azul contornado */}
                 <Button
                   variant="outline"
                   onClick={closeModal}
                   disabled={isLoading}
-                  className="flex-1"
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
                 >
                   Cancelar
                 </Button>
+
+                {/* Botão Resetar Senha – Azul sólido */}
                 <Button
                   onClick={handleResetPassword}
                   disabled={isLoading}
-                  className="flex-1"
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
                 >
                   {isLoading ? "Enviando..." : "Resetar Senha"}
                 </Button>

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";
@@ -10,181 +16,212 @@ import { doctorsService } from "services/doctorsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
 export default function ManagerDashboard() {
-    // 🔹 Estados para usuários
+  // 🔹 Estados para usuários
-    const [firstUser, setFirstUser] = useState<any>(null);
+  const [firstUser, setFirstUser] = useState<any>(null);
-    const [loadingUser, setLoadingUser] = useState(true);
+  const [loadingUser, setLoadingUser] = useState(true);
 
-    // 🔹 Estados para médicos
+  // 🔹 Estados para médicos
-    const [doctors, setDoctors] = useState<any[]>([]);
+  const [doctors, setDoctors] = useState<any[]>([]);
-    const [loadingDoctors, setLoadingDoctors] = useState(true);
+  const [loadingDoctors, setLoadingDoctors] = useState(true);
 
-    // 🔹 Buscar primeiro usuário
+  // 🔹 Buscar primeiro usuário
-    useEffect(() => {
+  useEffect(() => {
-        async function fetchFirstUser() {
+    async function fetchFirstUser() {
-            try {
+      try {
-                const data = await usersService.list_roles();
+        const data = await usersService.list_roles();
-                if (Array.isArray(data) && data.length > 0) {
+        if (Array.isArray(data) && data.length > 0) {
-                    setFirstUser(data[0]);
+          setFirstUser(data[0]);
-                }
-            } catch (error) {
-                console.error("Erro ao carregar usuário:", error);
-            } finally {
-                setLoadingUser(false);
-            }
         }
+      } catch (error) {
+        console.error("Erro ao carregar usuário:", error);
+      } finally {
+        setLoadingUser(false);
+      }
+    }
 
-        fetchFirstUser();
+    fetchFirstUser();
-    }, []);
+  }, []);
 
-    // 🔹 Buscar 3 primeiros médicos
+  // 🔹 Buscar 3 primeiros médicos
-    useEffect(() => {
+  useEffect(() => {
-        async function fetchDoctors() {
+    async function fetchDoctors() {
-            try {
+      try {
-                const data = await doctorsService.list(); // ajuste se seu service tiver outro método
+        const data = await doctorsService.list(); // ajuste se seu service tiver outro método
-                if (Array.isArray(data)) {
+        if (Array.isArray(data)) {
-                    setDoctors(data.slice(0, 3)); // pega os 3 primeiros
+          setDoctors(data.slice(0, 3)); // pega os 3 primeiros
-                }
-            } catch (error) {
-                console.error("Erro ao carregar médicos:", error);
-            } finally {
-                setLoadingDoctors(false);
-            }
         }
+      } catch (error) {
+        console.error("Erro ao carregar médicos:", error);
+      } finally {
+        setLoadingDoctors(false);
+      }
+    }
 
-        fetchDoctors();
+    fetchDoctors();
-    }, []);
+  }, []);
 
-    return (
+  return (
-        <Sidebar>
+    <Sidebar>
-            <div className="space-y-6">
+      <div className="space-y-6">
-                {/* Cabeçalho */}
+        {/* Cabeçalho */}
-                <div>
+        <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <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 */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* 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>
+              <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>
+            </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>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loadingUser ? (
+                <div className="text-gray-500 text-sm">
+                  Carregando usuário...
                 </div>
-
+              ) : firstUser ? (
-                {/* Cards principais */}
+                <>
-                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div className="text-2xl font-bold">
-                    {/* Card 1 */}
+                    {firstUser.full_name || "Sem nome"}
-                    <Card>
+                  </div>
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <p className="text-xs text-muted-foreground">
-                            <CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle>
+                    {firstUser.email || "Sem e-mail cadastrado"}
-                            <Calendar className="h-4 w-4 text-muted-foreground" />
+                  </p>
-                        </CardHeader>
+                </>
-                        <CardContent>
+              ) : (
-                            <div className="text-2xl font-bold">0</div>
+                <div className="text-sm text-gray-500">
-                            <p className="text-xs text-muted-foreground">Relatórios disponíveis</p>
+                  Nenhum usuário encontrado
-                        </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>
-                            <Clock className="h-4 w-4 text-muted-foreground" />
-                        </CardHeader>
-                        <CardContent>
-                            {loadingUser ? (
-                                <div className="text-gray-500 text-sm">Carregando usuário...</div>
-                            ) : firstUser ? (
-                                <>
-                                    <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>
-                            )}
-                        </CardContent>
-                    </Card>
-
-                    {/* Card 3 — Perfil */}
-                    <Card>
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Perfil</CardTitle>
-                            <User className="h-4 w-4 text-muted-foreground" />
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">100%</div>
-                            <p className="text-xs text-muted-foreground">Dados completos</p>
-                        </CardContent>
-                    </Card>
                 </div>
+              )}
+            </CardContent>
+          </Card>
 
-                {/* Cards secundários */}
+          {/* Card 3 — Perfil */}
-                <div className="grid md:grid-cols-2 gap-6">
+          <Card>
-                    {/* Card — Ações rápidas */}
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <Card>
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
-                        <CardHeader>
+              <User className="h-4 w-4 text-muted-foreground" />
-                            <CardTitle>Ações Rápidas</CardTitle>
+            </CardHeader>
-                            <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+            <CardContent>
-                        </CardHeader>
+              <div className="text-2xl font-bold">100%</div>
-                        <CardContent className="space-y-4">
+              <p className="text-xs text-muted-foreground">Dados completos</p>
-                            <Link href="/manager/home">
+            </CardContent>
-                                <Button className="w-full justify-start">
+          </Card>
-                                    <User className="mr-2 h-4 w-4" />
+        </div>
-                                    Gestão de Médicos
-                                </Button>
-                            </Link>
-                            <Link href="/manager/usuario">
-                                <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">
-                                    <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">
-                                    <Plus className="mr-2 h-4 w-4" />
-                                    Criar novo Usuário
-                                </Button>
-                            </Link>
-                        </CardContent>
-                    </Card>
 
-                    {/* Card — Gestão de Médicos */}
+        {/* Cards secundários */}
-                    <Card>
+        <div className="grid md:grid-cols-2 gap-6">
-                        <CardHeader>
+          {/* Card — Ações rápidas */}
-                            <CardTitle>Gestão de Médicos</CardTitle>
+          <Card>
-                            <CardDescription>Médicos cadastrados recentemente</CardDescription>
+            <CardHeader>
-                        </CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
-                        <CardContent>
+              <CardDescription>
-                            {loadingDoctors ? (
+                Acesse rapidamente as principais funcionalidades
-                                <p className="text-sm text-gray-500">Carregando médicos...</p>
+              </CardDescription>
-                            ) : doctors.length === 0 ? (
+            </CardHeader>
-                                <p className="text-sm text-gray-500">Nenhum médico cadastrado.</p>
+            <CardContent className="space-y-4">
-                            ) : (
+              <Link href="/manager/home">
-                                <div className="space-y-4">
+                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                                    {doctors.map((doc, index) => (
+                  <User className="mr-2 h-4 w-4 text-white" />
-                                        <div
+                  Gestão de Médicos
-                                            key={index}
+                </Button>
-                                            className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-100"
+              </Link>
-                                        >
+              <Link href="/manager/usuario">
-                                            <div>
+                <Button
-                                                <p className="font-medium">{doc.full_name || "Sem nome"}</p>
+                  variant="outline"
-                                                <p className="text-sm text-gray-600">
+                  className="w-full justify-start bg-transparent"
-                                                    {doc.specialty || "Sem especialidade"}
+                >
-                                                </p>
+                  <User className="mr-2 h-4 w-4" />
-                                            </div>
+                  Usuários Cadastrados
-                                            <div className="text-right">
+                </Button>
-                                                <p className="font-medium text-green-700">
+              </Link>
-                                                    {doc.active ? "Ativo" : "Inativo"}
+              <Link href="/manager/home/novo">
-                                                </p>
+                <Button
-                                            </div>
+                  variant="outline"
-                                        </div>
+                  className="w-full justify-start bg-transparent"
-                                    ))}
+                >
-                                </div>
+                  <Plus className="mr-2 h-4 w-4" />
-                            )}
+                  Adicionar Novo Médico
-                        </CardContent>
+                </Button>
-                    </Card>
+              </Link>
+              <Link href="/manager/usuario/novo">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Criar novo Usuário
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          {/* Card — Gestão de Médicos */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Gestão de Médicos</CardTitle>
+              <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>
+              ) : (
+                <div className="space-y-4">
+                  {doctors.map((doc, index) => (
+                    <div
+                      key={index}
+                      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="text-sm text-gray-600">
+                          {doc.specialty || "Sem especialidade"}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium text-green-700">
+                          {doc.active ? "Ativo" : "Inativo"}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-            </div>
+              )}
-        </Sidebar>
+            </CardContent>
-    );
+          </Card>
+        </div>
+      </div>
+    </Sidebar>
+  );
 }

app/manager/disponibilidade/page.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Sidebar from "@/components/Sidebar";
+import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
+
+import { useEffect, useState, useMemo } from "react";
+
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Filter } from "lucide-react";
+
+type Doctor = {
+    id: string;
+    full_name: string;
+    specialty: string;
+    active: boolean;
+};
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+};
+
+export default function AllAvailabilities() {
+    const [availabilities, setAvailabilities] = useState<Availability[] | null>(null);
+    const [doctors, setDoctors] = useState<Doctor[] | null>(null);
+
+    // 🔎 Filtros
+    const [search, setSearch] = useState("");
+    const [specialty, setSpecialty] = useState("all");
+
+    // 🔄 Paginação
+    const ITEMS_PER_PAGE = 6;
+    const [page, setPage] = useState(1);
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const doctorsList = await doctorsService.list();
+                setDoctors(doctorsList);
+
+                const availabilityList = await AvailabilityService.list();
+                setAvailabilities(availabilityList);
+            } catch (e: any) {
+                alert(`${e?.error} ${e?.message}`);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    // 🎯 Obter todas as especialidades existentes
+    const specialties = useMemo(() => {
+        if (!doctors) return [];
+        const unique = Array.from(new Set(doctors.map((d) => d.specialty)));
+        return unique;
+    }, [doctors]);
+
+    // 🔍 Filtrar médicos por especialidade + nome
+    const filteredDoctors = useMemo(() => {
+        if (!doctors) return [];
+
+        return doctors.filter((doctor) => (specialty === "all" ? true : doctor.specialty === specialty)).filter((doctor) => doctor.full_name.toLowerCase().includes(search.toLowerCase()));
+    }, [doctors, search, specialty]);
+
+    // 📄 Paginação (após filtros!)
+    const totalPages = Math.ceil(filteredDoctors.length / ITEMS_PER_PAGE);
+    const paginatedDoctors = filteredDoctors.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE);
+
+    const goNext = () => setPage((p) => Math.min(p + 1, totalPages));
+    const goPrev = () => setPage((p) => Math.max(p - 1, 1));
+
+    if (loading) {
+        return (
+            <Sidebar>
+                <div className="p-6 text-gray-500">Carregando dados...</div>
+            </Sidebar>
+        );
+    }
+
+    if (!doctors || !availabilities) {
+        return (
+            <Sidebar>
+                <div className="p-6 text-red-600 font-medium">Não foi possível carregar médicos ou disponibilidades.</div>
+            </Sidebar>
+        );
+    }
+
+    return (
+        <Sidebar>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Disponibilidade dos Médicos</h1>
+                    <p className="text-gray-600">Visualize a agenda semanal individual de cada médico.</p>
+                </div>
+                <Card>
+                    <CardContent>
+                        {/* 🔎 Filtros */}
+                        <div className="flex flex-col md:flex-row gap-4 items-center">
+                            {/* Filtro por nome */}
+                            <Filter className="w-4 h-4 mr-2" />
+                            <Input
+                                placeholder="Buscar por nome do médico..."
+                                value={search}
+                                onChange={(e) => {
+                                    setSearch(e.target.value);
+                                    setPage(1);
+                                }}
+                                className="w-full md:w-1/3"
+                            />
+
+                            {/* Filtro por especialidade */}
+                            <Select
+                                onValueChange={(value) => {
+                                    setSpecialty(value);
+                                    setPage(1);
+                                }}
+                                defaultValue="all"
+                            >
+                                <SelectTrigger className="w-full md:w-64">
+                                    <SelectValue placeholder="Especialidade" />
+                                </SelectTrigger>
+
+                                <SelectContent>
+                                    <SelectItem value="all">Todas as especialidades</SelectItem>
+                                    {specialties.map((sp) => (
+                                        <SelectItem key={sp} value={sp}>
+                                            {sp}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </CardContent>
+                </Card>
+                {/* GRID de cards */}
+                <div className="grid md:grid-cols-1 lg:grid-cols-1 gap-6">
+                    {paginatedDoctors.map((doctor) => {
+                        const doctorAvailabilities = availabilities.filter((a) => a.doctor_id === doctor.id);
+
+                        return (
+                            <Card key={doctor.id}>
+                                <CardHeader>
+                                    <CardTitle className="text-xl font-semibold">{doctor.full_name}</CardTitle>
+                                </CardHeader>
+
+                                <CardContent>
+                                    <WeeklyScheduleCard doctorId={doctor.id} />
+                                </CardContent>
+                            </Card>
+                        );
+                    })}
+                </div>
+
+                {/* 📄 Paginação */}
+                {totalPages > 1 && (
+                    <div className="flex justify-center items-center gap-4 pt-4">
+                        <Button variant="outline" onClick={goPrev} disabled={page === 1}>
+                            Anterior
+                        </Button>
+
+                        <span className="text-gray-700 font-medium">
+                            Página {page} de {totalPages}
+                        </span>
+
+                        <Button variant="outline" onClick={goNext} disabled={page === totalPages}>
+                            Próxima
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </Sidebar>
+    );
+}

app/manager/usuario/page.tsx

@@ -3,416 +3,451 @@
 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";
 
 interface FlatUser {
-    id: string;
+  id: string;
-    user_id: string;
+  user_id: string;
-    full_name?: string;
+  full_name?: string;
-    email: string;
+  email: string;
-    phone?: string | null;
+  phone?: string | null;
-    role: string;
+  role: string;
 }
 
 interface UserInfoResponse {
-    user: any;
+  user: any;
-    profile: any;
+  profile: any;
-    roles: string[];
+  roles: string[];
-    permissions: Record<string, boolean>;
+  permissions: Record<string, boolean>;
 }
 
 export default function UsersPage() {
-    const [users, setUsers] = useState<FlatUser[]>([]);
+  const [users, setUsers] = useState<FlatUser[]>([]);
-    const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
-    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  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");
-    );
-    const [selectedRole, setSelectedRole] = useState<string>("all");
 
-    // --- Lógica de Paginação INÍCIO ---
+  // --- Lógica de Paginação INÍCIO ---
-    const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
-    const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
 
-    const handleItemsPerPageChange = (value: string) => {
+  const handleItemsPerPageChange = (value: string) => {
-        setItemsPerPage(Number(value));
+    setItemsPerPage(Number(value));
-        setCurrentPage(1);
+    setCurrentPage(1);
-    };
+  };
-    // --- Lógica de Paginação FIM ---
+  // --- Lógica de Paginação FIM ---
 
-    const fetchUsers = useCallback(async () => {
+  const fetchUsers = useCallback(async () => {
-        setLoading(true);
+    setLoading(true);
-        setError(null);
+    setError(null);
-        try {
+    try {
-            const rolesData: any[] = await usersService.list_roles();
+      const rolesData: any[] = await usersService.list_roles();
-            const rolesArray = Array.isArray(rolesData) ? rolesData : [];
+      const rolesArray = Array.isArray(rolesData) ? rolesData : [];
 
-            const profilesData: any[] = await api.get(
+      const profilesData: any[] = await api.get(
-                `/rest/v1/profiles?select=id,full_name,email,phone`
+        `/rest/v1/profiles?select=id,full_name,email,phone`
-            );
+      );
 
-            const profilesById = new Map<string, any>();
+      const profilesById = new Map<string, any>();
-            if (Array.isArray(profilesData)) {
+      if (Array.isArray(profilesData)) {
-                for (const p of profilesData) {
+        for (const p of profilesData) {
-                    if (p?.id) profilesById.set(p.id, p);
+          if (p?.id) profilesById.set(p.id, p);
-                }
-            }
-
-            const mapped: FlatUser[] = rolesArray.map((roleItem) => {
-                const uid = roleItem.user_id;
-                const profile = profilesById.get(uid);
-                return {
-                    id: uid,
-                    user_id: uid,
-                    full_name: profile?.full_name ?? "—",
-                    email: profile?.email ?? "—",
-                    phone: profile?.phone ?? "—",
-                    role: roleItem.role ?? "—",
-                };
-            });
-
-            setUsers(mapped);
-            setCurrentPage(1);
-        } catch (err: any) {
-            console.error("Erro ao buscar usuários:", err);
-            setError("Não foi possível carregar os usuários. Veja console.");
-            setUsers([]);
-        } finally {
-            setLoading(false);
         }
-    }, []);
+      }
 
-    useEffect(() => {
+      const mapped: FlatUser[] = rolesArray.map((roleItem) => {
-        const init = async () => {
+        const uid = roleItem.user_id;
-            try {
+        const profile = profilesById.get(uid);
-                await login();
+        return {
-            } catch (e) {
+          id: uid,
-                console.warn("login falhou no init:", e);
+          user_id: uid,
-            }
+          full_name: profile?.full_name ?? "—",
-            await fetchUsers();
+          email: profile?.email ?? "—",
+          phone: profile?.phone ?? "—",
+          role: roleItem.role ?? "—",
         };
-        init();
+      });
-    }, [fetchUsers]);
 
-    const openDetailsDialog = async (flatUser: FlatUser) => {
+      setUsers(mapped);
-        setDetailsDialogOpen(true);
+      setCurrentPage(1);
-        setUserDetails(null);
+    } catch (err: any) {
+      console.error("Erro ao buscar usuários:", err);
+      setError("Não foi possível carregar os usuários. Veja console.");
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
 
-        try {
+  useEffect(() => {
-            const data = await usersService.full_data(flatUser.user_id);
+    const init = async () => {
-            setUserDetails(data);
+      try {
-        } catch (err: any) {
+        await login();
-            console.error("Erro ao carregar detalhes:", err);
+      } catch (e) {
-            setUserDetails({
+        console.warn("login falhou no init:", e);
-                user: { id: flatUser.user_id, email: flatUser.email },
+      }
-                profile: { full_name: flatUser.full_name, phone: flatUser.phone },
+      await fetchUsers();
-                roles: [flatUser.role],
-                permissions: {},
-            });
-        }
     };
+    init();
+  }, [fetchUsers]);
 
-    const filteredUsers =
+  const openDetailsDialog = async (flatUser: FlatUser) => {
-        selectedRole && selectedRole !== "all"
+    setDetailsDialogOpen(true);
-            ? users.filter((u) => u.role === selectedRole)
+    setUserDetails(null);
-            : users;
 
-    const indexOfLastItem = currentPage * itemsPerPage;
+    try {
-    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+      const data = await usersService.full_data(flatUser.user_id);
-    const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
+      setUserDetails(data);
+    } catch (err: any) {
+      console.error("Erro ao carregar detalhes:", err);
+      setUserDetails({
+        user: { id: flatUser.user_id, email: flatUser.email },
+        profile: { full_name: flatUser.full_name, phone: flatUser.phone },
+        roles: [flatUser.role],
+        permissions: {},
+      });
+    }
+  };
 
-    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const filteredUsers =
+    selectedRole && selectedRole !== "all"
+      ? users.filter((u) => u.role === selectedRole)
+      : users;
 
-    const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
 
-    const goToPrevPage = () => {
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
-        setCurrentPage((prev) => Math.max(1, prev - 1));
-    };
 
-    const goToNextPage = () => {
+  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
-        setCurrentPage((prev) => Math.min(totalPages, prev + 1));
-    };
 
-    const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
+  const goToPrevPage = () => {
-        const pages: number[] = [];
+    setCurrentPage((prev) => Math.max(1, prev - 1));
-        const maxVisiblePages = 5;
+  };
-        const halfRange = Math.floor(maxVisiblePages / 2);
-        let startPage = Math.max(1, currentPage - halfRange);
-        let endPage = Math.min(totalPages, currentPage + halfRange);
 
-        if (endPage - startPage + 1 < maxVisiblePages) {
+  const goToNextPage = () => {
-            if (endPage === totalPages) {
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
-                startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+  };
-            }
-            if (startPage === 1) {
-                endPage = Math.min(totalPages, maxVisiblePages);
-            }
-        }
 
-        for (let i = startPage; i <= endPage; i++) {
+  const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
-            pages.push(i);
+    const pages: number[] = [];
-        }
+    const maxVisiblePages = 5;
-        return pages;
+    const halfRange = Math.floor(maxVisiblePages / 2);
-    };
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(totalPages, currentPage + halfRange);
 
-    const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (endPage === totalPages) {
+        startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+      }
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, maxVisiblePages);
+      }
+    }
 
-    return (
+    for (let i = startPage; i <= endPage; i++) {
-        <Sidebar>
+      pages.push(i);
-            <div className="space-y-6 px-2 sm:px-4 md:px-8">
+    }
+    return pages;
+  };
 
-                {/* Header */}
+  const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                    <div>
-                        <h1 className="text-2xl font-bold text-gray-900">Usuários</h1>
-                        <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">
-                            <Plus className="w-4 h-4 mr-2" /> Novo Usuário
-                        </Button>
-                    </Link>
-                </div>
 
-                {/* Filtro e Itens por Página */}
+  return (
-                <div className="flex flex-wrap items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
+    <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>
+            <h1 className="text-2xl font-bold text-gray-900">Usuários</h1>
+            <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-blue-600 hover:bg-blue-700">
+              <Plus className="w-4 h-4 mr-2" /> Novo Usuário
+            </Button>
+          </Link>
+        </div>
 
-                    {/* Select de Filtro por Papel - Ajustado para resetar a página */}
+        {/* Filtro e Itens por Página */}
-                    <div className="flex items-center gap-2 w-full md:w-auto">
+        <div className="flex flex-wrap items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap">
+          {/* Select de Filtro por Papel - Ajustado para resetar a página */}
-                            Filtrar por papel
+          <div className="flex items-center gap-2 w-full md:w-auto">
-                        </span>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap">
-                        <Select
+              Filtrar por papel
-                            onValueChange={(value) => {
+            </span>
-                                setSelectedRole(value);
+            <Select
-                                setCurrentPage(1);
+              onValueChange={(value) => {
-                            }}
+                setSelectedRole(value);
-                            value={selectedRole}>
+                setCurrentPage(1);
+              }}
+              value={selectedRole}
+            >
+              <SelectTrigger className="w-full sm:w-[180px]">
+                {" "}
+                {/* w-full para mobile, w-[180px] para sm+ */}
+                <SelectValue placeholder="Filtrar por papel" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+                <SelectItem value="gestor">Gestor</SelectItem>
+                <SelectItem value="medico">Médico</SelectItem>
+                <SelectItem value="secretaria">Secretária</SelectItem>
+                <SelectItem value="user">Usuário</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-                            <SelectTrigger className="w-full sm:w-[180px]"> {/* w-full para mobile, w-[180px] para sm+ */}
+          {/* Select de Itens por Página */}
-                                <SelectValue placeholder="Filtrar por papel" />
+          <div className="flex items-center gap-2 w-full md:w-auto">
-                            </SelectTrigger>
+            <span className="text-sm font-medium text-foreground whitespace-nowrap">
-                            <SelectContent>
+              Itens por página
-                                <SelectItem value="all">Todos</SelectItem>
+            </span>
-                                <SelectItem value="admin">Admin</SelectItem>
+            <Select
-                                <SelectItem value="gestor">Gestor</SelectItem>
+              onValueChange={handleItemsPerPageChange}
-                                <SelectItem value="medico">Médico</SelectItem>
+              defaultValue={String(itemsPerPage)}
-                                <SelectItem value="secretaria">Secretária</SelectItem>
+            >
-                                <SelectItem value="user">Usuário</SelectItem>
+              <SelectTrigger className="w-full sm:w-[140px]">
-                            </SelectContent>
+                {" "}
-                        </Select>
+                {/* w-full para mobile, w-[140px] para sm+ */}
-                    </div>
+                <SelectValue placeholder="Itens por pág." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5 por página</SelectItem>
+                <SelectItem value="10">10 por página</SelectItem>
+                <SelectItem value="20">20 por página</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button variant="outline" className="ml-auto w-full md:w-auto">
+            <Filter className="w-4 h-4 mr-2" />
+            Filtro avançado
+          </Button>
+        </div>
+        {/* Fim do Filtro e Itens por Página */}
 
-                    {/* Select de Itens por Página */}
+        {/* Tabela/Lista */}
-                    <div className="flex items-center gap-2 w-full md:w-auto">
+        <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-x-auto">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap">
+          {loading ? (
-                            Itens por página
+            <div className="p-8 text-center text-gray-500">
-                        </span>
+              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
-                        <Select
+              Carregando usuários...
-                            onValueChange={handleItemsPerPageChange}
-                            defaultValue={String(itemsPerPage)}
-                        >
-                            <SelectTrigger className="w-full sm:w-[140px]"> {/* w-full para mobile, w-[140px] para sm+ */}
-                                <SelectValue placeholder="Itens por pág." />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="5">5 por página</SelectItem>
-                                <SelectItem value="10">10 por página</SelectItem>
-                                <SelectItem value="20">20 por página</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <Button variant="outline" className="ml-auto w-full md:w-auto">
-                        <Filter className="w-4 h-4 mr-2" />
-                        Filtro avançado
-                    </Button>
-                </div>
-                {/* Fim do Filtro e Itens por Página */}
-
-                {/* Tabela/Lista */}
-                <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-x-auto">
-                    {loading ? (
-                        <div className="p-8 text-center text-gray-500">
-                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
-                            Carregando usuários...
-                        </div>
-                    ) : error ? (
-                        <div className="p-8 text-center text-red-600">{error}</div>
-                    ) : filteredUsers.length === 0 ? (
-                        <div className="p-8 text-center text-gray-500">
-                            Nenhum usuário encontrado com os filtros aplicados.
-                        </div>
-                    ) : (
-                        <>
-                            {/* Tabela para Telas Médias e Grandes */}
-                            <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">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">
-                                    {currentItems.map((u) => (
-                                        <tr key={u.id} className="hover:bg-gray-50">
-                                            <td className="px-6 py-4 text-sm text-gray-900">
-                                                {u.full_name}
-                                            </td>
-                                            <td className="px-6 py-4 text-sm text-gray-500 break-all">
-                                                {u.email}
-                                            </td>
-                                            <td className="px-6 py-4 text-sm text-gray-500">
-                                                {u.phone}
-                                            </td>
-                                            <td className="px-6 py-4 text-sm text-gray-500 capitalize">
-                                                {u.role}
-                                            </td>
-                                            <td className="px-6 py-4 text-right">
-                                                <Button
-                                                    variant="outline"
-                                                    size="icon"
-                                                    onClick={() => openDetailsDialog(u)}
-                                                    title="Visualizar"
-                                                >
-                                                    <Eye className="h-4 w-4" />
-                                                </Button>
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-
-                            {/* 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 className="flex-1 min-w-0">
-                                            <div className="text-sm font-medium text-gray-900 truncate">
-                                                {u.full_name || "—"}
-                                            </div>
-                                            <div className="text-sm text-gray-500 capitalize">
-                                                {u.role || "—"}
-                                            </div>
-                                        </div>
-                                        <div className="ml-4 flex-shrink-0">
-                                            <Button
-                                                variant="outline"
-                                                size="icon"
-                                                onClick={() => openDetailsDialog(u)}
-                                                title="Visualizar"
-                                            >
-                                                <Eye className="h-4 w-4" />
-                                            </Button>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-
-                            {/* 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}
-                                        disabled={currentPage === 1}
-                                        className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
-                                    >
-                                        {"< Anterior"}
-                                    </button>
-
-                                    {/* Números das Páginas */}
-                                    {visiblePageNumbers.map((number) => (
-                                        <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
-                                                ? "bg-green-600 text-white shadow-md border-green-600"
-                                                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                                                }`}
-                                        >
-                                            {number}
-                                        </button>
-                                    ))}
-
-                                    {/* Botão Próximo */}
-                                    <button
-                                        onClick={goToNextPage}
-                                        disabled={currentPage === totalPages}
-                                        className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
-                                    >
-                                        {"Próximo >"}
-                                    </button>
-
-                                </div>
-                            )}
-                        </>
-                    )}
-                </div>
-
-                {/* Modal de Detalhes */}
-                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle className="text-2xl">
-                                {userDetails?.profile?.full_name || "Detalhes do Usuário"}
-                            </AlertDialogTitle>
-                            <AlertDialogDescription>
-                                {!userDetails ? (
-                                    <div className="p-4 text-center text-gray-500">
-                                        <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" />
-                                        Buscando dados completos...
-                                    </div>
-                                ) : (
-                                    <div className="space-y-3 pt-2 text-left text-gray-700">
-                                        <div>
-                                            <strong>ID:</strong> {userDetails.user.id}
-                                        </div>
-                                        <div>
-                                            <strong>E-mail:</strong> {userDetails.user.email}
-                                        </div>
-                                        <div>
-                                            <strong>Nome completo:</strong>{" "}
-                                            {userDetails.profile.full_name}
-                                        </div>
-                                        <div>
-                                            <strong>Telefone:</strong> {userDetails.profile.phone}
-                                        </div>
-                                        <div>
-                                            <strong>Roles:</strong>{" "}
-                                            {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(
-                                                    userDetails.permissions || {}
-                                                ).map(([k, v]) => (
-                                                    <li key={k}>
-                                                        {k}: <span className={`font-semibold ${v ? 'text-green-600' : 'text-red-600'}`}>{v ? "Sim" : "Não"}</span>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                )}
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Fechar</AlertDialogCancel>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
             </div>
-        </Sidebar>
+          ) : error ? (
-    );
+            <div className="p-8 text-center text-red-600">{error}</div>
-}
+          ) : filteredUsers.length === 0 ? (
+            <div className="p-8 text-center text-gray-500">
+              Nenhum usuário encontrado com os filtros aplicados.
+            </div>
+          ) : (
+            <>
+              {/* Tabela para Telas Médias e Grandes */}
+              <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">
+                      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">
+                  {currentItems.map((u) => (
+                    <tr key={u.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 text-sm text-gray-900">
+                        {u.full_name}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-500 break-all">
+                        {u.email}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-500">
+                        {u.phone}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-500 capitalize">
+                        {u.role}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => openDetailsDialog(u)}
+                          title="Visualizar"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+              {/* 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 className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-gray-900 truncate">
+                        {u.full_name || "—"}
+                      </div>
+                      <div className="text-sm text-gray-500 capitalize">
+                        {u.role || "—"}
+                      </div>
+                    </div>
+                    <div className="ml-4 flex-shrink-0">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => openDetailsDialog(u)}
+                        title="Visualizar"
+                      >
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* 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}
+                    disabled={currentPage === 1}
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+                  >
+                    {"< Anterior"}
+                  </button>
+
+                  {/* Números das Páginas */}
+                  {visiblePageNumbers.map((number) => (
+                    <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
+                          ? "bg-blue-600 text-white shadow-md border-blue-600"
+                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                      }`}
+                    >
+                      {number}
+                    </button>
+                  ))}
+
+                  {/* Botão Próximo */}
+                  <button
+                    onClick={goToNextPage}
+                    disabled={currentPage === totalPages}
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+                  >
+                    {"Próximo >"}
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Modal de Detalhes */}
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-2xl">
+                {userDetails?.profile?.full_name || "Detalhes do Usuário"}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {!userDetails ? (
+                  <div className="p-4 text-center text-gray-500">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" />
+                    Buscando dados completos...
+                  </div>
+                ) : (
+                  <div className="space-y-3 pt-2 text-left text-gray-700">
+                    <div>
+                      <strong>ID:</strong> {userDetails.user.id}
+                    </div>
+                    <div>
+                      <strong>E-mail:</strong> {userDetails.user.email}
+                    </div>
+                    <div>
+                      <strong>Nome completo:</strong>{" "}
+                      {userDetails.profile.full_name}
+                    </div>
+                    <div>
+                      <strong>Telefone:</strong> {userDetails.profile.phone}
+                    </div>
+                    <div>
+                      <strong>Roles:</strong> {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(userDetails.permissions || {}).map(
+                          ([k, v]) => (
+                            <li key={k}>
+                              {k}:{" "}
+                              <span
+                                className={`font-semibold ${
+                                  v ? "text-green-600" : "text-red-600"
+                                }`}
+                              >
+                                {v ? "Sim" : "Não"}
+                              </span>
+                            </li>
+                          )
+                        )}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </Sidebar>
+  );
+}

app/page.tsx

@@ -3,50 +3,49 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
+import { Stethoscope, Baby, Microscope } from "lucide-react";
 
 export default function InicialPage() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
-    <div className="min-h-screen flex flex-col bg-background">
+    <div className="min-h-screen flex flex-col bg-white font-sans scroll-smooth text-[#1E2A78]">
-      {/* Barra superior de informações */}
+      {/* Barra superior */}
-      <div className="bg-primary text-primary-foreground text-sm py-2 px-4 md:px-6 flex justify-between items-center">
+      <div className="bg-[#1E2A78] text-white text-sm py-2 px-4 md:px-6 flex justify-between items-center">
         <span className="hidden sm:inline">Horário: 08h00 - 21h00</span>
-        <span>Email: contato@mediconnect.com</span>
+        <span className="hover:underline cursor-pointer transition">
+          Email: contato@mediconnect.com
+        </span>
       </div>
-
+      {/* Header */}
-      {/* Header principal - Com Logo REAL */}
+      <header className="bg-white shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md">
-      <header className="bg-card shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative">
+        <a href="#home" className="flex items-center space-x-2 cursor-pointer">
-        {/* Agrupamento do Logo e Nome do Site */}
-        <a href="#home" className="flex items-center space-x-1 cursor-pointer">
-          {/* 1. IMAGEM/LOGO REAL: Referenciando o arquivo placeholder-logo.png na pasta public */}
           <img
-            src="/android-chrome-512x512.png" // O caminho se inicia a partir da pasta 'public'
+            src="/android-chrome-512x512.png"
             alt="Logo MediConnect"
-            className="w-14 h-14 object-contain" // ALTERADO: Aumentado para w-14 h-14
+            className="w-20 h-20 object-contain transition-transform hover:scale-105"
           />
-
+          <h1 className="text-2xl font-extrabold text-[#1E2A78] tracking-tight">
-          {/* 2. NOME DO SITE */}
+            MedConnect
-          <h1 className="text-2xl font-bold text-primary">MedConnect</h1>
+          </h1>
         </a>
 
-        {/* Botão do menu hambúrguer para telas menores */}
+        {/* Menu Mobile */}
         <div className="md:hidden flex items-center space-x-4">
-          {/* O botão de login agora estará sempre aqui, fora do menu */}
           <Link href="/login">
             <Button
               variant="outline"
-              className="rounded-full px-4 py-2 text-sm border-2 transition cursor-pointer"
+              className="rounded-full px-4 py-2 text-sm border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition"
             >
               Login
             </Button>
           </Link>
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="text-primary-foreground focus:outline-none"
+            className="text-[#1E2A78] focus:outline-none"
           >
             <svg
-              className="w-6 h-6 text-primary"
+              className="w-6 h-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -71,114 +70,140 @@ export default function InicialPage() {
           </button>
         </div>
 
-        {/* Navegação principal */}
+        {/* Navegação */}
         <nav
           className={`${
             isMenuOpen ? "block" : "hidden"
-          } absolute top-[76px] left-0 w-full bg-card shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none z-10`}
+          } absolute top-[76px] left-0 w-full bg-white shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none transition-all duration-300 z-10`}
         >
-          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 text-muted-foreground font-medium items-center">
+          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-gray-600 font-medium items-center">
-            <Link href="#home" className="hover:text-primary">
+            <Link href="#home" className="hover:text-[#007BFF] transition">
               Home
             </Link>
-            <a href="#about" className="hover:text-primary">
+            <a href="#about" className="hover:text-[#007BFF] transition">
               Sobre
             </a>
-            <a href="#departments" className="hover:text-primary">
+            <a href="#departments" className="hover:text-[#007BFF] transition">
               Departamentos
             </a>
-            <a href="#doctors" className="hover:text-primary">
+            <a href="#doctors" className="hover:text-[#007BFF] transition">
               Médicos
             </a>
-            <a href="#contact" className="hover:text-primary">
+            <a href="#contact" className="hover:text-[#007BFF] transition">
               Contato
             </a>
           </div>
         </nav>
 
-        {/* Botão de Login para telas maiores (md e acima) */}
+        {/* Login Desktop */}
         <div className="hidden md:flex space-x-4">
           <Link href="/login">
             <Button
               variant="outline"
-              className="rounded-full px-6 py-2 border-2 transition cursor-pointer"
+              className="rounded-full px-6 py-2 border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition"
             >
               Login
             </Button>
           </Link>
         </div>
       </header>
-
+      {/* Hero Section */}
-      {/* Seção principal de destaque */}
+      <section className="flex flex-col md:flex-row items-center justify-between px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white">
-      <section className="flex flex-col md:flex-row items-center justify-between px-6 md:px-10 lg:px-20 py-16 bg-background text-center md:text-left">
         <div className="max-w-lg mx-auto md:mx-0">
-          <h2 className="text-muted-foreground uppercase text-sm">
+          <h2 className="uppercase text-sm tracking-widest opacity-80">
             Bem-vindo à Saúde Digital
           </h2>
-          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-foreground leading-tight mt-2">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mt-2 drop-shadow-lg">
             Soluções Médicas <br /> & Cuidados com a Saúde
           </h1>
-          <p className="text-muted-foreground mt-4 text-sm sm:text-base">
+          <p className="mt-4 text-base leading-relaxed opacity-90">
             Excelência em saúde há mais de 25 anos. Atendimento médico com
             qualidade, segurança e carinho.
           </p>
-          <div className="mt-6 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
+          <div className="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
-            <Button>Nossos Serviços</Button>
+            <Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md">
-            <Button variant="secondary">Saiba Mais</Button>
+              Nossos Serviços
+            </Button>
+            <Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md">
+              Saiba Mais
+            </Button>
           </div>
         </div>
         <div className="mt-10 md:mt-0 flex justify-center">
           <img
             src="https://t4.ftcdn.net/jpg/03/20/52/31/360_F_320523164_tx7Rdd7I2XDTvvKfz2oRuRpKOPE5z0ni.jpg"
             alt="Médico"
-            className="w-60 sm:w-80 lg:w-96 h-auto object-cover rounded-lg shadow-lg"
+            className="w-72 sm:w-96 lg:w-[28rem] h-auto object-cover rounded-2xl shadow-xl "
           />
         </div>
       </section>
-
+      {/* Serviços */}
-      {/* Seção de serviços */}
+      <section
-      <section className="py-16 px-6 md:px-10 lg:px-20 bg-card">
+        id="departments"
-        <h2 className="text-center text-2xl sm:text-3xl font-bold text-foreground">
+        className="py-20 px-6 md:px-10 lg:px-20 bg-[#F8FBFF]"
+      >
+        <h2 className="text-center text-3xl sm:text-4xl font-extrabold text-[#1E2A78]">
           Cuidados completos para a sua saúde
         </h2>
-        <p className="text-center text-muted-foreground mt-2 text-sm sm:text-base">
+        <p className="text-center text-gray-600 mt-3 text-base">
           Serviços médicos que oferecemos
         </p>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-12 max-w-6xl mx-auto">
-          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+          {/* Card */}
-            <h3 className="text-xl font-semibold text-primary">
+          {[
-              Clínica Geral
+            {
-            </h3>
+              title: "Clínica Geral",
-            <p className="text-muted-foreground mt-2 text-sm">
+              desc: "Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.",
-              Seu primeiro passo para o cuidado. Atendimento focado na prevenção
+              Icon: Stethoscope,
-              e no diagnóstico inicial.
+            },
-            </p>
+            {
-            <Button className="mt-4 w-full">Agendar</Button>
+              title: "Pediatria",
-          </div>
+              desc: "Cuidado gentil e especializado para garantir a saúde e o desenvolvimento de crianças e adolescentes.",
-          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+              Icon: Baby,
-            <h3 className="text-xl font-semibold text-primary">Pediatria</h3>
+            },
-            <p className="text-muted-foreground mt-2 text-sm">
+            {
-              Cuidado gentil e especializado para garantir a saúde e o
+              title: "Exames",
-              desenvolvimento de crianças e adolescentes.
+              desc: "Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.",
-            </p>
+              Icon: Microscope,
-            <Button className="mt-4 w-full">Agendar</Button>
+            },
-          </div>
+          ].map(({ title, desc, Icon }, index) => (
-          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+            <div
-            <h3 className="text-xl font-semibold text-primary">Exames</h3>
+              key={index}
-            <p className="text-muted-foreground mt-2 text-sm">
+              className="p-8 bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-[#E0E9FF] group"
-              Resultados rápidos e precisos em exames laboratoriais e de imagem
+            >
-              essenciais para seu diagnóstico.
+              <div className="flex items-center space-x-3">
-            </p>
+                <Icon className="text-[#007BFF] w-6 h-6 group-hover:scale-110 transition-transform" />
-            <Button className="mt-4 w-full">Agendar</Button>
+                <h3 className="text-xl font-semibold">{title}</h3>
-          </div>
+              </div>
+              <p className="text-gray-600 mt-3 text-sm leading-relaxed">
+                {desc}
+              </p>
+              <Button className="mt-6 w-full bg-[#007BFF] hover:bg-[#005FCC] text-white transition">
+                Agendar
+              </Button>
+            </div>
+          ))}
         </div>
       </section>
-
       {/* Footer */}
-      <footer className="bg-primary text-primary-foreground py-6 text-center text-sm">
+      <footer className="bg-[#1E2A78] text-white py-8 text-center text-sm">
-        <p>© 2025 MediConnect</p>
+        <div className="space-y-2">
+          <p>© 2025 MediConnect — Todos os direitos reservados</p>
+          <div className="flex justify-center space-x-6 opacity-80">
+            <a href="#about" className="hover:text-[#00BFFF] transition">
+              Sobre
+            </a>
+            <a href="#departments" className="hover:text-[#00BFFF] transition">
+              Serviços
+            </a>
+            <a href="#contact" className="hover:text-[#00BFFF] transition">
+              Contato
+            </a>
+          </div>
+        </div>
       </footer>
+         
     </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

@@ -18,243 +18,359 @@ import { toast } from "@/hooks/use-toast";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 interface PatientProfileData {
-    name: string;
+  name: string;
-    email: string;
+  email: string;
-    phone: string;
+  phone: string;
-    cpf: string;
+  cpf: string;
-    birthDate: string;
+  birthDate: string;
-    cep: string;
+  cep: string;
-    street: string;
+  street: string;
-    number: string;
+  number: string;
-    city: string;
+  city: string;
-    avatarFullUrl?: string;
+  avatarFullUrl?: string;
 }
 
 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 [isEditing, setIsEditing] = useState(false);
+  });
-    const [isSaving, setIsSaving] = useState(false);
+  const [patientData, setPatientData] = useState<PatientProfileData | null>(
-    const fileInputRef = useRef<HTMLInputElement>(null);
+    null
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-    useEffect(() => {
+  useEffect(() => {
-        if (user?.id) {
+    if (user?.id) {
-            const fetchPatientDetails = async () => {
+      const fetchPatientDetails = async () => {
-                try {
-                    const patientDetails = await patientsService.getById(user.id);
-                    setPatientData({
-                        name: patientDetails.full_name || user.name,
-                        email: user.email,
-                        phone: patientDetails.phone_mobile || "",
-                        cpf: patientDetails.cpf || "",
-                        birthDate: patientDetails.birth_date || "",
-                        cep: patientDetails.cep || "",
-                        street: patientDetails.street || "",
-                        number: patientDetails.number || "",
-                        city: patientDetails.city || "",
-                        avatarFullUrl: user.avatarFullUrl,
-                    });
-                } 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" });
-                }
-            };
-            fetchPatientDetails();
-        }
-    }, [user]);
-
-    const handleInputChange = (field: keyof PatientProfileData, value: string) => {
-        setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
-    };
-
-    const handleSave = async () => {
-        if (!patientData || !user) return;
-        setIsSaving(true);
         try {
-            const patientPayload = {
+          const patientDetails = await patientsService.getById(user.id);
-                full_name: patientData.name,
+          setPatientData({
-                cpf: patientData.cpf,
+            name: patientDetails.full_name || user.name,
-                birth_date: patientData.birthDate,
+            email: user.email,
-                phone_mobile: patientData.phone,
+            phone: patientDetails.phone_mobile || "",
-                cep: patientData.cep,
+            cpf: patientDetails.cpf || "",
-                street: patientData.street,
+            birthDate: patientDetails.birth_date || "",
-                number: patientData.number,
+            cep: patientDetails.cep || "",
-                city: patientData.city,
+            street: patientDetails.street || "",
-            };
+            number: patientDetails.number || "",
-            await patientsService.update(user.id, patientPayload);
+            city: patientDetails.city || "",
-            toast({ title: "Sucesso!", description: "Seus dados foram atualizados." });
+            avatarFullUrl: user.avatarFullUrl,
-            setIsEditing(false);
+          });
         } catch (error) {
-            console.error("Erro ao salvar dados:", error);
+          console.error("Erro ao buscar detalhes do paciente:", error);
-            toast({ title: "Erro", description: "Não foi possível salvar suas alterações.", variant: "destructive" });
+          toast({
-        } finally {
+            title: "Erro",
-            setIsSaving(false);
+            description: "Não foi possível carregar seus dados completos.",
+            variant: "destructive",
+          });
         }
-    };
+      };
-
+      fetchPatientDetails();
-    const handleAvatarClick = () => {
-        fileInputRef.current?.click();
-    };
-
-    const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (!file || !user) return;
-
-        const fileExt = file.name.split(".").pop();
-
-        // *** A CORREÇÃO ESTÁ AQUI ***
-        // O caminho salvo no banco de dados não deve conter o nome do bucket.
-        const filePath = `${user.id}/avatar.${fileExt}`;
-
-        try {
-            await api.storage.upload("avatars", filePath, file);
-            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));
-
-            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" });
-        }
-    };
-
-    if (isAuthLoading || !patientData) {
-        return (
-            <Sidebar>
-                <div>Carregando seus dados...</div>
-            </Sidebar>
-        );
     }
+  }, [user]);
 
+  const handleInputChange = (
+    field: keyof PatientProfileData,
+    value: string
+  ) => {
+    setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const handleSave = async () => {
+    if (!patientData || !user) return;
+    setIsSaving(true);
+    try {
+      const patientPayload = {
+        full_name: patientData.name,
+        cpf: patientData.cpf,
+        birth_date: patientData.birthDate,
+        phone_mobile: patientData.phone,
+        cep: patientData.cep,
+        street: patientData.street,
+        number: patientData.number,
+        city: patientData.city,
+      };
+      await patientsService.update(user.id, patientPayload);
+      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",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleAvatarUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file || !user) return;
+
+    const fileExt = file.name.split(".").pop();
+
+    // *** A CORREÇÃO ESTÁ AQUI ***
+    // O caminho salvo no banco de dados não deve conter o nome do bucket.
+    const filePath = `${user.id}/avatar.${fileExt}`;
+
+    try {
+      await api.storage.upload("avatars", filePath, file);
+      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
+      );
+
+      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",
+      });
+    }
+  };
+
+  if (isAuthLoading || !patientData) {
     return (
-        <Sidebar>
+      <Sidebar>
-            <div className="space-y-6">
+        <div>Carregando seus dados...</div>
-                <div className="flex justify-between items-center">
+      </Sidebar>
-                    <div>
-                        <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}>
-                        {isEditing ? (isSaving ? "Salvando..." : "Salvar Alterações") : "Editar Dados"}
-                    </Button>
-                </div>
-
-                <div className="grid lg:grid-cols-3 gap-6">
-                    <div className="lg:col-span-2 space-y-6">
-                        <Card>
-                            <CardHeader>
-                                <CardTitle className="flex items-center">
-                                    <User className="mr-2 h-5 w-5" />
-                                    Informações Pessoais
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <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} />
-                                    </div>
-                                    <div>
-                                        <Label htmlFor="cpf">CPF</Label>
-                                        <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} />
-                                </div>
-                            </CardContent>
-                        </Card>
-                        <Card>
-                            <CardHeader>
-                                <CardTitle className="flex items-center">
-                                    <Mail className="mr-2 h-5 w-5" />
-                                    Contato e Endereço
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="grid md:grid-cols-2 gap-4">
-                                    <div>
-                                        <Label htmlFor="email">Email</Label>
-                                        <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} />
-                                    </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} />
-                                    </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} />
-                                    </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} />
-                                    </div>
-                                    <div>
-                                        <Label htmlFor="city">Cidade</Label>
-                                        <Input id="city" value={patientData.city} onChange={(e) => handleInputChange("city", e.target.value)} disabled={!isEditing} />
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-
-                    <div className="space-y-6">
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Resumo do Perfil</CardTitle>
-                            </CardHeader>
-                            <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}>
-                                            <AvatarImage src={patientData.avatarFullUrl} />
-                                            <AvatarFallback className="text-2xl">
-                                                {patientData.name
-                                                    .split(" ")
-                                                    .map((n) => n[0])
-                                                    .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}>
-                                            <Upload className="w-3 h-3" />
-                                        </div>
-                                        <input type="file" ref={fileInputRef} onChange={handleAvatarUpload} className="hidden" accept="image/png, image/jpeg" />
-                                    </div>
-                                    <div>
-                                        <p className="font-medium">{patientData.name}</p>
-                                        <p className="text-sm text-gray-500">Paciente</p>
-                                    </div>
-                                </div>
-                                <div className="space-y-3 pt-4 border-t">
-                                    <div className="flex items-center text-sm">
-                                        <Mail className="mr-2 h-4 w-4 text-gray-500" />
-                                        <span className="truncate">{patientData.email}</span>
-                                    </div>
-                                    <div className="flex items-center text-sm">
-                                        <Phone className="mr-2 h-4 w-4 text-gray-500" />
-                                        <span>{patientData.phone || "Não informado"}</span>
-                                    </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>
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-            </div>
-        </Sidebar>
     );
+  }
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <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}
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            {isEditing
+              ? isSaving
+                ? "Salvando..."
+                : "Salvar Alterações"
+              : "Editar Dados"}
+          </Button>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <User className="mr-2 h-5 w-5" />
+                  Informações Pessoais
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <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}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="cpf">CPF</Label>
+                    <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}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <Mail className="mr-2 h-5 w-5" />
+                  Contato e Endereço
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <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}
+                    />
+                  </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}
+                    />
+                  </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}
+                    />
+                  </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}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="city">Cidade</Label>
+                    <Input
+                      id="city"
+                      value={patientData.city}
+                      onChange={(e) =>
+                        handleInputChange("city", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Resumo do Perfil</CardTitle>
+              </CardHeader>
+              <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}
+                    >
+                      <AvatarImage src={patientData.avatarFullUrl} />
+                      <AvatarFallback className="text-2xl">
+                        {patientData.name
+                          .split(" ")
+                          .map((n) => n[0])
+                          .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}
+                    >
+                      <Upload className="w-3 h-3" />
+                    </div>
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      onChange={handleAvatarUpload}
+                      className="hidden"
+                      accept="image/png, image/jpeg"
+                    />
+                  </div>
+                  <div>
+                    <p className="font-medium">{patientData.name}</p>
+                    <p className="text-sm text-gray-500">Paciente</p>
+                  </div>
+                </div>
+                <div className="space-y-3 pt-4 border-t">
+                  <div className="flex items-center text-sm">
+                    <Mail className="mr-2 h-4 w-4 text-gray-500" />
+                    <span className="truncate">{patientData.email}</span>
+                  </div>
+                  <div className="flex items-center text-sm">
+                    <Phone className="mr-2 h-4 w-4 text-gray-500" />
+                    <span>{patientData.phone || "Não informado"}</span>
+                  </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>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Sidebar>
+  );
 }

app/patient/register/page.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import type React from "react"
-
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
@@ -9,24 +8,24 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
+import { ArrowLeft, Loader2 } from "lucide-react"
-import { Eye, EyeOff, ArrowLeft } from "lucide-react"
+import { useToast } from "@/hooks/use-toast"
+import { usersService } from "@/services/usersApi.mjs" // Mantém a importação
+import { isValidCPF } from "@/lib/utils"
 
 export default function PatientRegister() {
-  const [showPassword, setShowPassword] = useState(false)
+  // REMOVIDO: Estados para 'showPassword' e 'showConfirmPassword'
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const [formData, setFormData] = useState({
     name: "",
     email: "",
-    password: "",
-    confirmPassword: "",
     phone: "",
     cpf: "",
     birthDate: "",
-    address: "",
+    // REMOVIDO: Campos 'password' e 'confirmPassword'
   })
   const [isLoading, setIsLoading] = useState(false)
   const router = useRouter()
+  const { toast } = useToast()
 
   const handleInputChange = (field: string, value: string) => {
     setFormData((prev) => ({
@@ -37,22 +36,52 @@ export default function PatientRegister() {
 
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault()
+    setIsLoading(true)
 
-    if (formData.password !== formData.confirmPassword) {
+    // --- VALIDAÇÃO DE CPF ---
-      alert("As senhas não coincidem!")
+    if (!isValidCPF(formData.cpf)) {
+      toast({
+        title: "CPF Inválido",
+        description: "O CPF informado não é válido. Verifique os dígitos.",
+        variant: "destructive",
+      })
+      setIsLoading(false)
       return
     }
 
-    setIsLoading(true)
+    // --- LÓGICA DE REGISTRO COM ENDPOINT PÚBLICO ---
+    try {
+      // ALTERADO: Payload ajustado para o endpoint 'register-patient'
+      const payload = {
+        email: formData.email.trim().toLowerCase(),
+        full_name: formData.name,
+        phone_mobile: formData.phone, // O endpoint espera 'phone_mobile'
+        cpf: formData.cpf.replace(/\D/g, ''),
+        birth_date: formData.birthDate,
+      }
 
-    // Simulação de registro - em produção, conectar com API real
+      // ALTERADO: Chamada para a nova função de serviço
-    setTimeout(() => {
+      await usersService.registerPatient(payload)
-      // Salvar dados do usuário no localStorage para simulação
+
-      const { confirmPassword, ...userData } = formData
+      // ALTERADO: Mensagem de sucesso para refletir o fluxo de confirmação por e-mail
-      localStorage.setItem("patientData", JSON.stringify(userData))
+      toast({
-      router.push("/patient/dashboard")
+        title: "Cadastro enviado com sucesso!",
+        description: "Enviamos um link de confirmação para o seu e-mail. Por favor, verifique sua caixa de entrada para ativar sua conta.",
+      })
+
+      // Redireciona para a página de login
+      router.push("/login")
+
+    } catch (error: any) {
+      console.error("Erro no registro:", error)
+      toast({
+        title: "Erro ao Criar Conta",
+        description: error.message || "Não foi possível concluir o cadastro. Verifique seus dados e tente novamente.",
+        variant: "destructive",
+      })
+    } finally {
       setIsLoading(false)
-    }, 1000)
+    }
   }
 
   return (
@@ -67,136 +96,85 @@ export default function PatientRegister() {
 
         <Card>
           <CardHeader className="text-center">
-            <CardTitle className="text-2xl">Cadastro de Paciente</CardTitle>
+            <CardTitle className="text-2xl">Crie sua Conta de Paciente</CardTitle>
-            <CardDescription>Preencha seus dados para criar sua conta</CardDescription>
+            <CardDescription>Preencha seus dados para acessar o portal MedConnect</CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleRegister} className="space-y-4">
               <div className="grid md:grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label htmlFor="name">Nome Completo</Label>
+                  <Label htmlFor="name">Nome Completo *</Label>
                   <Input
                     id="name"
                     value={formData.name}
                     onChange={(e) => handleInputChange("name", e.target.value)}
                     required
+                    disabled={isLoading}
                   />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="cpf">CPF</Label>
+                  <Label htmlFor="cpf">CPF *</Label>
                   <Input
                     id="cpf"
                     value={formData.cpf}
                     onChange={(e) => handleInputChange("cpf", e.target.value)}
                     placeholder="000.000.000-00"
                     required
+                    disabled={isLoading}
                   />
                 </div>
               </div>
 
               <div className="grid md:grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
+                  <Label htmlFor="email">Email *</Label>
                   <Input
                     id="email"
                     type="email"
                     value={formData.email}
                     onChange={(e) => handleInputChange("email", e.target.value)}
                     required
+                    disabled={isLoading}
                   />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="phone">Telefone</Label>
+                  <Label htmlFor="phone">Telefone *</Label>
                   <Input
                     id="phone"
                     value={formData.phone}
                     onChange={(e) => handleInputChange("phone", e.target.value)}
                     placeholder="(11) 99999-9999"
                     required
+                    disabled={isLoading}
                   />
                 </div>
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor="birthDate">Data de Nascimento</Label>
+                <Label htmlFor="birthDate">Data de Nascimento *</Label>
                 <Input
                   id="birthDate"
                   type="date"
                   value={formData.birthDate}
                   onChange={(e) => handleInputChange("birthDate", e.target.value)}
                   required
+                  disabled={isLoading}
                 />
               </div>
 
-              <div className="space-y-2">
+              {/* REMOVIDO: Seção de senha e confirmação de senha */}
-                <Label htmlFor="address">Endereço</Label>
-                <Textarea
-                  id="address"
-                  value={formData.address}
-                  onChange={(e) => handleInputChange("address", e.target.value)}
-                  placeholder="Rua, número, bairro, cidade, estado"
-                  rows={3}
-                  required
-                />
-              </div>
-
-              <div className="grid md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="password">Senha</Label>
-                  <div className="relative">
-                    <Input
-                      id="password"
-                      type={showPassword ? "text" : "password"}
-                      value={formData.password}
-                      onChange={(e) => handleInputChange("password", e.target.value)}
-                      required
-                    />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                      onClick={() => setShowPassword(!showPassword)}
-                    >
-                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                    </Button>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="confirmPassword">Confirmar Senha</Label>
-                  <div className="relative">
-                    <Input
-                      id="confirmPassword"
-                      type={showConfirmPassword ? "text" : "password"}
-                      value={formData.confirmPassword}
-                      onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
-                      required
-                    />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    >
-                      {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                    </Button>
-                  </div>
-                </div>
-              </div>
 
               <Button type="submit" className="w-full" disabled={isLoading}>
-                {isLoading ? "Criando conta..." : "Criar Conta"}
+                {isLoading ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Criando conta...</> : "Criar Conta"}
               </Button>
             </form>
 
             <div className="mt-6 text-center">
               <p className="text-sm text-gray-600">
                 Já tem uma conta?{" "}
-                <Link href="/patient/login" className="text-blue-600 hover:underline">
+                <Link href="/login" className="text-blue-600 hover:underline">
                   Faça login aqui
                 </Link>
               </p>
@@ -206,4 +184,4 @@ export default function PatientRegister() {
       </div>
     </div>
   )
-}
+}

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";
@@ -14,214 +28,298 @@ import { doctorsService } from "@/services/doctorsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
 export default function SecretaryAppointments() {
-    const [appointments, setAppointments] = useState<any[]>([]);
+  const [appointments, setAppointments] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
-    const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
+  const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
 
-    // Estados dos Modais
+  // Estados dos Modais
-    const [deleteModal, setDeleteModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
-    const [editModal, setEditModal] = useState(false);
+  const [editModal, setEditModal] = useState(false);
 
-    // Estado para o formulário de edição
+  // Estado para o formulário de edição
-    const [editFormData, setEditFormData] = useState({
+  const [editFormData, setEditFormData] = useState({
-        date: "",
+    date: "",
-        time: "",
+    time: "",
-        status: "",
+    status: "",
+  });
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    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 [appointmentList, patientList, doctorList] = await Promise.all([
+        // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
+        appointmentsService.search_appointment(queryParams),
+        patientsService.list(),
+        doctorsService.list(),
+      ]);
+
+      const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
+      const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
+
+      const enrichedAppointments = appointmentList.map((apt: any) => ({
+        ...apt,
+        patient: patientMap.get(apt.patient_id) || {
+          full_name: "Paciente não encontrado",
+        },
+        doctor: doctorMap.get(apt.doctor_id) || {
+          full_name: "Médico não encontrado",
+          specialty: "N/A",
+        },
+      }));
+
+      setAppointments(enrichedAppointments);
+    } catch (error) {
+      console.error("Falha ao buscar agendamentos:", error);
+      toast.error("Não foi possível carregar a lista de agendamentos.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
+
+  // --- LÓGICA DE EDIÇÃO ---
+  const handleEdit = (appointment: any) => {
+    setSelectedAppointment(appointment);
+    const appointmentDate = new Date(appointment.scheduled_at);
+
+    setEditFormData({
+      date: appointmentDate.toISOString().split("T")[0],
+      time: appointmentDate.toLocaleTimeString("pt-BR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: "UTC",
+      }),
+      status: appointment.status,
     });
+    setEditModal(true);
+  };
 
-    const fetchData = async () => {
+  const confirmEdit = async () => {
-        setIsLoading(true);
+    if (
-        try {
+      !selectedAppointment ||
-            // 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
+      !editFormData.date ||
-            // 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
+      !editFormData.time ||
-            const queryParams = 'order=scheduled_at.desc';
+      !editFormData.status
+    ) {
+      toast.error("Todos os campos são obrigatórios para a edição.");
+      return;
+    }
 
-            const [appointmentList, patientList, doctorList] = await Promise.all([
+    try {
-                // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
+      const newScheduledAt = new Date(
-                appointmentsService.search_appointment(queryParams),
+        `${editFormData.date}T${editFormData.time}:00Z`
-                patientsService.list(),
+      ).toISOString();
-                doctorsService.list(),
+      const updatePayload = {
-            ]);
+        scheduled_at: newScheduledAt,
+        status: editFormData.status,
+      };
 
-            const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
+      await appointmentsService.update(selectedAppointment.id, updatePayload);
-            const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
 
-            const enrichedAppointments = appointmentList.map((apt: any) => ({
+      // 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
-                ...apt,
+      // Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
-                patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
+      fetchData();
-                doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
-            }));
 
-            setAppointments(enrichedAppointments);
+      setEditModal(false);
-        } catch (error) {
+      toast.success("Consulta atualizada com sucesso!");
-            console.error("Falha ao buscar agendamentos:", error);
+    } catch (error) {
-            toast.error("Não foi possível carregar a lista de agendamentos.");
+      console.error("Erro ao atualizar consulta:", error);
-        } finally {
+      toast.error("Não foi possível atualizar a consulta.");
-            setIsLoading(false);
+    }
-        }
+  };
-    };
 
-    useEffect(() => {
+  // --- LÓGICA DE DELEÇÃO ---
-        fetchData();
+  const handleDelete = (appointment: any) => {
-    }, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
+    setSelectedAppointment(appointment);
+    setDeleteModal(true);
+  };
 
-    // --- LÓGICA DE EDIÇÃO ---
+  const confirmDelete = async () => {
-    const handleEdit = (appointment: any) => {
+    if (!selectedAppointment) return;
-        setSelectedAppointment(appointment);
+    try {
-        const appointmentDate = new Date(appointment.scheduled_at);
+      await appointmentsService.delete(selectedAppointment.id);
+      setAppointments((prev) =>
+        prev.filter((apt) => apt.id !== selectedAppointment.id)
+      );
+      setDeleteModal(false);
+      toast.success("Consulta deletada com sucesso!");
+    } catch (error) {
+      console.error("Erro ao deletar consulta:", error);
+      toast.error("Não foi possível deletar a consulta.");
+    }
+  };
 
-        setEditFormData({
+  const getStatusBadge = (status: string) => {
-            date: appointmentDate.toISOString().split('T')[0],
+    switch (status) {
-            time: appointmentDate.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }),
+      case "requested":
-            status: appointment.status,
+        return (
-        });
+          <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>
-        setEditModal(true);
+        );
-    };
+      case "confirmed":
+        return <Badge className="bg-blue-100 text-blue-800">Confirmada</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 confirmEdit = async () => {
+  const timeSlots = [
-        if (!selectedAppointment || !editFormData.date || !editFormData.time || !editFormData.status) {
+    "08:00",
-            toast.error("Todos os campos são obrigatórios para a edição.");
+    "08:30",
-            return;
+    "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",
+  ];
 
-        try {
+  return (
-            const newScheduledAt = new Date(`${editFormData.date}T${editFormData.time}:00Z`).toISOString();
+    <Sidebar>
-            const updatePayload = {
+      <div className="space-y-6">
-                scheduled_at: newScheduledAt,
+        <div className="flex justify-between items-center">
-                status: editFormData.status,
+          <div>
-            };
+            <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 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>
 
-            await appointmentsService.update(selectedAppointment.id, updatePayload);
+        <div className="grid gap-6">
-
+          {isLoading ? (
-            // 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
+            <p>Carregando consultas...</p>
-            // Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
+          ) : appointments.length > 0 ? (
-            fetchData(); 
+            appointments.map((appointment) => (
-            
+              <Card key={appointment.id}>
-            setEditModal(false);
+                <CardHeader>
-            toast.success("Consulta atualizada com sucesso!");
+                  <div className="flex justify-between items-start">
-
-        } catch (error) {
-            console.error("Erro ao atualizar consulta:", error);
-            toast.error("Não foi possível atualizar a consulta.");
-        }
-    };
-
-    // --- LÓGICA DE DELEÇÃO ---
-    const handleDelete = (appointment: any) => {
-        setSelectedAppointment(appointment);
-        setDeleteModal(true);
-    };
-
-    const confirmDelete = async () => {
-        if (!selectedAppointment) return;
-        try {
-            await appointmentsService.delete(selectedAppointment.id);
-            setAppointments((prev) => prev.filter((apt) => apt.id !== selectedAppointment.id));
-            setDeleteModal(false);
-            toast.success("Consulta deletada com sucesso!");
-        } catch (error) {
-            console.error("Erro ao deletar consulta:", error);
-            toast.error("Não foi possível deletar a consulta.");
-        }
-    };
-
-    const getStatusBadge = (status: string) => {
-        switch (status) {
-            case "requested": return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
-            case "confirmed": return <Badge className="bg-blue-100 text-blue-800">Confirmada</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 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>
+                      <CardTitle className="text-lg">
-                        <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
+                        {appointment.doctor.full_name}
+                      </CardTitle>
+                      <CardDescription>
+                        {appointment.doctor.specialty}
+                      </CardDescription>
                     </div>
-                    <Link href="/secretary/schedule">
+                    {getStatusBadge(appointment.status)}
-                        <Button><Calendar className="mr-2 h-4 w-4" /> Agendar Nova Consulta</Button>
+                  </div>
-                    </Link>
+                </CardHeader>
-                </div>
+                <CardContent>
+                  <div className="grid md:grid-cols-2 gap-4">
+                    <div className="space-y-3">
+                      <div className="flex items-center text-sm text-gray-800 font-medium">
+                        <User className="mr-2 h-4 w-4 text-gray-600" />
+                        {appointment.patient.full_name}
+                      </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" }
+                        )}
+                      </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",
+                          }
+                        )}
+                      </div>
+                    </div>
+                    <div className="space-y-3">
+                      <div className="flex items-center text-sm text-gray-600">
+                        <MapPin className="mr-2 h-4 w-4" />
+                        {appointment.doctor.location || "Local a definir"}
+                      </div>
+                      <div className="flex items-center text-sm text-gray-600">
+                        <Phone className="mr-2 h-4 w-4" />
+                        {appointment.doctor.phone || "N/A"}
+                      </div>
+                    </div>
+                  </div>
 
-                <div className="grid gap-6">
+                  <div className="flex gap-2 mt-4 pt-4 border-t">
-                    {isLoading ? <p>Carregando consultas...</p> : appointments.length > 0 ? (
+                    <Button
-                        appointments.map((appointment) => (
+                      variant="outline"
-                            <Card key={appointment.id}>
+                      size="sm"
-                                <CardHeader>
+                      onClick={() => handleEdit(appointment)}
-                                    <div className="flex justify-between items-start">
+                    >
-                                        <div>
+                      <Pencil className="mr-2 h-4 w-4" />
-                                            <CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
+                      Editar
-                                            <CardDescription>{appointment.doctor.specialty}</CardDescription>
+                    </Button>
-                                        </div>
+                    <Button
-                                        {getStatusBadge(appointment.status)}
+                      variant="outline"
-                                    </div>
+                      size="sm"
-                                </CardHeader>
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
-                                <CardContent>
+                      onClick={() => handleDelete(appointment)}
-                                    <div className="grid md:grid-cols-2 gap-4">
+                    >
-                                        <div className="space-y-3">
+                      <Trash2 className="mr-2 h-4 w-4" />
-                                            <div className="flex items-center text-sm text-gray-800 font-medium">
+                      Deletar
-                                                <User className="mr-2 h-4 w-4 text-gray-600" />
+                    </Button>
-                                                {appointment.patient.full_name}
+                  </div>
-                                            </div>
+                </CardContent>
-                                            <div className="flex items-center text-sm text-gray-600">
+              </Card>
-                                                <Calendar className="mr-2 h-4 w-4" />
+            ))
-                                                {new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
+          ) : (
-                                            </div>
+            <p>Nenhuma consulta encontrada.</p>
-                                            <div className="flex items-center text-sm text-gray-600">
+          )}
-                                                <Clock className="mr-2 h-4 w-4" />
+        </div>
-                                                {new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", { hour: '2-digit', minute: '2-digit', timeZone: "UTC" })}
+      </div>
-                                            </div>
-                                        </div>
-                                        <div className="space-y-3">
-                                            <div className="flex items-center text-sm text-gray-600">
-                                                <MapPin className="mr-2 h-4 w-4" />
-                                                {appointment.doctor.location || "Local a definir"}
-                                            </div>
-                                            <div className="flex items-center text-sm text-gray-600">
-                                                <Phone className="mr-2 h-4 w-4" />
-                                                {appointment.doctor.phone || "N/A"}
-                                            </div>
-                                        </div>
-                                    </div>
 
-                                    <div className="flex gap-2 mt-4 pt-4 border-t">
+      {/* MODAL DE EDIÇÃO */}
-                                        <Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
+      <Dialog open={editModal} onOpenChange={setEditModal}>
-                                            <Pencil className="mr-2 h-4 w-4" />
+        {/* ... (código do modal de edição) ... */}
-                                            Editar
+      </Dialog>
-                                        </Button>
-                                        <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>
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        ))
-                    ) : (
-                        <p>Nenhuma consulta encontrada.</p>
-                    )}
-                </div>
-            </div>
 
-            {/* MODAL DE EDIÇÃO */}
+      {/* Modal de Deleção */}
-            <Dialog open={editModal} onOpenChange={setEditModal}>
+      <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
-                {/* ... (código do modal de edição) ... */}
+        {/* ... (código do modal de deleção) ... */}
-            </Dialog>
+      </Dialog>
-
+    </Sidebar>
-            {/* Modal de Deleção */}
+  );
-            <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
+}
-                {/* ... (código do modal de deleção) ... */}
-            </Dialog>
-        </Sidebar>
-    );
-}

app/secretary/dashboard/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { Card, CardContent, CardDescription,
+import {
-    CardHeader,
+  Card,
-    CardTitle,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Calendar, Clock, User, Plus } from "lucide-react";
@@ -13,289 +16,290 @@ import { appointmentsService } from "@/services/appointmentsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
 export default function SecretaryDashboard() {
-    // Estados
+  // Estados
-    const [patients, setPatients] = useState<any[]>([]);
+  const [patients, setPatients] = useState<any[]>([]);
-    const [loadingPatients, setLoadingPatients] = useState(true);
+  const [loadingPatients, setLoadingPatients] = useState(true);
 
-    const [firstConfirmed, setFirstConfirmed] = useState<any>(null);
+  const [firstConfirmed, setFirstConfirmed] = useState<any>(null);
-    const [nextAgendada, setNextAgendada] = useState<any>(null);
+  const [nextAgendada, setNextAgendada] = useState<any>(null);
-    const [loadingAppointments, setLoadingAppointments] = useState(true);
+  const [loadingAppointments, setLoadingAppointments] = useState(true);
 
-    // 🔹 Buscar pacientes
+  // 🔹 Buscar pacientes
-    useEffect(() => {
+  useEffect(() => {
-        async function fetchPatients() {
+    async function fetchPatients() {
-            try {
+      try {
-                const data = await patientsService.list();
+        const data = await patientsService.list();
-                if (Array.isArray(data)) {
+        if (Array.isArray(data)) {
-                    setPatients(data.slice(0, 3));
+          setPatients(data.slice(0, 3));
-                }
-            } catch (error) {
-                console.error("Erro ao carregar pacientes:", error);
-            } finally {
-                setLoadingPatients(false);
-            }
         }
-        fetchPatients();
+      } catch (error) {
-    }, []);
+        console.error("Erro ao carregar pacientes:", error);
+      } finally {
+        setLoadingPatients(false);
+      }
+    }
+    fetchPatients();
+  }, []);
 
-    // 🔹 Buscar consultas (confirmadas + 1ª do mês)
+  // 🔹 Buscar consultas (confirmadas + 1ª do mês)
-    useEffect(() => {
+  useEffect(() => {
-        async function fetchAppointments() {
+    async function fetchAppointments() {
-            try {
+      try {
-                const hoje = new Date();
+        const hoje = new Date();
-                const inicioMes = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
+        const inicioMes = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
-                const fimMes = new Date(hoje.getFullYear(), hoje.getMonth() + 1, 0);
+        const fimMes = new Date(hoje.getFullYear(), hoje.getMonth() + 1, 0);
 
-                // Mesmo parâmetro de ordenação da página /secretary/appointments
+        // Mesmo parâmetro de ordenação da página /secretary/appointments
-                const queryParams = "order=scheduled_at.desc";
+        const queryParams = "order=scheduled_at.desc";
-                const data = await appointmentsService.search_appointment(queryParams);
+        const data = await appointmentsService.search_appointment(queryParams);
 
-                if (!Array.isArray(data) || data.length === 0) {
+        if (!Array.isArray(data) || data.length === 0) {
-                    setFirstConfirmed(null);
+          setFirstConfirmed(null);
-                    setNextAgendada(null);
+          setNextAgendada(null);
-                    return;
+          return;
-                }
-
-                // 🩵 1️⃣ Consultas confirmadas (para o card “Próxima Consulta Confirmada”)
-                const confirmadas = data.filter((apt: any) => {
-                    const dataConsulta = new Date(apt.scheduled_at || apt.date);
-                    return apt.status === "confirmed" && dataConsulta >= hoje;
-                });
-
-                confirmadas.sort(
-                    (a: any, b: any) =>
-                        new Date(a.scheduled_at || a.date).getTime() -
-                        new Date(b.scheduled_at || b.date).getTime()
-                );
-
-                setFirstConfirmed(confirmadas[0] || null);
-
-                // 💙 2️⃣ Consultas deste mês — pegar sempre a 1ª (mais próxima)
-                const consultasMes = data.filter((apt: any) => {
-                    const dataConsulta = new Date(apt.scheduled_at);
-                    return dataConsulta >= inicioMes && dataConsulta <= fimMes;
-                });
-
-                if (consultasMes.length > 0) {
-                    consultasMes.sort(
-                        (a: any, b: any) =>
-                            new Date(a.scheduled_at).getTime() -
-                            new Date(b.scheduled_at).getTime()
-                    );
-                    setNextAgendada(consultasMes[0]);
-                } else {
-                    setNextAgendada(null);
-                }
-            } catch (error) {
-                console.error("Erro ao carregar consultas:", error);
-            } finally {
-                setLoadingAppointments(false);
-            }
         }
 
-        fetchAppointments();
+        // 🩵 1️⃣ Consultas confirmadas (para o card “Próxima Consulta Confirmada”)
-    }, []);
+        const confirmadas = data.filter((apt: any) => {
+          const dataConsulta = new Date(apt.scheduled_at || apt.date);
+          return apt.status === "confirmed" && dataConsulta >= hoje;
+        });
 
-    return (
+        confirmadas.sort(
-        <Sidebar>
+          (a: any, b: any) =>
-            <div className="space-y-6">
+            new Date(a.scheduled_at || a.date).getTime() -
-                {/* Cabeçalho */}
+            new Date(b.scheduled_at || b.date).getTime()
-                <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>
+        setFirstConfirmed(confirmadas[0] || null);
+
+        // 💙 2️⃣ Consultas deste mês — pegar sempre a 1ª (mais próxima)
+        const consultasMes = data.filter((apt: any) => {
+          const dataConsulta = new Date(apt.scheduled_at);
+          return dataConsulta >= inicioMes && dataConsulta <= fimMes;
+        });
+
+        if (consultasMes.length > 0) {
+          consultasMes.sort(
+            (a: any, b: any) =>
+              new Date(a.scheduled_at).getTime() -
+              new Date(b.scheduled_at).getTime()
+          );
+          setNextAgendada(consultasMes[0]);
+        } else {
+          setNextAgendada(null);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar consultas:", error);
+      } finally {
+        setLoadingAppointments(false);
+      }
+    }
+
+    fetchAppointments();
+  }, []);
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        {/* 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>
+        </div>
+
+        {/* Cards principais */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* Próxima Consulta Confirmada */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Próxima Consulta Confirmada
+              </CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loadingAppointments ? (
+                <div className="text-gray-500 text-sm">
+                  Carregando próxima consulta...
                 </div>
-
+              ) : firstConfirmed ? (
-                {/* Cards principais */}
+                <>
-                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div className="text-2xl font-bold">
-                    {/* Próxima Consulta Confirmada */}
+                    {new Date(
-                    <Card>
+                      firstConfirmed.scheduled_at || firstConfirmed.date
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    ).toLocaleDateString("pt-BR")}
-                            <CardTitle className="text-sm font-medium">
+                  </div>
-                                Próxima Consulta Confirmada
+                  <p className="text-xs text-muted-foreground">
-                            </CardTitle>
+                    {firstConfirmed.doctor_name
-                            <Calendar className="h-4 w-4 text-muted-foreground" />
+                      ? `Dr(a). ${firstConfirmed.doctor_name}`
-                        </CardHeader>
+                      : "Médico não informado"}{" "}
-                        <CardContent>
+                    -{" "}
-                            {loadingAppointments ? (
+                    {new Date(firstConfirmed.scheduled_at).toLocaleTimeString(
-                                <div className="text-gray-500 text-sm">
+                      "pt-BR",
-                                    Carregando próxima consulta...
+                      {
-                                </div>
+                        hour: "2-digit",
-                            ) : firstConfirmed ? (
+                        minute: "2-digit",
-                                <>
+                      }
-                                    <div className="text-2xl font-bold">
+                    )}
-                                        {new Date(
+                  </p>
-                                            firstConfirmed.scheduled_at || firstConfirmed.date
+                </>
-                                        ).toLocaleDateString("pt-BR")}
+              ) : (
-                                    </div>
+                <div className="text-sm text-gray-500">
-                                    <p className="text-xs text-muted-foreground">
+                  Nenhuma consulta confirmada encontrada
-                                        {firstConfirmed.doctor_name
-                                            ? `Dr(a). ${firstConfirmed.doctor_name}`
-                                            : "Médico não informado"}{" "}
-                                        -{" "}
-                                        {new Date(
-                                            firstConfirmed.scheduled_at
-                                        ).toLocaleTimeString("pt-BR", {
-                                            hour: "2-digit",
-                                            minute: "2-digit",
-                                        })}
-                                    </p>
-                                </>
-                            ) : (
-                                <div className="text-sm text-gray-500">
-                                    Nenhuma consulta confirmada encontrada
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-
-                    {/* Consultas Este Mês */}
-                    <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>
-                            <Clock className="h-4 w-4 text-muted-foreground" />
-                        </CardHeader>
-                        <CardContent>
-                            {loadingAppointments ? (
-                                <div className="text-gray-500 text-sm">
-                                    Carregando consultas...
-                                </div>
-                            ) : nextAgendada ? (
-                                <>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {new Date(
-                                            nextAgendada.scheduled_at
-                                        ).toLocaleDateString("pt-BR", {
-                                            day: "2-digit",
-                                            month: "2-digit",
-                                            year: "numeric",
-                                        })}{" "}
-                                        às{" "}
-                                        {new Date(
-                                            nextAgendada.scheduled_at
-                                        ).toLocaleTimeString("pt-BR", {
-                                            hour: "2-digit",
-                                            minute: "2-digit",
-                                        })}
-                                    </div>
-                                    <p className="text-xs text-muted-foreground">
-                                        {nextAgendada.doctor_name
-                                            ? `Dr(a). ${nextAgendada.doctor_name}`
-                                            : "Médico não informado"}
-                                    </p>
-                                    <p className="text-xs text-muted-foreground">
-                                        {nextAgendada.patient_name
-                                            ? `Paciente: ${nextAgendada.patient_name}`
-                                            : ""}
-                                    </p>
-                                </>
-                            ) : (
-                                <div className="text-sm text-gray-500">
-                                    Nenhuma consulta agendada neste mês
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-
-                    {/* Perfil */}
-                    <Card>
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Perfil</CardTitle>
-                            <User className="h-4 w-4 text-muted-foreground" />
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">100%</div>
-                            <p className="text-xs text-muted-foreground">Dados completos</p>
-                        </CardContent>
-                    </Card>
                 </div>
+              )}
+            </CardContent>
+          </Card>
 
-                {/* Cards Secundários */}
+          {/* Consultas Este Mês */}
-                <div className="grid md:grid-cols-2 gap-6">
+          <Card>
-                    {/* Ações rápidas */}
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <Card>
+              <CardTitle className="text-sm font-medium">
-                        <CardHeader>
+                Consultas Este Mês
-                            <CardTitle>Ações Rápidas</CardTitle>
+              </CardTitle>
-                            <CardDescription>
+              <Clock className="h-4 w-4 text-muted-foreground" />
-                                Acesse rapidamente as principais funcionalidades
+            </CardHeader>
-                            </CardDescription>
+            <CardContent>
-                        </CardHeader>
+              {loadingAppointments ? (
-                        <CardContent className="space-y-4">
+                <div className="text-gray-500 text-sm">
-                            <Link href="/secretary/schedule">
+                  Carregando consultas...
-                                <Button className="w-full justify-start">
-                                    <Plus className="mr-2 h-4 w-4" />
-                                    Agendar Nova Consulta
-                                </Button>
-                            </Link>
-                            <Link href="/secretary/appointments">
-                                <Button
-                                    variant="outline"
-                                    className="w-full justify-start bg-transparent"
-                                >
-                                    <Calendar className="mr-2 h-4 w-4" />
-                                    Ver Consultas
-                                </Button>
-                            </Link>
-                            <Link href="/secretary/pacientes">
-                                <Button
-                                    variant="outline"
-                                    className="w-full justify-start bg-transparent"
-                                >
-                                    <User className="mr-2 h-4 w-4" />
-                                    Gerenciar Pacientes
-                                </Button>
-                            </Link>
-                        </CardContent>
-                    </Card>
-
-                    {/* Pacientes */}
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Pacientes</CardTitle>
-                            <CardDescription>
-                                Últimos pacientes cadastrados
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            {loadingPatients ? (
-                                <p className="text-sm text-gray-500">
-                                    Carregando pacientes...
-                                </p>
-                            ) : patients.length === 0 ? (
-                                <p className="text-sm text-gray-500">
-                                    Nenhum paciente cadastrado.
-                                </p>
-                            ) : (
-                                <div className="space-y-4">
-                                    {patients.map((patient, index) => (
-                                        <div
-                                            key={index}
-                                            className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100"
-                                        >
-                                            <div>
-                                                <p className="font-medium text-gray-900">
-                                                    {patient.full_name || "Sem nome"}
-                                                </p>
-                                                <p className="text-sm text-gray-600">
-                                                    {patient.phone_mobile ||
-                                                        patient.phone1 ||
-                                                        "Sem telefone"}
-                                                </p>
-                                            </div>
-                                            <div className="text-right">
-                                                <p className="font-medium text-blue-700">
-                                                    {patient.convenio || "Particular"}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
                 </div>
-            </div>
+              ) : nextAgendada ? (
-        </Sidebar>
+                <>
-    );
+                  <div className="text-lg font-bold text-gray-900">
+                    {new Date(nextAgendada.scheduled_at).toLocaleDateString(
+                      "pt-BR",
+                      {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                      }
+                    )}{" "}
+                    às{" "}
+                    {new Date(nextAgendada.scheduled_at).toLocaleTimeString(
+                      "pt-BR",
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {nextAgendada.doctor_name
+                      ? `Dr(a). ${nextAgendada.doctor_name}`
+                      : "Médico não informado"}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {nextAgendada.patient_name
+                      ? `Paciente: ${nextAgendada.patient_name}`
+                      : ""}
+                  </p>
+                </>
+              ) : (
+                <div className="text-sm text-gray-500">
+                  Nenhuma consulta agendada neste mês
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Perfil */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+              <User className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">100%</div>
+              <p className="text-xs text-muted-foreground">Dados completos</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Cards Secundários */}
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Ações rápidas */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Link href="/secretary/schedule">
+                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
+                  <User className="mr-2 h-4 w-4 text-white" />
+                  Agendar Nova Consulta
+                </Button>
+              </Link>
+              <Link href="/secretary/appointments">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
+                  <Calendar className="mr-2 h-4 w-4" />
+                  Ver Consultas
+                </Button>
+              </Link>
+              <Link href="/secretary/pacientes">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
+                  <User className="mr-2 h-4 w-4" />
+                  Gerenciar Pacientes
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          {/* Pacientes */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Pacientes</CardTitle>
+              <CardDescription>Últimos pacientes cadastrados</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loadingPatients ? (
+                <p className="text-sm text-gray-500">Carregando pacientes...</p>
+              ) : patients.length === 0 ? (
+                <p className="text-sm text-gray-500">
+                  Nenhum paciente cadastrado.
+                </p>
+              ) : (
+                <div className="space-y-4">
+                  {patients.map((patient, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100"
+                    >
+                      <div>
+                        <p className="font-medium text-gray-900">
+                          {patient.full_name || "Sem nome"}
+                        </p>
+                        <p className="text-sm text-gray-600">
+                          {patient.phone_mobile ||
+                            patient.phone1 ||
+                            "Sem telefone"}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium text-blue-700">
+                          {patient.convenio || "Particular"}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Sidebar>
+  );
 }

components/LoginForm.tsx

@@ -16,138 +16,215 @@ import { Eye, EyeOff, Mail, Lock, Loader2 } from "lucide-react";
 import { usersService } from "@/services/usersApi.mjs";
 
 interface LoginFormProps {
-    children?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 interface FormState {
-    email: string;
+  email: string;
-    password: string;
+  password: string;
 }
 
 export function LoginForm({ children }: LoginFormProps) {
-    const [form, setForm] = useState<FormState>({ email: "", password: "" });
+  const [form, setForm] = useState<FormState>({ email: "", password: "" });
-    const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-    const router = useRouter();
+  const router = useRouter();
-    const { toast } = useToast();
+  const { toast } = useToast();
 
-    const [userRoles, setUserRoles] = useState<string[]>([]);
+  const [userRoles, setUserRoles] = useState<string[]>([]);
-    const [authenticatedUser, setAuthenticatedUser] = useState<any>(null);
+  const [authenticatedUser, setAuthenticatedUser] = useState<any>(null);
 
-    /**
+  /**
-     * --- NOVA FUNÇÃO ---
+   * --- NOVA FUNÇÃO ---
-     * Finaliza o login com o perfil de dashboard escolhido e redireciona.
+   * Finaliza o login com o perfil de dashboard escolhido e redireciona.
-     */
+   */
-    const handleRoleSelection = (selectedDashboardRole: string, user: any) => {
+  const handleRoleSelection = (selectedDashboardRole: string, user: any) => {
-        if (!user) {
+    if (!user) {
-            toast({ title: "Erro de Sessão", description: "Não foi possível encontrar os dados do usuário. Tente novamente.", variant: "destructive" });
+      toast({
-            setUserRoles([]);
+        title: "Erro de Sessão",
-            return;
+        description:
-        }
+          "Não foi possível encontrar os dados do usuário. Tente novamente.",
+        variant: "destructive",
+      });
+      setUserRoles([]);
+      return;
+    }
 
-        const roleInLowerCase = selectedDashboardRole.toLowerCase();
+    const roleInLowerCase = selectedDashboardRole.toLowerCase();
-        console.log("Salvando no localStorage com o perfil:", roleInLowerCase);
+    console.log("Salvando no localStorage com o perfil:", roleInLowerCase);
 
-        const completeUserInfo = { ...user, user_metadata: { ...user.user_metadata, role: roleInLowerCase } };
+    const completeUserInfo = {
-        localStorage.setItem("user_info", JSON.stringify(completeUserInfo));
+      ...user,
-
+      user_metadata: { ...user.user_metadata, role: roleInLowerCase },
-        let redirectPath = "";
-        switch (selectedDashboardRole) {
-            case "gestor": redirectPath = "/manager/dashboard"; break;
-            case "admin": redirectPath = "/manager/dashboard"; break;
-            case "medico": redirectPath = "/doctor/dashboard"; break;
-            case "secretaria": redirectPath = "/secretary/dashboard"; break;
-            case "paciente": redirectPath = "/patient/dashboard"; break;
-        }
-
-        if (redirectPath) {
-            toast({ title: `Entrando como ${selectedDashboardRole}...` });
-            router.push(redirectPath);
-        } else {
-            toast({ title: "Erro", description: "Perfil selecionado inválido.", variant: "destructive" });
-        }
     };
+    localStorage.setItem("user_info", JSON.stringify(completeUserInfo));
 
-    const handleSubmit = async (e: React.FormEvent) => {
+    let redirectPath = "";
-        e.preventDefault();
+    switch (selectedDashboardRole) {
-        setIsLoading(true);
+      case "gestor":
-        localStorage.removeItem("token");
+        redirectPath = "/manager/dashboard";
-        localStorage.removeItem("user_info");
+        break;
+      case "admin":
+        redirectPath = "/manager/dashboard";
+        break;
+      case "medico":
+        redirectPath = "/doctor/dashboard";
+        break;
+      case "secretaria":
+        redirectPath = "/secretary/dashboard";
+        break;
+      case "paciente":
+        redirectPath = "/patient/dashboard";
+        break;
+    }
 
-        try {
+    if (redirectPath) {
-            const authData = await login(form.email, form.password);
+      toast({ title: `Entrando como ${selectedDashboardRole}...` });
-            const user = authData.user;
+      router.push(redirectPath);
-            if (!user || !user.id) {
+    } else {
-                throw new Error("Resposta de autenticação inválida.");
+      toast({
-            }
+        title: "Erro",
+        description: "Perfil selecionado inválido.",
+        variant: "destructive",
+      });
+    }
+  };
 
-            const rolesData = await api.get(`/rest/v1/user_roles?user_id=eq.${user.id}&select=role`);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    localStorage.removeItem("token");
+    localStorage.removeItem("user_info");
 
-            const me = await usersService.getMeSimple()
+    try {
-            console.log(me.roles)
+      const authData = await login(form.email, form.password);
+      const user = authData.user;
+      if (!user || !user.id) {
+        throw new Error("Resposta de autenticação inválida.");
+      }
 
-            if (!me.roles || me.roles.length === 0) {
+      const rolesData = await api.get(
-                throw new Error("Nenhum perfil de acesso foi encontrado para este usuário.");
+        `/rest/v1/user_roles?user_id=eq.${user.id}&select=role`
-            }
+      );
 
-            handleRoleSelection(me.roles[0], user);
+      const me = await usersService.getMeSimple();
+      console.log(me.roles);
 
-        } catch (error) {
+      if (!me.roles || me.roles.length === 0) {
-            localStorage.removeItem("token");
+        throw new Error(
-            localStorage.removeItem("user_info");
+          "Nenhum perfil de acesso foi encontrado para este usuário."
-            toast({
+        );
-                title: "Erro no Login",
+      }
-                description: error instanceof Error ? error.message : "Ocorreu um erro inesperado.",
-                variant: "destructive",
-            });
-            setIsLoading(false);
-        }
-    };
 
-    // Estado para guardar os botões de seleção de perfil
+      handleRoleSelection(me.roles[0], user);
-    const [roleSelectionUI, setRoleSelectionUI] = useState<React.ReactNode | null>(null);
+    } catch (error) {
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_info");
+      toast({
+        title: "Erro no Login",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Ocorreu um erro inesperado.",
+        variant: "destructive",
+      });
+      setIsLoading(false);
+    }
+  };
 
-    return (
+  // Estado para guardar os botões de seleção de perfil
-        <Card className="w-full bg-transparent border-0 shadow-none">
+  const [roleSelectionUI, setRoleSelectionUI] =
-            <CardContent className="p-0">
+    useState<React.ReactNode | null>(null);
-                {!roleSelectionUI ? (
+
-                    <form onSubmit={handleSubmit} className="space-y-6">
+  return (
-                        <div className="space-y-2">
+    <Card className="w-full bg-transparent border-0 shadow-none">
-                            <Label htmlFor="email">E-mail</Label>
+      <CardContent className="p-0">
-                            <div className="relative">
+        {!roleSelectionUI ? (
-                                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
+          <form onSubmit={handleSubmit} className="space-y-6">
-                                <Input id="email" type="email" placeholder="seu.email@exemplo.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="pl-10 h-11" required disabled={isLoading} autoComplete="username" />
+            <div className="space-y-2">
-                            </div>
+              <Label htmlFor="email">E-mail</Label>
-                        </div>
+              <div className="relative">
-                        <div className="space-y-2">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
-                            <Label htmlFor="password">Senha</Label>
+                <Input
-                            <div className="relative">
+                  id="email"
-                                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
+                  type="email"
-                                <Input id="password" type={showPassword ? "text" : "password"} placeholder="Digite sua senha" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} className="pl-10 pr-12 h-11" required disabled={isLoading} autoComplete="current-password" />
+                  placeholder="seu.email@exemplo.com"
-                                <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground" disabled={isLoading}>
+                  value={form.email}
-                                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
-                                </button>
+                  className="pl-10 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
-                            </div>
+                  required
-                        </div>
+                  disabled={isLoading}
-                        <Button type="submit" className="w-full h-11 text-base font-semibold" disabled={isLoading}>
+                  autoComplete="username"
-                            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Entrar"}
+                />
-                        </Button>
+              </div>
-                    </form>
+            </div>
-                ) : (
+            <div className="space-y-2">
-                    <div className="space-y-4 animate-in fade-in-50">
+              <Label htmlFor="password">Senha</Label>
-                        <h3 className="text-lg font-medium text-center text-foreground">Você tem múltiplos perfis</h3>
+              <div className="relative">
-                        <p className="text-sm text-muted-foreground text-center">Selecione com qual perfil deseja entrar:</p>
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
-                        <div className="flex flex-col space-y-3 pt-2">
+                <Input
-                            {userRoles.map((role) => (
+                  id="password"
-                                <Button key={role} variant="outline" className="h-11 text-base" onClick={() => handleRoleSelection(role, authenticatedUser)}>
+                  type={showPassword ? "text" : "password"}
-                                    Entrar como: {role.charAt(0).toUpperCase() + role.slice(1)}
+                  placeholder="Digite sua senha"
-                                </Button>
+                  value={form.password}
-                            ))}
+                  onChange={(e) =>
-                        </div>
+                    setForm({ ...form, password: e.target.value })
-                    </div>
+                  }
-                )}
+                  className="pl-10 pr-12 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
-                {children}
+                  required
-            </CardContent>
+                  disabled={isLoading}
-        </Card>
+                  autoComplete="current-password"
-    );
+                />
-}
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                  disabled={isLoading}
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+            <Button
+              type="submit"
+              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : (
+                "Entrar"
+              )}
+            </Button>
+          </form>
+        ) : (
+          <div className="space-y-4 animate-in fade-in-50">
+            <h3 className="text-lg font-medium text-center text-foreground">
+              Você tem múltiplos perfis
+            </h3>
+            <p className="text-sm text-muted-foreground text-center">
+              Selecione com qual perfil deseja entrar:
+            </p>
+            <div className="flex flex-col space-y-3 pt-2">
+              {userRoles.map((role) => (
+                <Button
+                  key={role}
+                  variant="outline"
+                  className="h-11 text-base"
+                  onClick={() => handleRoleSelection(role, authenticatedUser)}
+                >
+                  Entrar como: {role.charAt(0).toUpperCase() + role.slice(1)}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+        {children}
+      </CardContent>
+    </Card>
+  );
+}

components/Sidebar.tsx

@@ -5,13 +5,10 @@ import type React from "react";
 import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
-import Cookies from "js-cookie"; // Mantido apenas para a limpeza de segurança no logout
+import Cookies from "js-cookie";
 import { api } from "@/services/api.mjs";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Dialog,
   DialogContent,
@@ -20,18 +17,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+
 import {
-  Search,
-  Bell,
-  Calendar,
-  User,
   LogOut,
   ChevronLeft,
   ChevronRight,
   Home,
   CalendarCheck2,
   ClipboardPlus,
-  SquareUserRound,
   CalendarClock,
   Users,
   SquareUser,
@@ -39,6 +32,7 @@ import {
   Stethoscope,
   ClipboardMinus,
 } from "lucide-react";
+
 import SidebarUserSection from "@/components/ui/userToolTip";
 
 interface UserData {
@@ -83,7 +77,6 @@ export default function Sidebar({ children }: SidebarProps) {
 
   useEffect(() => {
     const userInfoString = localStorage.getItem("user_info");
-    // --- ALTERAÇÃO 1: Buscando o token no localStorage ---
     const token = localStorage.getItem("token");
 
     if (userInfoString && token) {
@@ -113,7 +106,6 @@ export default function Sidebar({ children }: SidebarProps) {
       });
       setRole(userInfo.user_metadata?.role);
     } else {
-      // O redirecionamento para /login já estava correto. Ótimo!
       router.push("/login");
     }
   }, [router]);
@@ -133,21 +125,17 @@ export default function Sidebar({ children }: SidebarProps) {
 
   const handleLogout = () => setShowLogoutDialog(true);
 
-  // --- ALTERAÇÃO 2: A função de logout agora é MUITO mais simples ---
   const confirmLogout = async () => {
     try {
-      // Chama a função centralizada para fazer o logout no servidor
       await api.logout();
     } catch (error) {
-      // O erro já é logado dentro da função api.logout, não precisamos fazer nada aqui
     } finally {
-      // A responsabilidade do componente é apenas limpar o estado local e redirecionar
       localStorage.removeItem("user_info");
       localStorage.removeItem("token");
-      Cookies.remove("access_token"); // Limpeza de segurança
+      Cookies.remove("access_token");
 
       setShowLogoutDialog(false);
-      router.push("/"); // Redireciona para a home
+      router.push("/");
     }
   };
 
@@ -200,37 +188,27 @@ export default function Sidebar({ children }: SidebarProps) {
       },
     ];
 
-    const managerItems: MenuItem[] = [
+        const managerItems: MenuItem[] = [
-      { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
+            { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
-      { href: "#", icon: ClipboardMinus, label: "Relatórios gerenciais" },
+            { href: "/manager/usuario", icon: Users, label: "Gestão de Usuários" },
-      { href: "/manager/usuario", icon: Users, label: "Gestão de Usuários" },
+            { href: "/manager/home", icon: Stethoscope, label: "Gestão de Médicos" },
-      { href: "/manager/home", icon: Stethoscope, label: "Gestão de Médicos" },
+            { href: "/manager/pacientes", icon: Users, label: "Gestão de Pacientes" },
-      { href: "/manager/pacientes", icon: Users, label: "Gestão de Pacientes" },
+            { href: "/secretary/appointments", icon: CalendarCheck2, label: "Consultas" },
-      { href: "/doctor/consultas", icon: CalendarCheck2, label: "Consultas" }, //adicionar botão de voltar pra pagina anterior
+            { href: "/manager/disponibilidade", icon: ClipboardList, label: "Disponibilidade" },
-    ];
+        ];
 
-    let menuItems: MenuItem[];
     switch (role) {
       case "gestor":
-        menuItems = managerItems;
-        break;
       case "admin":
-        menuItems = managerItems;
+        return managerItems;
-        break;
       case "medico":
-        menuItems = doctorItems;
+        return doctorItems;
-        break;
       case "secretaria":
-        menuItems = secretaryItems;
+        return secretaryItems;
-        break;
       case "paciente":
-        menuItems = patientItems;
-        break;
       default:
-        menuItems = patientItems;
+        return patientItems;
-        break;
     }
-    return menuItems;
   };
 
   const menuItems = SetMenuItems(role);
@@ -246,48 +224,59 @@ export default function Sidebar({ children }: SidebarProps) {
   return (
     <div className="min-h-screen bg-gray-50 flex">
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${
+        className={`fixed top-0 h-screen flex flex-col z-30 transition-all duration-300
-          sidebarCollapsed ? "w-16" : "w-64"
+                ${sidebarCollapsed ? "w-16" : "w-64"}
-        }`}
+                bg-[#123965] text-white`}
       >
-        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+        {/* TOPO */}
+        <div className="p-4 border-b border-white/10 flex items-center justify-between">
           {!sidebarCollapsed && (
             <div className="flex items-center gap-2">
-              {/* 🛑 SUBSTITUIÇÃO: Usando a tag <img> com o caminho da logo */}
+              <div className="bg-white p-1 rounded-lg">
-              <img
+                <img
-                src="/Logo MedConnect.png" // Use o arquivo da logo (ou /android-chrome-512x512.png)
+                  src="/Logo MedConnect.png"
-                alt="Logo MediConnect"
+                  alt="Logo MedConnect"
-                className="w-12 h-12 object-contain" // Define o tamanho para w-8 h-8 (32px)
+                  className="w-12 h-12 object-contain"
-              />
+                />
-              <span className="font-semibold text-gray-900">MedConnect</span>
+              </div>
+
+              <span className="font-semibold text-white text-lg">
+                MedConnect
+              </span>
             </div>
           )}
+
           <Button
             variant="ghost"
             size="sm"
             onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            className="p-1"
+            className="p-1 text-white hover:bg-white/10 cursor-pointer"
           >
             {sidebarCollapsed ? (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="w-5 h-5" />
             ) : (
-              <ChevronLeft className="w-4 h-4" />
+              <ChevronLeft className="w-5 h-5" />
             )}
           </Button>
         </div>
 
-        <nav className="flex-1 p-2 overflow-y-auto">
+        {/* MENU */}
+        <nav className="flex-1 p-3 overflow-y-auto">
           {menuItems.map((item) => {
             const Icon = item.icon;
             const isActive = pathname === item.href;
+
             return (
               <Link key={item.label} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                  className={`
-                    isActive
+                                        flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                                        ${
-                      : "text-gray-600 hover:bg-gray-50"
+                                          isActive
-                  }`}
+                                            ? "bg-white/20 text-white font-semibold"
+                                            : "text-white/80 hover:bg-white/10 hover:text-white"
+                                        }
+                                    `}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -298,30 +287,31 @@ export default function Sidebar({ children }: SidebarProps) {
             );
           })}
         </nav>
-        <SidebarUserSection
-          userData={userData}
-          sidebarCollapsed={false}
-          handleLogout={handleLogout}
-          isActive={role === "paciente" ? false : true}
-        ></SidebarUserSection>
-      </div>
 
+        {/* PERFIL ORIGINAL + NOME BRANCO */}
+        <div className="mt-auto p-3 border-t border-white/10">
+          <SidebarUserSection
+            userData={userData}
+            sidebarCollapsed={sidebarCollapsed}
+            handleLogout={handleLogout}
+            isActive={role !== "paciente"}
+          />
+        </div>
+      </div>
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 w-full ${
+        className={`flex-1 flex flex-col transition-all duration-300 ${
           sidebarCollapsed ? "ml-16" : "ml-64"
         }`}
       >
-        <header className="bg-gray-50 px-4 md:px-6 py-4 flex items-center justify-between"></header>
         <main className="flex-1 p-4 md:p-6">{children}</main>
       </div>
-
       <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Confirmar Saída</DialogTitle>
             <DialogDescription>
               Deseja realmente sair do sistema? Você precisará fazer login
-              novamente para acessar sua conta.
+              novamente.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="flex gap-2">
@@ -335,6 +325,7 @@ export default function Sidebar({ children }: SidebarProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+       
     </div>
   );
 }

components/ui/WeeklyScheduleCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+    slot_minutes: number;
+    appointment_type: string;
+    active: boolean;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string | null;
+};
+
+interface WeeklyScheduleProps {
+    doctorId?: string;
+}
+
+export default function WeeklyScheduleCard({ doctorId }: WeeklyScheduleProps) {
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+    const [loading, setLoading] = useState(true);
+
+    const weekdaysPT: Record<string, string> = {
+        sunday: "Domingo",
+        monday: "Segunda",
+        tuesday: "Terça",
+        wednesday: "Quarta",
+        thursday: "Quinta",
+        friday: "Sexta",
+        saturday: "Sábado",
+    };
+
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
+
+    function formatAvailability(data: Availability[]) {
+        const grouped = data.reduce((acc: any, item) => {
+            const { weekday, start_time, end_time } = item;
+
+            if (!acc[weekday]) acc[weekday] = [];
+
+            acc[weekday].push({ start: start_time, end: end_time });
+
+            return acc;
+        }, {});
+
+        return grouped;
+    }
+
+    useEffect(() => {
+        const fetchSchedule = async () => {
+            try {
+                const availabilityList = await AvailabilityService.list();
+
+                const filtered = availabilityList.filter((a: Availability) => a.doctor_id == doctorId);
+
+                const formatted = formatAvailability(filtered);
+                setSchedule(formatted);
+            } catch (err) {
+                console.error("Erro ao carregar horários:", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchSchedule();
+    }, []);
+
+    return (
+        <div className="space-y-4 grid md:grid-cols-7 gap-2">
+            {loading ? (
+                <p className="text-sm text-gray-500 col-span-7 text-center">Carregando...</p>
+            ) : (
+                ["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">
+                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
+                                <div className="text-center">
+                                    {times.length > 0 ? (
+                                        times.map((t, i) => (
+                                            <p key={i} className="text-sm text-gray-600">
+                                                {formatTime(t.start)} <br /> {formatTime(t.end)}
+                                            </p>
+                                        ))
+                                    ) : (
+                                        <p className="text-sm text-gray-400 italic">Sem horário</p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })
+            )}
+        </div>
+    );
+}

components/ui/userToolTip.tsx

@@ -2,7 +2,14 @@
 
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { CalendarCheck2, CalendarClock, ClipboardPlus, Home, LogOut, SquareUser } from "lucide-react";
+import {
+  CalendarCheck2,
+  CalendarClock,
+  ClipboardPlus,
+  Home,
+  LogOut,
+  SquareUser,
+} from "lucide-react";
 import {
   Popover,
   PopoverTrigger,
@@ -34,45 +41,52 @@ export default function SidebarUserSection({
   handleLogout,
   isActive,
 }: Props) {
-    const pathname = usePathname();
+  const pathname = usePathname();
-    const menuItems: any[] = [
+  const menuItems: any[] = [
-        { href: "/patient/schedule", icon: CalendarClock, label: "Agendar Consulta" },
+    {
-        { href: "/patient/appointments", icon: CalendarCheck2, label: "Minhas Consultas" },
+      href: "/patient/schedule",
-        { href: "/patient/reports", icon: ClipboardPlus, label: "Meus Laudos" },
+      icon: CalendarClock,
-        { href: "/patient/profile", icon: SquareUser, label: "Meus Dados" },          
+      label: "Agendar Consulta",
-    ]
+    },
+    {
+      href: "/patient/appointments",
+      icon: CalendarCheck2,
+      label: "Minhas Consultas",
+    },
+    { href: "/patient/reports", icon: ClipboardPlus, label: "Meus Laudos" },
+    { href: "/patient/profile", icon: SquareUser, label: "Meus Dados" },
+  ];
   return (
     <div className="border-t p-4 mt-auto">
       {/* POPUP DE INFORMAÇÕES DO USUÁRIO */}
       <Popover>
         <PopoverTrigger asChild>
-            <div
+          <div
-                className={`flex items-center space-x-3 mb-4 p-2 rounded-md transition-colors ${
+            className={`flex items-center space-x-3 mb-4 p-2 rounded-md transition-colors ${
-                isActive
+              isActive ? "cursor-pointer" : "cursor-default pointer-events-none"
-                    ? "cursor-pointer hover:bg-gray-100"
+            }`}
-                    : "cursor-default pointer-events-none"
+          >
-                }`}>
+            <Avatar>
-                <Avatar>
+              <AvatarImage src="/placeholder.svg?height=40&width=40" />
-                <AvatarImage src="/placeholder.svg?height=40&width=40" />
+              <AvatarFallback>
-                <AvatarFallback>
+                {userData.user_metadata.full_name
-                    {userData.user_metadata.full_name
+                  .split(" ")
-                    .split(" ")
+                  .map((n) => n[0])
-                    .map((n) => n[0])
+                  .join("")}
-                    .join("")}
+              </AvatarFallback>
-                </AvatarFallback>
+            </Avatar>
-                </Avatar>
 
-                {!sidebarCollapsed && (
+            {!sidebarCollapsed && (
-                <div className="flex-1 min-w-0">
+              <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-white truncate">
-                    {userData.user_metadata.full_name}
+                  {userData.user_metadata.full_name}
-                    </p>
+                </p>
-                    <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-white truncate">
-                    {userData.app_metadata.user_role}
+                  {userData.app_metadata.user_role}
-                    </p>
+                </p>
-                </div>
+              </div>
-                )}
+            )}
-            </div>
+          </div>
         </PopoverTrigger>
 
         {/* Card flutuante */}
@@ -83,43 +97,47 @@ export default function SidebarUserSection({
         >
           <nav>
             {menuItems.map((item) => {
-            const Icon = item.icon;
+              const Icon = item.icon;
-            const isActive = pathname === item.href;
+              const isActive = pathname === item.href;
-            return (
+              return (
-              <Link key={item.label} href={item.href}>
+                <Link key={item.label} href={item.href}>
-                <div
+                  <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                    isActive
+                      isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                        ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
+                        : "text-gray-600 hover:bg-gray-50"
-                  }`}
+                    }`}
-                >
+                  >
-                  <Icon className="w-5 h-5 flex-shrink-0" />
+                    <Icon className="w-5 h-5 flex-shrink-0" />
-                  {!sidebarCollapsed && (
+                    {!sidebarCollapsed && (
-                    <span className="font-medium">{item.label}</span>
+                      <span className="font-medium">{item.label}</span>
-                  )}
+                    )}
-                </div>
+                  </div>
-              </Link>
+                </Link>
-            );
+              );
-          })}
+            })}
           </nav>
         </PopoverContent>
       </Popover>
-
       {/* Botão de sair */}
       <Button
         variant="outline"
         size="sm"
         className={
           sidebarCollapsed
-            ? "w-full bg-transparent flex justify-center items-center p-2"
+            ? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200"
-            : "w-full bg-transparent"
+            : "w-full bg-white text-black hover:bg-gray-200 cursor-pointer"
         }
         onClick={handleLogout}
       >
-        <LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
+        <LogOut
-        {sidebarCollapsed && "Sair"}
+          className={
+            sidebarCollapsed ? "h-5 w-5 text-black" : "mr-2 h-4 w-4 text-black"
+          }
+        />
+        {!sidebarCollapsed && "Sair"}
       </Button>
+         
     </div>
   );
 }

services/usersApi.mjs

@@ -1,100 +1,98 @@
 import { api } from "./api.mjs";
 
 export const usersService = {
-  // Função getMe corrigida para chamar a si mesma pelo nome
+    // Função getMe corrigida para chamar a si mesma pelo nome
-  async getMe() {
+    async getMe() {
-    const sessionData = await api.getSession();
+        const sessionData = await api.getSession();
-    if (!sessionData?.id) {
+        if (!sessionData?.id) {
-      console.error("Sessão não encontrada ou usuário sem ID.", sessionData);
+            console.error("Sessão não encontrada ou usuário sem ID.", sessionData);
-      throw new Error("Usuário não autenticado.");
+            throw new Error("Usuário não autenticado.");
-    }
+        }
-    // Chamando a outra função do serviço pelo nome explícito
+        // Chamando a outra função do serviço pelo nome explícito
-    return usersService.full_data(sessionData.id);
+        return usersService.full_data(sessionData.id);
-  },
+    },
 
-  async list_roles() {
+    async list_roles() {
-    return await api.get(`/rest/v1/user_roles?select=id,user_id,role,created_at`);
+        return await api.get(`/rest/v1/user_roles?select=id,user_id,role,created_at`);
-  },
+    },
 
-  async create_user(data) {
+    async create_user(data) {
-    // Esta é a função usada no page.tsx para criar usuários que não são médicos
+        // Esta é a função usada no page.tsx para criar usuários que não são médicos
-    return await api.post(`/functions/v1/create-user-with-password`, data);
+        return await api.post(`/functions/v1/create-user-with-password`, data);
-  },
+    },
 
-  async getMeSimple() {
+    // --- NOVA FUNÇÃO ADICIONADA AQUI ---
-    return await api.post(`/functions/v1/user-info`);
+    // Esta função chama o endpoint público de registro de paciente.
-  },
+    async registerPatient(data) {
+        // POR QUÊ? Este endpoint é público e não requer token JWT, resolvendo o erro 401.
+        return await api.post("/functions/v1/register-patient", data);
+    },
+    // --- FIM DA NOVA FUNÇÃO ---
 
-  async full_data(user_id) {
+    async getMeSimple() {
-    if (!user_id) throw new Error("user_id é obrigatório");
+        return await api.post(`/functions/v1/user-info`);
+    },
 
-    const [profile] = await api.get(`/rest/v1/profiles?id=eq.${user_id}`);
+    async full_data(user_id) {
-    const [role] = await api.get(`/rest/v1/user_roles?user_id=eq.${user_id}`);
+        if (!user_id) throw new Error("user_id é obrigatório");
-    const permissions = {
-      isAdmin: role?.role === "admin",
-      isManager: role?.role === "gestor",
-      isDoctor: role?.role === "medico",
-      isSecretary: role?.role === "secretaria",
-      isAdminOrManager:
-        role?.role === "admin" || role?.role === "gestor" ? true : false,
-    };
 
-    return {
+        const [profile] = await api.get(`/rest/v1/profiles?id=eq.${user_id}`);
-      user: {
+        const [role] = await api.get(`/rest/v1/user_roles?user_id=eq.${user_id}`);
-        id: user_id,
+        const permissions = {
-        email: profile?.email ?? "—",
+            isAdmin: role?.role === "admin",
-        email_confirmed_at: null,
+            isManager: role?.role === "gestor",
-        created_at: profile?.created_at ?? "—",
+            isDoctor: role?.role === "medico",
-        last_sign_in_at: null,
+            isSecretary: role?.role === "secretaria",
-      },
+            isAdminOrManager: role?.role === "admin" || role?.role === "gestor" ? true : false,
-      profile: {
+        };
-        id: profile?.id ?? user_id,
-        full_name: profile?.full_name ?? "—",
-        email: profile?.email ?? "—",
-        phone: profile?.phone ?? "—",
-        avatar_url: profile?.avatar_url ?? null,
-        disabled: profile?.disabled ?? false,
-        created_at: profile?.created_at ?? null,
-        updated_at: profile?.updated_at ?? null,
-      },
-      roles: [role?.role ?? "—"],
-      permissions,
-    };
-  },
-   async resetPassword(email) {
-  if (!email) throw new Error("Email é obrigatório para resetar a senha.");
 
+        return {
+            user: {
+                id: user_id,
+                email: profile?.email ?? "—",
+                email_confirmed_at: null,
+                created_at: profile?.created_at ?? "—",
+                last_sign_in_at: null,
+            },
+            profile: {
+                id: profile?.id ?? user_id,
+                full_name: profile?.full_name ?? "—",
+                email: profile?.email ?? "—",
+                phone: profile?.phone ?? "—",
+                avatar_url: profile?.avatar_url ?? null,
+                disabled: profile?.disabled ?? false,
+                created_at: profile?.created_at ?? null,
+                updated_at: profile?.updated_at ?? null,
+            },
+            roles: [role?.role ?? "—"],
+            permissions,
+        };
+    },
+    async resetPassword(email) {
+        if (!email) throw new Error("Email é obrigatório para resetar a senha.");
 
-  try {
+        try {
-    const res = await fetch(
+            const res = await fetch(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/auth/v1/recover`, {
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/auth/v1/recover`,
+                method: "POST",
-      {
+                headers: {
-        method: "POST",
+                    "Content-Type": "application/json",
-        headers: {
+                    apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-          "Content-Type": "application/json",
+                },
-          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+                body: JSON.stringify({ email }),
-        },
+            });
-        body: JSON.stringify({ email }),
-      }
-    );
 
+            const data = await res.json().catch(() => ({}));
 
-    const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
-
+                console.error("Erro no resetPassword:", res.status, data);
-
+                throw new Error(`Erro ${res.status}: ${data.message || "Falha ao resetar senha."}`);
-    if (!res.ok) {
+            }
-      console.error("Erro no resetPassword:", res.status, data);
-      throw new Error(`Erro ${res.status}: ${data.message || "Falha ao resetar senha."}`);
-    }
-
-
-    console.log("✅ Reset de senha:", data);
-    return data;
-  } catch (err) {
-    console.error("❌ Erro na chamada resetPassword:", err);
-    throw new Error(err.message || "Erro inesperado na recuperação de senha.");
-  }
-},
-
 
+            console.log("✅ Reset de senha:", data);
+            return data;
+        } catch (err) {
+            console.error("❌ Erro na chamada resetPassword:", err);
+            throw new Error(err.message || "Erro inesperado na recuperação de senha.");
+        }
+    },
 };