Concertar Agendamento

package.json

@@ -13,6 +13,7 @@
     "apexcharts": "^5.3.4",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
+    "dayjs": "^1.11.18",
     "flatpickr": "^4.6.13",
     "perfect-scrollbar": "^1.5.6",
     "quill": "^2.0.3",

src/App.js

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import Sidebar from './components/Sidebar';
 import Header from './components/Header';
-import Table from "./pages/Table"; // <-- ADIÇÃO AQUI
-import DataTable from "./pages/DataTable";
-import Files from "./pages/files";
-import EmailApp from "./pages/EmailApp";
-//import ChatApp from "./pages/ChatApp";
-import GalleryApp from "./pages/GalleryApp";
+import Table from "./pages/Table"; 
+
+
 import FormLayout from './pages/FormLayout';
 import EditPage from './pages/EditPage';
-import PatientForm from "./components/patients/PatientForm";  
+
 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);
@@ -41,30 +41,17 @@ const renderPageContent = () => {
   else if(currentPage === 'doctor-table'){
     return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>
   }
-  else if (currentPage === 'data-table') {
-    return <DataTable />;
-  }
-  else if (currentPage === 'files') {
-    return <Files />;
-  }
-  else if (currentPage === 'email-app') {
-    return <EmailApp />;
-  }
-  //else if (currentPage === 'chat-app') {
-  //  return <ChatApp />;
-  //}
-  else if (currentPage === 'gallery-app') {
-    return <GalleryApp />;
-  }
   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 setCurrentPage={setCurrentPage} />
+  }
+  
 
 
     // Dashboard por padrão

src/components/AgendarConsulta/CardConsulta.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const CardConsulta = ( {DadosConsulta} ) => {
+  return (
+    <div >
+
+
+      {DadosConsulta.status !== 'vazio'?
+      <div className='cardconsulta'> 
+      <section className='cardconsulta-infosecundaria'>
+        <p>{DadosConsulta.horario}|GEAP| {DadosConsulta.medico}</p>
+      </section>
+
+      <section className='cardconsulta-infoprimaria'>
+        <p>{DadosConsulta.paciente} - {DadosConsulta.motivo} - 23 anos</p>
+      </section>
+      </div>
+      : 
+     null
+      
+        }
+
+
+    </div>
+  )
+}
+
+export default CardConsulta

src/components/AgendarConsulta/DadosConsultasMock.js

