Merge com melhoriasAgendamento

src/PagesMedico/DoctorAgendamentoEditPage.jsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
+import API_KEY from '../components/utils/apiKeys'
+import { useAuth } from '../components/utils/AuthProvider'
+import { UserInfos } from '../components/utils/Functions-Endpoints/General'
+
+const DoctorAgendamentoEditPage = ({DictInfo, setDictInfo}) => {
+
+  const {getAuthorizationHeader} = useAuth();
+
+  const [consultaToPut, setConsultaToPUT] = useState({})
+  const [idUsuario, setIdUsuario] = useState("")
+
+
+  const authHeader = getAuthorizationHeader()
+
+
+  useEffect(() => {
+    //console.log(DictInfo.scheduled_at.split("T")[0])
+    setDictInfo({...DictInfo, dataAtendimento:DictInfo?.scheduled_at?.split("T")[0]})
+
+    const fetchUserInfo = async () => {
+      const InfosUser = await UserInfos(authHeader)
+      console.log("Informações", InfosUser)
+      setIdUsuario(InfosUser.id)
+    }
+
+    fetchUserInfo()
+
+
+
+  }, [])
+
+  const handleSave = (DictParaPatch) => {
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('apikey', API_KEY)
+    myHeaders.append("authorization", authHeader)
+
+    console.log(DictParaPatch)
+
+    var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id,
+    "doctor_id": DictParaPatch.doctor_id,
+    
+    "duration_minutes": 30,
+
+    "chief_complaint": "Dor de cabeça há 3 ",
+    
+    "created_by": idUsuario,
+
+    "scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,
+    
+    "appointment_type": DictParaPatch.tipo_consulta,
+    
+    "patient_notes": "Prefiro horário pela manhã",
+    "insurance_provider": DictParaPatch.convenio,
+    "status": DictParaPatch.status,
+    "created_by": idUsuario
+
+
+    });
+
+   // console.log(DictParaPatch)
+    //console.log(id)
+
+    var requestOptions = {
+    method: 'PATCH',
+    headers: myHeaders,
+    body: raw,
+    redirect: 'follow'
+    };
+
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${DictInfo.id}`, requestOptions)
+    .then(response => response.text())
+    .then(result => console.log(result))
+    .catch(error => console.log('error', error));
+    }
+
+
+
+
+  return (
+    <div>
+        <FormNovaConsulta agendamento={DictInfo} setAgendamento={setDictInfo} onSave={handleSave}/>
+    </div>
+  )
+}
+
+export default DoctorAgendamentoEditPage

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -13,7 +13,7 @@ import { useAuth } from '../components/utils/AuthProvider.js';
 // ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
 import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
 
-
+import { UserInfos } from '../components/utils/Functions-Endpoints/General.js';
 import dayjs from 'dayjs';
 import "../pages/style/Agendamento.css";
 import '../pages/style/FilaEspera.css';
@@ -35,11 +35,15 @@ const Agendamento = ({setDictInfo}) => {
    const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
 
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
  
-  const [ListaDeMedicos, setListaDeMedicos] = useState([])
-  const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
-  const [searchTermDoctor, setSearchTermDoctor] = useState('');
+  const [coresConsultas, setCoresConsultas] = useState([])
+
+   const [listaConsultasID, setListaConsultaID] = useState([])
+
+  const [motivoCancelamento, setMotivoCancelamento] = useState("")
+
+  const [user, setUser] = useState({})
 
 
   let authHeader = getAuthorizationHeader() 
@@ -51,14 +55,14 @@ const Agendamento = ({setDictInfo}) => {
       let paciente = await GetPatientByID(patient_id, authHeader);
 
       let dicionario = {
-          agendamento: agendamento,
-          Infos: {
-              nome_nedico: medico.full_name,
+          ...agendamento,
+          
+              nome_medico: medico[0].full_name,
               doctor_id: medico.id,
               patient_id: paciente[0].id,
               paciente_nome: paciente[0].full_name,
               paciente_cpf: paciente[0].cpf
-          }
+          
       };
       return dicionario;
     };
@@ -69,17 +73,19 @@ const Agendamento = ({setDictInfo}) => {
     // 1. Agrupamento (igual ao seu código original)
     for (const agendamento of listaTodosAgendamentos) {
         if (agendamento.status === 'requested') {
-            // Recomenda-se usar Promise.all para melhorar a performance
-            // mas, para manter a estrutura, mantemos o await no loop.
+         
             let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento);
             ListaFilaDeEspera.push(v);
         } else {
-            const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
+
+            const DiaAgendamento = agendamento.scheduled_at?.split("T")[0];
+
+            let novoAgendamento = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento);
 
             if (DiaAgendamento in DictAgendamentosOrganizados) {
-                DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
+                DictAgendamentosOrganizados[DiaAgendamento].push(novoAgendamento);
             } else {
-                DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
+                DictAgendamentosOrganizados[DiaAgendamento] = [novoAgendamento];
             }
         }
     }
@@ -117,8 +123,23 @@ const Agendamento = ({setDictInfo}) => {
     setfilaEsperaData(ListaFilaDeEspera);
 };
 
+useEffect(() => {
+
+console.log(user, "usuario")
+
+}, [user])
+
   // Requisição inicial para mostrar os agendamentos do banco de dados
   useEffect(() => {
+    
+    async function fetchDadosUser (){
+      let dado = await UserInfos(authHeader)
+      setUser(dado)
+    }
+
+    fetchDadosUser()
+    
+    
         var myHeaders = new Headers();
     myHeaders.append("Authorization", authHeader);
     myHeaders.append("apikey", API_KEY)
@@ -129,85 +150,42 @@ const Agendamento = ({setDictInfo}) => {
       redirect: 'follow'
     };
 
-    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?doctor_id=eq.${"078d2a67-b4c1-43c8-ae32-c1e75bb5b3df"}`, requestOptions)
       .then(response => response.json())
-      .then(result => {FiltrarAgendamentos(result);})
+      .then(result => {FiltrarAgendamentos(result); console.log(result, "RESULTRADO DA API")})
       .catch(error => console.log('error', error));
 
-    const PegarTodosOsMedicos = async () => {
-      let lista = []
-      const TodosOsMedicos = await GetAllDoctors(authHeader)
     
-      for(let d = 0; TodosOsMedicos.length > d; d++){
-        lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
-      setListaDeMedicos(lista)
-    }
-    PegarTodosOsMedicos()
 
   }, [])
 
