src/App.js

@@ -19,7 +19,7 @@ function App() {
   const [isSidebarActive, setIsSidebarActive] = useState(true);
   const [currentPage, setCurrentPage] = useState('table ');
 
-  const [patientID, setPatientID] = useState(null)
+  const [patientID, setPatientID] = useState(0)
 
 
 
@@ -63,7 +63,7 @@ const renderPageContent = () => {
   //  return <DoctorEditPage  id={patientID} />
   //}
   else if(currentPage === 'details-page-paciente'){
-    return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
+    return <Details/>
   }
 
 

src/pages/Details.jsx

@@ -1,148 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React 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 style={styles.container}>
+    <div>Details</div>
-      {/* Botão voltar */}
+  )
-      <button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
-        ⬅ Voltar
-      </button>
-
-      {/* 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;
+export default Details

src/pages/Table.jsx

@@ -24,23 +24,18 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const onChange = (e, id) => {
     let value = e.target.value;
 
-    if(value === 'verdetalhes'){
+    if (value === "verdetalhes") {
-      setCurrentPage('details-page-paciente')
+      setCurrentPage("details-page-paciente");
-      setPatientID(id);
-    } 
-      if(value === 'editar'){
-      setCurrentPage('edit-page-paciente')
-      setPatientID(id);
-    
-    
     }
 
+    if (value === "editar") {
+      setCurrentPage("edit-page-paciente");
+      setPatientID(id);
+    }
 
     if (value === "excluir") {
-         deletePatient(id);
       console.log(`Excluir ${id}`);
-    
+      deletePatient(id);
-
     }
   };