346 lines
13 KiB
JavaScript
346 lines
13 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
|
|
|
const Details = ({ patientID, setCurrentPage }) => {
|
|
const [paciente, setPaciente] = useState({});
|
|
const [anexos, setAnexos] = useState([]);
|
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!patientID) return;
|
|
|
|
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
|
|
.then(res => res.json())
|
|
|
|
.then(result => {setPaciente(result.data)})
|
|
.catch(err => console.error("Erro ao buscar paciente:", err));
|
|
|
|
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`)
|
|
.then(res => res.json())
|
|
.then(data => setAnexos(data.data || []))
|
|
.catch(err => console.error("Erro ao buscar anexos:", err));
|
|
|
|
}, [patientID]);
|
|
|
|
const handleUpload = async () => {
|
|
if (!selectedFile) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', selectedFile);
|
|
|
|
try {
|
|
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
const newAnexo = await response.json();
|
|
setAnexos(prev => [...prev, newAnexo]);
|
|
setSelectedFile(null);
|
|
} else {
|
|
console.error('Erro ao enviar anexo');
|
|
}
|
|
} catch (err) {
|
|
console.error('Erro ao enviar anexo:', err);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (anexoId) => {
|
|
try {
|
|
const response = await fetch(
|
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${anexoId}`,
|
|
{
|
|
method: "DELETE",
|
|
}
|
|
);
|
|
|
|
if (response.ok) {
|
|
setAnexos((prev) => prev.filter((a) => a.id !== anexoId));
|
|
} else {
|
|
console.error("Erro ao deletar anexo");
|
|
}
|
|
} catch (err) {
|
|
console.error("Erro ao deletar anexo:", err);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="card p-3 shadow-sm">
|
|
<h3 className="mb-3 text-center">MediConnect</h3>
|
|
<hr />
|
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
|
|
|
<div className="d-flex mb-3">
|
|
<div className="avatar avatar-xl">
|
|
<img src={avatarPlaceholder} alt="" />
|
|
</div>
|
|
<div className="media-body ms-3 font-extrabold">
|
|
<span>{paciente.nome || "Nome Completo"}</span>
|
|
<p>{paciente.cpf || "CPF"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
|
<div className="card p-3 shadow-sm">
|
|
<h5 className="mb-3">Dados Pessoais</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome:</label>
|
|
<p>{paciente.nome || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome social:</label>
|
|
<p>{paciente.nome_social || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Data de nascimento:</label>
|
|
<p>{paciente.data_nascimento || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Gênero:</label>
|
|
<p>{paciente.sexo || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">CPF:</label>
|
|
<p>{paciente.cpf || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">RG:</label>
|
|
<p>{paciente.rg || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Outro documento:</label>
|
|
<p>{paciente.outros_documentos?.tipo || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Número do documento:</label>
|
|
<p>{paciente.outros_documentos?.numero || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Etnia:</label>
|
|
<p>{paciente.etnia || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Raça:</label>
|
|
<p>{paciente.raca || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Naturalidade:</label>
|
|
<p>{paciente.etniaRaca || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Profissão:</label>
|
|
<p>{paciente.profissao || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome da Mãe:</label>
|
|
<p>{paciente.nome_mae || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Profissão da mãe:</label>
|
|
<p>{paciente.profissao_mae || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome do Pai:</label>
|
|
<p>{paciente.nome_pai || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Profissão do pai:</label>
|
|
<p>{paciente.profissao_pai || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome do responsável:</label>
|
|
<p>{paciente.nome_responsavel || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">CPF do responsável:</label>
|
|
<p>{paciente.cpf_responsavel || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Estado civil:</label>
|
|
<p>{paciente.estado_civil || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nome do esposo(a):</label>
|
|
<p>{paciente.nome_conjuge || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Identificador de outro sistema:</label>
|
|
<p>{paciente.outro_id || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="checkbox" checked={paciente.rnConvenio} disabled/>
|
|
<label className="font-extrabold">RN na Guia do convênio:</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Observações:</label>
|
|
<p>{paciente.observacoes || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Anexos do Paciente:</label>
|
|
{anexos.length > 0 ?(
|
|
<ul>
|
|
{anexos.map((anexo) => (
|
|
<li key={anexo.id} className="d-flex aling-items-center">
|
|
<a href={anexo.url} target="-blank" rel="noopener noreferrer">
|
|
{anexo.nome}
|
|
</a>
|
|
<button className="btn btn-danger btn-sm" onclick={() => handleDelete(anexo.id)} >Remover</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>-</p>
|
|
)}
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>
|
|
Carregar Um Novo Anexo
|
|
</label>
|
|
<input
|
|
type="file" className="form-control d-none" name="foto" id="foto-input" onChange={(e) => setSelectedFile(e.target.files[0])} accept="image/*"/>
|
|
{selectedFile && <span className="ms-2" style={{ fontSize: '1rem' }}>{selectedFile.name}</span>}
|
|
<button onClick={handleUpload} className="btn btn-success ms-2">Enviar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ INFORMAÇÕES MÉDICAS ------------------ */}
|
|
<div className="card p-3 shadow-sm">
|
|
<h5>Informações Médicas</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-3 mb-3">
|
|
<label className="font-extrabold">Tipo Sanguíneo:</label>
|
|
<p>{paciente.tipoSanguineo || "-"}</p>
|
|
</div>
|
|
<div className="col-md-3 mb-3">
|
|
<label className="font-extrabold">Peso (kg):</label>
|
|
<p>{paciente.peso || "-"}</p>
|
|
</div>
|
|
<div className="col-md-3 mb-3">
|
|
<label className="font-extrabold">Altura (m):</label>
|
|
<p>{paciente.altura || "-"}</p>
|
|
</div>
|
|
<div className="col-md-3 mb-3">
|
|
<label className="font-extrabold">IMC (kg/m²):</label>
|
|
<p>{paciente.imc || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Alergias:</label>
|
|
<p>{paciente.alergias || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ INFORMAÇÕES DE CONVÊNIO ------------------ */}
|
|
<div className="card p-3 shadow-sm">
|
|
<h5>Informações de Convênio</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Convênio:</label>
|
|
<p>{paciente.convenio || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Plano:</label>
|
|
<p>{paciente.plano || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Nº de matrícula:</label>
|
|
<p>{paciente.numeroMatricula || "-"}</p>
|
|
</div>
|
|
<div className="col-md-3 mb-3">
|
|
<label className="font-extrabold">Validade da Carteira:</label>
|
|
<p>{paciente.validadeCarteira || "-"}</p>
|
|
</div>
|
|
<div className="col-md-2 d-flex align-items-end mb-3">
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="checkbox" checked={paciente.validadeIndeterminada} disabled/>
|
|
<label className="font-extrabold">Validade indeterminada:</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-2 d-flex align-items-end mb-3">
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="checkbox" checked={paciente.pacienteVip} disabled/>
|
|
<label className="font-extrabold">Paciente VIP: </label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ ENDEREÇO ------------------ */}
|
|
<div className="card p-3 shadow-sm">
|
|
<h5>Endereço</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-4 mb-3">
|
|
<label className="font-extrabold">CEP:</label>
|
|
<p>{paciente.endereco?.cep || "-"}</p>
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label className="font-extrabold">Rua:</label>
|
|
<p>{paciente.endereco?.logradouro || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label className="font-extrabold">Bairro:</label>
|
|
<p>{paciente.endereco?.bairro || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label className="font-extrabold">Cidade:</label>
|
|
<p>{paciente.endereco?.cidade || "-"}</p>
|
|
</div>
|
|
<div className="col-md-2 mb-3">
|
|
<label className="font-extrabold">Estado:</label>
|
|
<p>{paciente.endereco?.estado || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label className="font-extrabold">Número:</label>
|
|
<p>{paciente.endereco?.numero || "-"}</p>
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label className="font-extrabold">Complemento:</label>
|
|
<p>{paciente.endereco?.complemento || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ CONTATO ------------------ */}
|
|
<div className="card p-3 shadow-sm">
|
|
<h5>Contato</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Email:</label>
|
|
<p>{paciente.contato?.email || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Telefone:</label>
|
|
<p>{paciente.contato?.celular || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Telefone 2:</label>
|
|
<p>{paciente.contato?.telefone2 || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label className="font-extrabold">Telefone 3:</label>
|
|
<p>{paciente.contato?.telefone3 || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Details; |