RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adição de paginação, ajuste de cor

Browse Source
This commit is contained in:
GagoDuBroca 2025-11-27 16:12:15 -03:00
parent 634542dff7
commit 569d912981
3 changed files with 341 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/doctor/disponibilidade/page.tsx
View File

@ -551,7 +551,7 @@ export default function AvailabilityPage() {
<Link href="/doctor/dashboard" className="w-full sm:w-auto"> <Link href="/doctor/dashboard" className="w-full sm:w-auto">
<Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button>
</Link> </Link>
<Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto"> <Button type="submit" className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto">
Salvar Disponibilidade Salvar Disponibilidade
</Button> </Button>
</div> </div>

724
app/manager/pacientes/page.tsx
View File

@ -10,9 +10,6 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
import { patientsService } from "@/services/patientsApi.mjs"; import { patientsService } from "@/services/patientsApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
// Defina o tamanho da página.
const PAGE_SIZE = 5;
export default function PacientesPage() { export default function PacientesPage() {
// --- ESTADOS DE DADOS E GERAL --- // --- ESTADOS DE DADOS E GERAL ---
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
@ -29,11 +26,15 @@ export default function PacientesPage() {
// --- ESTADOS DE PAGINAÇÃO --- // --- ESTADOS DE PAGINAÇÃO ---
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// PADRONIZAÇÃO: Iniciar com 10 itens por página
const [pageSize, setPageSize] = useState(10);
// CÁLCULO DA PAGINAÇÃO // CÁLCULO DA PAGINAÇÃO
const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE); const totalPages = Math.ceil(filteredPatients.length / pageSize);
const startIndex = (page - 1) * PAGE_SIZE; const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + PAGE_SIZE; const endIndex = startIndex + pageSize;
// Pacientes a serem exibidos na tabela (aplicando a paginação) // Pacientes a serem exibidos na tabela (aplicando a paginação)
const currentPatients = filteredPatients.slice(startIndex, endIndex); const currentPatients = filteredPatients.slice(startIndex, endIndex);
@ -51,7 +52,6 @@ export default function PacientesPage() {
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
// Como o backend retorna um array, chamamos sem paginação
const res = await patientsService.list(); const res = await patientsService.list();
const mapped = res.map((p: any) => ({ const mapped = res.map((p: any) => ({
@ -60,37 +60,33 @@ export default function PacientesPage() {
telefone: p.phone_mobile ?? p.phone1 ?? "—", telefone: p.phone_mobile ?? p.phone1 ?? "—",
cidade: p.city ?? "—", cidade: p.city ?? "—",
estado: p.state ?? "—", estado: p.state ?? "—",
// Formate as datas se necessário, aqui usamos como string
ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—", ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—", proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
vip: Boolean(p.vip ?? false), vip: Boolean(p.vip ?? false),
convenio: p.convenio ?? "Particular", // Define um valor padrão convenio: p.convenio ?? "Particular",
status: p.status ?? undefined, status: p.status ?? undefined,
})); }));
setAllPatients(mapped); setAllPatients(mapped);
} catch (e: any) { } catch (e: any) {
console.error(e); console.error(e);
setError(e?.message || "Erro ao buscar pacientes"); setError(e?.message || "Erro ao buscar pacientes");
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, []);
// 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam) // 2. Efeito para aplicar filtros
useEffect(() => { useEffect(() => {
const filtered = allPatients.filter((patient) => { const filtered = allPatients.filter((patient) => {
// Filtro por termo de busca (Nome ou Telefone)
const matchesSearch = const matchesSearch =
patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
patient.telefone?.includes(searchTerm); patient.telefone?.includes(searchTerm);
// Filtro por Convênio
const matchesConvenio = const matchesConvenio =
convenioFilter === "all" || convenioFilter === "all" ||
patient.convenio === convenioFilter; patient.convenio === convenioFilter;
// Filtro por VIP
const matchesVip = const matchesVip =
vipFilter === "all" || vipFilter === "all" ||
(vipFilter === "vip" && patient.vip) || (vipFilter === "vip" && patient.vip) ||
@ -100,104 +96,97 @@ export default function PacientesPage() {
}); });
setFilteredPatients(filtered); setFilteredPatients(filtered);
// Garante que a página atual seja válida após a filtragem setPage(1); // Reseta a página ao filtrar
setPage(1);
}, [allPatients, searchTerm, convenioFilter, vipFilter]); }, [allPatients, searchTerm, convenioFilter, vipFilter]);
// 3. Efeito inicial para buscar os pacientes // 3. Efeito inicial
useEffect(() => { useEffect(() => {
fetchAllPacientes(); fetchAllPacientes();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
// --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) --- // --- LÓGICA DE AÇÕES ---
const openDetailsDialog = async (patientId: string) => { const openDetailsDialog = async (patientId: string) => {
setDetailsDialogOpen(true); setDetailsDialogOpen(true);
setPatientDetails(null); setPatientDetails(null);
try { try {
const res = await patientsService.getById(patientId); const res = await patientsService.getById(patientId);
setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item setPatientDetails(Array.isArray(res) ? res[0] : res);
} catch (e: any) { } catch (e: any) {
setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" }); setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
} }
}; };
const handleDeletePatient = async (patientId: string) => { const handleDeletePatient = async (patientId: string) => {
try { try {
await patientsService.delete(patientId); await patientsService.delete(patientId);
// Atualiza a lista completa para refletir a exclusão setAllPatients((prev) =>
setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId))
prev.filter((p) => String(p.id) !== String(patientId)) );
); } catch (e: any) {
} catch (e: any) { alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`); }
} setDeleteDialogOpen(false);
setDeleteDialogOpen(false); setPatientToDelete(null);
setPatientToDelete(null); };
};
const openDeleteDialog = (patientId: string) => { const openDeleteDialog = (patientId: string) => {
setPatientToDelete(patientId); setPatientToDelete(patientId);
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
}; };
return ( return (
<Sidebar> <Sidebar>
<div className="space-y-6 px-2 sm:px-4 md:px-8"> <div className="space-y-6 px-2 sm:px-4 md:px-8">
{/* Header (Responsividade OK) */} {/* Header */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div> <div>
<h1 className="text-xl md:text-2xl font-bold text-foreground"> <h1 className="text-xl md:text-2xl font-bold text-foreground">
Pacientes Pacientes
</h1> </h1>
<p className="text-muted-foreground text-sm md:text-base"> <p className="text-muted-foreground text-sm md:text-base">
Gerencie as informações de seus pacientes Gerencie as informações de seus pacientes
</p> </p>
</div> </div>
</div> </div>
{/* Bloco de Filtros (Responsividade APLICADA) */} {/* Filtros */}
{/* Adicionado flex-wrap para permitir que os itens quebrem para a linha de baixo */}
<div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border"> <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border">
<Filter className="w-5 h-5 text-gray-400" /> <Filter className="w-5 h-5 text-gray-400" />
{/* Busca - Ocupa 100% no mobile, depois cresce */} {/* Busca */}
<input <input
type="text" type="text"
placeholder="Buscar por nome ou telefone..." placeholder="Buscar por nome ou telefone..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
// w-full no mobile, depois flex-grow para ocupar o espaço disponível
className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm" className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm"
/> />
{/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* Convênio */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block"> <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
Convênio Convênio
</span> </span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-full sm:w-40"> <SelectTrigger className="w-full sm:w-40">
{" "} <SelectValue placeholder="Convênio" />
{/* w-full para mobile, w-40 para sm+ */} </SelectTrigger>
<SelectValue placeholder="Convênio" /> <SelectContent>
</SelectTrigger> <SelectItem value="all">Todos</SelectItem>
<SelectContent> <SelectItem value="Particular">Particular</SelectItem>
<SelectItem value="all">Todos</SelectItem> <SelectItem value="SUS">SUS</SelectItem>
<SelectItem value="Particular">Particular</SelectItem> <SelectItem value="Unimed">Unimed</SelectItem>
<SelectItem value="SUS">SUS</SelectItem> </SelectContent>
<SelectItem value="Unimed">Unimed</SelectItem> </Select>
{/* Adicione outros convênios conforme necessário */} </div>
</SelectContent>
</Select>
</div>
{/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* VIP */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span> <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}> <Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */} <SelectTrigger className="w-full sm:w-32">
<SelectValue placeholder="VIP" /> <SelectValue placeholder="VIP" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -207,308 +196,273 @@ export default function PacientesPage() {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{/* Seletor de Itens por Página (Inicia com 10) */}
<div className="flex items-center gap-2 w-full sm:w-auto ml-auto sm:ml-0">
<Select
value={String(pageSize)}
onValueChange={(value) => {
setPageSize(Number(value));
setPage(1); // Resetar para página 1 ao mudar o tamanho
}}
>
<SelectTrigger className="w-full sm:w-[70px]">
<SelectValue placeholder="10" />
</SelectTrigger>
<SelectContent>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="20">20</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
{/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */} {/* Tabela */}
{/* 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="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block"> <div className="overflow-x-auto">
<div className="overflow-x-auto"> {error ? (
{" "} <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
{/* Permite rolagem horizontal se a tabela for muito larga */} ) : loading ? (
{error ? ( <div className="p-6 text-center text-gray-500 flex items-center justify-center">
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
) : loading ? ( Carregando pacientes...
<div className="p-6 text-center text-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
Carregando pacientes...
</div>
) : (
<table className="w-full min-w-[650px]">
{" "}
{/* min-w para evitar que a tabela se contraia demais */}
<thead className="bg-gray-50 border-b border-gray-200">
<tr>
<th className="text-left p-4 font-medium text-gray-700 w-[20%]">
Nome
</th>
{/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
Telefone
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
Cidade / Estado
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
Convênio
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
Último atendimento
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
Próximo atendimento
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">
Ações
</th>
</tr>
</thead>
<tbody>
{currentPatients.length === 0 ? (
<tr>
<td colSpan={7} className="p-8 text-center text-gray-500">
{allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</td>
</tr>
) : (
currentPatients.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-blue-100 rounded-full flex items-center justify-center">
<span className="text-blue-600 font-medium text-sm">
{patient.nome?.charAt(0) || "?"}
</span>
</div> </div>
<span className="font-medium text-gray-900"> ) : (
{patient.nome} <table className="w-full min-w-[650px]">
{patient.vip && ( <thead className="bg-gray-50 border-b border-gray-200">
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <tr>
VIP <th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
</span> <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
)} <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
</span> <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
</div> <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
</td> <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
<td className="p-4 text-gray-600 hidden sm:table-cell"> <th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
{patient.telefone} </tr>
</td> </thead>
<td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td> <tbody>
<td className="p-4 text-gray-600 hidden sm:table-cell"> {currentPatients.length === 0 ? (
{patient.convenio} <tr>
</td> <td colSpan={7} className="p-8 text-center text-gray-500">
<td className="p-4 text-gray-600 hidden lg:table-cell"> {allPatients.length === 0
{patient.ultimoAtendimento} ? "Nenhum paciente cadastrado"
</td> : "Nenhum paciente encontrado com os filtros aplicados"}
<td className="p-4 text-gray-600 hidden lg:table-cell"> </td>
{patient.proximoAtendimento} </tr>
</td> ) : (
currentPatients.map((patient) => (
<td className="p-4"> <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
<DropdownMenu> <td className="p-4">
<DropdownMenuTrigger asChild> <div className="flex items-center gap-3">
<div className="text-black-600 cursor-pointer"> <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<MoreVertical className="h-4 w-4" /> <span className="text-blue-600 font-medium text-sm">
</div> {patient.nome?.charAt(0) || "?"}
</DropdownMenuTrigger> </span>
<DropdownMenuContent align="end"> </div>
<DropdownMenuItem <span className="font-medium text-gray-900">
onClick={() => {patient.nome}
openDetailsDialog(String(patient.id)) {patient.vip && (
} <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
> VIP
<Eye className="w-4 h-4 mr-2" /> </span>
Ver detalhes )}
</DropdownMenuItem> </span>
<DropdownMenuItem asChild> </div>
<Link </td>
href={`/secretary/pacientes/${patient.id}/editar`} <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
className="flex items-center w-full" <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
> <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
<Edit className="w-4 h-4 mr-2" /> <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
Editar <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
</Link> <td className="p-4">
</DropdownMenuItem> <DropdownMenu>
<DropdownMenuTrigger asChild>
<DropdownMenuItem> <div className="text-black-600 cursor-pointer">
<Calendar className="w-4 h-4 mr-2" /> <MoreVertical className="h-4 w-4" />
Marcar consulta </div>
</DropdownMenuItem> </DropdownMenuTrigger>
<DropdownMenuItem <DropdownMenuContent align="end">
className="text-red-600" <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
onClick={() => <Eye className="w-4 h-4 mr-2" />
openDeleteDialog(String(patient.id)) Ver detalhes
} </DropdownMenuItem>
> <DropdownMenuItem asChild>
<Trash2 className="w-4 h-4 mr-2" /> <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
Excluir <Edit className="w-4 h-4 mr-2" />
</DropdownMenuItem> Editar
</DropdownMenuContent> </Link>
</DropdownMenu> </DropdownMenuItem>
</td> <DropdownMenuItem>
</tr> <Calendar className="w-4 h-4 mr-2" />
)) Marcar consulta
)} </DropdownMenuItem>
</tbody> <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
</table> <Trash2 className="w-4 h-4 mr-2" />
)} Excluir
</div> </DropdownMenuItem>
</div> </DropdownMenuContent>
</DropdownMenu>
{/* Paginação */} </td>
{totalPages > 1 && !loading && ( </tr>
<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"> )}
{" "} </tbody>
{/* Adicionado flex-wrap e justify-center para botões da paginação */} </table>
<Button )}
onClick={() => setPage((prev) => Math.max(1, prev - 1))}
disabled={page === 1}
variant="outline"
size="lg"
>
&lt; Anterior
</Button>
{Array.from({ length: totalPages }, (_, index) => index + 1)
.slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
.map((pageNumber) => (
<Button
key={pageNumber}
onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"}
size="lg"
className={
pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white"
: "text-gray-700"
}
>
{pageNumber}
</Button>
))}
<Button
onClick={() =>
setPage((prev) => Math.min(totalPages, prev + 1))
}
disabled={page === totalPages}
variant="outline"
size="lg"
>
Próximo &gt;
</Button>
</div>
</div>
)}
{/* AlertDialogs (Permanecem os mesmos) */}
<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>
<AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
<AlertDialogDescription>
{patientDetails === null ? (
<div className="text-gray-500">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
Carregando...
</div>
) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div>
) : (
<div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Nome Completo</p>
<p>{patientDetails.full_name}</p>
</div>
<div>
<p className="font-semibold">Email</p>
<p>{patientDetails.email}</p>
</div>
<div>
<p className="font-semibold">Telefone</p>
<p>{patientDetails.phone_mobile}</p>
</div>
<div>
<p className="font-semibold">Data de Nascimento</p>
<p>{patientDetails.birth_date}</p>
</div>
<div>
<p className="font-semibold">CPF</p>
<p>{patientDetails.cpf}</p>
</div>
<div>
<p className="font-semibold">Tipo Sanguíneo</p>
<p>{patientDetails.blood_type}</p>
</div>
<div>
<p className="font-semibold">Peso (kg)</p>
<p>{patientDetails.weight_kg}</p>
</div>
<div>
<p className="font-semibold">Altura (m)</p>
<p>{patientDetails.height_m}</p>
</div>
</div> </div>
<div className="border-t pt-4 mt-4"> </div>
<h3 className="font-semibold mb-2">Endereço</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> {/* Paginação */}
<div> {totalPages > 1 && !loading && (
<p className="font-semibold">Rua</p> <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
<p>{`${patientDetails.street}, ${patientDetails.number}`}</p> <div className="flex space-x-2 flex-wrap justify-center">
<Button
onClick={() => setPage((prev) => Math.max(1, prev - 1))}
disabled={page === 1}
variant="outline"
size="lg"
>
&lt; Anterior
</Button>
{Array.from({ length: totalPages }, (_, index) => index + 1)
.slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
.map((pageNumber) => (
<Button
key={pageNumber}
onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"}
size="lg"
className={
pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white"
: "text-gray-700"
}
>
{pageNumber}
</Button>
))}
<Button
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
disabled={page === totalPages}
variant="outline"
size="lg"
>
Próximo &gt;
</Button>
</div> </div>
<div>
<p className="font-semibold">Complemento</p>
<p>{patientDetails.complement}</p>
</div>
<div>
<p className="font-semibold">Bairro</p>
<p>{patientDetails.neighborhood}</p>
</div>
<div>
<p className="font-semibold">Cidade</p>
<p>{patientDetails.cidade}</p>
</div>
<div>
<p className="font-semibold">Estado</p>
<p>{patientDetails.estado}</p>
</div>
<div>
<p className="font-semibold">CEP</p>
<p>{patientDetails.cep}</p>
</div>
</div>
</div> </div>
</div>
)} )}
</AlertDialogDescription>
</AlertDialogHeader> {/* Dialog de Exclusão */}
<AlertDialogFooter> <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogCancel>Fechar</AlertDialogCancel> <AlertDialogContent>
</AlertDialogFooter> <AlertDialogHeader>
</AlertDialogContent> <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
</AlertDialog> <AlertDialogDescription>
</div> Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.
</Sidebar> </AlertDialogDescription>
); </AlertDialogHeader>
} <AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction
onClick={() => patientToDelete && handleDeletePatient(patientToDelete)}
className="bg-red-600 hover:bg-red-700"
>
Excluir
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Dialog de Detalhes */}
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
<AlertDialogDescription>
{patientDetails === null ? (
<div className="text-gray-500">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
Carregando...
</div>
) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div>
) : (
<div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Nome Completo</p>
<p>{patientDetails.full_name}</p>
</div>
<div>
<p className="font-semibold">Email</p>
<p>{patientDetails.email}</p>
</div>
<div>
<p className="font-semibold">Telefone</p>
<p>{patientDetails.phone_mobile}</p>
</div>
<div>
<p className="font-semibold">Data de Nascimento</p>
<p>{patientDetails.birth_date}</p>
</div>
<div>
<p className="font-semibold">CPF</p>
<p>{patientDetails.cpf}</p>
</div>
<div>
<p className="font-semibold">Tipo Sanguíneo</p>
<p>{patientDetails.blood_type}</p>
</div>
<div>
<p className="font-semibold">Peso (kg)</p>
<p>{patientDetails.weight_kg}</p>
</div>
<div>
<p className="font-semibold">Altura (m)</p>
<p>{patientDetails.height_m}</p>
</div>
</div>
<div className="border-t pt-4 mt-4">
<h3 className="font-semibold mb-2">Endereço</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Rua</p>
<p>{`${patientDetails.street}, ${patientDetails.number}`}</p>
</div>
<div>
<p className="font-semibold">Complemento</p>
<p>{patientDetails.complement}</p>
</div>
<div>
<p className="font-semibold">Bairro</p>
<p>{patientDetails.neighborhood}</p>
</div>
<div>
<p className="font-semibold">Cidade</p>
<p>{patientDetails.cidade}</p>
</div>
<div>
<p className="font-semibold">Estado</p>
<p>{patientDetails.estado}</p>
</div>
<div>
<p className="font-semibold">CEP</p>
<p>{patientDetails.cep}</p>
</div>
</div>
</div>
</div>
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Fechar</AlertDialogCancel>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</Sidebar>
);
}

2
app/patient/dashboard/page.tsx
View File

@ -80,7 +80,7 @@ export default function PatientDashboard() {
<Link href="/patient/appointments"> <Link href="/patient/appointments">
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start bg-transparent" className="w-full justify-start bg-transparent bg-blue-600 hover:bg-blue-700 text-white"
> >
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
Ver Minhas Consultas Ver Minhas Consultas