Mudar cores dos cards de consulta dinamicamente

src/components/AgendarConsulta/CardConsulta.jsx

@@ -4,21 +4,16 @@ import { useAuth } from '../utils/AuthProvider';
 import { useNavigate } from 'react-router-dom';
 import { useMemo } from 'react';
 import "./style/card-consulta.css"
-const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID} ) => {
+const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID, coresConsultas, setListaConsultaID, listaConsultasID} ) => {
   const navigate = useNavigate();
 
-  console.log("Testando cor modal", corModal)
 
-  if(selectedID === DadosConsulta.id){
-    console.log("É igual, man")
-  }
 
   const {getAuthorizationHeader} = useAuth()
   const authHeader = getAuthorizationHeader()
   const [Paciente, setPaciente] = useState()
   const [Medico, setMedico] = useState()
 
-  console.log(DadosConsulta.chief_complaint)
 
 
   const ids = useMemo(() => {
@@ -54,7 +49,12 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
 
   let nameArrayMedico = Medico?.full_name.split(' ')
 
-  console.log(DadosConsulta.status)
+
+  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} ` }>
@@ -62,7 +62,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
 
       {DadosConsulta.id?  
       
-      <div className={`cardconsulta ${DadosConsulta.id === corModal ? "card-verde" : ""}`} id={selectedID === DadosConsulta.id ? `status-card-consulta-${corModal}` : `status-card-consulta-${DadosConsulta.status}`}> 
+      <div className={`cardconsulta`} id={indice_cor !== -1  ? `status-card-consulta-${coresConsultas[indice_cor]}` : `status-card-consulta-${DadosConsulta.status}`}> 
 
       <div>
         <section className='cardconsulta-infosecundaria'>
@@ -89,7 +89,8 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
           >
             <i className="bi bi-pencil me-1"></i>
           </button>           
-          {DadosConsulta.status === "cancelled" ? 
+          {DadosConsulta.status === "cancelled" || coresConsultas[indice_cor] === "cancelled" ? 
+
             <button
               className="btn btn-sm btn-confirm-style"
                             onClick={() => {
@@ -97,6 +98,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
                 setShowConfirmModal(true)
                 setSelectedId(DadosConsulta.id);
               
+             
               }}
             >
              <i class="bi bi-check-lg"></i>
@@ -107,6 +109,8 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
                             onClick={() => {
                 console.log(DadosConsulta.id)
                 setSelectedId(DadosConsulta.id);
+            
+
                setShowDeleteModal(true);
 
               }}

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
-const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, corModal }) => {
+const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
   const [indiceAcesso, setIndiceAcesso] = useState(0)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@@ -11,6 +11,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
   let ListaDiasComAgendamentos = Object.keys(agendamentos)
 
 
+
   //console.log(Dia, "hshdhshhsdhs")
 
   useEffect(() => {
@@ -71,7 +72,7 @@ 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)}>
-                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>
+                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
                 </div>
               </td>
             </tr>

src/components/AgendarConsulta/style/card-consulta.css

@@ -63,11 +63,6 @@
 .btn-confirm-style{
    background-color: #5ce687;
 
-}
-
-.btn-confirm-style:hover{
-    
-
 }
 
 .container-cardconsulta{
@@ -75,5 +70,7 @@
 }
 
 .card-verde{
-  background-color: #343a40;
+  background-color: #b7ffbd;
+  border: #91d392;
 }
+

src/pages/Agendamento.jsx

@@ -50,8 +50,15 @@ const Agendamento = ({setDictInfo}) => {
 
     const [showConfirmModal, setShowConfirmModal] = useState(false)
 
+    const [motivoCancelamento, setMotivoCancelamento] = useState("")
+
     const [corModal, setCorModal] = useState("")
 
+    const [listaConsultasID, setListaConsultaID] = useState([])
+    const [coresConsultas,setCoresConsultas] = useState([])
+
+
+
   let authHeader = getAuthorizationHeader() 
  
 const cacheMedicos = {};
@@ -158,7 +165,8 @@ const deleteConsulta = (selectedPatientId) => {
             myHeaders.append("authorization", authHeader)
     
     
-            var raw = JSON.stringify({ "status":"cancelled"      
+            var raw = JSON.stringify({ "status":"cancelled",
+              "cancellation_reason": motivoCancelamento      
             });
     
     
@@ -312,6 +320,7 @@ const handleSearchMedicos = (term) => {
 
   return (
     <div>
+      <div className='spinner'></div>
       <h1>Agendar nova consulta</h1>
       
   
@@ -425,7 +434,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} corModal={corModal}/>}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} 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} corModal={corModal}/>}
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
                   </div>
@@ -515,7 +524,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"
@@ -526,11 +535,11 @@ 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'> 
-                  <label htmlFor="">Qual o motivo do cancelamento</label>
+                  
-                  <input type="text" />
+                  <textarea  className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
                 </div>
               </div>
 
@@ -539,7 +548,9 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => setShowDeleteModal(false)}
+                  onClick={() => {setShowDeleteModal(false);
+
+                                   }}
                 >
                   Cancelar
                 </button>
@@ -548,7 +559,22 @@ 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
@@ -605,7 +631,16 @@ const handleSearchMedicos = (term) => {
                   type="button"
                   className="btn btn-success"
                   onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
-                    setCorModal("card-verde")
+                         let lista_cores = coresConsultas
+                
+                  let lista = listaConsultasID
+
+                lista.push(selectedID)
+                lista_cores.push("confirmed")
+
+                setCoresConsultas(lista_cores)
+
+                setListaConsultaID(lista)
                    
 
                   }}  

src/pages/style/Agendamento.css

@@ -427,3 +427,9 @@ html[data-bs-theme="dark"] {
     background-color: #f0f0f0; /* Cor ao passar o mouse */
     color: #007bff;
 }
+
+
+.input-modal{
+  width: 80%;
+}
+