RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pàgina detalhes

Browse Source
This commit is contained in:
jp-lima 2025-09-18 10:52:48 -03:00
parent b02144436f
commit 9480edc2d1
1 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/pages/DoctorDetails.jsx Normal file
View File

@ -0,0 +1,181 @@
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 médico:", err));
}, [patientID]);
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
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">
<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-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>
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
<i className="bi bi-pencil-square"></i> Editar
</button>
</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.nomeSocial || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Data de nascimento:</label>
<p>{paciente.dataNascimento || "-"}</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">CRM:</label>
<p>{paciente.rg || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Outro documento:</label>
<p>{paciente.documento || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Número do documento:</label>
<p>{paciente.numeroDocumento || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Etnia e Raça:</label>
<p>{paciente.etniaRaca || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Nacionalidade:</label>
<p>{paciente.etniaRaca || "-"}</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">Especialização:</label>
<p>{paciente.profissao || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Estado civil:</label>
<p>{paciente.estadoCivil || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Nome do esposo(a):</label>
<p>{paciente.nomeConjuge || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Identificador de outro sistema:</label>
<p>{paciente.outroId || "-"}</p>
</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 Médico:</label>
<p>{paciente.anexos || "-"}</p>
</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.cep || "-"}</p>
</div>
<div className="col-md-8 mb-3">
<label className="font-extrabold">Rua:</label>
<p>{paciente.rua || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Bairro:</label>
<p>{paciente.bairro || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Cidade:</label>
<p>{paciente.cidade || "-"}</p>
</div>
<div className="col-md-2 mb-3">
<label className="font-extrabold">Estado:</label>
<p>{paciente.estado || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Número:</label>
<p>{paciente.numero || "-"}</p>
</div>
<div className="col-md-8 mb-3">
<label className="font-extrabold">Complemento:</label>
<p>{paciente.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.email || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone:</label>
<p>{paciente.telefone1 || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone 2:</label>
<p>{paciente.telefone2 || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Celular:</label>
<p>{paciente.telefone3 || "-"}</p>
</div>
</div>
</div>
</>
);
};
export default Details;