Merge pull request #25 from m1guelmcf/retirar-relatorios

Atualiza cards com dados de APIs e corrige contagens

app/doctor/dashboard/page.tsx

@@ -24,6 +24,15 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { toast } from "@/hooks/use-toast";
 
+// --- IMPORTS ADICIONADOS PARA A CORREÇÃO ---
+import { useAuthLayout } from "@/hooks/useAuthLayout";
+import { patientsService } from "@/services/patientsApi.mjs";
+// --- FIM DOS IMPORTS ADICIONADOS ---
+
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import { format, parseISO, isAfter, isSameMonth, startOfToday } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { exceptionsService } from "@/services/exceptionApi.mjs";
 import { doctorsService } from "@/services/doctorsApi.mjs";
@@ -122,63 +131,88 @@ interface Exception {
 }
 
 export default function PatientDashboard() {
-  const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
+    // --- USA O HOOK DE AUTENTICAÇÃO PARA PEGAR O USUÁRIO LOGADO ---
+    const { user } = useAuthLayout({ requiredRole: ['medico'] });
+
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor | null>(null);
     const [userData, setUserData] = useState<UserData>();
     const [availability, setAvailability] = useState<any | null>(null);
     const [exceptions, setExceptions] = useState<Exception[]>([]);
-  const [schedule, setSchedule] = useState<
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
-    Record<string, { start: string; end: string }[]>
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
-  >({});
-  const formatTime = (time?: string | null) =>
-    time?.split(":")?.slice(0, 2).join(":") ?? "";
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(
+    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
-    null
-  );
     const [error, setError] = useState<string | null>(null);
 
-  // Mapa de tradução
+    // --- ESTADOS PARA OS CARDS ATUALIZADOS ---
-  const weekdaysPT: Record<string, string> = {
+    const [nextAppointment, setNextAppointment] = useState<EnrichedAppointment | null>(null);
-    sunday: "Domingo",
+    const [monthlyCount, setMonthlyCount] = useState<number>(0);
-    monday: "Segunda",
-    tuesday: "Terça",
-    wednesday: "Quarta",
-    thursday: "Quinta",
-    friday: "Sexta",
-    saturday: "Sábado",
-  };
 
+    const weekdaysPT: Record<string, string> = { sunday: "Domingo", monday: "Segunda", tuesday: "Terça", wednesday: "Quarta", thursday: "Quinta", friday: "Sexta", saturday: "Sábado" };
+
+    // ▼▼▼ LÓGICA DE BUSCA CORRIGIDA E ATUALIZADA ▼▼▼
     useEffect(() => {
         const fetchData = async () => {
+            if (!user?.id) return; // Aguarda o usuário ser carregado
+
             try {
+                // Encontra o perfil de médico correspondente ao usuário logado
                 const doctorsList: Doctor[] = await doctorsService.list();
-        const doctor = doctorsList[0];
+                const currentDoctor = doctorsList.find(doc => doc.user_id === user.id);
 
-        // Salva no estado
+                if (!currentDoctor) {
-        setLoggedDoctor(doctor);
+                    setError("Perfil de médico não encontrado para este usuário.");
+                    return;
+                }
+                setLoggedDoctor(currentDoctor);
 
-        // Busca disponibilidade
+                // Busca todos os dados necessários em paralelo
-        const availabilityList = await AvailabilityService.list();
+                const [appointmentsList, patientsList, availabilityList, exceptionsList] = await Promise.all([
+                    appointmentsService.list(),
+                    patientsService.list(),
+                    AvailabilityService.list(),
+                    exceptionsService.list()
+                ]);
 
-        // Filtra já com a variável local
+                // Mapeia pacientes por ID para consulta rápida
-        const filteredAvail = availabilityList.filter(
+                const patientsMap = new Map(patientsList.map((p: any) => [p.id, p.full_name]));
-          (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+
+                // Filtra e enriquece as consultas APENAS do médico logado
+                const doctorAppointments = appointmentsList
+                    .filter((apt: any) => apt.doctor_id === currentDoctor.id)
+                    .map((apt: any): EnrichedAppointment => ({
+                        ...apt,
+                        patientName: patientsMap.get(apt.patient_id) || "Paciente Desconhecido",
+                    }));
+
+                // 1. Lógica para "Próxima Consulta"
+                const today = startOfToday();
+                const upcomingAppointments = doctorAppointments
+                    .filter(apt => isAfter(parseISO(apt.scheduled_at), today))
+                    .sort((a, b) => new Date(a.scheduled_at).getTime() - new Date(b.scheduled_at).getTime());
+                setNextAppointment(upcomingAppointments[0] || null);
+
+                // 2. Lógica para "Consultas Este Mês" (apenas ativas)
+                const activeStatuses = ['confirmed', 'requested', 'checked_in'];
+                const currentMonthAppointments = doctorAppointments.filter(apt =>
+                    isSameMonth(parseISO(apt.scheduled_at), new Date()) && activeStatuses.includes(apt.status)
                 );
-        setAvailability(filteredAvail);
+                setMonthlyCount(currentMonthAppointments.length);
+
+                // Busca e filtra o restante dos dados
+                setAvailability(availabilityList.filter((d: any) => d.doctor_id === currentDoctor.id));
+                setExceptions(exceptionsList.filter((e: any) => e.doctor_id === currentDoctor.id));
 
-                // Busca exceções
-                const exceptionsList = await exceptionsService.list();
-                const filteredExc = exceptionsList.filter((exc: { doctor_id: string }) => exc.doctor_id === doctor?.id);
-                setExceptions(filteredExc);
             } catch (e: any) {
-                alert(`${e?.error} ${e?.message}`);
+                setError(e?.message || "Erro ao buscar dados do dashboard");
+                console.error("Erro no dashboard:", e);
             }
         };
 
         fetchData();
-      }, []);
+    }, [user]); // A busca de dados agora depende do usuário logado
+    // ▲▲▲ FIM DA LÓGICA DE BUSCA ATUALIZADA ▲▲▲
 
-  // 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);
     }
