Adição das rotas com react-router

src/App.js

@@ -1,66 +1,42 @@
-import React, { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Sidebar from './components/Sidebar';
-//import Header from './components/Header';
-import TablePaciente from "./pages/Table"; 
-
-import Inicio from './pages/Inicio';
-import PatientCadastroManager from './pages/PatientCadastroManager';
-import EditPage from './pages/EditPage';
-import DoctorEditPage from './pages/DoctorEditPage';
-
-import Details from './pages/Details';
-import DoctorDetails from './pages/DoctorDetails';
-
-import DoctorTable from './pages/DoctorTable';
-import DoctorCadastroManager from './pages/DoctorCadastroManager';
-import Agendamento from './pages/Agendamento'
 
+import Sidebar from "./components/Sidebar";
+import Inicio from "./pages/Inicio";
+import TablePaciente from "./pages/TablePaciente";
+import PatientCadastroManager from "./pages/PatientCadastroManager";
+import DoctorCadastroManager from "./pages/DoctorCadastroManager";
+import DoctorTable from "./pages/DoctorTable";
+import Agendamento from "./pages/Agendamento";
 import LaudoManager from "./pages/LaudoManager";
+import Details from "./pages/Details";
+import EditPage from "./pages/EditPage";
+import DoctorDetails from "./pages/DoctorDetails";
+import DoctorEditPage from "./pages/DoctorEditPage";
 
 function App() {
-  const [isSidebarActive] = useState(true);
-  const [currentPage, setCurrentPage] = useState('Inicio');
-  const [patientID, setPatientID] = useState(null);
-
-
-  const renderPageContent = () => {
-    switch (currentPage) {
-      case 'Inicio':
-        return <Inicio setCurrentPage={setCurrentPage} />;
-      case 'agendamento':
-        return <Agendamento/>;
-      case 'form-layout':
-        return <PatientCadastroManager setCurrentPage={setCurrentPage}/>;
-      case 'doctor-form-layout':
-        return <DoctorCadastroManager />;
-      case 'table':
-        return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
-      case 'doctor-table':
-        return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
-      case 'details-page-paciente':
-        return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
-      case 'details-page-doctor':
-        return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
-      case 'edit-page-paciente':
-        return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
-      case 'edit-page-doctor':
-        return <DoctorEditPage id={patientID} />;
-      case 'laudo-manager':
-        return <LaudoManager />;
-      default:
-        return <Inicio setCurrentPage={setCurrentPage} />;
-    }
-  };
-
   return (
-    <div id="app" className={isSidebarActive ? 'active' : ''}>
+    <Router>
-      <Sidebar isSidebarActive={isSidebarActive} setCurrentPage={setCurrentPage} />
+      <div id="app" className="active">
-      <div id="main">
+        <Sidebar />
-        
+        <div id="main">
-        {renderPageContent()}
+          <Routes>
+            <Route path="/" element={<Inicio />} />
+            <Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
+            <Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
+            <Route path="/pacientes" element={<TablePaciente />} />
+            <Route path="/medicos" element={<DoctorTable />} />
+            <Route path="/pacientes/:id" element={<Details />} />
+            <Route path="/pacientes/:id/edit" element={<EditPage />} />
+            <Route path="/medicos/:id" element={<DoctorDetails />} />
+            <Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
+            <Route path="/agendamento" element={<Agendamento />} />
+            <Route path="/laudo" element={<LaudoManager />} />
+            <Route path="*" element={<h2>Página não encontrada</h2>} />
+          </Routes>
+        </div>
       </div>
-    </div>
+    </Router>
   );
 }
 
-export default App;
+export default App;

src/components/Sidebar.js

@@ -1,131 +0,0 @@
-import React, { useState } from 'react';
-// ADIÇÃO 1: Importar o arquivo JSON com os itens do menu
-import menuItems from '../data/sidebar-items.json'; // <-- ATENÇÃO: ajuste o caminho para o seu arquivo!
-
-// ADIÇÃO 2: A função agora precisa receber 'props' para ter acesso ao setCurrentPage
-function Sidebar(props) { 
-  const [isActive, setIsActive] = useState(true);
-  const [openSubmenu, setOpenSubmenu] = useState(null);
-
-  const toggleSidebar = () => {
-    setIsActive(!isActive);
-  };
-
-  const handleSubmenuClick = (submenuName) => {
-    setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
-  };
-
-  // =====================================================
-  // renderLink atualizado para suportar Table.jsx
-  // =====================================================
-  const renderLink = (item) => {
-    if (item.url && !item.url.includes('.html') && !item.url.startsWith('http')) {
-      return (
-        <a
-          href="#"
-          className="sidebar-link"
-          onClick={(e) => {
-            e.preventDefault();
-            props.setCurrentPage(item.url); // agora passa "table" corretamente
-          }}
-        >
-          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-          <span>{item.name}</span>
-        </a>
-      );
-    }
-    return (
-      <a href={item.url} className="sidebar-link">
-        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-        <span>{item.name}</span>
-      </a>
-    );
-  };
-
-  return (
-    <div id="sidebar" className={isActive ? 'active' : ''}>
-      <div className="sidebar-wrapper active">
-        <div className="sidebar-header">
-          <div className="d-flex justify-content-between">
-            <div className="logo">
-              {/* Logo volta pro Dashboard */}
-              <a
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  props.setCurrentPage('dashboard');
-                }}
-              >
-                <h1>MediConnect</h1>
-              </a>
-            </div>
-            <div className="toggler">
-              <a
-                href="#"
-                className="sidebar-hide d-xl-none d-block"
-                onClick={toggleSidebar}
-              >
-                <i className="bi bi-x bi-middle"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <div className="sidebar-menu">
-          <ul className="menu">
-            {menuItems.map((item, index) => {
-              if (item.isTitle) {
-                return (
-                  <li key={index} className="sidebar-title">
-                    {item.name}
-                  </li>
-                );
-              }
-              if (item.submenu) {
-                return (
-                  <li
-                    key={index}
-                    className={`sidebar-item has-sub ${
-                      openSubmenu === item.key ? 'active' : ''
-                    }`}
-                  >
-                    <a
-                      href="#"
-                      className="sidebar-link"
-                      onClick={() => handleSubmenuClick(item.key)}
-                    >
-                      <i className={`bi bi-${item.icon}`}></i>
-                      <span>{item.name}</span>
-                    </a>
-                    <ul
-                      className={`submenu ${
-                        openSubmenu === item.key ? 'active' : ''
-                      }`}
-                    >
-                      {item.submenu.map((subItem, subIndex) => (
-                        <li key={subIndex} className="submenu-item">
-                          {renderLink(subItem)}
-                        </li>
-                      ))}
-                    </ul>
-                  </li>
-                );
-              }
-              return (
-                <li key={index} className="sidebar-item">
-                  {renderLink(item)}
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-
-        <button className="sidebar-toggler btn x">
-          <i data-feather="x"></i>
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default Sidebar;

src/components/doctors/DoctorForm.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-
+import {Link} from 'react-router-dom'
 
 function DoctorForm({ onSave, onCancel, PatientDict }) {
 
@@ -458,9 +458,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
         <button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
           Salvar Paciente
         </button>
-        <button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+        <Link to={'/medicos'}>
-          Cancelar
+          <button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
-        </button>
+            Cancelar
+          </button>
+        </Link>
       </div>
 
     </div>

src/components/patients/PatientForm.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import {Link} from 'react-router-dom'
 
 function PatientForm({ onSave, onCancel, formData, setFormData }) {
   const [errorModalMsg, setErrorModalMsg] = useState("");
@@ -615,11 +616,15 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         <button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
           Salvar Paciente
         </button>
-        <button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+       
-          Cancelar
+       <Link to='/'>
-        </button>
+          <button className="btn btn-light"  style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+            Cancelar
+          </button>
+        </Link>
       </div>
 
+
       {/* Modal para paciente existente */}
       {showModal && pacienteExistente && (
         <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
@@ -703,6 +708,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
                 <p style={{ color: '#111', fontSize: '1.4rem' }}>{errorModalMsg || '(Erro 404).Por favor, tente novamente mais tarde'}</p>
               </div>
               <div className="modal-footer">
+                
+                
                 <button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
                   Fechar
                 </button>

src/data/sidebar-items.json

@@ -6,43 +6,43 @@
 
   {
     "name":"Início",
-    "url": "Inicio",
+    "url": "/",
     "icon": "house"
   },
 
   {
     "name": "Cadastro de Pacientes",
-    "url": "form-layout",
+    "url": "/pacientes/cadastro",
     "icon": "heart-pulse-fill"
   },
 
   {
     "name": "Cadastro do Médico",
-    "url": "doctor-form-layout",
+    "url": "/medicos/cadastro",
     "icon": "capsule"
   },
 
   {
     "name": "Lista de Pacientes",
     "icon": "clipboard-heart-fill",
-    "url": "table"
+    "url": "/pacientes"
   },
 
   {
     "name": "Lista de Médico",
     "icon": "hospital-fill",
-    "url": "doctor-table"
+    "url": "/medicos"
   }, 
   {
     "name": "Agendar consulta",
     "icon": "calendar-plus-fill",
-    "url": "agendamento"
+    "url": "/agendamento"
   },
   
   {
     "name": "Laudo do Paciente",
     "icon": "table",
-    "url": "laudo-manager"
+    "url": "/laudo"
   }
 
 ]

src/pages/DoctorTable.jsx

@@ -42,7 +42,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
   useEffect(() => {
     fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
       .then((response) => response.json())
-      .then((result) => setMedicos(result["data"]))
+      .then((result) => console.log('nada'))
       .catch((error) =>
         console.log("Erro para encontrar médicos no banco de dados", error)
       );

src/pages/Inicio.jsx

@@ -11,7 +11,8 @@ function Inicio({ setCurrentPage }) {
       try {
         const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
         const data = await res.json();
-        setPacientes(data.data);
+        console.log(data)
+        //setPacientes(data.data);
       } catch (error) {
         console.error("Erro ao buscar pacientes:", error);
       }

src/pages/Table.jsx

@@ -1,353 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-function TablePaciente({ setCurrentPage, setPatientID }) {
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deleteId, setDeleteId] = useState(null);
-  const [pacientes, setPacientes] = useState([]);
-  const [search, setSearch] = useState("");
-  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
-  const [filtroVIP, setFiltroVIP] = useState(false);
-  const [filtroAniversariante, setFiltroAniversariante] = useState(false);
-
-  // Estado para controlar a exibição do erro 404
-  const [showError404, setShowError404] = 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);
-      if (!response.ok) {
-        setShowError404(true);
-        setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
-        throw new Error('Erro 404');
-      }
-      const result = await response.json();
-      return result.data;
-    } 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;
-
-      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 => {
-          if (!response.ok) {
-            setShowError404(true);
-            setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
-            throw new Error('Erro 404');
-          }
-          return response.text();
-        })
-        .then(result => console.log('anexo excluido com sucesso', result))
-        .catch(error => console.log('error', error));
-    }
-  }
-
-  const handleDeleteClick = (id) => {
-    setDeleteId(id);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDeletePatient = async () => {
-    if (!deleteId) return;
-    await DeleteAnexo(deleteId);
-    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${deleteId}`,
-      requestOptionsDelete
-    )
-      .then((response) => {
-        if (!response.ok) {
-          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000);
-          throw new Error('Erro 404');
-        }
-        return response.text();
-      })
-      .then((mensage) => console.log(mensage))
-      .catch((error) => console.log("Deu problema", error));
-    setShowDeleteModal(false);
-    setDeleteId(null);
-  };
-
-  const toggleVIP = async (id, atual) => {
-    const novoStatus = atual === true ? false : true;
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ vip: novoStatus }),
-      }
-    )
-      .then((response) => {
-        if (!response.ok) {
-          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000);
-          throw new Error('Erro 404');
-        }
-        return response.json();
-      })
-      .then(() => {
-        setPacientes((prev) =>
-          prev.map((p) => (p.id === id ? { ...p, vip: novoStatus } : p))
-        );
-      })
-      .catch((error) => console.log("Erro ao atualizar VIP:", error));
-  };
-
- 
-  useEffect(() => {
-    fetch("https://mock.apidog.com/m1053378-0-det/pacientes")
-      .then((response) => {
-        if (!response.ok) {
-          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000);
-          throw new Error('Erro 404');
-        }
-        return response.json();
-      })
-      .then((result) => setPacientes(result["data"]))
-      .catch((error) =>
-        console.log("Erro para encontrar pacientes no banco de dados", error)
-      );
-  }, []);
-
-  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 (
-    <>
-      {/* Modal de confirmação de exclusão */}
-      {showDeleteModal && (
-        <div className="modal fade show d-flex align-items-center justify-content-center" style={{ display: 'flex', backgroundColor: 'rgba(0,0,0,0.5)', position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 1050 }} tabIndex="-1">
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
-                <h5 className="modal-title text-dark">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" style={{ color: '#111' }}>
-                  Tem certeza que deseja excluir este paciente?
-                </p>
-              </div>
-              <div className="modal-footer">
-                <button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowDeleteModal(false)}>Cancelar</button>
-                <button type="button" className="btn btn-danger" onClick={confirmDeletePatient}>Excluir</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      <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">
-                {showError404 && (
-                  <div className="alert alert-danger" role="alert">
-                    (Erro 404). Por favor, tente novamente mais tarde.
-                  </div>
-                )}
-                <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>
-                        <th>Ações</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={() => handleDeleteClick(paciente.id)}
-                                >
-                                  <i className="bi bi-trash me-1"></i> Excluir
-                                </button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))
-                      ) : (
-                        <tr>
-                          <td colSpan="6" className="text-center">
-                            Nenhum paciente encontrado.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </>
-  );
-}
-
-export default TablePaciente;