Tabela semana e mes

src/components/AgendarConsulta/CardConsulta.jsx

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

src/components/AgendarConsulta/DadosConsultasMock.js

@@ -1,6 +1,6 @@
 let AgendamentosMes = {semana1:{
     segunda:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
-    { horario: '07:10', satus:'vazio' },
+    { 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'  },
@@ -21,11 +21,38 @@ let AgendamentosMes = {semana1:{
     { 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:{},
+    quarta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'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:{},
+    quinta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'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:{}
+    sexta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'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' },
@@ -37,10 +64,8 @@ let AgendamentosMes = {semana1:{
     { 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: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' },
-
+    { horario: '07:10', status:'vazio' },
-    terca:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
-    { horario: '07:10', satus:'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'  },
@@ -50,11 +75,22 @@ let AgendamentosMes = {semana1:{
     { 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:{},
+    terca:[   { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', motivo:'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', motivo:'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:{},
+    quarta:[{ horario: '07:10', motivo:'vazio' }],
 
-    sexta:{}}
+    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' }]}
 
 
 

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -1,8 +1,14 @@
 import React from 'react'
+import CardConsulta from './CardConsulta'
+import AgendamentosMes from './DadosConsultasMock'
 
-const TabelaAgendamentoDia = ({agendamentos, handleClickAgendamento}) => {
+const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
 
+  let agendamentosDessaSemana = AgendamentosMes.semana1
 
+  let agendamentos = agendamentosDessaSemana.segunda
+
+  console.log(agendamentos)
 
   return (
    <div>
@@ -22,12 +28,7 @@ const TabelaAgendamentoDia = ({agendamentos, handleClickAgendamento}) => {
         <td>
           
           <div onClick={() => handleClickAgendamento(agendamento)} >
-           <p>{agendamento.medico}</p>
+          <CardConsulta DadosConsulta={agendamento} />
-           <p>{agendamento.paciente}</p>
-           <p>{agendamento.status}</p>
-           <p>www</p>
-           
-
           </div>
 
         </td>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import AgendamentosMes from './DadosConsultasMock'
 import dayjs from "dayjs"
-
+import CardConsulta from './CardConsulta'
 const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
 
   const agendamentosMes = [0,1,2,3,4,5]
@@ -9,7 +9,6 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
 
 
 
-
     const dataHoje = dayjs()
     const AnoAtual = dataHoje.year()
 
@@ -17,7 +16,6 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
 
   let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)
 
-    console.log(ListaDiasDatas)
 
    let segundas = ListaDiasDatas[0];
    let tercas = ListaDiasDatas[1];
@@ -36,14 +34,80 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                 <th>Sex</th>
             </tr>
 
-            {agendamentosMes.map((semana, index) => (
+            {Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
               
-              <tr key={semana}>
+              <tr key={index}>
-                <td>{segundas[semana]}</td>
+                <td>
-                <td>{tercas[semana]}</td>
+                  <div>
-                <td>{quartas[semana]}</td>
+                  {segundas[index]}
-                <td>{quintas[semana]}</td>
+
-                <td>{sextas[semana]}</td>                
+                  <div>
+                    {dias.segunda.map((consulta) => (
+                      <CardConsulta DadosConsulta={consulta} />
+                    ) )}
+
+                  </div> 
+
+                  </div>
+                </td>
+                
+                <td>
+                 
+                  <div>
+                    {tercas[index]}
+
+                    <div>
+                        {dias.terca.map((consulta) => (
+                          <CardConsulta DadosConsulta={consulta} />
+                        ) )}
+
+                    </div> 
+
+                  </div>
+                </td>
+
+                <td>
+                
+                  <div>
+                  {quartas[index]}
+
+                  <div>
+                    {dias.quarta.map((consulta) => (
+                      <CardConsulta DadosConsulta={consulta} />
+                    ) )}
+
+                  </div> 
+
+                  </div>
+                </td>
+                <td>
+                
+                  <div>
+                  {quintas[index]}
+
+                  <div>
+                    {dias.quinta.map((consulta) => (
+                      <CardConsulta DadosConsulta={consulta} />
+                    ) )}
+
+                  </div> 
+
+                  </div>
+                </td>
+                <td>
+                
+                  <div>
+                  {sextas[index]}
+
+                  <div>
+                    {dias.sexta.map((consulta) => (
+                      <CardConsulta DadosConsulta={consulta} />
+                    ) )}
+
+                  </div> 
+
+                  </div>
+                </td>                
               </tr>
             ))}
 

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import Agendamento from '../../pages/Agendamento'
 import AgendamentosMes from './DadosConsultasMock'
+import CardConsulta from './CardConsulta'
 const TabelaAgendamentoSemana = () => {
 
   let AgendamentosDesseMes = AgendamentosMes
 
   let AgendamentoSemana = AgendamentosDesseMes.semana1
 
+
   let AgendamentosdeSegunda = AgendamentoSemana.segunda
   let AgendamentosdeTerca = AgendamentoSemana.terca
   let AgendamentosdeQuarta = AgendamentoSemana.quarta
@@ -19,6 +21,7 @@ const TabelaAgendamentoSemana = () => {
 
     <table>
       <tr>
+        <th></th>
         <th>Segunda</th>
         <th>Terça</th>
         <th>Quarta</th>
@@ -26,14 +29,20 @@ const TabelaAgendamentoSemana = () => {
         <th>Sexta</th>
       </tr>
 
-      {AgendamentosdeSegunda.map((horario, index) => (
+
+      {AgendamentosdeSegunda.map((consulta, index) => (
 
         <tr key={index}>
-          <td>{horario}</td>
+          <td>{consulta.horario}</td>
-          <td>{index}</td>
+          <td> <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>

src/pages/Agendamento.jsx

@@ -18,11 +18,10 @@ const Agendamento = ( {setCurrentPage }) => {
   
       const DiasnoMes= base.daysInMonth()
       for(let d = 1; d <= DiasnoMes; d++){
-        console.log(d)
+        
         const data = dayjs(`${ano}--${mes}--${d}`)
   
         const dia = data.format('dddd')
-        console.log(dia)
   
         switch(dia){
           case'Monday':
@@ -51,21 +50,21 @@ const Agendamento = ( {setCurrentPage }) => {
       }
 
   const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(true)
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
-    if(agendamento.status !== 'vazio'){alert('tem')}
+    if(agendamento.motivo !== 'vazio'){alert('tem')}
 
     else{
-      setPageConsulta(false)
+      setPageConsulta(true)
       
     }
 
   }
 
   const handleClickCancel = () => {
-    setPageConsulta(true)
+    setPageConsulta(false)
   }
 
   let agendamentos = [
@@ -88,7 +87,7 @@ const Agendamento = ( {setCurrentPage }) => {
   <div>
     <h1>Agendar nova consulta</h1>
 
-  {PageNovaConsulta? (
+  {!PageNovaConsulta? (
     
     <div>
       
@@ -130,7 +129,7 @@ const Agendamento = ( {setCurrentPage }) => {
 
         {tabela === "diario" && (
           <TabelaAgendamentoDia
-            agendamentos={agendamentos}
+            
             handleClickAgendamento={handleClickAgendamento}
           />
         )}