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

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

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