Details funcional

src/components/patients/PatientForm.jsx

@@ -52,15 +52,9 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
     }
     else if(ExisteNoBancoDeDados ===  true){
       aviso = 'O CPF informado já está presente no sistema'
-      Erro = true 
-
-      
+      Erro = true  
     }
-
     return [Erro,aviso]
-
-
-
   }
 
   const FormatCPF = (valor) => {

src/pages/Details.jsx

@@ -2,28 +2,40 @@ import React, { useEffect, useState } from "react";
 import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
 
 const Details = ({ patientID, setCurrentPage }) => {
-  const [paciente, setPaciente] = useState(null);
+  const [paciente, setPaciente] = useState({});
 
   useEffect(() => {
     if (!patientID) return;
 
     fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
       .then(res => res.json())
-      .then(data => setPaciente(data))
+      
+      .then(result => {setPaciente(result.data); console.log(result.data)})
       .catch(err => console.error("Erro ao buscar paciente:", err));
   }, [patientID]);
 
-  if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
+  
 
   return (
     <>
+
+    <div>
+    <button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
+          <i className="bi bi-chevron-left"></i> Voltar
+        </button>
+
+      <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
+          <i className="bi bi-pencil-square"></i> Editar
+        </button>
+    </div>
+
+    <br/>
+      {/* ------------------ HEADER ------------------ */}
     <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="" />
@@ -33,9 +45,7 @@ const Details = ({ patientID, setCurrentPage }) => {
             <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>
       
@@ -50,11 +60,11 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label>Nome social:</label>
-          <p>{paciente.nomeSocial || "-"}</p>
+          <p>{paciente.nome_social || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Data de nascimento:</label>
-          <p>{paciente.dataNascimento || "-"}</p>
+          <p>{paciente.data_nascimento || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Gênero:</label>
@@ -62,11 +72,11 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label>Outro documento:</label>
-          <p>{paciente.documento || "-"}</p>
+          <p>{paciente.outros_documentos?.tipo || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Número do documento:</label>
-          <p>{paciente.numeroDocumento || "-"}</p>
+          <p>{paciente.outros_documentos?.numero || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>CPF:</label>
@@ -78,31 +88,31 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label>Nome da Mãe:</label>
-          <p>{paciente.nomeMae || "-"}</p>
+          <p>{paciente.nome_mae || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Profissão da mãe:</label>
-          <p>{paciente.profissaoMae || "-"}</p>
+          <p>{paciente.profissao_mae || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Nome do Pai:</label>
-          <p>{paciente.nomePai || "-"}</p>
+          <p>{paciente.nome_pai || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Profissão do pai:</label>
-          <p>{paciente.profissaoPai || "-"}</p>
+          <p>{paciente.profissao_pai || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Nome do responsável:</label>
-          <p>{paciente.nomeResponsavel || "-"}</p>
+          <p>{paciente.nome_responsavel || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>CPF do responsável:</label>
-          <p>{paciente.cpfResponsavel || "-"}</p>
+          <p>{paciente.cpf_responsavel || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Nome do esposo(a):</label>
-          <p>{paciente.nomeConjuge || "-"}</p>
+          <p>{paciente.nome_conjuge || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Identificador de outro sistema:</label>
@@ -118,31 +128,31 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-4 mb-3">
           <label>CEP:</label>
-          <p>{paciente.cep || "-"}</p>
+          <p>{paciente.endereco?.cep || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label>Rua:</label>
-          <p>{paciente.rua || "-"}</p>
+          <p>{paciente.endereco?.logradouro || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label>Bairro:</label>
-          <p>{paciente.bairro || "-"}</p>
+          <p>{paciente.endereco?.bairro || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label>Cidade:</label>
-          <p>{paciente.cidade || "-"}</p>
+          <p>{paciente.endereco?.cidade || "-"}</p>
         </div>
         <div className="col-md-2 mb-3">
           <label>Estado:</label>
-          <p>{paciente.estado || "-"}</p>
+          <p>{paciente.endereco?.estado || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label>Número:</label>
-          <p>{paciente.numero || "-"}</p>
+          <p>{paciente.endereco?.numero || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label>Complemento:</label>
-          <p>{paciente.complemento || "-"}</p>
+          <p>{paciente.endereco?.complemento || "-"}</p>
         </div>
       </div>
       </div>
@@ -154,19 +164,19 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label>Email:</label>
-          <p>{paciente.email || "-"}</p>
+          <p>{paciente.contato?.email || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Telefone:</label>
-          <p>{paciente.telefone1 || "-"}</p>
+          <p>{paciente.contato?.telefone1 || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label>Telefone 2:</label>
-          <p>{paciente.telefone2 || "-"}</p>
+          <p>{paciente.contato?.telefone2 || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
-          <label>Celular:</label>
-          <p>{paciente.telefone3 || "-"}</p>
+          <label>Telefone 3:</label>
+          <p>{paciente.contato?.telefone3 || "-"}</p>
         </div>
       </div>
       </div>