- useEffect(() => {
-      console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
-   if (FiltredTodosMedicos.length === 1) {  
-      const unicoMedico = FiltredTodosMedicos[0]; 
-      console.log(unicoMedico)
-      const idMedicoFiltrado = unicoMedico.idMedico;    
-      console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);
-      
-      const agendamentosDoMedico = filtrarAgendamentosPorMedico(
-          DictAgendamentosOrganizados, 
-          idMedicoFiltrado
-      );      
-      console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
-      console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);
-      FiltrarAgendamentos(agendamentosDoMedico)
-      
-    } 
-  }, [FiltredTodosMedicos]); 
 
 const deleteConsulta = (selectedPatientId) => {
-  console.log("tentando apagar")
   var myHeaders = new Headers();
-    myHeaders.append("Authorization", authHeader);
-    myHeaders.append("apikey", API_KEY)
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('apikey', API_KEY)
+    myHeaders.append("authorization", authHeader)
+
+
+    var raw = JSON.stringify({ "status":"cancelled",
+      "cancellation_reason": motivoCancelamento      
+    });
+
 
     var requestOptions = {
-   method: 'DELETE',
-   redirect: 'follow',
-   headers: myHeaders
+    method: 'PATCH',
+    headers: myHeaders,
+    body: raw,
+    redirect: 'follow'
     };
 
     fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
-   .then(response => response.json())
+    .then(response => {if(response.status !== 200)(console.log(response))})
     .then(result => console.log(result))
     .catch(error => console.log('error', error));
-  
 }
   
  
-/**
- * Filtra todos os agendamentos em um objeto aninhado (data -> [agendamentos]) 
- * com base no ID do médico.
- *
- * @param {Object} dictAgendamentos - O dicionário de agendamentos.
- * @param {string} idMedicoFiltrado - O ID do médico (doctor_id) para ser usado como filtro.
- * @returns {Array} Um array contendo todos os agendamentos que correspondem ao idMedicoFiltrado.
- */
-const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => { 
-    
-    // O corpo da função deve usar esses nomes de variáveis:
-    const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
-    
-    const todosOsAgendamentos = todasAsListasDeAgendamentos.flat();
-
-    const agendamentosFiltrados = todosOsAgendamentos.filter(agendamento => 
-        agendamento.doctor_id === idMedicoFiltrado
-    );
-
-    return agendamentosFiltrados;
-};
-
- 
 
   // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
   const filteredAgendamentos = useMemo(() => {
@@ -249,27 +227,31 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     return ListaDiasDatas
   }
 
-  const handleClickAgendamento = (agendamento) => {
-    if (agendamento.status !== 'vazio') return
-    else setPageConsulta(true)
+  
+const confirmConsulta = (selectedPatientId) => {
+     var myHeaders = new Headers();
+            myHeaders.append("Content-Type", "application/json");
+            myHeaders.append('apikey', API_KEY)
+            myHeaders.append("authorization", authHeader)
+    
+    
+            var raw = JSON.stringify({ "status":"confirmed"      
+            });
+    
+    
+            var requestOptions = {
+            method: 'PATCH',
+            headers: myHeaders,
+            body: raw,
+            redirect: 'follow'
             };
     
-
-const handleSearchMedicos = (term) => {
-    setSearchTermDoctor(term);
-    if (term.trim() === '') {
-        setFiltredTodosMedicos([]);
-        return;
+            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
+            .then(response => {if(response.status !== 200)(console.log(response))})
+            .then(result => console.log(result))
+            .catch(error => console.log('error', error));
 }
 
-    // Lógica simples de filtragem:
-    const filtered = ListaDeMedicos.filter(medico => 
-        medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
-    );
-    setFiltredTodosMedicos(filtered);
-};
-  
-
   const handleClickCancel = () => setPageConsulta(false)
 
   return (
@@ -289,78 +271,10 @@ const handleSearchMedicos = (term) => {
         <div className='atendimento-eprocura'>
           
           <div className='busca-atendimento-container'> 
-        
-        <div className='input-e-dropdown-wrapper'>
-
-          <div className='busca-atendimento'>
-              <div>
-                  <i className="fa-solid fa-calendar-day"></i>
-                  <input
-                      type="text"
-                      placeholder="Filtrar atendimento por médico..."
-                      value={searchTermDoctor}
-                      onChange={(e) => handleSearchMedicos(e.target.value)} // Chama a nova função de filtro
-                  />
-              </div>
-          </div>
-          
-          {/* DROPDOWN (RENDERIZAÇÃO CONDICIONAL) */}
-            {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
-              <div className='dropdown-medicos'>
-                  {FiltredTodosMedicos.map((medico) => (
-                      <div 
-                          key={medico.id} 
-                          className='dropdown-item'
-                          onClick={() => {
-                              // Ação ao selecionar o médico
-                              setSearchTermDoctor(medico.nomeMedico); // Preenche o input
-                              //setFiltredTodosMedicos([]); // Fecha o dropdown
-                              // Lógica adicional, como selecionar o ID do médico...
-                          }}
-                      >
-                          <p>{medico.nomeMedico} </p>
-                      </div>
-                  ))}
-              </div>
-             )}
-        </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='container-btns-agenda-fila_esepera'>
-            <button
-              className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
-              onClick={() => {
-                setFiladeEspera(false);
-                setSearchTerm('');
-              }}
-            >
-              Agenda
-            </button>
-            <button
-              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
-              onClick={() => {
-                setFiladeEspera(true);
-                setSearchTerm('');
-              }}
-            >
-              Fila de espera
-            </button>
     </div>
         
           <section className='calendario-ou-filaespera'>
-            {FiladeEspera === false ?
-              (
+      
                 <div className='calendario'>
                   <div>
                     <section className='btns-e-legenda-container'>
@@ -383,78 +297,95 @@ const handleSearchMedicos = (term) => {
                       </div>
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
-                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>}
-                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia  agendamentos={DictAgendamentosOrganizados}
+                     setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} 
+                     listaConsultasID={listaConsultasID} 
+                     setListaConsultaID={setListaConsultaID} coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal}
+                    
+                     />}
+                    
+                    
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} 
+                    setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}
+                     listaConsultasID={listaConsultasID} setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal} />}
+                    
+                    
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados}
+                    setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} listaConsultasID={listaConsultasID} 
+                    setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal} />}
                   </div>
                 </div>
-              )
-              :
-              (
-                <div className="fila-container">
-                  <div className="fila-header">
-                    <input
-                      type="text"
-                      placeholder="Pesquisar na fila de espera..."
-                      className="busca-fila-espera"
-                      value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
+         
+              </section>
+        </div>
+      ) : (
+        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} Dict={{nome_medico:user?.profile?.full_name}} 
         />
