Criação da página dos detalhes dos pacientes

src/App.js

@@ -23,7 +23,7 @@ function App() {
   const [isSidebarActive, setIsSidebarActive] = useState(true);
   const [currentPage, setCurrentPage] = useState('dashboard');
 
-  const [patientID, setPatientID] = useState(0)
+  const [patientID, setPatientID] = useState(null)
 
 
 
@@ -55,11 +55,10 @@ const renderPageContent = () => {
     return <GalleryApp />;
   }
   else if(currentPage === 'edit-page-paciente'){
-    
     return <EditPage  id={patientID} />
   }
   else if(currentPage === 'details-page-paciente'){
-    return <Details/>
+    return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
   }
 
 

src/pages/Details.jsx

@@ -1,9 +1,148 @@
-import React from 'react'
+import React, { useEffect, useState } from "react";
+
+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 paciente:", err));
+  }, [patientID]);
+
+  if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
 
-const Details = () => {
   return (
-    <div>Details</div>
-  )
-}
+    <div style={styles.container}>
+      {/* Botão voltar */}
+      <button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
+        ⬅ Voltar
+      </button>
 
-export default Details
+      {/* 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>
+
+      {/* Dados pessoais */}
+      <div 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>
+          <div style={styles.item}><strong>Idade:</strong> {paciente.idade}</div>
+          <div style={styles.item}><strong>Data de Nascimento:</strong> {paciente.dataNascimento}</div>
+          <div style={styles.item}><strong>Sexo:</strong> {paciente.sexo}</div>
+          <div style={styles.item}><strong>Estado Civil:</strong> {paciente.estadoCivil}</div>
+          <div style={styles.item}><strong>Profissão:</strong> {paciente.profissao}</div>
+          <div style={styles.item}><strong>Nacionalidade:</strong> {paciente.nacionalidade}</div>
+          <div style={styles.item}><strong>Naturalidade:</strong> {paciente.naturalidade}</div>
+          <div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
+        </div>
+      </div>
+
+      {/* Contato */}
+      <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>
+          <div style={styles.item}><strong>Celular:</strong> {paciente.celular}</div>
+          <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>
+  );
+};
+
+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;

src/pages/Table.jsx

@@ -29,19 +29,19 @@ function Table( {setCurrentPage, setPatientID}) {
     console.log(e.target.value)
 
     if(value === 'verdetalhes'){
+      setPatientID(id);
       setCurrentPage('details-page-paciente')
     }
 
-    if(value === 'editar')
-    {setCurrentPage('edit-page-paciente')
-    setPatientID(id)
-      
-      
+    if(value === 'editar'){
+      setPatientID(id);
+      setCurrentPage('edit-page-paciente')
     }
     
     if(value === 'excluir'){
       console.log(`Excluir ${id}`)
       deletePatient(id)
+      
     }
 
   }