forked from RiseUP/riseup-squad23
Nova pagina de detalhes
This commit is contained in:
Eduarda-SS
parent
709cd4e13d
commit
26ded1725c
@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
||||
|
||||
const Details = ({ patientID, setCurrentPage }) => {
|
||||
const [paciente, setPaciente] = useState(null);
|
||||
@ -15,29 +16,174 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* Botão voltar */}
|
||||
<button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
|
||||
⬅ Voltar
|
||||
</button>
|
||||
|
||||
{/* Cabeçalho */}
|
||||
<div style={styles.header}>
|
||||
<img
|
||||
src="https://via.placeholder.com/80"
|
||||
alt="Foto do paciente"
|
||||
style={styles.avatar}
|
||||
/>
|
||||
<h2 style={styles.nome}>
|
||||
{paciente.nomeCompleto}
|
||||
</h2>
|
||||
<p style={styles.cpf}>CPF: {paciente.cpf}</p>
|
||||
<button style={styles.editBtn}>Editar</button>
|
||||
<>
|
||||
<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>
|
||||
|
||||
{/* Dados pessoais */}
|
||||
<div style={styles.section}>
|
||||
<h3 style={styles.sectionTitle}>Dados Pessoais</h3>
|
||||
{/* ------------------ 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>
|
||||
@ -51,9 +197,9 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
<div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
*/}
|
||||
{/* Contato */}
|
||||
<div style={styles.section}>
|
||||
{/* <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>
|
||||
@ -61,88 +207,89 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
<div style={styles.item}><strong>Telefone 1:</strong> {paciente.telefone1 || "-"}</div>
|
||||
<div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
|
||||
</div>
|
||||
</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"
|
||||
}
|
||||
};
|
||||
// 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;
|
||||
Loading…
x
Reference in New Issue
Block a user