@@ -0,0 +1,101 @@
+let AgendamentosMes = {semana1:{
+    segunda:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    terca:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    quarta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    quinta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    sexta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }]
+
+
+}, semana2:{segunda:[     { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    terca:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', status:'vazio' },
+    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
+
+    quarta:[{ horario: '07:10', status:'vazio' }],
+
+    quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }],
+
+    sexta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }]}
+
+
+
+
+}
+
+
+export default AgendamentosMes

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -0,0 +1,115 @@
+import React from "react";
+import InputMask from "react-input-mask";
+import "../Estilo/styleagendamentos.css";
+
+const FormNovaConsulta = ({ onCancel }) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert("Agendamento salvo!");
+  };
+
+  return (
+    <div className="form-container">
+      
+
+      <form className="form-agendamento" onSubmit={handleSubmit}>
+        <h2 className="section-title">Informações do paciente</h2>
+
+        <label>Nome *</label>
+        <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+
+        <label>CPF do paciente</label>
+        <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
+          {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
+        </InputMask>
+
+        <label>RG</label>
+        <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+
+        <label>Data de nascimento *</label>
+        <input type="date" name="dataNascimento" required />
+
+        <label>Telefone</label>
+        <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
+          {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+        </InputMask>
+
+        <label>E-mail</label>
+        <input type="email" name="email" placeholder="Email" />
+
+        <label>Convênio</label>
+        <select name="convenio">
+          <option value="particular">Particular</option>
+          <option value="publico">Público</option>
+        </select>
+
+        <label>Matrícula</label>
+        <input type="text" name="matricula" placeholder="000000000" />
+
+        <label>Validade</label>
+        <InputMask mask="99/99/9999" placeholder="00/00/0000">
+          {(inputProps) => <input {...inputProps} type="text" name="validade" />}
+        </InputMask>
+
+        <h3 className="section-subtitle">Informações adicionais</h3>
+        <button type="button" className="btn-secondary">Documentos e anexos</button>
+
+        <h2 className="section-title">Informações do atendimento</h2>
+
+        <label>Nome do profissional *</label>
+        <input type="text" name="profissional" required />
+
+        <label>Tipo de atendimento *</label>
+        <input type="text" name="tipoAtendimento" required />
+
+        <label>Unidade *</label>
+        <select name="unidade">
+          <option value="centro">Núcleo de Especialidades Integradas</option>
+          <option value="leste">Unidade Leste</option>
+        </select>
+
+        <label>Data *</label>
+        <input type="date" name="dataAtendimento" required />
+
+        <label>Início *</label>
+        <input type="time" name="inicio" required />
+
+        <label>Término *</label>
+        <input type="time" name="termino" required />
+
+        <label>Profissional solicitante</label>
+        <select name="solicitante">
+          <option value="">Selecione o solicitante</option>
+          <option value="secretaria">Secretária</option>
+          <option value="medico">Médico</option>
+        </select>
+
+        <label>Observações</label>
+        <textarea name="observacoes"></textarea>
+
+        <label>
+          <input type="checkbox" name="reembolso" /> Pagamento via Reembolso
+        </label>
+
+        <label>
+          <input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
+        </label>
+
+        <h3 className="section-subtitle">Acessibilidade</h3>
+        <div className="btn-group">
+          <button type="button"></button>
+          <button type="button"></button>
+          <button type="button"></button>
+          <button type="button"></button>
+        </div>
+
+        <div className="form-actions">
+          <button type="submit" className="btn-primary">Salvar agendamento</button>
+          <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default FormNovaConsulta;

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import CardConsulta from './CardConsulta'
+import AgendamentosMes from './DadosConsultasMock'
+import "./styleTabelas/tabeladia.css";
+
+const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
+
+  let agendamentosDessaSemana = AgendamentosMes.semana1
+
+  let agendamentos = agendamentosDessaSemana.segunda
+
+  console.log(agendamentos)
+
+  return (
+   <div>
+  <table className='tabeladiaria'>
+    <thead>
+      <tr>
+        <th></th>
+        <th>{agendamentos.medico}</th>
+      </tr>
+    </thead>
+
+    <tbody>
+
+    {agendamentos.map((agendamento) => (
+      <tr key={agendamento.id} border='2' >
+        <td ><p>{agendamento.horario}</p></td>
+        <td className='mostrar-horario'>
+          
+          <div onClick={() => handleClickAgendamento(agendamento)} >
+          <CardConsulta DadosConsulta={agendamento} />
+          </div>
+
+        </td>
+      </tr>
+
+    ))}
+
+
+    </tbody>
+  </table>
+</div>
+
+  )
+}
+
+export default TabelaAgendamentoDia

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import AgendamentosMes from './DadosConsultasMock'
+import dayjs from "dayjs"
+import CardConsulta from './CardConsulta'
+import "./styleTabelas/tabelames.css";
+
+const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
+
+  const agendamentosMes = [0,1,2,3,4,5]
+
+  const dataHoje = dayjs()
+  const AnoAtual = dataHoje.year()
+  const mes = dataHoje.month() + 1
+
+  let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)
+
+  let segundas = ListaDiasDatas[0];
+  let tercas = ListaDiasDatas[1];
+  let quartas = ListaDiasDatas[2];
+  let quintas = ListaDiasDatas[3];
+  let sextas = ListaDiasDatas[4]
+
+  console.log(AnoAtual, 'ano', mes, 'mes')
+  
+  return (
+    <div>
+      <table className='tabelamensal'>
+        <tr>
+          <th>Seg</th>
+          <th>Ter</th>
+          <th>Qua</th>
+          <th>Qui</th>
+          <th>Sex</th>
+        </tr>
+
+        {Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
+          <tr key={index}>
+            <td>
+              <div>
+                <p>{segundas[index]}</p>
+                <div>
+                  {dias.segunda.slice(0,4).map((consulta, idx) => (
+                    <CardConsulta 
+                      key={idx}
+                      DadosConsulta={consulta} 
+                      className={`usuario-${consulta.cor || "default"}`} 
+                    />
+                  ))}
+                </div> 
+                {dias.segunda.length > 3 ? 
+                  <div><p>+ {dias.segunda.length - 3}</p></div> 
+                : null}
+              </div>
+            </td>
+            
+            <td>
+              <div>
+                {tercas[index]}
+                <div>
+                  {dias.terca.slice(0,4).map((consulta, idx) => (
+                    <CardConsulta 
+                      key={idx}
+                      DadosConsulta={consulta} 
+                      className={`usuario-${consulta.cor || "default"}`} 
+                    />
+                  ))}
+                </div> 
+                {dias.terca.length > 3 ? 
+                  <div><p>+ {dias.terca.length - 3}</p></div> 
+                : null}
+              </div>
+            </td>
+
+            <td>
+              <div>
+                {quartas[index]}
+                <div>
+                  {dias.quarta.slice(0,4).map((consulta, idx) => (
+                    <CardConsulta 
+                      key={idx}
+                      DadosConsulta={consulta} 
+                      className={`usuario-${consulta.cor || "default"}`} 
+                    />
+                  ))}
+                </div> 
+                {dias.quarta.length > 3 ? 
+                  <div><p>+ {dias.quarta.length - 3}</p></div> 
+                : null}
+              </div>
+            </td>
+
+            <td>
+              <div>
+                {quintas[index]}
+                <div>
+                  {dias.quinta.slice(0,4).map((consulta, idx) => (
+                    <CardConsulta 
+                      key={idx}
+                      DadosConsulta={consulta} 
+                      className={`usuario-${consulta.cor || "default"}`} 
+                    />
+                  ))}
+                </div> 
+                {dias.quinta.length > 3 ? 
+                  <div><p>+ {dias.quinta.length - 3}</p></div> 
+                : null}
+              </div>
+            </td>
+
+            <td>
+              <div>
+                {sextas[index]}
+                <div>
+                  {dias.sexta.slice(0,4).map((consulta, idx) => (
+                    <CardConsulta 
+                      key={idx}
+                      DadosConsulta={consulta} 
+                      className={`usuario-${consulta.cor || "default"}`} 
+                    />
+                  ))}
+                </div> 
+                {dias.sexta.length > 3 ? 
+                  <div><p>+ {dias.sexta.length - 3}</p></div> 
+                : null}
+              </div>
+            </td>
+          </tr>
+        ))}
+      </table>
+    </div>
+  )
+}
+
+export default TabelaAgendamentoMes

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Agendamento from '../../pages/Agendamento'
+import AgendamentosMes from './DadosConsultasMock'
+import CardConsulta from './CardConsulta'
+import "./styleTabelas/tabelasemana.css";
+
+const TabelaAgendamentoSemana = () => {
+
+  let AgendamentosDesseMes = AgendamentosMes
+
+  let AgendamentoSemana = AgendamentosDesseMes.semana1
+
+
+  let AgendamentosdeSegunda = AgendamentoSemana.segunda
+  let AgendamentosdeTerca = AgendamentoSemana.terca
+  let AgendamentosdeQuarta = AgendamentoSemana.quarta
+  let AgendamentosdeQuinta = AgendamentoSemana.quinta
+  let AgendamentosdeSexta = AgendamentoSemana.sexta
+
+
+  return (
+    <div >
+
+    <table className='tabelasemanal'>
+      <tr>
+        <th></th>
+        <th>Segunda</th>
+        <th>Terça</th>
+        <th>Quarta</th>
+        <th>Quinta</th>
+        <th>Sexta</th>
+      </tr>
+
+
+      {AgendamentosdeSegunda.map((consulta, index) => (
+
+        <tr key={index}>
+          <td>{consulta.horario}</td>
+          <td className='coluna-tipo1'> <CardConsulta DadosConsulta={AgendamentosdeSegunda[index]} /> </td>
+          <td> <CardConsulta DadosConsulta={AgendamentosdeTerca[index]} />   </td>
+          <td> <CardConsulta DadosConsulta={AgendamentosdeQuarta[index]} /> </td>
+          <td><CardConsulta DadosConsulta={AgendamentosdeQuinta[index]} /></td>
+          <td><CardConsulta DadosConsulta={AgendamentosdeSexta[index]} /></td>
+        </tr>
+      ))}
+
+
+    </table>
+
+    </div>
+  )
+}
+
+export default TabelaAgendamentoSemana

