Merge remote-tracking branch 'origin/PaginaDetalhes'
This commit is contained in:
jp-lima
commit
bea907634e
BIN
src/assets/images/avatar_placeholder.png
Normal file
BIN
src/assets/images/avatar_placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -1,4 +1,5 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
||||||
|
|
||||||
const Details = ({ patientID, setCurrentPage }) => {
|
const Details = ({ patientID, setCurrentPage }) => {
|
||||||
const [paciente, setPaciente] = useState(null);
|
const [paciente, setPaciente] = useState(null);
|
||||||
@ -15,29 +16,174 @@ const Details = ({ patientID, setCurrentPage }) => {
|
|||||||
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={styles.container}>
|
<>
|
||||||
{/* Botão voltar */}
|
<div className="card p-3">
|
||||||
<button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
|
<h3 className="mb-3 text-center">MediConnect</h3>
|
||||||
⬅ Voltar
|
<hr />
|
||||||
</button>
|
<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>
|
||||||
|
|
||||||
{/* Cabeçalho */}
|
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||||
<div style={styles.header}>
|
<div className="card p-3">
|
||||||
<img
|
<h5 className="mb-3">Dados Pessoais</h5>
|
||||||
src="https://via.placeholder.com/80"
|
<hr />
|
||||||
alt="Foto do paciente"
|
<div className="row">
|
||||||
style={styles.avatar}
|
<div className="col-md-6 mb-3">
|
||||||
/>
|
<label>Nome:</label>
|
||||||
<h2 style={styles.nome}>
|
<p>{paciente.nome || "-"}</p>
|
||||||
{paciente.nomeCompleto}
|
</div>
|
||||||
</h2>
|
<div className="col-md-6 mb-3">
|
||||||
<p style={styles.cpf}>CPF: {paciente.cpf}</p>
|
<label>Nome social:</label>
|
||||||
<button style={styles.editBtn}>Editar</button>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Dados pessoais */}
|
{/* ------------------ ENDEREÇO ------------------ */}
|
||||||
<div style={styles.section}>
|
<div className="card p-3">
|
||||||
<h3 style={styles.sectionTitle}>Dados Pessoais</h3>
|
<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.grid}>
|
||||||
<div style={styles.item}><strong>Nome Completo:</strong> {paciente.nomeCompleto}</div>
|
<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>CPF:</strong> {paciente.cpf}</div>
|
||||||
@ -51,9 +197,9 @@ const Details = ({ patientID, setCurrentPage }) => {
|
|||||||
<div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
|
<div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
*/}
|
||||||
{/* Contato */}
|
{/* Contato */}
|
||||||
<div style={styles.section}>
|
{/* <div style={styles.section}>
|
||||||
<h3 style={styles.sectionTitle}>Informações de Contato</h3>
|
<h3 style={styles.sectionTitle}>Informações de Contato</h3>
|
||||||
<div style={styles.grid}>
|
<div style={styles.grid}>
|
||||||
<div style={styles.item}><strong>E-mail:</strong> {paciente.email}</div>
|
<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 1:</strong> {paciente.telefone1 || "-"}</div>
|
||||||
<div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
|
<div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = {
|
// const styles = {
|
||||||
container: {
|
// container: {
|
||||||
width: "80%",
|
// width: "80%",
|
||||||
maxWidth: "800px",
|
// maxWidth: "800px",
|
||||||
margin: "30px auto",
|
// margin: "30px auto",
|
||||||
background: "#fff",
|
// background: "#fff",
|
||||||
borderRadius: "10px",
|
// borderRadius: "10px",
|
||||||
padding: "20px",
|
// padding: "20px",
|
||||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
// boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||||
fontFamily: "Arial, sans-serif",
|
// fontFamily: "Arial, sans-serif",
|
||||||
position: "relative"
|
// position: "relative"
|
||||||
},
|
// },
|
||||||
backBtn: {
|
// backBtn: {
|
||||||
background: "#ddd",
|
// background: "#ddd",
|
||||||
border: "none",
|
// border: "none",
|
||||||
borderRadius: "6px",
|
// borderRadius: "6px",
|
||||||
padding: "8px 14px",
|
// padding: "8px 14px",
|
||||||
cursor: "pointer",
|
// cursor: "pointer",
|
||||||
marginBottom: "15px"
|
// marginBottom: "15px"
|
||||||
},
|
// },
|
||||||
header: {
|
// header: {
|
||||||
textAlign: "center",
|
// textAlign: "center",
|
||||||
marginBottom: "20px",
|
// marginBottom: "20px",
|
||||||
position: "relative"
|
// position: "relative"
|
||||||
},
|
// },
|
||||||
avatar: {
|
// avatar: {
|
||||||
width: "80px",
|
// width: "80px",
|
||||||
height: "80px",
|
// height: "80px",
|
||||||
borderRadius: "50%",
|
// borderRadius: "50%",
|
||||||
background: "#ddd",
|
// background: "#ddd",
|
||||||
display: "block",
|
// display: "block",
|
||||||
margin: "0 auto"
|
// margin: "0 auto"
|
||||||
},
|
// },
|
||||||
nome: {
|
// nome: {
|
||||||
margin: "10px 0 5px"
|
// margin: "10px 0 5px"
|
||||||
},
|
// },
|
||||||
vip: {
|
// vip: {
|
||||||
color: "#f7b500",
|
// color: "#f7b500",
|
||||||
fontWeight: "bold",
|
// fontWeight: "bold",
|
||||||
marginLeft: "5px"
|
// marginLeft: "5px"
|
||||||
},
|
// },
|
||||||
cpf: {
|
// cpf: {
|
||||||
margin: "5px 0",
|
// margin: "5px 0",
|
||||||
color: "#555"
|
// color: "#555"
|
||||||
},
|
// },
|
||||||
editBtn: {
|
// editBtn: {
|
||||||
background: "#0d6efd",
|
// background: "#0d6efd",
|
||||||
color: "white",
|
// color: "white",
|
||||||
padding: "8px 14px",
|
// padding: "8px 14px",
|
||||||
border: "none",
|
// border: "none",
|
||||||
borderRadius: "6px",
|
// borderRadius: "6px",
|
||||||
cursor: "pointer",
|
// cursor: "pointer",
|
||||||
position: "absolute",
|
// position: "absolute",
|
||||||
right: "20px",
|
// right: "20px",
|
||||||
top: "20px"
|
// top: "20px"
|
||||||
},
|
// },
|
||||||
section: {
|
// section: {
|
||||||
marginBottom: "20px",
|
// marginBottom: "20px",
|
||||||
border: "1px solid #e0e0e0",
|
// border: "1px solid #e0e0e0",
|
||||||
borderRadius: "8px",
|
// borderRadius: "8px",
|
||||||
padding: "15px"
|
// padding: "15px"
|
||||||
},
|
// },
|
||||||
sectionTitle: {
|
// sectionTitle: {
|
||||||
marginTop: 0,
|
// marginTop: 0,
|
||||||
borderBottom: "1px solid #ddd",
|
// borderBottom: "1px solid #ddd",
|
||||||
paddingBottom: "8px",
|
// paddingBottom: "8px",
|
||||||
fontSize: "18px"
|
// fontSize: "18px"
|
||||||
},
|
// },
|
||||||
grid: {
|
// grid: {
|
||||||
display: "grid",
|
// display: "grid",
|
||||||
gridTemplateColumns: "1fr 1fr",
|
// gridTemplateColumns: "1fr 1fr",
|
||||||
gap: "10px 20px",
|
// gap: "10px 20px",
|
||||||
marginTop: "10px"
|
// marginTop: "10px"
|
||||||
},
|
// },
|
||||||
item: {
|
// item: {
|
||||||
fontSize: "14px"
|
// fontSize: "14px"
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
|
||||||
export default Details;
|
export default Details;
|
||||||
Loading…
x
Reference in New Issue
Block a user