Funcionalidade para mudar os botões se for cancelled ou confirmed

src/PagesPaciente/ConsultasPaciente.jsx

@@ -191,6 +191,7 @@ const confirmConsulta = (selectedPatientId) => {
         <div>
             <h1> Gerencie suas consultas</h1>
 
+            {/*Adicionei esse className para poder ter o fundo branco presente no style, mesmo não sendo para um form */}
             <div className='form-container'>
 
               <div className='btns-container'>
@@ -204,7 +205,8 @@ const confirmConsulta = (selectedPatientId) => {
                 }
               </div>
                
-                <h2>Seus próximos atendimentos</h2>
+
+                
                 {viewFila ? 
            <div className="fila-container">
             <div className="fila-header">
@@ -252,13 +254,15 @@ const confirmConsulta = (selectedPatientId) => {
             </table>
         </div>   
             :
+            <div>
+                <h2 className='fila-titulo'>Suas proximas consultas</h2>
 
                <TabelaAgendamentoDia agendamentos={consultasOrganizadas} setDictInfo={setDictInfo} 
                selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
                coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
                listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
-
                />
+            </div>
             } 
              
                  {showDeleteModal && (

src/PagesPaciente/style.css

@@ -108,5 +108,8 @@
 .btns-container{
     display: flex;
     gap: 10px;  
-   
+}
+
+.h2-proximos-agendamentos{
+    margin-top: 20px;
 }

src/components/AgendarConsulta/CardConsulta.jsx

@@ -15,38 +15,9 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
 
   const [decidirBotton, setDecidirBotton] = useState("")
 
-
- /* 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;
-
-      try {
-        const [Doctor, Patient] = await Promise.all([
-          GetDoctorByID(ids.doctor_id, authHeader),
-          GetPatientByID(ids.patient_id, authHeader)
-        ]);
-
-        setMedico(Doctor?.[0] || null);
-        setPaciente(Patient?.[0] || null);
-      } catch (error) {
-        console.error('Erro ao buscar médico/paciente:', error);
-      }
-    };
-
-    BuscarMedicoEPaciente();
-  }, [ids, authHeader]);*/
-
   let nameArrayPaciente = DadosConsulta?.paciente_nome?.split(' ') 
   let nameArrayMedico = DadosConsulta?.medico_nome?.split(' ')
+
   let indice_cor = listaConsultasID.indexOf(DadosConsulta.id)
 
 
@@ -74,37 +45,42 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
 
       <div className='actions-container'>        
   <button className="btn btn-sm btn-edit-custom"
-            
+    onClick={() => {
-            onClick={() => {navigate(`edit`)
+      navigate(`edit`);
-                
+      console.log(DadosConsulta);
-              console.log(DadosConsulta)
+      setDictInfo({
-              setDictInfo({...DadosConsulta,paciente_cpf:DadosConsulta?.paciente_cpf, paciente_nome:DadosConsulta?.paciente_nome, nome_medico:DadosConsulta?.nome_medico})
+        ...DadosConsulta,
+        paciente_cpf: DadosConsulta?.paciente_cpf,
+        paciente_nome: DadosConsulta?.paciente_nome,
+        nome_medico: DadosConsulta?.medico_nome
+      });
     }}
-
   >
     <i className="bi bi-pencil me-1"></i>
   </button>
-          {DadosConsulta.status === "cancelled" ? 
+
+  {indice_cor !== -1 ? (
+    // ✅ Caso o ID esteja na lista
+    <>
+    {coresConsultas[indice_cor] === "cancelled" ?
         <button
           className="btn btn-sm btn-confirm-style"
           onClick={() => {
-                console.log(DadosConsulta.id)
+            console.log(DadosConsulta.id);
-                setShowConfirmModal(true)
+            setShowConfirmModal(true);
             setSelectedId(DadosConsulta.id);
           }}
         >
-             <i class="bi bi-check-lg"></i>
+          <i className="bi bi-check-lg"></i>
         </button>
       :
+
        <button
           className="btn btn-sm btn-delete-custom-style"
           onClick={() => {
-                console.log(DadosConsulta.id)
+            console.log(DadosConsulta.id);
             setSelectedId(DadosConsulta.id);
-            
-
             setShowDeleteModal(true);
-
           }}
         >
           <i className="bi bi-trash me-1"></i>
@@ -112,9 +88,38 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
         
 
         }
-            
+    </>
+  ) : (
+    // 🧩 Caso normal — segue a lógica do status
+    <>
+      {DadosConsulta.status === "cancelled" ? (
+        <button
+          className="btn btn-sm btn-confirm-style"
+          onClick={() => {
+            console.log(DadosConsulta.id);
+            setShowConfirmModal(true);
+            setSelectedId(DadosConsulta.id);
+          }}
+        >
+          <i className="bi bi-check-lg"></i>
+        </button>
+      ) : (
+        <button
+          className="btn btn-sm btn-delete-custom-style"
+          onClick={() => {
+            console.log(DadosConsulta.id);
+            setSelectedId(DadosConsulta.id);
+            setShowDeleteModal(true);
+          }}
+        >
+          <i className="bi bi-trash me-1"></i>
+        </button>
+      )}
+    </>
+  )}
 </div>
 
+
       </div>
       : 
      null