src/components/AgendarConsulta/styleTabelas/tabeladia.css

@@ -0,0 +1,72 @@
+.tabeladiaria {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  border-radius: 10px;
+  overflow: hidden; /* mantém o arredondado */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabeladiaria th, .tabeladiaria td {
+  padding: 9px;
+  text-align: left;
+  border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho */
+.tabeladiaria thead th {
+  background-color: #0078d7;
+  color: #ffffff;
+font-weight: 600;
+  border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
+}
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabeladiaria thead th:first-child {
+  border-left: none;
+}
+
+.tabeladiaria thead th:last-child {
+  border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabeladiaria tbody tr:nth-child(even) {
+  background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabeladiaria tbody tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabeladiaria .cardconsulta {
+  border-radius: 10px;
+  color: black;
+  height: 80px;
+  width: 100%;
+  padding: 8px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+  margin-top: 20px;
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+
+
+.mostrar-horario td, .mostrar-horario th {
+  padding: 4px 6px;
+  height: 30px;
+  border: 1px solid #e0e0e0;
+  text-align: center;
+}

src/components/AgendarConsulta/styleTabelas/tabelames.css

@@ -0,0 +1,150 @@
+.tabelamensal {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  border-radius: 10px;
+  overflow: hidden; /* mantém o arredondado */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabelamensal th, .tabelamensal td {
+  padding: 9px;
+  text-align: left;
+  border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho */
+.tabelamensal thead th {
+  background-color: #0078d7;
+  color: #0078d7;
+  font-weight: 600;
+  border-bottom: 2px solid #0078d7; /* borda inferior mais forte no cabeçalho */
+}
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabelamensal thead th:first-child {
+  border-left: none;
+}
+
+.tabelamensal thead th:last-child {
+  border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabelamensal tbody tr:nth-child(even) {
+  background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabelamensal tbody tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabelamensal .cardconsulta {
+  border-radius: 10px;
+  color: black;
+  height: 80px;
+  width: 100%;
+  padding: 12px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+  margin-top: 20px;
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+  
+.tabelamensal {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  border-radius: 10px;
+  overflow: hidden; /* mantém o arredondado */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+.tabelamensal th, .tabelamensal td {
+  padding: 9px;
+  text-align: left;
+  border: 1px solid #e0e0e0;
+}
+
+.tabelamensal th {
+  background-color: #0078d7;
+  color: #ffffff;
+  font-weight: 600;
+  border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
+}
+
+.tabelamensal td {
+  background-color: #f7f7f7;
+}
+
+.tabelamensal td:hover {
+  background-color: #f1f1f1;
+}
+
+/* Estilo geral do card de consulta */
+.tabelamensal .cardconsulta {
+  border-radius: 8px;
+  background-color: #fff;
+  padding: 6px;
+  margin: 4px 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  border-left: 5px solid transparent; /* espaço da borda colorida */
+}
+
+
+
+
+.usuario-azul {
+  background-color: #E3F2FD;
+  border-left: 4px solid #2196F3;
+  padding: 4px 8px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.usuario-verde {
+  background-color: #E8F5E9;
+  border-left: 4px solid #4CAF50;
+  padding: 4px 8px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.usuario-roxo {
+  background-color: #F3E5F5;
+  border-left: 4px solid #9C27B0;
+  padding: 4px 8px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.usuario-laranja {
+  background-color: #FFF3E0;
+  border-left: 4px solid #FF9800;
+  padding: 4px 8px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.usuario-default {
+  background-color: #FAFAFA;
+  border-left: 4px solid #BDBDBD;
+  padding: 4px 8px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}

src/components/AgendarConsulta/styleTabelas/tabelasemana.css

@@ -0,0 +1,82 @@
+.tabelasemanal {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  border-radius: 10px;
+  overflow: hidden; /* mantém o arredondado */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabelasemanal th, .tabelasemanal td {
+  padding: 9px;
+  text-align: left;
+  border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho da semanal */
+.tabelasemanal thead th,
+.tabelasemanal thead td,
+.tabelasemanal tr:first-child th,
+.tabelasemanal tr:first-child td {
+  background-color: #0078d7 !important;
+  color: #ffffff !important;
+  font-weight: 600;
+  text-align: center;
+  border-bottom: 2px solid #005a9e;
+}
+
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabelasemanal thead th:first-child {
+  border-left: none;
+}
+
+.tabelasemanal thead th:last-child {
+  border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabelasemanal tbody tr:nth-child(even) {
+  background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabelasemanal tbody tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabelasemanal .cardconsulta {
+  border-radius: 10px;
+  color: black;
+  height: 80px;
+  width: 100%;
+  padding: 12px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+  margin-top: 20px;
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+
+.tabelasemanal tr:nth-child(even) {
+  background-color: #e7e7e7a6 !important;
+  margin-left: 10px !important;
+}
+
+.tabelasemanal tr:nth-child(odd) {
+  background-color: #ffffff !important;
+}
+
+.tabelasemanal tr:hover {
+  background-color: #f1f1f1 !important;
+}

src/components/Estilo/styleagendamentos.css

@@ -0,0 +1,108 @@
+.form-container {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 25px;
+  background: #f5f8ff;
+  border-radius: 12px;
+  font-family: Arial, sans-serif;
+}
+
+.form-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: #1e3a8a;
+  margin-bottom: 20px;
+}
+
+.form-agendamento label {
+  display: block;
+  margin-top: 12px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-agendamento input,
+.form-agendamento select,
+.form-agendamento textarea {
+  width: 100%;
+  padding: 8px;
+  margin-top: 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.section-title {
+  font-size: 20px;
+  margin-top: 25px;
+  color: #1e40af;
+}
+
+.section-subtitle {
+  font-size: 16px;
+  margin-top: 20px;
+  color: #374151;
+}
+
+.btn-group button {
+  margin-right: 8px;
+  padding: 8px 12px;
+  border: 1px solid #1e3a8a;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.btn-group button:hover {
+  background: #e0e7ff;
+}
+
+.form-actions {
+  margin-top: 25px;
+  display: flex;
+  gap: 12px;
+}
+
+.btn-primary {
+  background: #1e3a8a;
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #172554;
+}
+
+.btn-cancel {
+  background: #e5e7eb;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-cancel:hover {
+  background: #d1d5db;
+}
+
+.btn-secondary {
+  margin: 10px 0;
+  background: #f3f4f6;
+  padding: 8px 14px;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+
+.cardconsulta-infosecundaria{
+  font-size: small;
+}
+

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,162 @@
+import React from 'react'
+
+import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
+import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
+import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs'
+import "./style/Agendamento.css";
+
+const Agendamento = () => {
+
+  
+    const ListarDiasdoMes = (ano, mes) => {
+      let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
+
+      
+      const base = dayjs(`${ano}-${mes}-01`)
+  
+      const DiasnoMes= base.daysInMonth()
+      for(let d = 1; d <= DiasnoMes; d++){
+        
+        const data = dayjs(`${ano}-${mes}-${d}`)
+  
+        const dia = data.format('dddd')
+  
+        switch(dia){
+          case'Monday':
+          segundas.push(d)
+          break
+          
+          case'Tuesday':
+          tercas.push(d)
+          break
+          
+          case'Wednesday':
+          quartas.push(d)
+          break
+  
+          case'Thursday':
+          quintas.push(d)
+          break
+  
+          case'Friday':
+          sextas.push(d)
+        }}
+
+        let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas]
+        console.log('dentro da função', ListaDiasDatas)
+      
+      return ListaDiasDatas
+      }
+
+  const [tabela, setTabela] = useState('diario')
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
+
+  const handleClickAgendamento = (agendamento) => {
+  
+    if(agendamento.status !== 'vazio')return
+
+    else{
+      setPageConsulta(true)
+    }
+  }
+
+  const handleClickCancel = () => {
+    setPageConsulta(false)
+  }
+
+
+
+  return(
+  <div>
+    <h1>Agendar nova consulta</h1>
+
+  {!PageNovaConsulta? (
+    
+    <div className='atendimento-eprocura'>
+
+      <div className='busca-atendimento'>
+        <div className="">
+          <i className="fa-solid fa-calendar-day"></i>
+          <input type="text" placeholder="Buscar atendimento" />
+        </div>
+
+        <div>
+          <select>
+            <option value="" disabled selected>Agendar</option>
+            <option value="">Atendimento</option>
+            <option value="">Sessões</option>
+            <option value="">Urgência</option>
+          </select>
+        </div>
+      </div>
+      
+
+      <div className='unidade-selecionarprofissional'>
+        <select>
+          <option value="" disabled selected >Unidade</option>
+          <option value="">Unidade Central</option>
+          <option value="">Unidade Zona Norte</option>
+          <option value="">Unidade Zona Oeste</option>
+        </select>
+
+        <input type="text" placeholder='Selecionar profissional' />
+
+      </div>
+
+    <div className='diadia'>
+      <div>
+        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+        
+        onClick={() => setTabela("diario")}>
+          <i className="fa-solid fa-calendar-day"></i>
+          Dia
+        </button>
+        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+          <i className="fa-solid fa-calendar-day"></i>
+          Semana
+        </button>
+        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+          <i className="fa-solid fa-calendar-day"></i>
+          Mês
+        </button>
+
+        {tabela === "diario" && (
+          <TabelaAgendamentoDia
+            handleClickAgendamento={handleClickAgendamento}
+          />
+        )}
+
+        {tabela === 'semanal' && 
+          <TabelaAgendamentoSemana/>
+        }
+
+        {tabela === 'mensal' && (
+          <TabelaAgendamentoMes 
+            ListarDiasdoMes={ListarDiasdoMes}
+            aplicarCores={true}   // 🔹 Ativa a lógica de cores só no mensal
+          />
+        )}
+
+      </div>
+       </div>
+    </div>
+  ) : (
+
+    <FormNovaConsulta onCancel={handleClickCancel} />
+
+
+  )}
+</div>
+  
+  
+  
+  
+  
+  )
+}
+
+
+export default Agendamento

src/pages/style/Agendamento.css

@@ -0,0 +1,86 @@
+.filtros-container select,
+.filtros-container input {
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+.btn-buscar {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+
+.unidade-selecionarprofissional{
+  background-color: #fdfdfdde;
+  padding: 20px 10px;
+  display: flex;
+  border-radius:10px ;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  
+
+}
+
+.unidade-selecionarprofissional input,  .unidade-selecionarprofissional select {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 20%;
+}
+
+.unidade-selecionarprofissional select{
+  width: 7%;
+}
+
+.busca-atendimento{
+  display: flex;
+  flex-direction: row;
+  margin:10px;
+  justify-content: flex-end;
+}
+
+.busca-atendimento select{
+  padding:5px;
+  border-radius:8px ;
+  margin-left: 15px;
+  background-color: #0078d7;
+  color: white;
+  font-weight: bold;
+}
+
+.busca-atendimento input{
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 100%;
+}
+
+.btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames {
+  background-color: rgba(231, 231, 231, 0.808);
+  padding:8px 10px;
+  font-size: larger;
+  font-weight: bold;
+  border-style: hidden;
+}
+
+.btn-selecionar-tabeladia{
+  border-radius: 10px 0px 0px 10px;
+
+
+}
+
+.btn-selecionar-tabelames{
+  border-radius: 0px 10px 10px 0px;
+}
+
+
+.btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo{
+  background-color: lightcyan;
+  border-color: darkcyan;
+  font-weight: bolder;
+  
+
+}