Inicio do agendamento

src/App.js

@@ -14,7 +14,7 @@ import Details from './pages/Details';
 //import DoctorEditPage from './components/doctors/DoctorEditPage';
 import DoctorTable from './pages/DoctorTable';
 import DoctorFormLayout from './pages/DoctorFormLayout';
-
+import Agendamento from './pages/Agendamento'
 function App() {
   const [isSidebarActive, setIsSidebarActive] = useState(true);
   const [currentPage, setCurrentPage] = useState('table ');
@@ -59,11 +59,13 @@ const renderPageContent = () => {
   else if(currentPage === 'edit-page-paciente'){
     return <EditPage  id={patientID} />
   }
- // else if(currentPage === 'doctor-form-layout'){
+ 
-  //  return <DoctorEditPage  id={patientID} />
-  //}
   else if(currentPage === 'details-page-paciente'){
     return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
+  }
+  else if(currentPage === 'agendamento-page'){
+    return <Agendamento/>
+
   }
 
 

src/components/TabelaAgendamentoDia.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const TabelaAgendamentoDia = (agendamentos) => {
+  return (
+    <div>
+
+        <table border='2'>
+
+        {agendamentos.map((agendamento) => (
+          <tr>
+            <td>{agendamento.horario}</td>
+            <td>
+              <div>{agendamento.paciente}</div>
+            </td>
+          </tr>
+
+
+        ))}
+
+      </table>
+
+    </div>
+  )
+}
+
+export default TabelaAgendamentoDia

src/data/sidebar-items.json

@@ -26,6 +26,11 @@
     "name": "Lista de Médico",
     "icon": "table",
     "url": "doctor-table"
+  }, 
+  {
+    "name": "Agendar consulta",
+    "icon": "table",
+    "url": "agendamento-page"
   }
 
 ]

src/pages/Agendamento.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import DoctorTable from './DoctorTable';
+import TabelaAgendamentoDia from '../components/TabelaAgendamentoDia';
+import { useState } from 'react';
+
+const Agendamento = () => {
+
+  let agendamentos = [
+    { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado' },
+    { horario: '07:10', medico: 'Rogerio Cena', paciente: 'João Pedro', status: 'marcado' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido' },
+    { horario: '07:40', medico: 'Rogerio Cena', paciente: 'Mariana Souza', status: 'marcado' },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido' }
+  ]
+
+  const [tabela, setTabela] = useState('diario')
+
+
+
+
+  return (
+    <div>
+      <h1>Unidades</h1>
+
+      <div>
+        <select name="" id="" div class>
+          <option value="">Unidade Central</option>
+          <option value="">Unidade Zona Norte</option>
+          <option value="">Unidade Zona Oeste</option>
+        </select>
+      </div>
+
+      <div className="input-container">
+        <i className="fa-solid fa-calendar-day"></i>
+        <input type="text" placeholder="Buscar atendimento"/>
+      </div>
+
+      <div>
+        <select name="" id="">
+          <option value="">Atendimento</option>
+          <option value="">Sessões</option>
+          <option value="">Urgência</option>
+        </select>
+      </div>
+
+      <div>
+        <button class="btn-buscar">
+          <i class="fa-solid fa-calendar-day"></i>
+          dia
+        </button>
+        <button class="btn-buscar">
+          <i class="fa-solid fa-calendar-day"></i>
+          semana
+        </button>
+        <button class="btn-buscar">
+          <i class="fa-solid fa-calendar-day"></i>
+          mes
+        </button>
+
+
+
+
+
+
+      </div>
+
+
+
+
+
+
+
+    </div>
+  )
+}
+
+
+
+export default Agendamento