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

Merge pull request #2 from m1guelmcf/ajuste-fitro-paciente

Browse Source 
ajuste do filtro de paciente
This commit is contained in:
DaniloSts 2025-11-04 14:29:51 -03:00 committed by GitHub
commit af99fe6e74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 439 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
app/secretary/pacientes/page.tsx
View File

@ -3,10 +3,30 @@
import { useState, useEffect, useRef, useCallback } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import {
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; DropdownMenu,
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 { 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 SecretaryLayout from "@/components/secretary-layout";
import { patientsService } from "@/services/patientsApi.mjs"; import { patientsService } from "@/services/patientsApi.mjs";
@ -58,7 +78,9 @@ export default function PacientesPage() {
setPatients((prev) => { setPatients((prev) => {
const all = [...prev, ...mapped]; const all = [...prev, ...mapped];
const unique = Array.from(new Map(all.map((p) => [p.id, p])).values()); const unique = Array.from(
new Map(all.map((p) => [p.id, p])).values()
);
return unique; return unique;
}); });
@ -100,7 +122,9 @@ export default function PacientesPage() {
alert(`${res.error} ${res.message}`); alert(`${res.error} ${res.message}`);
} }
setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId))); setPatients((prev) =>
prev.filter((p) => String(p.id) !== String(patientId))
);
} catch (e: any) { } catch (e: any) {
setError(e?.message || "Erro ao deletar paciente"); setError(e?.message || "Erro ao deletar paciente");
} }
@ -114,9 +138,15 @@ export default function PacientesPage() {
}; };
const filteredPatients = patients.filter((patient) => { const filteredPatients = patients.filter((patient) => {
const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm); const matchesSearch =
const matchesConvenio = convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter; patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip); 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; return matchesSearch && matchesConvenio && matchesVip;
}); });
@ -126,8 +156,12 @@ export default function PacientesPage() {
<div className="space-y-6"> <div className="space-y-6">
<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">Pacientes</h1> <h1 className="text-xl md:text-2xl font-bold text-foreground">
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p> Pacientes
</h1>
<p className="text-muted-foreground text-sm md:text-base">
Gerencie as informações de seus pacientes
</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Link href="/secretary/pacientes/novo"> <Link href="/secretary/pacientes/novo">
@ -142,7 +176,9 @@ export default function PacientesPage() {
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border"> <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
{/* Convênio */} {/* Convênio */}
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-foreground">Convênio</span> <span className="text-sm font-medium text-foreground">
Convênio
</span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-full md:w-40"> <SelectTrigger className="w-full md:w-40">
<SelectValue placeholder="Selecione o Convênio" /> <SelectValue placeholder="Selecione o Convênio" />
@ -170,7 +206,9 @@ export default function PacientesPage() {
</Select> </Select>
</div> </div>
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-foreground">Aniversariantes</span> <span className="text-sm font-medium text-foreground">
Aniversariantes
</span>
<Select> <Select>
<SelectTrigger className="w-full md:w-32"> <SelectTrigger className="w-full md:w-32">
<SelectValue placeholder="Selecione" /> <SelectValue placeholder="Selecione" />
@ -183,34 +221,6 @@ export default function PacientesPage() {
</Select> </Select>
</div> </div>
<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>
<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>
<Button variant="outline" className="ml-auto w-full md:w-auto"> <Button variant="outline" className="ml-auto w-full md:w-auto">
<Filter className="w-4 h-4 mr-2" /> <Filter className="w-4 h-4 mr-2" />
Filtro avançado Filtro avançado
@ -225,50 +235,85 @@ export default function PacientesPage() {
<table className="w-full min-w-[600px]"> <table className="w-full min-w-[600px]">
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-gray-50 border-b border-gray-200">
<tr> <tr>
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th> Nome
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th> </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">
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th> Telefone
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th> </th>
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</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> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredPatients.length === 0 ? ( {filteredPatients.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="p-8 text-center text-gray-500"> <td colSpan={7} className="p-8 text-center text-gray-500">
{patients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"} {patients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</td> </td>
</tr> </tr>
) : ( ) : (
filteredPatients.map((patient) => ( filteredPatients.map((patient) => (
<tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50"> <tr
key={patient.id}
className="border-b border-gray-100 hover:bg-gray-50"
>
<td className="p-4"> <td className="p-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center"> <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> <span className="text-gray-600 font-medium text-sm">
{patient.nome?.charAt(0) || "?"}
</span>
</div> </div>
<span className="font-medium text-gray-900">{patient.nome}</span> <span className="font-medium text-gray-900">
{patient.nome}
</span>
</div> </div>
</td> </td>
<td className="p-4 text-gray-600">{patient.telefone}</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.cidade}</td>
<td className="p-4 text-gray-600">{patient.estado}</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">
<td className="p-4 text-gray-600">{patient.proximoAtendimento}</td> {patient.ultimoAtendimento}
</td>
<td className="p-4 text-gray-600">
{patient.proximoAtendimento}
</td>
<td className="p-4"> <td className="p-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600">Ações</div> <div className="text-blue-600">Ações</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}> <DropdownMenuItem
onClick={() =>
openDetailsDialog(String(patient.id))
}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
Ver detalhes Ver detalhes
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link href={`/secretary/pacientes/${patient.id}/editar`}> <Link
href={`/secretary/pacientes/${patient.id}/editar`}
>
<Edit className="w-4 h-4 mr-2" /> <Edit className="w-4 h-4 mr-2" />
Editar Editar
</Link> </Link>
@ -277,7 +322,12 @@ export default function PacientesPage() {
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}> <DropdownMenuItem
className="text-red-600"
onClick={() =>
openDeleteDialog(String(patient.id))
}
>
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -291,7 +341,11 @@ export default function PacientesPage() {
</table> </table>
)} )}
<div ref={observerRef} style={{ height: 1 }} /> <div ref={observerRef} style={{ height: 1 }} />
{isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>} {isFetching && (
<div className="p-4 text-center text-gray-500">
Carregando mais pacientes...
</div>
)}
</div> </div>
</div> </div>
@ -299,11 +353,19 @@ export default function PacientesPage() {
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle> <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
<AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription> <AlertDialogDescription>
Tem certeza que deseja excluir este paciente? Esta ação não pode
ser desfeita.
</AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel> <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700"> <AlertDialogAction
onClick={() =>
patientToDelete && handleDeletePatient(patientToDelete)
}
className="bg-red-600 hover:bg-red-700"
>
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
@ -311,7 +373,10 @@ export default function PacientesPage() {
</AlertDialog> </AlertDialog>
{/* Modal de detalhes do paciente */} {/* Modal de detalhes do paciente */}
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
@ -332,16 +397,22 @@ export default function PacientesPage() {
<strong>Email:</strong> {patientDetails.email} <strong>Email:</strong> {patientDetails.email}
</p> </p>
<p> <p>
<strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"} <strong>Telefone:</strong>{" "}
{patientDetails.phone_mobile ??
patientDetails.phone1 ??
patientDetails.phone2 ??
"-"}
</p> </p>
<p> <p>
<strong>Nome social:</strong> {patientDetails.social_name ?? "-"} <strong>Nome social:</strong>{" "}
{patientDetails.social_name ?? "-"}
</p> </p>
<p> <p>
<strong>Sexo:</strong> {patientDetails.sex ?? "-"} <strong>Sexo:</strong> {patientDetails.sex ?? "-"}
</p> </p>
<p> <p>
<strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"} <strong>Tipo sanguíneo:</strong>{" "}
{patientDetails.blood_type ?? "-"}
</p> </p>
<p> <p>
<strong>Peso:</strong> {patientDetails.weight_kg ?? "-"} <strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
@ -358,7 +429,8 @@ export default function PacientesPage() {
<strong>Endereço:</strong> {patientDetails.street ?? "-"} <strong>Endereço:</strong> {patientDetails.street ?? "-"}
</p> </p>
<p> <p>
<strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"} <strong>Bairro:</strong>{" "}
{patientDetails.neighborhood ?? "-"}
</p> </p>
<p> <p>
<strong>Cidade:</strong> {patientDetails.city ?? "-"} <strong>Cidade:</strong> {patientDetails.city ?? "-"}
@ -370,10 +442,12 @@ export default function PacientesPage() {
<strong>CEP:</strong> {patientDetails.cep ?? "-"} <strong>CEP:</strong> {patientDetails.cep ?? "-"}
</p> </p>
<p> <p>
<strong>Criado em:</strong> {patientDetails.created_at ?? "-"} <strong>Criado em:</strong>{" "}
{patientDetails.created_at ?? "-"}
</p> </p>
<p> <p>
<strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"} <strong>Atualizado em:</strong>{" "}
{patientDetails.updated_at ?? "-"}
</p> </p>
<p> <p>
<strong>Id:</strong> {patientDetails.id ?? "-"} <strong>Id:</strong> {patientDetails.id ?? "-"}