riseup-squad23/src/pages/Details.jsx

import React, { useEffect, useState } from "react";
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';

const Details = ({ patientID, setCurrentPage }) => {
  const [paciente, setPaciente] = useState({});

  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));
  }, [patientID]);

  

  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>
          <p>{ "-"}</p>
        </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;