Ajuste de responsivade Tabela de pacientes
This commit is contained in:
parent
adcf76b6ff
commit
113504d6cc
@ -31,34 +31,35 @@ export default function EditarPacientePage() {
|
||||
const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
|
||||
const anexoInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
// Tipagem completa do formulário
|
||||
type FormData = {
|
||||
nome: string; // full_name
|
||||
nome: string;
|
||||
cpf: string;
|
||||
dataNascimento: string; // birth_date
|
||||
sexo: string; // sex
|
||||
dataNascimento: string;
|
||||
sexo: string;
|
||||
id?: string;
|
||||
nomeSocial?: string; // social_name
|
||||
nomeSocial?: string;
|
||||
rg?: string;
|
||||
documentType?: string; // document_type
|
||||
documentNumber?: string; // document_number
|
||||
documentType?: string;
|
||||
documentNumber?: string;
|
||||
ethnicity?: string;
|
||||
race?: string;
|
||||
naturality?: string;
|
||||
nationality?: string;
|
||||
profession?: string;
|
||||
maritalStatus?: string; // marital_status
|
||||
motherName?: string; // mother_name
|
||||
motherProfession?: string; // mother_profession
|
||||
fatherName?: string; // father_name
|
||||
fatherProfession?: string; // father_profession
|
||||
guardianName?: string; // guardian_name
|
||||
guardianCpf?: string; // guardian_cpf
|
||||
spouseName?: string; // spouse_name
|
||||
rnInInsurance?: boolean; // rn_in_insurance
|
||||
legacyCode?: string; // legacy_code
|
||||
maritalStatus?: string;
|
||||
motherName?: string;
|
||||
motherProfession?: string;
|
||||
fatherName?: string;
|
||||
fatherProfession?: string;
|
||||
guardianName?: string;
|
||||
guardianCpf?: string;
|
||||
spouseName?: string;
|
||||
rnInInsurance?: boolean;
|
||||
legacyCode?: string;
|
||||
notes?: string;
|
||||
email?: string;
|
||||
phoneMobile?: string; // phone_mobile
|
||||
phoneMobile?: string;
|
||||
phone1?: string;
|
||||
phone2?: string;
|
||||
cep?: string;
|
||||
@ -82,7 +83,6 @@ export default function EditarPacientePage() {
|
||||
bloodType?: string;
|
||||
};
|
||||
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
nome: "",
|
||||
cpf: "",
|
||||
@ -141,7 +141,6 @@ export default function EditarPacientePage() {
|
||||
async function fetchPatient() {
|
||||
try {
|
||||
const res = await patientsService.getById(patientId);
|
||||
// Map API snake_case/nested to local camelCase form
|
||||
setFormData({
|
||||
id: res[0]?.id ?? "",
|
||||
nome: res[0]?.full_name ?? "",
|
||||
@ -206,7 +205,6 @@ export default function EditarPacientePage() {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Build API payload (snake_case)
|
||||
const payload = {
|
||||
full_name: formData.nome || null,
|
||||
cpf: formData.cpf || null,
|
||||
@ -247,25 +245,28 @@ export default function EditarPacientePage() {
|
||||
|
||||
return (
|
||||
<Sidebar>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Editar Paciente</h1>
|
||||
<p className="text-muted-foreground">Atualize as informações do paciente</p>
|
||||
<div className="space-y-6 px-2 sm:px-4 pb-20">
|
||||
{/* --- HEADER RESPONSIVO --- */}
|
||||
<div className="flex flex-col xl:flex-row gap-6 xl:items-start xl:justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button variant="ghost" size="sm" className="-ml-2">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-foreground">Editar Paciente</h1>
|
||||
<p className="text-sm text-muted-foreground">Atualize as informações do paciente</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Anexos Section */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Anexos</h2>
|
||||
<div className="w-full xl:w-auto xl:min-w-[400px] bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Anexos</h2>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<input ref={anexoInputRef} type="file" className="hidden" />
|
||||
<Button type="button" variant="outline" disabled={isUploadingAnexo}>
|
||||
<Button type="button" variant="outline" size="sm" disabled={isUploadingAnexo} className="w-full sm:w-auto">
|
||||
<Paperclip className="w-4 h-4 mr-2" /> {isUploadingAnexo ? "Enviando..." : "Adicionar anexo"}
|
||||
</Button>
|
||||
</div>
|
||||
@ -279,7 +280,7 @@ export default function EditarPacientePage() {
|
||||
<Paperclip className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm text-foreground truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
|
||||
</div>
|
||||
<Button type="button" variant="ghost" className="text-destructive">
|
||||
<Button type="button" variant="ghost" size="sm" className="text-destructive">
|
||||
<Trash2 className="w-4 h-4 mr-1" /> Remover
|
||||
</Button>
|
||||
</li>
|
||||
@ -289,36 +290,38 @@ export default function EditarPacientePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Dados Pessoais</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6 sm:space-y-8">
|
||||
{/* --- DADOS PESSOAIS --- */}
|
||||
<div className="bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Dados Pessoais</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Photo upload */}
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
{/* Photo upload Responsivo */}
|
||||
<div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-3">
|
||||
<Label>Foto do paciente</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center shrink-0 border">
|
||||
{photoUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span className="text-muted-foreground text-sm">Sem foto</span>
|
||||
<span className="text-muted-foreground text-xs text-center px-2">Sem foto</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-2 w-full">
|
||||
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
|
||||
<Button type="button" variant="outline" disabled={isUploadingPhoto}>
|
||||
<Button type="button" variant="outline" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
|
||||
{isUploadingPhoto ? "Enviando..." : "Enviar foto"}
|
||||
</Button>
|
||||
{photoUrl && (
|
||||
<Button type="button" variant="ghost" disabled={isUploadingPhoto}>
|
||||
<Button type="button" variant="ghost" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
|
||||
Remover
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nome">Nome *</Label>
|
||||
<Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
|
||||
@ -336,7 +339,7 @@ export default function EditarPacientePage() {
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Sexo *</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex flex-wrap gap-4 pt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
|
||||
<Label htmlFor="Masculino">Masculino</Label>
|
||||
@ -353,12 +356,11 @@ export default function EditarPacientePage() {
|
||||
<Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
|
||||
</div>
|
||||
|
||||
{/* Demais campos de select e input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="etnia">Etnia</Label>
|
||||
<Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
@ -372,9 +374,7 @@ export default function EditarPacientePage() {
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="raca">Raça</Label>
|
||||
<Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="caucasiana">Caucasiana</SelectItem>
|
||||
<SelectItem value="negroide">Negroide</SelectItem>
|
||||
@ -391,9 +391,7 @@ export default function EditarPacientePage() {
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nacionalidade">Nacionalidade</Label>
|
||||
<Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="brasileira">Brasileira</SelectItem>
|
||||
<SelectItem value="estrangeira">Estrangeira</SelectItem>
|
||||
@ -409,9 +407,7 @@ export default function EditarPacientePage() {
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estadoCivil">Estado civil</Label>
|
||||
<Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solteiro">Solteiro(a)</SelectItem>
|
||||
<SelectItem value="casado">Casado(a)</SelectItem>
|
||||
@ -470,26 +466,22 @@ export default function EditarPacientePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Section */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Contato</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* --- CONTATO --- */}
|
||||
<div className="bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Contato</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail *</Label>
|
||||
<Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="celular">Celular *</Label>
|
||||
<Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone1">Telefone 1</Label>
|
||||
<Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone2">Telefone 2</Label>
|
||||
<Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
|
||||
@ -497,47 +489,38 @@ export default function EditarPacientePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Section */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Endereço</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* --- ENDEREÇO --- */}
|
||||
<div className="bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Endereço</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cep">CEP</Label>
|
||||
<Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2 md:col-span-2 lg:col-span-2">
|
||||
<Label htmlFor="endereco">Endereço</Label>
|
||||
<Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numero">Número</Label>
|
||||
<Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="complemento">Complemento</Label>
|
||||
<Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bairro">Bairro</Label>
|
||||
<Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cidade">Cidade</Label>
|
||||
<Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estado">Estado</Label>
|
||||
<Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="AC">Acre</SelectItem>
|
||||
<SelectItem value="AL">Alagoas</SelectItem>
|
||||
@ -572,17 +555,14 @@ export default function EditarPacientePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Medical Information Section */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Informações Médicas</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* --- INFORMAÇÕES MÉDICAS --- */}
|
||||
<div className="bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações Médicas</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
|
||||
<Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A+">A+</SelectItem>
|
||||
<SelectItem value="A-">A-</SelectItem>
|
||||
@ -595,40 +575,33 @@ export default function EditarPacientePage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="peso">Peso (kg)</Label>
|
||||
<Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="altura">Altura (m)</Label>
|
||||
<Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>IMC</Label>
|
||||
<Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="alergias">Alergias</Label>
|
||||
<Textarea id="alergias" onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insurance Information Section */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-6">Informações de convênio</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* --- CONVÊNIO --- */}
|
||||
<div className="bg-card rounded-lg border border-border p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações de convênio</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="convenio">Convênio</Label>
|
||||
<Select onValueChange={(value) => handleInputChange("convenio", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<Select onValueChange={(value) => handleInputChange("convenio", value)}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Particular">Particular</SelectItem>
|
||||
<SelectItem value="SUS">SUS</SelectItem>
|
||||
@ -638,23 +611,19 @@ export default function EditarPacientePage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plano">Plano</Label>
|
||||
<Input id="plano" onChange={(e) => handleInputChange("plano", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numeroMatricula">Nº de matrícula</Label>
|
||||
<Input id="numeroMatricula" onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="validadeCarteira">Validade da Carteira</Label>
|
||||
<Input id="validadeCarteira" type="date" onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
|
||||
@ -663,13 +632,14 @@ export default function EditarPacientePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button type="button" variant="outline">
|
||||
{/* --- BOTÕES DE AÇÃO --- */}
|
||||
<div className="flex flex-col-reverse sm:flex-row justify-end gap-4 pt-4">
|
||||
<Link href="/manager/pacientes" className="w-full sm:w-auto">
|
||||
<Button type="button" variant="outline" className="w-full">
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" className="bg-primary hover:bg-primary/90">
|
||||
<Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Salvar Alterações
|
||||
</Button>
|
||||
|
||||
@ -5,108 +5,104 @@ 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 { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical } from "lucide-react";
|
||||
import { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical, Phone, MapPin, Activity, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
|
||||
export default function PacientesPage() {
|
||||
// --- ESTADOS DE DADOS E GERAL ---
|
||||
// --- ESTADOS ---
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [convenioFilter, setConvenioFilter] = useState("all");
|
||||
const [vipFilter, setVipFilter] = useState("all");
|
||||
|
||||
// Lista completa, carregada da API uma única vez
|
||||
const [allPatients, setAllPatients] = useState<any[]>([]);
|
||||
// Lista após a aplicação dos filtros (base para a paginação)
|
||||
const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// --- ESTADOS DE PAGINAÇÃO ---
|
||||
// --- PAGINAÇÃO ---
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// PADRONIZAÇÃO: Iniciar com 10 itens por página
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
// CÁLCULO DA PAGINAÇÃO
|
||||
const totalPages = Math.ceil(filteredPatients.length / pageSize);
|
||||
const startIndex = (page - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
|
||||
// Pacientes a serem exibidos na tabela (aplicando a paginação)
|
||||
const currentPatients = filteredPatients.slice(startIndex, endIndex);
|
||||
|
||||
// --- ESTADOS DE DIALOGS ---
|
||||
// --- DIALOGS ---
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
|
||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||||
const [patientDetails, setPatientDetails] = useState<any | null>(null);
|
||||
|
||||
// --- FUNÇÕES DE LÓGICA ---
|
||||
// --- LÓGICA DE NÚMEROS DA PAGINAÇÃO (LIMITADO A 3) ---
|
||||
const getPageNumbers = () => {
|
||||
const maxVisible = 3;
|
||||
|
||||
// 1. Função para carregar TODOS os pacientes da API
|
||||
const fetchAllPacientes = useCallback(
|
||||
async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await patientsService.list();
|
||||
if (totalPages <= maxVisible) {
|
||||
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||
}
|
||||
|
||||
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?.split('T')[0] ?? "—",
|
||||
proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
|
||||
vip: Boolean(p.vip ?? false),
|
||||
convenio: p.convenio ?? "Particular",
|
||||
status: p.status ?? undefined,
|
||||
}));
|
||||
let start = Math.max(1, page - 1);
|
||||
let end = Math.min(totalPages, start + maxVisible - 1);
|
||||
|
||||
setAllPatients(mapped);
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
setError(e?.message || "Erro ao buscar pacientes");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
if (end === totalPages) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
}
|
||||
|
||||
// 2. Efeito para aplicar filtros
|
||||
useEffect(() => {
|
||||
const filtered = allPatients.filter((patient) => {
|
||||
const matchesSearch =
|
||||
patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
patient.telefone?.includes(searchTerm);
|
||||
const pages = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
|
||||
const matchesConvenio =
|
||||
convenioFilter === "all" ||
|
||||
patient.convenio === convenioFilter;
|
||||
|
||||
const matchesVip =
|
||||
vipFilter === "all" ||
|
||||
(vipFilter === "vip" && patient.vip) ||
|
||||
(vipFilter === "regular" && !patient.vip);
|
||||
|
||||
return matchesSearch && matchesConvenio && matchesVip;
|
||||
});
|
||||
|
||||
setFilteredPatients(filtered);
|
||||
setPage(1); // Reseta a página ao filtrar
|
||||
}, [allPatients, searchTerm, convenioFilter, vipFilter]);
|
||||
|
||||
// 3. Efeito inicial
|
||||
useEffect(() => {
|
||||
fetchAllPacientes();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// --- FETCH DADOS ---
|
||||
const fetchAllPacientes = useCallback(async () => {
|
||||
setLoading(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?.split('T')[0] ?? "—",
|
||||
proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
|
||||
vip: Boolean(p.vip ?? false),
|
||||
convenio: p.convenio ?? "Particular",
|
||||
status: p.status ?? undefined,
|
||||
}));
|
||||
setAllPatients(mapped);
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
setError(e?.message || "Erro ao buscar pacientes");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// --- LÓGICA DE AÇÕES ---
|
||||
useEffect(() => {
|
||||
const filtered = allPatients.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;
|
||||
});
|
||||
setFilteredPatients(filtered);
|
||||
setPage(1);
|
||||
}, [allPatients, searchTerm, convenioFilter, vipFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllPacientes();
|
||||
}, []);
|
||||
|
||||
// --- AÇÕES ---
|
||||
const openDetailsDialog = async (patientId: string) => {
|
||||
setDetailsDialogOpen(true);
|
||||
setPatientDetails(null);
|
||||
@ -121,9 +117,7 @@ export default function PacientesPage() {
|
||||
const handleDeletePatient = async (patientId: string) => {
|
||||
try {
|
||||
await patientsService.delete(patientId);
|
||||
setAllPatients((prev) =>
|
||||
prev.filter((p) => String(p.id) !== String(patientId))
|
||||
);
|
||||
setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
|
||||
} catch (e: any) {
|
||||
alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
|
||||
}
|
||||
@ -131,335 +125,211 @@ export default function PacientesPage() {
|
||||
setPatientToDelete(null);
|
||||
};
|
||||
|
||||
const openDeleteDialog = (patientId: string) => {
|
||||
setPatientToDelete(patientId);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
const ActionMenu = ({ patientId }: { patientId: string }) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="cursor-pointer p-2 hover:bg-muted rounded-full">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => openDetailsDialog(String(patientId))}>
|
||||
<Eye className="w-4 h-4 mr-2" /> Ver detalhes
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/manager/pacientes/${patientId}/editar`} className="flex items-center w-full">
|
||||
<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-destructive" onClick={() => { setPatientToDelete(patientId); setDeleteDialogOpen(true); }}>
|
||||
<Trash2 className="w-4 h-4 mr-2" /> Excluir
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
return (
|
||||
<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 pb-20">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Pacientes
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">
|
||||
Gerencie as informações de seus pacientes
|
||||
</p>
|
||||
<h1 className="text-xl md:text-2xl font-bold">Pacientes</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtros */}
|
||||
<div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
|
||||
<Filter className="w-5 h-5 text-muted-foreground" />
|
||||
|
||||
{/* Busca */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nome ou telefone..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm"
|
||||
/>
|
||||
|
||||
{/* Convênio */}
|
||||
<input type="text" placeholder="Buscar por nome ou telefone..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm" />
|
||||
<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 whitespace-nowrap hidden md:block">
|
||||
Convênio
|
||||
</span>
|
||||
<span className="text-sm font-medium whitespace-nowrap hidden md:block">Convênio</span>
|
||||
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
|
||||
<SelectTrigger className="w-full sm:w-40">
|
||||
<SelectValue placeholder="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>
|
||||
<SelectTrigger className="w-full sm:w-40"><SelectValue placeholder="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>
|
||||
|
||||
{/* VIP */}
|
||||
<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 whitespace-nowrap hidden md:block">VIP</span>
|
||||
<Select value={vipFilter} onValueChange={setVipFilter}>
|
||||
<SelectTrigger className="w-full sm:w-32">
|
||||
<SelectValue placeholder="VIP" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
<SelectItem value="vip">VIP</SelectItem>
|
||||
<SelectItem value="regular">Regular</SelectItem>
|
||||
</SelectContent>
|
||||
<SelectTrigger className="w-full sm:w-32"><SelectValue placeholder="VIP" /></SelectTrigger>
|
||||
<SelectContent><SelectItem value="all">Todos</SelectItem><SelectItem value="vip">VIP</SelectItem><SelectItem value="regular">Regular</SelectItem></SelectContent>
|
||||
</Select>
|
||||
</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 value={String(pageSize)} onValueChange={(value) => { setPageSize(Number(value)); setPage(1); }}>
|
||||
<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>
|
||||
|
||||
{/* Tabela */}
|
||||
<div className="bg-card rounded-lg border shadow-md hidden md:block">
|
||||
<div className="overflow-x-auto">
|
||||
{error ? (
|
||||
<div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
|
||||
) : loading ? (
|
||||
<div className="p-6 text-center text-muted-foreground flex items-center justify-center">
|
||||
<Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
|
||||
Carregando pacientes...
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full min-w-[650px]">
|
||||
<thead className="bg-muted border-b">
|
||||
<tr>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[20%]">Nome</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Telefone</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">Cidade / Estado</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Convênio</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Último atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Próximo atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[5%]">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentPatients.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="p-8 text-center text-muted-foreground">
|
||||
{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 hover:bg-muted">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary font-medium text-sm">
|
||||
{patient.nome?.charAt(0) || "?"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium">
|
||||
{patient.nome}
|
||||
{patient.vip && (
|
||||
<span className="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full text-purple-400 bg-purple-400/15 dark:text-purple-300 dark:bg-purple-300/15">
|
||||
VIP
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.telefone}</td>
|
||||
<td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
|
||||
<td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.convenio}</td>
|
||||
<td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.ultimoAtendimento}</td>
|
||||
<td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.proximoAtendimento}</td>
|
||||
<td className="p-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="cursor-pointer">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</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`} className="flex items-center w-full">
|
||||
<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-destructive" onClick={() => openDeleteDialog(String(patient.id))}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Loading / Erro / Conteúdo */}
|
||||
{error ? (
|
||||
<div className="p-6 text-destructive bg-card border rounded-lg">{`Erro: ${error}`}</div>
|
||||
) : loading ? (
|
||||
<div className="p-6 text-center text-muted-foreground flex items-center justify-center bg-card border rounded-lg"><Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" /> Carregando...</div>
|
||||
) : (
|
||||
<>
|
||||
{/* LISTA MOBILE */}
|
||||
<div className="grid grid-cols-1 gap-4 md:hidden">
|
||||
{currentPatients.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground bg-card rounded-lg border">Nenhum paciente encontrado.</div>
|
||||
) : (
|
||||
currentPatients.map((patient) => (
|
||||
<div key={patient.id} className="bg-card p-4 rounded-lg border shadow-sm flex flex-col gap-3 relative">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-bold text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
|
||||
<div>
|
||||
<div className="font-semibold flex items-center gap-2">{patient.nome}{patient.vip && <span className="px-1.5 py-0.5 text-[10px] font-bold rounded-full text-purple-600 bg-purple-100 uppercase">VIP</span>}</div>
|
||||
<div className="text-xs text-muted-foreground">{patient.convenio}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ActionMenu patientId={String(patient.id)} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground mt-2 pt-2 border-t">
|
||||
<div className="flex items-center gap-2"><Phone className="w-3 h-3" /> {patient.telefone}</div>
|
||||
<div className="flex items-center gap-2"><MapPin className="w-3 h-3" /> {patient.cidade}</div>
|
||||
<div className="flex items-center gap-2 col-span-2"><Activity className="w-3 h-3" /> Última: {patient.ultimoAtendimento}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Paginação */}
|
||||
{/* TABELA DESKTOP */}
|
||||
<div className="bg-card rounded-lg border shadow-md hidden md:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[650px]">
|
||||
<thead className="bg-muted border-b">
|
||||
<tr>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[20%]">Nome</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Telefone</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">Cidade / Estado</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Convênio</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Último atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Próximo atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-muted-foreground w-[5%]">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentPatients.length === 0 ? (
|
||||
<tr><td colSpan={7} className="p-8 text-center text-muted-foreground">Nenhum paciente encontrado</td></tr>
|
||||
) : (
|
||||
currentPatients.map((patient) => (
|
||||
<tr key={patient.id} className="border-b hover:bg-muted">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
|
||||
<span className="font-medium">{patient.nome}{patient.vip && <span className="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full text-purple-400 bg-purple-400/15">VIP</span>}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.telefone}</td>
|
||||
<td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
|
||||
<td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.convenio}</td>
|
||||
<td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.ultimoAtendimento}</td>
|
||||
<td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.proximoAtendimento}</td>
|
||||
<td className="p-4"><ActionMenu patientId={String(patient.id)} /></td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* --- RODAPÉ DE PAGINAÇÃO --- */}
|
||||
{totalPages > 1 && !loading && (
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-border">
|
||||
<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"
|
||||
>
|
||||
<div className="py-4 px-2 border-t border-border">
|
||||
|
||||
{/* 1. PAGINAÇÃO MOBILE (Simples) */}
|
||||
<div className="flex items-center justify-between md:hidden gap-2">
|
||||
<Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" size="sm" className="min-w-[90px]">
|
||||
<ChevronLeft className="w-4 h-4 mr-1" /> Anterior
|
||||
</Button>
|
||||
<span className="text-sm font-medium text-muted-foreground">{page} de {totalPages}</span>
|
||||
<Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" size="sm" className="min-w-[90px]">
|
||||
Próximo <ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 2. PAGINAÇÃO DESKTOP (Numerada Limitada) */}
|
||||
<div className="hidden md:flex items-center justify-center gap-2">
|
||||
<Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" className="px-4">
|
||||
< 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-primary hover:bg-primary/90 text-primary-foreground"
|
||||
: "text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{pageNumber}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
|
||||
disabled={page === totalPages}
|
||||
variant="outline"
|
||||
size="lg"
|
||||
>
|
||||
|
||||
{getPageNumbers().map((pageNum) => (
|
||||
<Button
|
||||
key={pageNum}
|
||||
onClick={() => setPage(pageNum)}
|
||||
/* CORREÇÃO AQUI: Removemos as classes manuais e usamos apenas o variant */
|
||||
variant={pageNum === page ? "default" : "outline"}
|
||||
className="w-10 h-10 p-0"
|
||||
>
|
||||
{pageNum}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" className="px-4">
|
||||
Próximo >
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialog de Exclusão */}
|
||||
{/* Dialogs */}
|
||||
<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-destructive hover:bg-destructive/90"
|
||||
>
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
<AlertDialogHeader><AlertDialogTitle>Confirmar exclusão</AlertDialogTitle><AlertDialogDescription>Tem certeza que deseja excluir este paciente?</AlertDialogDescription></AlertDialogHeader>
|
||||
<AlertDialogFooter><AlertDialogCancel>Cancelar</AlertDialogCancel><AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-destructive hover:bg-destructive/90">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-muted-foreground">
|
||||
<Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
|
||||
Carregando...
|
||||
</div>
|
||||
) : patientDetails?.error ? (
|
||||
<div className="text-destructive p-4">{patientDetails.error}</div>
|
||||
) : (
|
||||
<div className="grid gap-4 py-4">
|
||||
<AlertDialogContent className="max-h-[90vh] overflow-y-auto">
|
||||
<AlertDialogHeader><AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle></AlertDialogHeader>
|
||||
<AlertDialogDescription>
|
||||
{patientDetails ? (!patientDetails.error ? (
|
||||
<div className="grid gap-4 py-4 text-left">
|
||||
<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><p className="font-semibold text-xs text-muted-foreground">NOME</p><p>{patientDetails.full_name}</p></div>
|
||||
<div><p className="font-semibold text-xs text-muted-foreground">EMAIL</p><p className="break-all">{patientDetails.email}</p></div>
|
||||
<div><p className="font-semibold text-xs text-muted-foreground">TELEFONE</p><p>{patientDetails.phone_mobile}</p></div>
|
||||
<div><p className="font-semibold text-xs text-muted-foreground">DATA NASC.</p><p>{patientDetails.birth_date}</p></div>
|
||||
</div>
|
||||
<div className="border-t pt-4"><p className="font-semibold text-primary mb-2">Endereço</p><p>{patientDetails.street}, {patientDetails.number}</p><p>{patientDetails.cidade}/{patientDetails.estado}</p></div>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
) : <p className="text-destructive">{patientDetails.error}</p>) : <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />}
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogFooter><AlertDialogCancel>Fechar</AlertDialogCancel></AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user