Trocando cor quando deleta ou confirma, no medico e paciente

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -35,6 +35,7 @@ const Agendamento = ({setDictInfo}) => {
    const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
 
   const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
  
   const [coresConsultas, setCoresConsultas] = useState([])
 
@@ -226,6 +227,30 @@ const deleteConsulta = (selectedPatientId) => {
     return ListaDiasDatas
   }
 
+  
+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 handleClickCancel = () => setPageConsulta(false)
 
@@ -274,26 +299,94 @@ const deleteConsulta = (selectedPatientId) => {
                     
                     {tabela === "diario" && <TabelaAgendamentoDia  agendamentos={DictAgendamentosOrganizados}
                      setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} 
-                     listaConsultasID={[]} setListaConsultaID={setListaConsultaID} coresConsultas={coresConsultas}/>}
+                     listaConsultasID={listaConsultasID} 
+                     setListaConsultaID={setListaConsultaID} coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal}
+                    
+                     />}
                     
                     
                     {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} 
                     setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}
-                     listaConsultasID={[]} setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas} />}
+                     listaConsultasID={listaConsultasID} setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal} />}
                     
                     
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados}
-                    setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} listaConsultasID={[]} 
+                    setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} listaConsultasID={listaConsultasID} 
-                    setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas}/>}
+                    setListaConsultaID={setListaConsultaID}  coresConsultas={coresConsultas} setShowConfirmModal={setShowConfirmModal} />}
                   </div>
                 </div>
          
               </section>
         </div>
       ) : (
-        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} Dict={{nome_medico:user?.profile?.full_name}}/>
+        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} Dict={{nome_medico:user?.profile?.full_name}} 
+        />
       )}
 
+
+       {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>)}
+
        {showDeleteModal && (
         <div
           className="modal fade show"
@@ -335,7 +428,8 @@ const deleteConsulta = (selectedPatientId) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => {setShowDeleteModal(false);
+                  onClick={() => {
+                    setShowDeleteModal(false);
 
                                    }}
                 >
@@ -346,7 +440,7 @@ const deleteConsulta = (selectedPatientId) => {
                 <button
                   type="button"
                   className="btn btn-danger"
-                  onClick={() => {deleteConsulta(selectedID);
+                  onClick={() => {
                     setShowDeleteModal(false)
                   let lista_cores = coresConsultas
                 
@@ -371,6 +465,8 @@ const deleteConsulta = (selectedPatientId) => {
           </div>
         </div>)}
 
+        
+
       
     </div>
   )

src/PagesPaciente/ConsultasPaciente.jsx

@@ -26,11 +26,21 @@ const ConsultasPaciente = ({ setDictInfo }) => {
     const [consultas, setConsultas] = useState([])
    
     const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
-
     const [filaDeEspera, setFilaDeEspera] = useState([])
-
     const [viewFila, setViewFila] = useState(false)
 
+     const [listaConsultasID, setListaConsultaID] = useState([])
+    const [coresConsultas,setCoresConsultas] = useState([])
+
+    const [showConfirmModal, setShowConfirmModal] = useState(false)
+
+
+    useEffect(() => {
+
+        console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")
+
+    }, [coresConsultas, listaConsultasID])
+
     useMemo(() => {
         let conjuntoConsultas = {}
         let filaEspera = []
@@ -118,6 +128,32 @@ const ConsultasPaciente = ({ setDictInfo }) => {
 
     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();
@@ -225,7 +261,12 @@ const ConsultasPaciente = ({ setDictInfo }) => {
         </div>   
             :
 
-               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo} selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}/>
+               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo} 
+               selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
+               coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
+               listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
+
+               />
             } 
              
                  {showDeleteModal && (
@@ -280,10 +321,12 @@ const ConsultasPaciente = ({ setDictInfo }) => {
                 <button
                   type="button"
                   className="btn btn-danger"
-                  onClick={() => {deleteConsulta(selectedID);
+                  onClick={() => {
+                    
+                    deleteConsulta(selectedID)
                     setShowDeleteModal(false)
-                /*  let lista_cores = coresConsultas
+                  let lista_cores = coresConsultas
-                
+        
                   let lista = listaConsultasID
 
                 lista.push(selectedID)
@@ -293,7 +336,7 @@ const ConsultasPaciente = ({ setDictInfo }) => {
 
                 setListaConsultaID(lista)
 
-                console.log("lista", lista)*/
+                console.log("lista", lista)
                   
                   }}  
                   
@@ -304,6 +347,73 @@ const ConsultasPaciente = ({ setDictInfo }) => {
             </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/pages/Agendamento.jsx

@@ -55,12 +55,12 @@ const Agendamento = ({setDictInfo}) => {
     const [motivoCancelamento, setMotivoCancelamento] = useState("")
 
     const [corModal, setCorModal] = useState("")
+    
 
     const [listaConsultasID, setListaConsultaID] = useState([])
     const [coresConsultas,setCoresConsultas] = useState([])
 
-
+    
-
   let authHeader = getAuthorizationHeader() 
  
 const cacheMedicos = {};
@@ -207,7 +207,6 @@ const confirmConsulta = (selectedPatientId) => {
             .then(response => {if(response.status !== 200)(console.log(response))})
             .then(result => console.log(result))
             .catch(error => console.log('error', error));
-
 }
 
 
@@ -579,10 +578,6 @@ const handleSearchMedicos = (term) => {
           </div>
         </div>)}
 
-
-
-
-
         {showConfirmModal &&(
         <div
           className="modal fade show"
@@ -636,8 +631,6 @@ const handleSearchMedicos = (term) => {
                 setCoresConsultas(lista_cores)
 
                 setListaConsultaID(lista)
-                   
-
                   }}  
                   
                 >

src/perfis/Perfil_paciente/Perfilpaciente.jsx

@@ -8,7 +8,7 @@ import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
 import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
 function PerfilPaciente({ onLogout }) {
 
-const [dadosConsulta, setConsulta] = useState({})
+
 
 const [DictInfo, setDictInfo] = useState({})
 

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/>}/>