-                    <h2 className="fila-titulo">Fila de Espera</h2>
-                  </div>
-                  <table className="fila-tabela">
-                    <thead>
-                      <tr>
-                        <th>Nome</th>
-                        <th>Telefone</th>
+      )}
 
-                        <th>Telefone</th>
-                        <th>Entrou na fila de espera</th>
-                        <th>Ações</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filaEsperaData.map((item, index) => (
-                        <tr key={index}>
-                          <td> <p>{item.Infos?.paciente_nome} </p>  </td>
-                          <td><p>{} </p></td>
-                          <td>{}</td>
-                          <td>{}</td>
-                          <td> <div className="d-flex gap-2">
 
-                              <button className="btn btn-sm btn-edit"
-                              onClick={() => {
-                                console.log(item, 'item')
-                                navigate(`${2}/edit`)
-                                setDictInfo(item)
+       {showConfirmModal &&(
+        <div
+          className="modal fade show"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
           }}
+          tabIndex="-1"
+          onClick={(e) =>
+            e.target.classList.contains("modal") && setShowDeleteModal(false)
+          }
         >
-                                <i className="bi bi-pencil me-1"></i> Editar
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+            
+              <div className="modal-header bg-success">
+                <h5 className="modal-title">
+                  Confirmação de edição
+                </h5>
+               
+              </div>
+
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja retirar o cancelamento ? 
+                </p>
+              </div>
+
+              <div className="modal-footer">
+              
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
+                >
+                  Cancelar
                 </button>
 
               
                 <button
-                              className="btn btn-sm btn-delete"
-                              onClick={() => {
-                                setSelectedId(item.agendamento.id)
-                                setShowDeleteModal(true);
+                  type="button"
+                  className="btn btn-success"
+                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
+                         let lista_cores = coresConsultas
+                
+                  let lista = listaConsultasID
+
+                lista.push(selectedID)
+                lista_cores.push("confirmed")
+
+                setCoresConsultas(lista_cores)
+
+                setListaConsultaID(lista)
                   }}  
+                  
                 >
-                              <i className="bi bi-trash me-1"></i> Excluir
+                  <i className="bi bi-trash me-1"></i> Confirmar
                 </button>
-                          </div></td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
               </div>
-              )
-            }
-          </section>
             </div>
-      ) : (
-        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
-      )}
+          </div>
+        </div>)}
 
        {showDeleteModal && (
         <div
@@ -473,7 +404,7 @@ const handleSearchMedicos = (term) => {
             
               <div className="modal-header bg-danger bg-opacity-25">
                 <h5 className="modal-title text-danger">
-                  Confirmação de Exclusão
+                  Confirmação de Cancelamento
                 </h5>
                 <button
                   type="button"
@@ -484,8 +415,12 @@ const handleSearchMedicos = (term) => {
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja excluir este agendamento? 
+                 Qual o motivo do cancelamento?               
                 </p>
+                <div className='campo-de-input'> 
+                  
+                  <textarea  className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
+                </div>
               </div>
 
               <div className="modal-footer">
@@ -493,7 +428,10 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => setShowDeleteModal(false)}
+                  onClick={() => {
+                    setShowDeleteModal(false);
+
+                                   }}
                 >
                   Cancelar
                 </button>
@@ -502,7 +440,24 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-danger"
-                  onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}  
+                  onClick={() => {
+
+                    deleteConsulta(selectedID)
+                    setShowDeleteModal(false)
+                  let lista_cores = coresConsultas
+                
+                  let lista = listaConsultasID
+
+                lista.push(selectedID)
+                lista_cores.push("cancelled")
+
+                setCoresConsultas(lista_cores)
+
+                setListaConsultaID(lista)
+
+                console.log("lista", lista)
+                  
+                  }}  
                   
                 >
                   <i className="bi bi-trash me-1"></i> Excluir
@@ -513,6 +468,8 @@ const handleSearchMedicos = (term) => {
         </div>)}
 
         
+
+      
     </div>
   )
 }

src/PagesPaciente/CardConsultaPaciente.jsx

