295 lines
9.3 KiB
JavaScript
295 lines
9.3 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
|
|
|
const Details = ({ patientID, setCurrentPage }) => {
|
|
const [paciente, setPaciente] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!patientID) return;
|
|
|
|
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
|
|
.then(res => res.json())
|
|
.then(data => setPaciente(data))
|
|
.catch(err => console.error("Erro ao buscar paciente:", err));
|
|
}, [patientID]);
|
|
|
|
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
|
|
|
return (
|
|
<>
|
|
<div className="card p-3">
|
|
<h3 className="mb-3 text-center">MediConnect</h3>
|
|
<hr />
|
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
|
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
|
|
<i className="bi bi-chevron-left"></i> Voltar
|
|
</button>
|
|
<div className="d-flex mb-3">
|
|
<div className="avatar avatar-lg">
|
|
<img src={avatarPlaceholder} alt="" />
|
|
</div>
|
|
<div className="media-body ms-3">
|
|
<span>{paciente.nome || "Nome Completo"}</span>
|
|
<p>{paciente.cpf || "CPF"}</p>
|
|
</div>
|
|
</div>
|
|
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
|
|
<i className="bi bi-pencil-square"></i> Editar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
|
<div className="card p-3">
|
|
<h5 className="mb-3">Dados Pessoais</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome:</label>
|
|
<p>{paciente.nome || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome social:</label>
|
|
<p>{paciente.nomeSocial || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Data de nascimento:</label>
|
|
<p>{paciente.dataNascimento || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Gênero:</label>
|
|
<p>{paciente.sexo || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Outro documento:</label>
|
|
<p>{paciente.documento || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Número do documento:</label>
|
|
<p>{paciente.numeroDocumento || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>CPF:</label>
|
|
<p>{paciente.cpf || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Profissão:</label>
|
|
<p>{paciente.profissao || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome da Mãe:</label>
|
|
<p>{paciente.nomeMae || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Profissão da mãe:</label>
|
|
<p>{paciente.profissaoMae || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome do Pai:</label>
|
|
<p>{paciente.nomePai || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Profissão do pai:</label>
|
|
<p>{paciente.profissaoPai || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome do responsável:</label>
|
|
<p>{paciente.nomeResponsavel || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>CPF do responsável:</label>
|
|
<p>{paciente.cpfResponsavel || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Nome do esposo(a):</label>
|
|
<p>{paciente.nomeConjuge || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Identificador de outro sistema:</label>
|
|
<p>{paciente.outroId || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ ENDEREÇO ------------------ */}
|
|
<div className="card p-3">
|
|
<h5>Endereço</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-4 mb-3">
|
|
<label>CEP:</label>
|
|
<p>{paciente.cep || "-"}</p>
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label>Rua:</label>
|
|
<p>{paciente.rua || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label>Bairro:</label>
|
|
<p>{paciente.bairro || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label>Cidade:</label>
|
|
<p>{paciente.cidade || "-"}</p>
|
|
</div>
|
|
<div className="col-md-2 mb-3">
|
|
<label>Estado:</label>
|
|
<p>{paciente.estado || "-"}</p>
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label>Número:</label>
|
|
<p>{paciente.numero || "-"}</p>
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label>Complemento:</label>
|
|
<p>{paciente.complemento || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ CONTATO ------------------ */}
|
|
<div className="card p-3">
|
|
<h5>Contato</h5>
|
|
<hr />
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label>Email:</label>
|
|
<p>{paciente.email || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Telefone:</label>
|
|
<p>{paciente.telefone1 || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Telefone 2:</label>
|
|
<p>{paciente.telefone2 || "-"}</p>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label>Celular:</label>
|
|
<p>{paciente.telefone3 || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
|
<div className="card p-3">
|
|
<h5>Informações Adicionais</h5>
|
|
<hr />
|
|
<div className="mb-3">
|
|
<label>Observações:</label>
|
|
<p>{paciente.observacoes || "-"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dados pessoais
|
|
<div className="" style={styles.section}>
|
|
<h3 style={styles.sectionTitle}>Dados Pessoais</h3>
|
|
<div style={styles.grid}>
|
|
<div style={styles.item}><strong>Nome Completo:</strong> {paciente.nomeCompleto}</div>
|
|
<div style={styles.item}><strong>CPF:</strong> {paciente.cpf}</div>
|
|
<div style={styles.item}><strong>Idade:</strong> {paciente.idade}</div>
|
|
<div style={styles.item}><strong>Data de Nascimento:</strong> {paciente.dataNascimento}</div>
|
|
<div style={styles.item}><strong>Sexo:</strong> {paciente.sexo}</div>
|
|
<div style={styles.item}><strong>Estado Civil:</strong> {paciente.estadoCivil}</div>
|
|
<div style={styles.item}><strong>Profissão:</strong> {paciente.profissao}</div>
|
|
<div style={styles.item}><strong>Nacionalidade:</strong> {paciente.nacionalidade}</div>
|
|
<div style={styles.item}><strong>Naturalidade:</strong> {paciente.naturalidade}</div>
|
|
<div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
|
|
</div>
|
|
</div>
|
|
*/}
|
|
{/* Contato */}
|
|
{/* <div style={styles.section}>
|
|
<h3 style={styles.sectionTitle}>Informações de Contato</h3>
|
|
<div style={styles.grid}>
|
|
<div style={styles.item}><strong>E-mail:</strong> {paciente.email}</div>
|
|
<div style={styles.item}><strong>Celular:</strong> {paciente.celular}</div>
|
|
<div style={styles.item}><strong>Telefone 1:</strong> {paciente.telefone1 || "-"}</div>
|
|
<div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
// const styles = {
|
|
// container: {
|
|
// width: "80%",
|
|
// maxWidth: "800px",
|
|
// margin: "30px auto",
|
|
// background: "#fff",
|
|
// borderRadius: "10px",
|
|
// padding: "20px",
|
|
// boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
|
// fontFamily: "Arial, sans-serif",
|
|
// position: "relative"
|
|
// },
|
|
// backBtn: {
|
|
// background: "#ddd",
|
|
// border: "none",
|
|
// borderRadius: "6px",
|
|
// padding: "8px 14px",
|
|
// cursor: "pointer",
|
|
// marginBottom: "15px"
|
|
// },
|
|
// header: {
|
|
// textAlign: "center",
|
|
// marginBottom: "20px",
|
|
// position: "relative"
|
|
// },
|
|
// avatar: {
|
|
// width: "80px",
|
|
// height: "80px",
|
|
// borderRadius: "50%",
|
|
// background: "#ddd",
|
|
// display: "block",
|
|
// margin: "0 auto"
|
|
// },
|
|
// nome: {
|
|
// margin: "10px 0 5px"
|
|
// },
|
|
// vip: {
|
|
// color: "#f7b500",
|
|
// fontWeight: "bold",
|
|
// marginLeft: "5px"
|
|
// },
|
|
// cpf: {
|
|
// margin: "5px 0",
|
|
// color: "#555"
|
|
// },
|
|
// editBtn: {
|
|
// background: "#0d6efd",
|
|
// color: "white",
|
|
// padding: "8px 14px",
|
|
// border: "none",
|
|
// borderRadius: "6px",
|
|
// cursor: "pointer",
|
|
// position: "absolute",
|
|
// right: "20px",
|
|
// top: "20px"
|
|
// },
|
|
// section: {
|
|
// marginBottom: "20px",
|
|
// border: "1px solid #e0e0e0",
|
|
// borderRadius: "8px",
|
|
// padding: "15px"
|
|
// },
|
|
// sectionTitle: {
|
|
// marginTop: 0,
|
|
// borderBottom: "1px solid #ddd",
|
|
// paddingBottom: "8px",
|
|
// fontSize: "18px"
|
|
// },
|
|
// grid: {
|
|
// display: "grid",
|
|
// gridTemplateColumns: "1fr 1fr",
|
|
// gap: "10px 20px",
|
|
// marginTop: "10px"
|
|
// },
|
|
// item: {
|
|
// fontSize: "14px"
|
|
// }
|
|
// };
|
|
|
|
export default Details; |