Merge remote-tracking branch 'origin/detalhes-do-pacientes'

src/pages/Details.jsx

@@ -1,36 +1,148 @@
-import React from 'react'
+import React, { useEffect, useState } from "react";
 
+const Details = ({ patientID, setCurrentPage }) => {
+  const [paciente, setPaciente] = useState(null);
 
-const Details = (id) => {
+  useEffect(() => {
+    if (!patientID) return;
 
-  /*
+    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
-    console.log(`ID ${id}`)
+      .then(res => res.json())
+      .catch(err => console.error("Erro ao buscar paciente:", err));
+      .then(data => setPaciente(data))
+  }, [patientID]);
 
-    useEffect(() => {
+  if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
-    
-    
-    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
-      .then(response => response.json())
-      .then(result => result.data)
-      .then(data => setPatientPUT(data))
-      .catch(error => console.log('error', error));
-        
-    }, [])
-
-  
-  
-  
-  
-  
-    return (
-    <div>
 
+  return (
+    <div style={styles.container}>
+      {/* Botão voltar */}
+      <button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
+      </button>
+        ⬅ Voltar
 
+      {/* 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,6 +24,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const onChange = (e, id) => {
     let value = e.target.value;
 
+<<<<<<< HEAD
     if (value === "verdetalhes") {
       setCurrentPage("details-page-paciente");
     }
@@ -31,6 +32,22 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     if (value === "editar") {
       setCurrentPage("edit-page-paciente");
       setPatientID(id);
+=======
+    if(value === 'verdetalhes'){
+      setPatientID(id);
+      setCurrentPage('details-page-paciente')
+    }
+
+    if(value === 'editar'){
+      setPatientID(id);
+      setCurrentPage('edit-page-paciente')
+    }
+    
+    if(value === 'excluir'){
+      console.log(`Excluir ${id}`)
+      deletePatient(id)
+      
+>>>>>>> origin/detalhes-do-pacientes
     }
 
     if (value === "excluir") {