@@ -14,7 +14,6 @@ const CardConsultaPaciente = ({consulta, setConsulta,  setSelectedId, setShowDel
     
 
 
-
      const ids = useMemo(() => {
     return {
       doctor_id: consulta?.doctor_id,
@@ -45,9 +44,6 @@ const CardConsultaPaciente = ({consulta, setConsulta,  setSelectedId, setShowDel
   }, [ids, authHeader]);
 
 
-
-    console.log(consulta, "dento do card")
-
     let horario = consulta.scheduled_at.split("T")[1]
     let Data = consulta.scheduled_at.split("T")[0]
 

src/PagesPaciente/ConsultaCadastroManager.jsx

@@ -30,14 +30,16 @@ const ConsultaCadastroManager = () => {
   }, [])
 
       const handleSave = (Dict) => {
+        
         let DataAtual = dayjs()
         var myHeaders = new Headers();
         myHeaders.append("apikey", API_KEY);
         myHeaders.append("Authorization", authHeader);
         myHeaders.append("Content-Type", "application/json");
     
+
     var raw = JSON.stringify({
-       "patient_id": Dict.patient_id,
+       "patient_id": "6e7f8829-0574-42df-9290-8dbb70f75ada",
        "doctor_id": Dict.doctor_id,
        "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
        "duration_minutes": 30,

src/PagesPaciente/ConsultaEditPage.jsx

@@ -9,7 +9,7 @@ import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
 // 1. Importe o useNavigate
 import { useNavigate } from 'react-router-dom'
 
-const ConsultaEditPage = ({ dadosConsulta }) => {
+const ConsultaEditPage = ({ DictInfo }) => {
     // 2. Crie a instância do navigate
     const navigate = useNavigate();
 
@@ -17,20 +17,23 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
     const authHeader = getAuthorizationHeader();
 
     const [idUsuario, setIDusuario] = useState(null);
-    const [DictInfo, setDict] = useState({});
+    const [Dict, setDict] = useState({});
     const [Medico, setMedico] = useState(null);
     const [Paciente, setPaciente] = useState(null);
 
+    console.log("dentro do edit", DictInfo)
+
+
     useEffect(() => {
-        setDict({ ...dadosConsulta });
+        setDict({ ...DictInfo });
 
         const fetchInitialData = async () => {
-            if (dadosConsulta.doctor_id) {
-                const medicoData = await GetDoctorByID(dadosConsulta.doctor_id, authHeader);
+            if (DictInfo.doctor_id) {
+                const medicoData = await GetDoctorByID(DictInfo.doctor_id, authHeader);
                 setMedico(medicoData[0]);
             }
-            if (dadosConsulta.patient_id) {
-                const pacienteData = await GetPatientByID(dadosConsulta.patient_id, authHeader);
+            if (DictInfo.patient_id) {
+                const pacienteData = await GetPatientByID(DictInfo.patient_id, authHeader);
                 setPaciente(pacienteData[0]);
             }
         };
@@ -43,17 +46,17 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
         fetchUserInfo();
         fetchInitialData();
 
-    }, [dadosConsulta, authHeader]);
+    }, [DictInfo, authHeader]);
 
     useEffect(() => {
         if (Medico) {
             setDict(prevDict => ({
                 ...prevDict,
                 medico_nome: Medico?.full_name,
-                dataAtendimento: dadosConsulta.scheduled_at?.split("T")[0]
+                dataAtendimento: DictInfo.scheduled_at?.split("T")[0]
             }));
         }
-    }, [Medico, dadosConsulta.scheduled_at]);
+    }, [Medico, DictInfo.scheduled_at]);
 
     const handleSave = async (DictParaPatch) => {
         try {
@@ -112,7 +115,7 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
         <div>
             {}
             <FormConsultaPaciente
-                agendamento={DictInfo}
+                agendamento={Dict}
                 setAgendamento={setDict}
                 onSave={handleSave}
                 onCancel={handleCancel}

src/PagesPaciente/ConsultasPaciente.jsx

@@ -2,35 +2,107 @@ import React from 'react'
 import "./style.css"
 import CardConsultaPaciente from './CardConsultaPaciente'
 import { useNavigate } from 'react-router-dom'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import API_KEY from '../components/utils/apiKeys'
 import { useAuth } from '../components/utils/AuthProvider'
+import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
+import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
 
-const ConsultasPaciente = ({ setConsulta }) => {
+import { UserInfos } from '../components/utils/Functions-Endpoints/General'
+import dayjs from 'dayjs'
+import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"
+
+const ConsultasPaciente = ({ setDictInfo }) => {
     const { getAuthorizationHeader } = useAuth()
-
+    const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
+    const [listaTodasConsultas, setListaTodasConsultas] = useState([])
+    const [patientID, setPatientID] = useState("")
     const [showDeleteModal, setShowDeleteModal] = useState(false)
     const [selectedID, setSelectedId] = useState("")
     let authHeader = getAuthorizationHeader()
 
+    const [motivoCancelamento, setMotivoCancelamento] = useState("")
+
     const [consultas, setConsultas] = useState([])
    
-    const FiltrarAgendamentos = (agendamentos, id) => {
-        if (!agendamentos || !Array.isArray(agendamentos)) {
-            console.error("A lista de agendamentos é inválida.");
-            setConsultas([]);
-            return;
-        }
+    const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
+    const [filaDeEspera, setFilaDeEspera] = useState([])
+    const [viewFila, setViewFila] = useState(false)
 
-        const consultasFiltradas = agendamentos.filter(agendamento => {
-            return agendamento.patient_id && agendamento.patient_id.toString() === id.toString();
-        });
+     const [listaConsultasID, setListaConsultaID] = useState([])
+    const [coresConsultas,setCoresConsultas] = useState([])
+
+    const [showConfirmModal, setShowConfirmModal] = useState(false)
 
-        console.log(consultasFiltradas)
-        setConsultas(consultasFiltradas);
-    }
 
     useEffect(() => {
+
+        console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")
+
+    }, [coresConsultas, listaConsultasID])
+
+    useMemo(() => {
+        let conjuntoConsultas = {}
+        let filaEspera = []
+
+        const fetchInfosConsultas = async (consulta) => {
+            //console.log(doctor, "PACIENTE TRAZIDO PELO ")
+
+           //let consultaMelhorada = {...consulta, paciente_nome:paciente[0].full_name, medico_nome:doctor[0].full_name } 
+
+            //console.log(consultaMelhorada,"ID DO MEDICO")
+
+            for(let i = 0; listaTodasConsultas.length > i; i++){
+
+            let consulta = listaTodasConsultas[i]
+
+              let doctor = await GetDoctorByID(consulta.doctor_id, authHeader)
+            let paciente = await GetPatientByID(consulta.patient_id, authHeader)
+
+            consulta = {...consulta, medico_nome:doctor[0]?.full_name, paciente_nome:paciente[0]?.full_name}
+
+        
+
+
+            if(consulta.status === "requested"){
+                
+                filaEspera.push(consulta)
+            
+            }else{
+                
+                let data = consulta.scheduled_at.split("T")[0]
+                let chavesConsultas = Object.keys(conjuntoConsultas)
+                  
+               if(chavesConsultas.includes(data)){
+                let lista = conjuntoConsultas[data]
+                
+                lista.push(consulta)
+
+                conjuntoConsultas = {...conjuntoConsultas, [data]:lista}
+               }else{
+                conjuntoConsultas = {...conjuntoConsultas, [data]:[consulta]   }
+               }
+            }
+        }
+    
+
+        setConsultasOrganizadas(conjuntoConsultas)
+        setFilaDeEspera(filaEspera)
+        
+        }
+
+        console.log("so muda")
+        if(!listaTodasConsultas.length) return     
+
+        console.log(filaEspera, "fila de espera")
+        fetchInfosConsultas();
+    
+    }, [listaTodasConsultas])
+   
+
+    useEffect(() => {
+        let userInfos = UserInfos(authHeader)
+
         const fetchConsultas = async () => {
             try {
                 const myHeaders = new Headers();
@@ -43,18 +115,45 @@ const ConsultasPaciente = ({ setConsulta }) => {
                     redirect: 'follow'
                 };
 
-                const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*", requestOptions);
+                const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?patient_id=eq.${"6e7f8829-0574-42df-9290-8dbb70f75ada"}`, requestOptions);
                 const result = await response.json();
-                FiltrarAgendamentos(result, "6e7f8829-0574-42df-9290-8dbb70f75ada");
+                setListaTodasConsultas(result);
             } catch (error) {
                 console.log('error', error);
             }
         };
 
         fetchConsultas();
-    }, [authHeader]);
+    }, []);
 
     const navigate = useNavigate()
+
+    
+const confirmConsulta = (selectedPatientId) => {
+     var myHeaders = new Headers();
+            myHeaders.append("Content-Type", "application/json");
+            myHeaders.append('apikey', API_KEY)
+            myHeaders.append("authorization", authHeader)
+    
+    
+            var raw = JSON.stringify({ "status":"confirmed"      
+            });
+    
+    
+            var requestOptions = {
+            method: 'PATCH',
+            headers: myHeaders,
+            body: raw,
+            redirect: 'follow'
+            };
+    
+            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
+            .then(response => {if(response.status !== 200)(console.log(response))})
+            .then(result => console.log(result))
+            .catch(error => console.log('error', error));
+
+}
+
     const deleteConsulta = async (ID) => {
         try {
             const myHeaders = new Headers();
@@ -62,7 +161,7 @@ const ConsultasPaciente = ({ setConsulta }) => {
             myHeaders.append('apikey', API_KEY);
             myHeaders.append("authorization", authHeader);
 
-            const raw = JSON.stringify({ "status": "cancelled" });
+            const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });
 
             const requestOptions = {
                 method: 'PATCH',
@@ -96,19 +195,98 @@ const ConsultasPaciente = ({ setConsulta }) => {
                 <button className="btn btn-primary" onClick={() => { navigate("criar") }}>
                     <i className="bi bi-plus-circle"></i> Adicionar Consulta
                 </button>
+                {!viewFila ?
+                <button onClick={() => setViewFila(true)}> Fila de espera</button>
+                :
+                <button onClick={() => setViewFila(false)}>Consultas </button>
+                }
 
                 <h2>Seus próximos atendimentos</h2>
+                {viewFila ? 
+           <div className="fila-container">
+            <div className="fila-header">
+            <input
+                type="text"
+                placeholder="Pesquisar na fila de espera..."
+                className="busca-fila-espera"
+                //value={searchTerm}
+                //onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <h2 className="fila-titulo">Fila de Espera</h2>
+            </div>
+            <table className="fila-tabela">
+            <thead>
+                <tr>
+                <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
+                <th>CPF</th> {/* Ajustado o cabeçalho */}
+                <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
+                <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
+                <th>Ações</th>
+                </tr>
+            </thead>
+            <tbody>
+                {filaDeEspera.map((item, index) => (
+                <tr key={index}>
+                    <td> <p>{item?.paciente_nome} </p>  </td>
+                    <td><p>{item?.paciente_cpf} </p></td>
+                    <td><p>{item?.medico_nome} </p></td>
+                    <td>{dayjs(item?.created_at).format('DD/MM/YYYY HH:mm')}</td> 
+                    <td> <div className="d-flex gap-2">
                     
-                {consultas.map((consulta) => (
-                    <CardConsultaPaciente key={consulta.id} consulta={consulta} setConsulta={setConsulta} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} />
+                        <button className="btn btn-sm btn-edit"
+                        onClick={() => {
+                        console.log(item, 'item')
+                        navigate(`${2}/edit`) 
+                       
+                        }}
+                        >
+                        <i className="bi bi-pencil me-1"></i> Editar
+                        </button>
+                    
+
+                    <button
+                        className="btn btn-sm btn-delete"
+                        onClick={() => {
+                        setSelectedId(item.id)
+                        setShowDeleteModal(true);
+                        }}
+                    >
+                        <i className="bi bi-trash me-1"></i> Excluir
+                    </button>
+                    </div></td>
+                </tr>
                 ))}
+            </tbody>
+            </table>
+        </div>   
+            :
 
-                {showDeleteModal &&
+               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo} 
+               selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
+               coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
+               listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
+
+               />
+            } 
+             
+                 {showDeleteModal && (
+        <div
+          className="modal fade show"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+          onClick={(e) =>
+            e.target.classList.contains("modal") && setShowDeleteModal(false)
+          }
+        >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
+            
               <div className="modal-header bg-danger bg-opacity-25">
                 <h5 className="modal-title text-danger">
-                                    Confirmação de Exclusão
+                  Confirmação de Cancelamento
                 </h5>
                 <button
                   type="button"
@@ -116,30 +294,128 @@ const ConsultasPaciente = ({ setConsulta }) => {
                   onClick={() => setShowDeleteModal(false)}
                 ></button>
               </div>
+
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                                    Tem certeza que deseja excluir este agendamento?
+                 Qual o motivo do cancelamento?               
                 </p>
+                <div className='campo-de-input'> 
+                  
+                  <textarea  className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
                 </div>
+              </div>
+
               <div className="modal-footer">
+              
                 <button
                   type="button"
                   className="btn btn-primary"
-                                    onClick={() => setShowDeleteModal(false)}
+                  onClick={() => {setShowDeleteModal(false);
+
+                                   }}
                 >
                   Cancelar
                 </button>
+
+              
                 <button
                   type="button"
                   className="btn btn-danger"
-                                    onClick={() => { deleteConsulta(selectedID); setShowDeleteModal(false) }}
+                  onClick={() => {
+                    
+                    deleteConsulta(selectedID)
+                    setShowDeleteModal(false)
+                  let lista_cores = coresConsultas
+        
+                  let lista = listaConsultasID
+
+                lista.push(selectedID)
+                lista_cores.push("cancelled")
+
+                setCoresConsultas(lista_cores)
+
+                setListaConsultaID(lista)
+
+                console.log("lista", lista)
+                  
+                  }}  
+                  
                 >
                   <i className="bi bi-trash me-1"></i> Excluir
                 </button>
               </div>
             </div>
-                    </div>}
           </div>
+        </div>)}
+
+        {showConfirmModal &&(
+        <div
+          className="modal fade show"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+          onClick={(e) =>
+            e.target.classList.contains("modal") && setShowDeleteModal(false)
+          }
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+            
+              <div className="modal-header bg-success">
+                <h5 className="modal-title">
+                  Confirmação de edição
+                </h5>
+               
+              </div>
+
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja retirar o cancelamento ? 
+                </p>
+              </div>
+
+              <div className="modal-footer">
+              
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
+                >
+                  Cancelar
+                </button>
+
+              
+                <button
+                  type="button"
+                  className="btn btn-success"
+                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
+                         let lista_cores = coresConsultas
+                
+                  let lista = listaConsultasID
+
+                lista.push(selectedID)
+                lista_cores.push("confirmed")
+
+                setCoresConsultas(lista_cores)
+
+                setListaConsultaID(lista)
+                  }}  
+                  
+                >
+                  <i className="bi bi-trash me-1"></i> Confirmar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>)
+        
+        
+        
+        }
+            </div>
+
         </div>
     )
 }

src/PagesPaciente/FormConsultaPaciente.jsx

@@ -169,7 +169,7 @@ const formatarHora = (datetimeString) => {
 const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
-    navigate("/paciente/agendamento")
+  
     onSave({...agendamento, horarioInicio:horarioInicio})
   };
 

src/components/AgendarConsulta/CardConsulta.jsx

@@ -8,7 +8,6 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
   const navigate = useNavigate();
 
 
-
   const {getAuthorizationHeader} = useAuth()
   const authHeader = getAuthorizationHeader()
   const [Paciente, setPaciente] = useState()
@@ -17,16 +16,15 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
   const [decidirBotton, setDecidirBotton] = useState("")
 
 
-
-  const ids = useMemo(() => {
+ /* const ids = useMemo(() => {
     return {
       doctor_id: DadosConsulta?.doctor_id,
       patient_id: DadosConsulta?.patient_id,
       status: DadosConsulta?.status
     };
   }, [DadosConsulta]);
-   
-  
+   */
+  /*
    useEffect(() => {
     const BuscarMedicoEPaciente = async () => {
       if (!ids.doctor_id || !ids.patient_id || ids.status === 'nada') return;
@@ -45,25 +43,16 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
     };
 
     BuscarMedicoEPaciente();
-  }, [ids, authHeader]);
-
-  let nameArrayPaciente = Paciente?.full_name.split(' ')
-
-  let nameArrayMedico = Medico?.full_name.split(' ')
-
+  }, [ids, authHeader]);*/
 
+  let nameArrayPaciente = DadosConsulta?.paciente_nome?.split(' ') 
+  let nameArrayMedico = DadosConsulta?.medico_nome?.split(' ')
   let indice_cor = listaConsultasID.indexOf(DadosConsulta.id)
 
- // console.log(coresConsultas)
-  //console.log(indice_cor,"indice no cores")
-
-
-
 
   return (
     <div className={`container-cardconsulta container-cardconsulta-${TabelaAgendamento} ` }>
 
-
       {DadosConsulta.id?  
       
       <div className={`cardconsulta`} id={indice_cor !== -1  ? `status-card-consulta-${coresConsultas[indice_cor]}` : `status-card-consulta-${DadosConsulta.status}`}> 
@@ -86,8 +75,10 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
       <div className='actions-container'>        
         <button className="btn btn-sm btn-edit-custom"
             
-            onClick={() => {navigate(`2/edit`)
-                setDictInfo({...DadosConsulta,paciente_cpf:Paciente.cpf, paciente_nome:Paciente.full_name, nome_medico:Medico.full_name})
+            onClick={() => {navigate(`edit`)
+                
+              console.log(DadosConsulta)
+              setDictInfo({...DadosConsulta,paciente_cpf:DadosConsulta?.paciente_cpf, paciente_nome:DadosConsulta?.paciente_nome, nome_medico:DadosConsulta?.nome_medico})
             }}
 
           >

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -69,8 +69,16 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
   }, [authHeader]);
 
   useEffect(() => {
+<<<<<<< HEAD
     ChamarMedicos();
   }, [ChamarMedicos]);
+=======
+    console.log("Horario","tessssste"  )
+      if (agendamento?.scheduled_at) {
+    setHorarioInicio(formatarHora(agendamento.scheduled_at));
+  }
+  }, [])
+>>>>>>> melhoriasAgendamentos
 
   useEffect(() => {
     if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
@@ -324,7 +332,35 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
                 </div>
               </div>
             </div>
+<<<<<<< HEAD
           </section>
+=======
+          </div>
+<div className="linha">
+    {/* Dropdown de Início (Não modificado) */}
+    <div className="campo-de-input">
+        <label htmlFor="inicio">Início *</label>
+        <select 
+            id="inicio"
+            name="inicio" 
+            
+            value={horarioInicio}
+            onChange={(e) => setHorarioInicio(e.target.value)}
+        >
+            <option value="" disabled>Selecione a hora de início</option>
+            {opcoesDeHorario?.map((opcao, index) => (
+                <option 
+                    key={index} 
+                    value={opcao.value} 
+                    disabled={opcao.disabled}
+                >
+                    {opcao.label}
+                    {opcao.disabled && " (Indisponível)"} 
+                </option>
+            ))}
+        </select>
+    </div>
+>>>>>>> melhoriasAgendamentos
 
           <section className="informacoes-atendimento-segunda-linha-direita"> 
             <div className="campo-de-input">

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -2,14 +2,30 @@ import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
-const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
-  const [indiceAcesso, setIndiceAcesso] = useState(0)
+import Spinner from '../Spinner';
+
+const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
+  const [indiceAcesso, setIndiceAcesso] = useState(null)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
   const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
 
   let ListaDiasComAgendamentos = Object.keys(agendamentos)
 
+  const [showSpinner, setShowSpinner] = useState(true);
+
+  
+useEffect(() => {
+  if (!agendamentos) return;
+
+  const dias = Object.keys(agendamentos);
+  if (dias.length > 0) {
+    setIndiceAcesso(0);          // começa no primeiro dia disponível
+    setDia(dias[0]);             // seta o Dia inicial
+
+  setShowSpinner(false)
+  }
+}, [agendamentos]);
 
 
   //console.log(Dia, "hshdhshhsdhs")
@@ -71,12 +87,20 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
               
               <td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
               <td className='mostrar-horario'>
-                <div onClick={() => handleClickAgendamento(agendamento)}>
+                <div>
                   <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
                 </div>
               </td>
             </tr>
           )})}
+          {showSpinner &&
+          <tr>
+            <td colspan='2'>
+            <Spinner/>
+            </td>
+          </tr>
+          }
+
         </tbody>
       </table>
     </div>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -6,15 +6,23 @@ import "./style/styleTabelas/tabelames.css";
 import { useEffect, useState } from 'react';
 import { useMemo } from 'react';
 
+import Spinner from '../Spinner';
+
 const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModal, setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID }) => {  
 
   const dataHoje = dayjs();
   const AnoAtual = dataHoje.year();
   const mes = dataHoje.month() + 1;
 
+  const [showSpinner, setShowSpinner] = useState(true)
+
+   
+
+  console.log(agendamentos)
+
   let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
   const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({})
-  const [indice, setIndice] = useState("10")
+  const [indice, setIndice] = useState(mes.toString())
 
   const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({
   "01": { "nomeDoMes": "janeiro" },
@@ -33,6 +41,17 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa
 
 
 
+  useEffect(() => {
+    if (!agendamentos) return;
+  
+    const meses = Object.keys(agendamentos);
+    if (meses.length > 0) {
+            // começa no primeiro dia disponível
+      setIndice(mes.toString());             // seta o Dia inicial
+    setShowSpinner(false)
+    }
+  }, [agendamentos]);
+
 
    const OrganizarAgendamentosSemanais = useMemo(() => {
       if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
@@ -40,7 +59,6 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa
       const DiasComAtendimentos = Object.keys(agendamentos)
       const semanas = {}
  
-  
       for (let i = 0; i < DiasComAtendimentos.length; i++) {
         const DiaComAtendimento = DiasComAtendimentos[i]
         const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
@@ -215,8 +233,16 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa
         ))
       }
     </tr>
-
               )})}
+      {showSpinner && 
+      
+      <tr>
+        <td colspan='5'>
+          <Spinner/>
+        </td>
+      </tr>
+      
+      }
             </tbody>
       </table>
     </div>

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -4,6 +4,11 @@ import "./style/styleTabelas/tabelasemana.css";
 import dayjs from 'dayjs';
 import { useEffect, useState, useMemo } from 'react';
 import weekOfYear from 'dayjs/plugin/weekOfYear'
+
+
+import Spinner from '../Spinner';
+
+
 dayjs.extend(weekOfYear)
 
 const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID}) => { 
@@ -12,6 +17,21 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
   const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
   // Controla qual semana está sendo exibida (o índice da chave no objeto)
   const [Indice, setIndice] = useState(0); 
+  const [showSpinner, setShowSpinner] = useState(true)
+
+
+    useEffect(() => {
+      if (!agendamentos) return;
+    
+      const semanas = Object.keys(agendamentos);
+      if (semanas.length > 0) {
+              
+        setIndice(0)
+        setShowSpinner(false)
+   
+      }
+    }, [agendamentos]);
+  
 
   console.log(agendamentos, "agendamentos diarios")
 
@@ -129,10 +149,10 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
     ? `Semana ${chaveDaSemanaAtual.replace('semana', '')} / ${AnoAtual}` 
     : 'Nenhuma semana encontrada';
 
-  // --- RENDERIZAÇÃO ---
+
   return (
     <div>
-      {/* Container de Navegação */}
+      
       <div id='tabela-seletor-container'>
         
         <button 
@@ -214,6 +234,16 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
               </td>
             </tr>
 )})}
+
+{showSpinner &&
+<tr>
+  <td colspan='6'>
+    <Spinner/>
+
+  </td>
+</tr>
+
+}
         </tbody>
       </table>
     </div>

src/components/Spinner.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Spinner = () => {
+  return (
+    <div>
+           <div className="d-flex justify-content-center align-items-center" style={{ height: "100%" }}>
+      <div className="spinner-border text-primary" role="status">
+        <span className="visually-hidden">Carregando...</span>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default Spinner

src/data/sidebar-items-medico.json

@@ -12,7 +12,7 @@
 {
   "name": "Seus Agendamentos",
   "icon": "calendar",
-  "url": "/medico/agendamentoMedico"
+  "url": "/medico/agendamento"
 },
 
  {

src/pages/Agendamento.jsx

@@ -19,6 +19,8 @@ import "./style/Agendamento.css";
 import './style/FilaEspera.css';
 import { Search } from 'lucide-react';
 
+import Spinner from '../components/Spinner.jsx';
+
 
 
 
@@ -51,15 +53,12 @@ const Agendamento = ({setDictInfo}) => {
   const [cacheAgendamentos, setCacheAgendamentos] = useState([])
 
   const [showConfirmModal, setShowConfirmModal] = useState(false)
-
   const [motivoCancelamento, setMotivoCancelamento] = useState("")   
 
-    const [corModal, setCorModal] = useState("")
-
   const [listaConsultasID, setListaConsultaID] = useState([])
   const [coresConsultas,setCoresConsultas] = useState([])
 
-
+  const [showSpinner,setShowSpinner] = useState(true)
     
   let authHeader = getAuthorizationHeader() 
  
@@ -76,7 +75,7 @@ console.log("recarregando")
 
   const fetchDados = async () => {
     for (const agendamento of listaTodosAgendamentos) {
-      if (agendamento.status === "requested") {
+      
         // Cache de médico e paciente
         if (!cacheMedicos[agendamento.doctor_id]) {
           cacheMedicos[agendamento.doctor_id] = await GetDoctorByID(agendamento.doctor_id, authHeader);
@@ -88,6 +87,7 @@ console.log("recarregando")
         const medico = cacheMedicos[agendamento.doctor_id];
         const paciente = cachePacientes[agendamento.patient_id];
 
+        if (agendamento.status === "requested") {
         ListaFilaDeEspera.push({
           agendamento,
           Infos: {
@@ -96,15 +96,22 @@ console.log("recarregando")
             patient_id: paciente[0]?.id,
             paciente_nome: paciente[0]?.full_name,
             paciente_cpf: paciente[0]?.cpf,
+
           },
         });
       } else {
         const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
 
+        let agendamentoMelhorado = {...agendamento,  medico_nome: medico[0]?.full_name,
+            doctor_id: medico[0]?.id,
+            patient_id: paciente[0]?.id,
+            paciente_nome: paciente[0]?.full_name,
+            paciente_cpf: paciente[0]?.cpf, }
+
         if (DiaAgendamento in DictAgendamentosOrganizados) {
-          DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
+          DictAgendamentosOrganizados[DiaAgendamento].push(agendamentoMelhorado);
         } else {
-          DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
+          DictAgendamentosOrganizados[DiaAgendamento] = [agendamentoMelhorado];
         }
       }
     }
@@ -207,7 +214,6 @@ const confirmConsulta = (selectedPatientId) => {
             .then(response => {if(response.status !== 200)(console.log(response))})
             .then(result => console.log(result))
             .catch(error => console.log('error', error));
-
 }
 
 
@@ -252,12 +258,6 @@ const confirmConsulta = (selectedPatientId) => {
   }
 
 
-  const handleClickAgendamento = (agendamento) => {
-    if (agendamento.status !== 'vazio') return
-    else setPageConsulta(true)
-};
-
-
  useEffect(() => {
       console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
    if (MedicoFiltrado.id != "vazio" ) {  
@@ -319,13 +319,15 @@ const handleSearchMedicos = (term) => {
     setFiltredTodosMedicos(filtered);
 };
   
+useEffect(() => {
+  setShowSpinner(false)
+},[filaEsperaData])
 
   return (
     <div>
       <div className='spinner'></div>
       <h1>Agendar nova consulta</h1>
 
-  
       <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
           <button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
              <i className="bi bi-plus-circle"></i> Adicionar Consulta
@@ -436,7 +438,7 @@ const handleSearchMedicos = (term) => {
                     </section>
                     
                     {/* Componentes de Tabela - Adicionado props de delete da main */}   
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
                     {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}  coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}  coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
                   </div>
@@ -497,6 +499,15 @@ const handleSearchMedicos = (term) => {
                           </div></td>
                         </tr>
                       ))}
+                      {showSpinner &&
+                      <tr>
+                        <td colspan='6'>
+                          <Spinner/>
+                        </td>
+                      </tr>
+                      
+                      }
+                    
                     </tbody>
                   </table>
                 </div>
@@ -586,10 +597,6 @@ const handleSearchMedicos = (term) => {
           </div>
         </div>)}
 
-
-
-
-
         {showConfirmModal &&(
         <div
           className="modal fade show"
@@ -643,8 +650,6 @@ const handleSearchMedicos = (term) => {
                 setCoresConsultas(lista_cores)
 
                 setListaConsultaID(lista)
-                   
-
                   }}  
                   
                 >

src/pages/AgendamentoCadastroManager.jsx

@@ -5,7 +5,7 @@ import { useAuth } from '../components/utils/AuthProvider'
 import { useEffect,useState } from 'react'
 import dayjs from 'dayjs'
 import { UserInfos } from '../components/utils/Functions-Endpoints/General'
-const AgendamentoCadastroManager = ({setPageConsulta}) => {
+const AgendamentoCadastroManager = ({setPageConsulta, Dict}) => {
 
     const {getAuthorizationHeader} = useAuth()
     const [agendamento, setAgendamento] = useState({status:'confirmed'})
@@ -16,6 +16,12 @@ const AgendamentoCadastroManager = ({setPageConsulta}) => {
 
   useEffect(() => {
 
+    if(!Dict){setAgendamento({})}
+    else{
+      console.log(Dict)
+      setAgendamento(Dict)
+    }
+
     const ColherInfoUsuario =async () => {
       const result = await UserInfos(authHeader)
     
@@ -43,7 +49,7 @@ const AgendamentoCadastroManager = ({setPageConsulta}) => {
        "duration_minutes": 30,
        "appointment_type": Dict.tipo_consulta,
        
-       "patient_notes": "Prefiro horário pela manhã",
+       "patient_notes": "",
        "insurance_provider": Dict.convenio,
        "status": Dict.status,
        "created_by": idUsuario

src/pages/AgendamentoEditPage.jsx

@@ -16,7 +16,7 @@ const AgendamentoEditPage = ({setDictInfo, DictInfo}) => {
   
     let id = params.id
 
-    console.log(DictInfo, "DENTRO DO EDITAR")
+
 
     //console.log(DictInfo, 'aqui')    
 
@@ -51,9 +51,7 @@ const AgendamentoEditPage = ({setDictInfo, DictInfo}) => {
        "doctor_id": DictParaPatch.doctor_id,
        
        "duration_minutes": 30,
-    
        "chief_complaint": "Dor de cabeça há 3 ",
-       
        "created_by": idUsuario,
 
         "scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,

src/pages/Login.jsx

@@ -127,6 +127,8 @@ function Login({ onEnterSystem }) {
           navigate(`/medico/`);
         } else if (UserData?.roles?.includes("financeiro")) {
           navigate(`/financeiro/`);
+        } else if (UserData?.roles?.includes("paciente")) {
+          navigate(`/paciente/`);
         }
       }else{
         console.log("ERROROROROROOR")

src/perfis/Perfil_medico/PerfilMedico.jsx

@@ -1,6 +1,6 @@
 import { Routes, Route } from "react-router-dom";
 import Sidebar from "../../components/Sidebar";
-
+import { useState } from "react";
 import DoctorRelatorioManager  from "../../PagesMedico/DoctorRelatorioManager";
 import Prontuario from "../../PagesMedico/prontuario";
 import Relatorio from "../../PagesMedico/relatorio";
@@ -11,7 +11,13 @@ import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio";
 import EditPageRelatorio from "../../PagesMedico/EditPageRelatorio";
 import BotaoVideoChamada from '../../components/BotaoVideoChamada'; 
 
+import DoctorAgendamentoEditPage from "../../PagesMedico/DoctorAgendamentoEditPage";
+
 function PerfilMedico() {
+
+  const [dictInfo, setDictInfo] = useState({})
+
+
   return (
     
       <div id="app" className="active">
@@ -23,7 +29,8 @@ function PerfilMedico() {
             <Route path="/relatorios/:id/edit" element={<EditPageRelatorio />} />
             <Route path="/prontuario" element={<Prontuario />} />
             <Route path="/relatorios" element={<DoctorRelatorioManager />} />
-            <Route path="/agendamentoMedico" element={<DoctorAgendamentoManager />} />
+            <Route path="/agendamento" element={<DoctorAgendamentoManager setDictInfo={setDictInfo}/>} />
+            <Route path="/agendamento/edit" element={<DoctorAgendamentoEditPage DictInfo={dictInfo} setDictInfo={setDictInfo}/>} />
             <Route path="/chat" element={<Chat />} />
           </Routes>
         </div>

src/perfis/Perfil_paciente/Perfilpaciente.jsx

@@ -12,7 +12,9 @@ import BotaoVideoPaciente from "../../components/BotaoVideoPaciente";
 
 function PerfilPaciente({ onLogout }) {
 
-const [dadosConsulta, setConsulta] = useState({})
+
+
+const [DictInfo, setDictInfo] = useState({})
 
 
   return (
@@ -23,9 +25,9 @@ const [dadosConsulta, setConsulta] = useState({})
       <div id="main">
         <Routes>
           <Route path="/" element={<LaudoManager />} /> 
-          <Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
+          <Route path="agendamento" element={<ConsultasPaciente setDictInfo={setDictInfo}/>} />
           <Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
-          <Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
+          <Route path="agendamento/edit" element={<ConsultaEditPage DictInfo={DictInfo} />} />
           <Route path="laudo" element={<LaudoManager />} /> 
           <Route path="*" element={<h2>Página não encontrada</h2>} />
         </Routes>

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -37,7 +37,7 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="medicos/:id" element={<DoctorDetails />} />
             <Route path="medicos/:id/edit" element={<DoctorEditPage />} />
             <Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
-            <Route path="agendamento/:id/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
+            <Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
             <Route path="laudo" element={<LaudoManager />} />
             <Route path="disponibilidade" element={<DisponibilidadesDoctorPage />} />
             <Route path="horarios" element={<HorariosDisponibilidade/>}/>