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