Finalização das agendas

src/components/AgendarConsulta/CardConsulta.jsx

@@ -17,16 +17,18 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
    
   // Status (agendado, confirmado, realizado, cancelado)
   useEffect(() => {
- BuscarMedicoEPaciente()
+    if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()}
+ 
 }, [])
 
+
   return (
-    <div className={`container-cardconsulta-${TabelaAgendamento}`}>
+    <div className={`container-cardconsulta-${TabelaAgendamento}`} onClick={() => console.log('Clicou n aconsulta')}>
 
       {DadosConsulta.status !== 'vazio'?
       <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
       <section className='cardconsulta-infosecundaria'>
-        <p>{DadosConsulta.horario}|GEAP| {Medico?.full_name}</p>
+        <p>{DadosConsulta.horario} {Medico?.full_name}</p>
       </section>
 
       <section className='cardconsulta-infoprimaria'>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import dayjs from "dayjs";
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabelames.css";
-
+import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
@@ -12,15 +13,174 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
   const mes = dataHoje.month() + 1;
 
   let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
+  const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({})
+  const [indice, setIndice] = useState("10")
+
+  const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({
+  "01": { "nomeDoMes": "janeiro" },
+  "02": { "nomeDoMes": "fevereiro" },
+  "03": { "nomeDoMes": "março" },
+  "04": { "nomeDoMes": "abril" },
+  "05": { "nomeDoMes": "maio" },
+  "06": { "nomeDoMes": "junho" },
+  "07": { "nomeDoMes": "julho" },
+  "08": { "nomeDoMes": "agosto" },
+  "09": { "nomeDoMes": "setembro" },
+  "10": { "nomeDoMes": "outubro" },
+  "11": { "nomeDoMes": "novembro" },
+  "12": { "nomeDoMes": "dezembro" }
+})
+
+
+  
+
+   const OrganizarAgendamentosSemanais = useMemo(() => {
+      if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
+  
+      const DiasComAtendimentos = Object.keys(agendamentos)
+      const semanas = {}
+
+  
+      for (let i = 0; i < DiasComAtendimentos.length; i++) {
+        const DiaComAtendimento = DiasComAtendimentos[i]
+        const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
+  
+        const data = dayjs(`${AnoAtual}-${MesDoAgendamento}-${DiaDoAgendamento}`)
+        const diaSemana = data.format('dddd') 
+        const semanaKey = `semana${data.week()}`
+  
+        if (!semanas[semanaKey]) {
+          semanas[semanaKey] = {
+            segunda: [], terça: [], quarta: [], quinta: [], sexta: []
+          }
+        }
+  
+        switch (diaSemana) {
+          case 'Monday':
+            semanas[semanaKey].segunda.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Tuesday':
+            semanas[semanaKey].terça.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Wednesday':
+            semanas[semanaKey].quarta.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Thursday':
+            semanas[semanaKey].quinta.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Friday':
+            semanas[semanaKey].sexta.push(...agendamentos[DiaComAtendimento])
+            break
+          default:
+            break
+        }
+      }
+  
+      return semanas
+    }, [agendamentos, AnoAtual])
+
+     useEffect(() => {
+       setAgendamentosSemanaisOrganizados(OrganizarAgendamentosSemanais);
+      
+
+        // NOTA: Ao carregar, o Indice é 0, que é a primeira semana.
+      }, [OrganizarAgendamentosSemanais])
+
+      useEffect(() => {
+        console.log(OrganizarAgendamentosMensais)
+        
+
+      }, [])
+
+      useEffect(() => {
+        console.log(AgendamentosMensaisOrganizados, 'aqui os agendamentos mensais')
+      }, [AgendamentosMensaisOrganizados])
+
+      const OrganizarAgendamentosMensais = useMemo(() => {
+  if (!AgendamentosSemanaisOrganizados || Object.keys(AgendamentosSemanaisOrganizados).length === 0)
+    return;
+
+  // Cria uma cópia local do estado atual
+  const novoEstado = { ...AgendamentosMensaisOrganizados };
+
+  const indices = Object.keys(AgendamentosSemanaisOrganizados);
+
+  for (let i = 0; i < indices.length; i++) {
+    const DictSemanais = AgendamentosSemanaisOrganizados[indices[i]];
+    const indicesDictSemanais = Object.keys(DictSemanais);
+
+    for (let d = 0; d < indicesDictSemanais.length; d++) {
+      const lista = DictSemanais[indicesDictSemanais[d]];
+
+      if (lista.length > 0) {
+        const [_, mesDaConsulta] = lista[0].scheduled_at.split("-");
+        
+        // Cria o mês se ainda não existir
+        if (!novoEstado[mesDaConsulta]) {
+          novoEstado[mesDaConsulta] = {
+            nomeDoMes: AgendamentosMensaisOrganizados[mesDaConsulta]?.nomeDoMes || "",
+          };
+        }
+
+        // Garante que a semana existe
+        novoEstado[mesDaConsulta][indices[i]] = {
+          ...novoEstado[mesDaConsulta][indices[i]],
+          ...DictSemanais,
+        };
+      }
+    }
+  }
+
+  // Faz o set de uma vez só
+  setAgendamentosMensaisOrganizados(novoEstado);
+}, [AgendamentosSemanaisOrganizados]);
+
+      const AvançarMes = () => {
+   let Indice = parseInt(indice)
+        Indice += 1        
+
+        console.log(Indice)
+        if(Indice < 10){
+          Indice = "0" + Indice.toString()
+          console.log(Indice)
+        }
+        if(Indice === 13){
+          return
+        }else{ 
+        setIndice(Indice)
+        }
+      }
+
+      const VoltarMes = () => {
+        let Indice = parseInt(indice)
+        
+        Indice -= 1
+
+        console.log(Indice)
+        if(Indice < 10){
+          Indice = "0" + Indice.toString()
+          console.log(Indice)
+        }
+        if(Indice === "00"){
+          return
+        }else{
+          
+        setIndice(Indice)
+        }
+
+
+      }
   
-  let segundas = ListaDiasDatas[0];
-  let tercas = ListaDiasDatas[1];
-  let quartas = ListaDiasDatas[2];
-  let quintas = ListaDiasDatas[3];
-  let sextas = ListaDiasDatas[4];
 
   return (
     <div>
+      <div>
+        <button onClick={() => VoltarMes()}>voltar</button>
+          <p>{AgendamentosMensaisOrganizados[indice].nomeDoMes}</p>
+        
+        <button onClick={() => AvançarMes()}>Avançar</button>
+      </div>
+
       <table className='tabelamensal'>
         <thead>
           <tr>
@@ -32,105 +192,36 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
           </tr>
         </thead>
         <tbody>
-          {agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => (
+            {Object.keys(AgendamentosMensaisOrganizados[indice]).map((semanaKey) => {
-            <tr key={index}>
+              const semana = AgendamentosMensaisOrganizados[indice][semanaKey]
-              {/* Coluna de Segunda-feira */}
+              console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh')
-              <td>
-                <div>
-                  <p>{segundas[index]}</p>
-                  <div>
-                    {(dias.segunda || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.segunda || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.segunda || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
 
-              {/* Coluna de Terça-feira */}
-              <td>
-                <div>
-                  <p>{tercas[index]}</p>
-                  <div>
-                    {(dias.terca || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.terca || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.terca || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
             
-              {/* Coluna de Quarta-feira */}
-              <td>
-                <div>
-                  <p>{quartas[index]}</p>
-                  <div>
-                    {(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.quarta || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.quarta || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
 
-              {/* Coluna de Quinta-feira */}
-              <td>
-                <div>
-                  <p>{quintas[index]}</p>
-                  <div>
-                    {(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.quinta || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.quinta || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
               
-              {/* Coluna de Sexta-feira */}
+
-              <td>
+              return(
-                <div>
+               <tr key={semanaKey}>
-                  <p>{sextas[index]}</p>
+     
-                  <div>
+      {
-                    {(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
+        semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
-                      <CardConsulta
+          <td key={dia} onClick={() => console.log('Clicou n aconsulta')}>
-                        key={idx}
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
-                        DadosConsulta={consulta}
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
-                        className={`usuario-${consulta.cor || "default"}`}
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
-                      />
+            {semana[dia].length > 3 ? (
-                    ))}
+              <div>
-                  </div>
+                <p>{` +${semana[dia].length - 2}`}</p>
-                  {(dias.sexta || []).length > 3 ?
+              </div>
-                    <div><p className='cards-que-faltam'>+ {(dias.sexta || []).length - 3}</p></div>
+
-                    : null}
+            ): null }
-                </div>
+          </td>
-              </td>
+        ))
-            </tr>
+      }
-          ))}
+    </tr>
-        </tbody>
+
+              )})}
+            </tbody>
       </table>
     </div>
   )

src/components/AgendarConsulta/style/styleTabelas/tabelames.css

@@ -220,3 +220,7 @@ html[data-bs-theme="dark"] .usuario-default {
 html[data-bs-theme="dark"] .cards-que-faltam {
   color: #90caf9;
 }
+
+th{
+  color: white;
+}