@@ -190,57 +224,25 @@ export default function PatientDashboard() {
 
     const handleDeleteException = async (ExceptionId: string) => {
         try {
-      alert(ExceptionId);
             const res = await exceptionsService.delete(ExceptionId);
-
+            if (res && res.error) { throw new Error(res.message || "A API retornou um erro"); }
-      let message = "Exceção deletada com sucesso";
+            toast({ title: "Sucesso", description: "Exceção deletada com sucesso" });
-      try {
+            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
-        if (res) {
-          throw new Error(
-            `${res.error} ${res.message}` || "A API retornou erro"
-          );
-        } else {
-          console.log(message);
-        }
-      } catch {}
-
-      toast({
-        title: "Sucesso",
-        description: message,
-      });
-
-      setExceptions((prev: Exception[]) =>
-        prev.filter((p) => String(p.id) !== String(ExceptionId))
-      );
         } catch (e: any) {
-      toast({
+            toast({ title: "Erro", description: e?.message || "Não foi possível deletar a exceção" });
-        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
+        if (!data) return {};
         const schedule = data.reduce((acc: any, item) => {
             const { weekday, start_time, end_time } = item;
-
+            if (!acc[weekday]) acc[weekday] = [];
-      // Se o dia ainda não existe, cria o array
+            acc[weekday].push({ start: start_time, end: end_time });
-      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;
     }
 
@@ -262,31 +264,44 @@ export default function PatientDashboard() {
         </div>
 
                 <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {/* ▼▼▼ CARD "PRÓXIMA CONSULTA" CORRIGIDO PARA MOSTRAR NOME DO PACIENTE ▼▼▼ */}
                     <Card>
                         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
+                            <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
-                Próxima Consulta
-              </CardTitle>
                             <Calendar className="h-4 w-4 text-muted-foreground" />
                         </CardHeader>
                         <CardContent>
-              <div className="text-2xl font-bold">02 out</div>
+                            {nextAppointment ? (
-              <p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
+                                <>
+                                    <div className="text-2xl font-bold capitalize">
+                                        {format(parseISO(nextAppointment.scheduled_at), "dd MMM", { locale: ptBR })}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">
+                                        {nextAppointment.patientName} - {format(parseISO(nextAppointment.scheduled_at), "HH:mm")}
+                                    </p>
+                                </>
+                            ) : (
+                                <>
+                                    <div className="text-2xl font-bold">Nenhuma</div>
+                                    <p className="text-xs text-muted-foreground">Sem próximas consultas</p>
+                                </>
+                            )}
                         </CardContent>
                     </Card>
+                    {/* ▲▲▲ FIM DO CARD ATUALIZADO ▲▲▲ */}
 
+                    {/* ▼▼▼ CARD "CONSULTAS ESTE MÊS" CORRIGIDO PARA CONTAGEM CORRETA ▼▼▼ */}
                     <Card>
                         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
+                            <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
-                Consultas Este Mês
-              </CardTitle>
                             <Clock className="h-4 w-4 text-muted-foreground" />
                         </CardHeader>
                         <CardContent>
-              <div className="text-2xl font-bold">4</div>
+                            <div className="text-2xl font-bold">{monthlyCount}</div>
-              <p className="text-xs text-muted-foreground">4 agendadas</p>
+                            <p className="text-xs text-muted-foreground">{monthlyCount === 1 ? '1 agendada' : `${monthlyCount} agendadas`}</p>
                         </CardContent>
                     </Card>
+                    {/* ▲▲▲ FIM DO CARD ATUALIZADO ▲▲▲ */}
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -300,18 +315,17 @@ export default function PatientDashboard() {
           </Card>
         </div>
 
+                {/* O restante do código permanece o mesmo */}
                 <div className="grid md:grid-cols-2 gap-6">
                     <Card>
                         <CardHeader>
                             <CardTitle>Ações Rápidas</CardTitle>
-              <CardDescription>
+                            <CardDescription>Acesse rapidamente as principais funcionalidades</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">
+                                <Button className="w-full justify-start">
-                  <Calendar className="mr-2 h-4 w-4 text-white" />
+                                    <Calendar className="mr-2 h-4 w-4" />
                                     Ver Minhas Consultas
                                 </Button>
                             </Link>
@@ -358,12 +372,11 @@ export default function PatientDashboard() {
                         <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
                             {exceptions && exceptions.length > 0 ? (
                                 exceptions.map((ex: Exception) => {
-                  // Formata data e hora
                                     const date = new Date(ex.date).toLocaleDateString("pt-BR", {
                                         weekday: "long",
                                         day: "2-digit",
                                         month: "long",
-                    timeZone: "UTC",
+                                        timeZone: "UTC"
                                     });
 
                   const startTime = formatTime(ex.start_time);
@@ -374,7 +387,11 @@ export default function PatientDashboard() {
                                             <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
-                                                    <p className="text-sm text-gray-600">{startTime && endTime ? `${startTime} - ${endTime}` : "Dia todo"}</p>
+                                                    <p className="text-sm text-gray-600">
+                                                        {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/manager/dashboard/page.tsx

@@ -8,12 +8,13 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Calendar, Clock, Plus, User } from "lucide-react";
+import { Clock, Plus, User } from "lucide-react"; // Removi 'Calendar' que não estava sendo usado
 import Link from "next/link";
 import React, { useState, useEffect } from "react";
 import { usersService } from "services/usersApi.mjs";
 import { doctorsService } from "services/doctorsApi.mjs";
 import Sidebar from "@/components/Sidebar";
+import { api } from "services/api.mjs"; // <-- ADICIONEI ESTE IMPORT
 
 export default function ManagerDashboard() {
   // 🔹 Estados para usuários
@@ -24,16 +25,44 @@ export default function ManagerDashboard() {
   const [doctors, setDoctors] = useState<any[]>([]);
   const [loadingDoctors, setLoadingDoctors] = useState(true);
 
-  // 🔹 Buscar primeiro usuário
+    // 🔹 Buscar primeiro usuário (LÓGICA ATUALIZADA)
     useEffect(() => {
         async function fetchFirstUser() {
+            setLoadingUser(true); // Garante que o estado de loading inicie como true
             try {
-        const data = await usersService.list_roles();
+                // 1. Busca a lista de usuários com seus cargos (roles)
-        if (Array.isArray(data) && data.length > 0) {
+                const rolesData = await usersService.list_roles();
-          setFirstUser(data[0]);
+
+                // 2. Verifica se a lista não está vazia
+                if (Array.isArray(rolesData) && rolesData.length > 0) {
+                    const firstUserRole = rolesData[0];
+                    const firstUserId = firstUserRole.user_id;
+
+                    if (!firstUserId) {
+                        throw new Error("O primeiro usuário da lista não possui um ID válido.");
+                    }
+
+                    // 3. Usa o ID para buscar o perfil (com nome e email) do usuário
+                    const profileData = await api.get(
+                        `/rest/v1/profiles?select=full_name,email&id=eq.${firstUserId}`
+                    );
+
+                    // 4. Verifica se o perfil foi encontrado
+                    if (Array.isArray(profileData) && profileData.length > 0) {
+                        const userProfile = profileData[0];
+                        // 5. Combina os dados do cargo e do perfil e atualiza o estado
+                        setFirstUser({
+                            ...firstUserRole,
+                            ...userProfile
+                        });
+                    } else {
+                        // Se não encontrar o perfil, exibe os dados que temos
+                        setFirstUser(firstUserRole);
+                    }
                 }
             } catch (error) {
                 console.error("Erro ao carregar usuário:", error);
+                setFirstUser(null); // Limpa o usuário em caso de erro
             } finally {
                 setLoadingUser(false);
             }
@@ -73,21 +102,7 @@ export default function ManagerDashboard() {
 
                 {/* 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>

app/manager/home/[id]/editar/page.tsx

@@ -225,7 +225,7 @@ export default function EditarMedicoPage() {
                             Editar Médico: <span className="text-green-600">{formData.nomeCompleto}</span>
                         </h1>
                         <p className="text-sm text-gray-500">
-            Atualize as informações do médico (ID: {id}).
+                            Atualize as informações do médico
                         </p>
                     </div>
                     <Link href="/manager/home">

app/manager/pacientes/page.tsx

@@ -66,7 +66,8 @@ export default function PacientesPage() {
     // --- FUNÇÕES DE LÓGICA ---
 
     // 1. Função para carregar TODOS os pacientes da API
-  const fetchAllPacientes = useCallback(async () => {
+    const fetchAllPacientes = useCallback(
+        async () => {
             setLoading(true);
             setError(null);
             try {
@@ -80,8 +81,8 @@ export default function PacientesPage() {
                     cidade: p.city ?? "—",
                     estado: p.state ?? "—",
                     // Formate as datas se necessário, aqui usamos como string
-        ultimoAtendimento: p.last_visit_at?.split("T")[0] ?? "—",
+                    ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
-        proximoAtendimento: p.next_appointment_at?.split("T")[0] ?? "—",
+                    proximoAtendimento: p.next_appointment_at ? p.next_appointment_at.split('T')[0].split('-').reverse().join('-') : "—",
                     vip: Boolean(p.vip ?? false),
                     convenio: p.convenio ?? "Particular", // Define um valor padrão
                     status: p.status ?? undefined,
@@ -106,7 +107,8 @@ export default function PacientesPage() {
 
             // Filtro por Convênio
             const matchesConvenio =
-        convenioFilter === "all" || patient.convenio === convenioFilter;
+                convenioFilter === "all" ||
+                patient.convenio === convenioFilter;
 
             // Filtro por VIP
             const matchesVip =
@@ -213,13 +215,9 @@ export default function PacientesPage() {
 
                     {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
                     <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
-            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
-              VIP
-            </span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
-              <SelectTrigger className="w-full sm:w-32">
+                            <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
-                {" "}
-                {/* w-full para mobile, w-32 para sm+ */}
                                 <SelectValue placeholder="VIP" />
                             </SelectTrigger>
                             <SelectContent>
@@ -240,106 +238,63 @@ export default function PacientesPage() {
                 {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
                 {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
                 <div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
-          <div className="overflow-x-auto">
+                    <div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */}
-            {" "}
-            {/* Permite rolagem horizontal se a tabela for muito larga */}
                         {error ? (
                             <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
                         ) : loading ? (
                             <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+                                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
-                Carregando pacientes...
                             </div>
                         ) : (
-              <table className="w-full min-w-[650px]">
+                            <table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */}
-                {" "}
-                {/* min-w para evitar que a tabela se contraia demais */}
                                 <thead className="bg-gray-50 border-b border-gray-200">
                                     <tr>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[20%]">
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
-                      Nome
-                    </th>
                                         {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
-                      Telefone
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
-                    </th>
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
-                      Cidade / Estado
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
-                    </th>
+                                        <th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
-                      Convênio
-                    </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
-                      Último atendimento
-                    </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
-                      Próximo atendimento
-                    </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[5%]">
-                      Ações
-                    </th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {currentPatients.length === 0 ? (
                                         <tr>
                                             <td colSpan={7} className="p-8 text-center text-gray-500">
-                        {allPatients.length === 0
+                                                {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
-                          ? "Nenhum paciente cadastrado"
-                          : "Nenhum paciente encontrado com os filtros aplicados"}
                                             </td>
                                         </tr>
                                     ) : (
                                         currentPatients.map((patient) => (
-                      <tr
+                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
-                        key={patient.id}
-                        className="border-b border-gray-100 hover:bg-gray-50"
-                      >
                                                 <td className="p-4">
                                                     <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                                                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                              <span className="text-blue-600 font-medium text-sm">
+                                                            <span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
-                                {patient.nome?.charAt(0) || "?"}
-                              </span>
                                                         </div>
-
                                                         <span className="font-medium text-gray-900">
                                                             {patient.nome}
                                                             {patient.vip && (
-                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
-                                  VIP
-                                </span>
                                                             )}
                                                         </span>
                                                     </div>
                                                 </td>
-                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
-                          {patient.telefone}
-                        </td>
                                                 <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
-                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
-                          {patient.convenio}
+                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
-                        </td>
+                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
-                        <td className="p-4 text-gray-600 hidden lg:table-cell">
-                          {patient.ultimoAtendimento}
-                        </td>
-                        <td className="p-4 text-gray-600 hidden lg:table-cell">
-                          {patient.proximoAtendimento}
-                        </td>
 
                                                 <td className="p-4">
                                                     <DropdownMenu>
                                                         <DropdownMenuTrigger asChild>
-                              <div className="text-blue-600 cursor-pointer">
+                                                            <div className="text-blue-600 cursor-pointer">Ações</div>
-                                Ações
-                              </div>
                                                         </DropdownMenuTrigger>
                                                         <DropdownMenuContent align="end">
-                              <DropdownMenuItem
+                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
-                                onClick={() =>
-                                  openDetailsDialog(String(patient.id))
-                                }
-                              >
                                                                 <Eye className="w-4 h-4 mr-2" />
                                                                 Ver detalhes
                                                             </DropdownMenuItem>
@@ -386,59 +341,38 @@ export default function PacientesPage() {
                         <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
                     ) : loading ? (
                         <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-              <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+                            <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
-              Carregando pacientes...
                         </div>
                     ) : filteredPatients.length === 0 ? (
                         <div className="p-8 text-center text-gray-500">
-              {allPatients.length === 0
+                            {allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
-                ? "Nenhum paciente cadastrado"
-                : "Nenhum paciente encontrado com os filtros aplicados"}
                         </div>
                     ) : (
                         <div className="space-y-4">
                             {currentPatients.map((patient) => (
-                <div
+                                <div key={patient.id} className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200">
-                  key={patient.id}
-                  className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200"
-                >
                                     <div className="flex-grow mb-2 sm:mb-0">
                                         <div className="font-semibold text-lg text-gray-900 flex items-center">
                                             {patient.nome}
                                             {patient.vip && (
-                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
-                          VIP
-                        </span>
                                             )}
                                         </div>
-                    <div className="text-sm text-gray-600">
+                                        <div className="text-sm text-gray-600">Telefone: {patient.telefone}</div>
-                      Telefone: {patient.telefone}
+                                        <div className="text-sm text-gray-600">Convênio: {patient.convenio}</div>
-                    </div>
-                    <div className="text-sm text-gray-600">
-                      Convênio: {patient.convenio}
-                    </div>
                                     </div>
                                     <DropdownMenu>
                                         <DropdownMenuTrigger asChild>
-                      <div className="w-full">
+                                            <div className="w-full"><Button variant="outline" className="w-full">Ações</Button></div>
-                        <Button variant="outline" className="w-full">
-                          Ações
-                        </Button>
-                      </div>
                                         </DropdownMenuTrigger>
                                         <DropdownMenuContent align="end">
-                      <DropdownMenuItem
+                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
-                        onClick={() => openDetailsDialog(String(patient.id))}
-                      >
                                                 <Eye className="w-4 h-4 mr-2" />
                                                 Ver detalhes
                                             </DropdownMenuItem>
 
                                             <DropdownMenuItem asChild>
-                        <Link
+                                                <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
-                          href={`/secretary/pacientes/${patient.id}/editar`}
-                          className="flex items-center w-full"
-                        >
                                                     <Edit className="w-4 h-4 mr-2" />
                                                     Editar
                                                 </Link>
@@ -448,10 +382,7 @@ export default function PacientesPage() {
                                                 <Calendar className="w-4 h-4 mr-2" />
                                                 Marcar consulta
                                             </DropdownMenuItem>
-                      <DropdownMenuItem
+                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
-                        className="text-red-600"
-                        onClick={() => openDeleteDialog(String(patient.id))}
-                      >
                                                 <Trash2 className="w-4 h-4 mr-2" />
                                                 Excluir
                                             </DropdownMenuItem>
@@ -466,9 +397,7 @@ export default function PacientesPage() {
                 {/* Paginação */}
                 {totalPages > 1 && !loading && (
                     <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
-            <div className="flex space-x-2 flex-wrap justify-center">
+                        <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
-              {" "}
-              {/* Adicionado flex-wrap e justify-center para botões da paginação */}
                             <Button
                                 onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                                 disabled={page === 1}
@@ -477,6 +406,7 @@ export default function PacientesPage() {
                             >
                                 &lt; Anterior
                             </Button>
+
                             {Array.from({ length: totalPages }, (_, index) => index + 1)
                                 .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
                                 .map((pageNumber) => (
@@ -485,19 +415,14 @@ export default function PacientesPage() {
                                         onClick={() => setPage(pageNumber)}
                                         variant={pageNumber === page ? "default" : "outline"}
                                         size="lg"
-                    className={
+                                        className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"}
-                      pageNumber === page
-                        ? "bg-blue-600 hover:bg-blue-700 text-white"
-                        : "text-gray-700"
-                    }
                                     >
                                         {pageNumber}
                                     </Button>
                                 ))}
+
                             <Button
-                onClick={() =>
+                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
-                  setPage((prev) => Math.min(totalPages, prev + 1))
-                }
                                 disabled={page === totalPages}
                                 variant="outline"
                                 size="lg"
@@ -513,29 +438,18 @@ export default function PacientesPage() {
                     <AlertDialogContent>
                         <AlertDialogHeader>
                             <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-              <AlertDialogDescription>
+                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
-                Tem certeza que deseja excluir este paciente? Esta ação não pode
-                ser desfeita.
-              </AlertDialogDescription>
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel>Cancelar</AlertDialogCancel>
-              <AlertDialogAction
+                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
-                onClick={() =>
-                  patientToDelete && handleDeletePatient(patientToDelete)
-                }
-                className="bg-red-600 hover:bg-red-700"
-              >
                                 Excluir
                             </AlertDialogAction>
                         </AlertDialogFooter>
                     </AlertDialogContent>
                 </AlertDialog>
 
-        <AlertDialog
+                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-          open={detailsDialogOpen}
-          onOpenChange={setDetailsDialogOpen}
-        >
                     <AlertDialogContent>
                         <AlertDialogHeader>
                             <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>