melhorar organização e adição de modal para excluir

src/App.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from './components/Sidebar';
 //import Header from './components/Header';
-import Table from "./pages/Table"; 
+import TablePaciente from "./pages/TablePaciente"; 
 
 import Inicio from './pages/Inicio';
 import PatientCadastroManager from './pages/PatientCadastroManager';
@@ -34,7 +34,7 @@ function App() {
       case 'doctor-form-layout':
         return <DoctorCadastroManager />;
       case 'table':
-        return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
+        return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
       case 'doctor-table':
         return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
       case 'details-page-paciente':
@@ -42,7 +42,7 @@ function App() {
       case 'details-page-doctor':
         return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
       case 'edit-page-paciente':
-        return <EditPage id={patientID} />;
+        return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
       case 'edit-page-doctor':
         return <DoctorEditPage id={patientID} />;
       case 'laudo-manager':

src/components/doctors/DoctorList.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-// Este componente recebe uma função 'onAddDoctor' para avisar que o botão foi clicado
-function DoctorList({ onAddPatient }) {
-  return (
-    <div className="card">
-      <div className="card-header">
-        <h4 className="card-title">Médicos</h4>
-      </div>
-      <div className="card-body">
-        <p>Gerencie os médicos cadastrados no sistema.</p>
-        <button className="btn btn-primary" onClick={onAddPatient}>
-          <i className="bi bi-plus-circle"></i> Adicionar Médico
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default DoctorList;

src/components/patients/PatientForm.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 
 
-function PatientForm({ onSave, onCancel,formData, setFormData }) {
+function PatientForm({ onSave, onCancel,formData, setFormData,setCurrentPage }) {
 
    // Estado para controlar modal de feedback
   const [showMessage, setShowMessage] = useState(false);
@@ -296,7 +296,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
                 {message}
               </div>
               <div className="modal-footer" style={{ borderTop: '2px solid #23336f1a', justifyContent: 'flex-end' }}>
-                <button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={() => setShowMessage(false)}>
+                <button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={setCurrentPage('table')}>
                   Fechar
                 </button>
               </div>

src/components/patients/PatientList.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-// Este componente recebe uma função 'onAddPatient' para avisar que o botão foi clicado
-function PatientList({ onAddPatient }) {
-  return (
-    <div className="card">
-      <div className="card-header">
-        <h4 className="card-title">Pacientes</h4>
-      </div>
-      <div className="card-body">
-        <p>Gerencie os pacientes cadastrados no sistema.</p>
-        <button className="btn btn-primary" onClick={onAddPatient}>
-          <i className="bi bi-plus-circle"></i> Adicionar Paciente
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default PatientList;

src/pages/DoctorCadastroManager.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 
 // Importamos os dois novos componentes que criamos
-import DoctorList from '../components/doctors/DoctorList';
+
 import DoctorForm from '../components/doctors/DoctorForm';
 
 function DoctorCadastroManager( ) {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
-  const [view, setView] = useState('form');
+ 
 
   
   var myHeaders = new Headers();
@@ -36,7 +36,7 @@ function DoctorCadastroManager( ) {
 
     setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
     setShowModal(true);
-    setView('list');
+   
   };
 
   return (
@@ -66,15 +66,13 @@ function DoctorCadastroManager( ) {
       <div className="page-content">
         <section className="row">
           <div className="col-12">
-            {view === 'list' ? (
+           
-              <DoctorList onAddPatient={() => setView('form')} />
-            ) : (
               <DoctorForm
                 onSave={handleSavePatient}
-                onCancel={() => setView('list')}
+                onCancel={console.log('hsh')}
                 PatientDict={{}}
               />
-            )}
+            
           </div>
         </section>
       </div>

src/pages/DoctorTable.jsx

@@ -5,19 +5,25 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
   const [search, setSearch] = useState("");
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
+  //  estados do modal
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedDoctorId, setSelectedDoctorId] = useState(null);
+
   // Função para excluir médicos
   const deleteDoctor = async (id) => {
     const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
 
-    if (!window.confirm("Tem certeza que deseja excluir este médico?")) return;
+    try {
-
+      await fetch(
-    await fetch(
+        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+        requestOptionsDelete
-      requestOptionsDelete
+      );
-    )
+      setMedicos((prev) => prev.filter((m) => m.id !== id));
-      .then((response) => response.text())
+    } catch (error) {
-      .then((mensage) => console.log(mensage))
+      console.log("Deu problema", error);
-      .catch((error) => console.log("Deu problema", error));
+    } finally {
+      setShowDeleteModal(false);
+    }
   };
 
   // Função para verificar se hoje é aniversário
@@ -60,7 +66,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
         <section className="row">
           <div className="col-12">
             <div className="card">
-
               <div className="card-header d-flex justify-content-between align-items-center">
                 <h4 className="card-title mb-0">Médicos Cadastrados</h4>
                 <button
@@ -72,7 +77,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
               </div>
 
               <div className="card-body">
-
                 <div className="d-flex gap-2 mb-3">
                   <input
                     type="text"
@@ -95,7 +99,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                   </button>
                 </div>
 
-
                 <div className="table-responsive">
                   <table className="table table-striped table-hover">
                     <thead>
@@ -105,7 +108,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                         <th>Email</th>
                         <th>Telefone</th>
                         <th></th>
-                        <th></th>
+                        <th>Ações</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -130,7 +133,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
 
                             <td>
                               <div className="d-flex gap-2">
-
+                                {/* Ver Detalhes */}
                                 <button
                                   className="btn btn-sm"
                                   style={{
@@ -146,6 +149,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                   Detalhes
                                 </button>
 
+                                {/*  Editar */}
                                 <button
                                   className="btn btn-sm"
                                   style={{
@@ -160,13 +164,17 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                   <i className="bi bi-pencil me-1"></i> Editar
                                 </button>
 
+                                
                                 <button
                                   className="btn btn-sm"
                                   style={{
                                     backgroundColor: "#F8D7DA",
                                     color: "#721C24",
                                   }}
-                                  onClick={() => deleteDoctor(medico.id)}
+                                  onClick={() => {
+                                    setSelectedDoctorId(medico.id);
+                                    setShowDeleteModal(true);
+                                  }}
                                 >
                                   <i className="bi bi-trash me-1"></i> Excluir
                                 </button>
@@ -189,6 +197,55 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
           </div>
         </section>
       </div>
+
+      {/*  Modal de confirmação de exclusão */}
+      {showDeleteModal && (
+        <div
+          className="modal fade show"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+          onClick={(e) =>
+            e.target.classList.contains("modal") && setShowDeleteModal(false)
+          }
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header bg-danger bg-opacity-25">
+                <h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  onClick={() => setShowDeleteModal(false)}
+                ></button>
+              </div>
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja excluir este médico?
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => setShowDeleteModal(false)}
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={() => deleteDoctor(selectedDoctorId)}
+                >
+                  <i className="bi bi-trash me-1"></i> Excluir
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }

src/pages/EditPage.jsx

@@ -4,7 +4,7 @@ import PatientForm from '../components/patients/PatientForm'
 
 import {useEffect, useState} from 'react'
 
-const EditPage = ( {id}) => {
+const EditPage = ( {id, setCurrentPage}) => {
 
   const [PatientToPUT, setPatientPUT] = useState({})
 
@@ -22,9 +22,10 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt
   .then(data => setPatientPUT(data))
   .catch(error => console.log('error', error));
     
-}, [])
+}, [id,requestOptions])
+
 const HandlePutPatient = async () => { 
-  //alert(`Atualizando paciente "${PatientToPUT.nome}" com sucesso`);
+  
 
   var myHeaders = new Headers();
   myHeaders.append("Authorization", "Bearer <token>");
@@ -50,26 +51,23 @@ const HandlePutPatient = async () => {
     // se o backend retorna JSON
     const result = await response.json(); 
     console.log("ATUALIZADO COM SUCESSO", result);
-
+    
-    return result;  // <- importante!
+    return result; 
   } catch (error) {
     console.error("Erro ao atualizar paciente:", error);
     throw error;
   }
+
+  
 };
 
-
-
   return (
-
     <div>
 
-    
-
     <PatientForm
     onSave={HandlePutPatient}
-    onCancel={console.log('Não atualizar')}
+    onCancel={() => {setCurrentPage('table')}}
-   
+   setCurrentPage={setCurrentPage}
     formData={PatientToPUT}
     setFormData={setPatientPUT}
     />

src/pages/PatientCadastroManager.jsx

@@ -1,11 +1,8 @@
-import { useState } from 'react';
+import {useState} from 'react';
-
-
 import PatientForm from '../components/patients/PatientForm';
 
 function PatientCadastroManager( {setCurrentPage} ) {
  
- 
 
   const [formData, setFormData] = useState({})
   var myHeaders = new Headers();
@@ -30,6 +27,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
     const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions);
     const result = await response.json();   
     console.log("Paciente salvo no backend:", result);
+    setCurrentPage('table')
     return result;
   } catch (error) {
     console.error("Erro ao salvar paciente:", error);

src/pages/Table.jsx

@@ -1,295 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-function TablePaciente({ setCurrentPage, setPatientID }) {
-  const [pacientes, setPacientes] = useState([]);
-  const [search, setSearch] = useState("");
-  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
-  const [filtroVIP, setFiltroVIP] = useState(false);
-  const [filtroAniversariante, setFiltroAniversariante] = useState(false);
-
-
-  const GetAnexos = async (id) => {
-    var myHeaders = new Headers();
-    myHeaders.append("Authorization", "Bearer <token>");
-
-  var requestOptions = {
-    method: 'GET',
-    headers: myHeaders,
-    redirect: 'follow'
-  };
-  try {
-    const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`, requestOptions);
-    const result = await response.json();
-
-    return result.data; // agora retorna corretamente
-  } catch (error) {
-    console.log('error', error);
-    return [];
-  }
- 
-  }
-
-  const DeleteAnexo = async (patientID) => {
-
-  
-   const RespostaGetAnexos = await GetAnexos(patientID)
-
-   for(let i = 0; i < RespostaGetAnexos.length; i++){
-
-    const idAnexo = RespostaGetAnexos[i].id;
-
-    console.log('anexos',RespostaGetAnexos)
-
-
-      var myHeaders = new Headers();
-    myHeaders.append("Authorization", "Bearer <token>");
-
-    var requestOptions = {
-      method: 'DELETE',
-      headers: myHeaders,
-      redirect: 'follow'
-    };
-
-    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`, requestOptions)
-      .then(response => response.text())
-      .then(result => console.log('anexo excluido com sucesso',result))
-      .catch(error => console.log('error', error));
-    
-    }
-
-  }
-
-  // Função para excluir paciente
-  const deletePatient = async (id) => {
-    DeleteAnexo(id)
-
-    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
-
-    if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
-
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      requestOptionsDelete
-    )
-      .then((response) => response.text())
-      .then((mensage) => console.log(mensage))
-      .catch((error) => console.log("Deu problema", error));
-  };
-
- 
-
-  // Requisição inicial para buscar pacientes
-  useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
-      .then((response) => response.json())
-      .then((result) => setPacientes(result["data"]))
-      .catch((error) =>
-        console.log("Erro para encontrar pacientes no banco de dados", error)
-      );
-  }, []);
-
-  // Função para verificar se hoje é aniversário do paciente
-  const ehAniversariante = (dataNascimento) => {
-    if (!dataNascimento) return false;
-    const hoje = new Date();
-    const nascimento = new Date(dataNascimento);
-
-    return (
-      hoje.getDate() === nascimento.getDate() &&
-      hoje.getMonth() === nascimento.getMonth()
-    );
-  };
-
-
-  const pacientesFiltrados = pacientes.filter((paciente) => {
-    const texto = `${paciente.nome}`.toLowerCase();
-
-    const passaBusca = texto.includes(search.toLowerCase());
-    const passaVIP = filtroVIP ? paciente.vip === true : true;
-    const passaConvenio =
-      filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
-    const passaAniversario = filtroAniversariante
-      ? ehAniversariante(paciente.data_nascimento)
-      : true;
-
-    return passaBusca && passaVIP && passaConvenio && passaAniversario;
-  });
-
-  return (
-    <>
-      <div className="page-heading">
-        <h3>Lista de Pacientes</h3>
-      </div>
-      <div className="page-content">
-        <section className="row">
-          <div className="col-12">
-            <div className="card">
-              <div className="card-header d-flex justify-content-between align-items-center">
-                <h4 className="card-title mb-0">Pacientes Cadastrados</h4>
-                <button
-                  className="btn btn-primary"
-                  onClick={() => setCurrentPage("form-layout")}
-                >
-                  <i className="bi bi-plus-circle"></i> Adicionar Paciente
-                </button>
-              </div>
-
-              <div className="card-body">
-                <div className="card p-3 mb-3">
-                  <h5 className="mb-3">
-                    <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
-                  </h5>
-
-                  <div
-                    className="d-flex flex-nowrap align-items-center gap-2"
-                    style={{ overflowX: "auto", paddingBottom: "6px" }}
-                  >
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="Buscar por nome..."
-                      value={search}
-                      onChange={(e) => setSearch(e.target.value)}
-                      style={{
-                        minWidth: 250,
-                        maxWidth: 300,
-                        width: 260,
-                        flex: "0 0 auto",
-                      }}
-                    />
-
-                    <select
-                      className="form-select"
-                      value={filtroConvenio}
-                      onChange={(e) => setFiltroConvenio(e.target.value)}
-                      style={{
-                        minWidth: 200,
-                        width: 180,
-                        flex: "0 0 auto",
-                      }}
-                    >
-                      <option>Todos os Convênios</option>
-                      <option>Bradesco Saúde</option>
-                      <option>Hapvida</option>
-                      <option>Unimed</option>
-                    </select>
-
-                    <button
-                      className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
-                        }`}
-                      onClick={() => setFiltroVIP(!filtroVIP)}
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
-                    >
-                      <i className="bi bi-award me-1"></i> VIP
-                    </button>
-
-                    <button
-                      className={`btn ${filtroAniversariante
-                        ? "btn-primary"
-                        : "btn-outline-primary"
-                        }`}
-                      onClick={() =>
-                        setFiltroAniversariante(!filtroAniversariante)
-                      }
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
-                    >
-                      <i className="bi bi-calendar me-1"></i> Aniversariantes
-                    </button>
-                  </div>
-                </div>
-
-
-                <div className="table-responsive">
-                  <table className="table table-striped table-hover">
-                    <thead>
-                      <tr>
-                        <th>Nome</th>
-                        <th>CPF</th>
-                        <th>Email</th>
-                        <th>Telefone</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {pacientesFiltrados.length > 0 ? (
-                        pacientesFiltrados.map((paciente) => (
-                          <tr key={paciente.id}>
-                            <td>{paciente.nome}</td>
-                            <td>{paciente.cpf}</td>
-                            <td>{paciente.email}</td>
-                            <td>{paciente.telefone}</td>
-                            <td>
-                              <span
-                                className={`badge ${paciente.ativo === "ativo"
-                                  ? "bg-success"
-                                  : "bg-danger"
-                                  }`}
-                              >
-                                {paciente.ativo}
-                              </span>
-                            </td>
-                            <td>
-                              <div className="d-flex gap-2">
-
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#E6F2FF",
-                                    color: "#004085",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("details-page-paciente");
-                                    setPatientID(paciente.id);
-                                  }}
-                                >
-                                  <i className="bi bi-eye me-1"></i> Ver Detalhes
-                                </button>
-
- 
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#FFF3CD",
-                                    color: "#856404",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("edit-page-paciente");
-                                    setPatientID(paciente.id);
-                                  }}
-                                >
-                                  <i className="bi bi-pencil me-1"></i> Editar
-                                </button>
-
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#F8D7DA",
-                                    color: "#721C24",
-                                  }}
-                                  onClick={() => deletePatient(paciente.id)}
-                                >
-                                  <i className="bi bi-trash me-1"></i> Excluir
-                                </button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))
-                      ) : (
-                        <tr>
-                          <td colSpan="8" className="text-center">
-                            Nenhum paciente encontrado.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </>
-  );
-}
-
-export default TablePaciente;