From dbfc0de85dc010858c3146bc02b63a24ff41f4d1 Mon Sep 17 00:00:00 2001
From: joao_pedro <jpbrasil763@gmail.com>
Date: Wed, 29 Oct 2025 10:45:34 -0300
Subject: [PATCH] =?UTF-8?q?Come=C3=A7o=20da=20melhoria=20para=20troca=20de?=
 =?UTF-8?q?=20cores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgendarConsulta/CardConsulta.jsx          | 12 +++++++---
 .../AgendarConsulta/TabelaAgendamentoDia.jsx  |  6 ++---
 .../AgendarConsulta/style/card-consulta.css   |  4 ++++
 src/pages/Agendamento.jsx                     | 24 ++++++++++++-------
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx
index 5fd6721..3c002cd 100644
--- a/src/components/AgendarConsulta/CardConsulta.jsx
+++ b/src/components/AgendarConsulta/CardConsulta.jsx
@@ -4,9 +4,15 @@ 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} ) => {
+const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID} ) => {
   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()
@@ -51,12 +57,12 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
   console.log(DadosConsulta.status)
 
   return (
-    <div className={`container-cardconsulta container-cardconsulta-${TabelaAgendamento}`}>
+    <div className={`container-cardconsulta container-cardconsulta-${TabelaAgendamento} ` }>
       
 
       {DadosConsulta.id?
       
-      <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
+      <div className={`cardconsulta ${DadosConsulta.id === corModal ? "card-verde" : ""}`} id={selectedID === DadosConsulta.id ? `status-card-consulta-${corModal}` : `status-card-consulta-${DadosConsulta.status}`}> 
 
       <div>
         <section className='cardconsulta-infosecundaria'>
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
index a952349..f242d39 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
+++ b/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, setSelectedId, setShowConfirmModal }) => {
+const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, corModal }) => {
   const [indiceAcesso, setIndiceAcesso] = useState(0)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@@ -10,8 +10,6 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
 
   let ListaDiasComAgendamentos = Object.keys(agendamentos)
 
-  console.log(agendamentos)
-  
 
   //console.log(Dia, "hshdhshhsdhs")
 
@@ -73,7 +71,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} setShowConfirmModal={setShowConfirmModal}/>
+                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>
                 </div>
               </td>
             </tr>
diff --git a/src/components/AgendarConsulta/style/card-consulta.css b/src/components/AgendarConsulta/style/card-consulta.css
index 85a9e5d..536e4e1 100644
--- a/src/components/AgendarConsulta/style/card-consulta.css
+++ b/src/components/AgendarConsulta/style/card-consulta.css
@@ -72,4 +72,8 @@
 
 .container-cardconsulta{
   width: 40rem;
+}
+
+.card-verde{
+  background-color: #343a40;
 }
\ No newline at end of file
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index d201dcc..a45268c 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -50,7 +50,7 @@ const Agendamento = ({setDictInfo}) => {
 
     const [showConfirmModal, setShowConfirmModal] = useState(false)
 
-    
+    const [corModal, setCorModal] = useState("")
 
   let authHeader = getAuthorizationHeader() 
  
@@ -425,9 +425,9 @@ const handleSearchMedicos = (term) => {
                     </section>
                     
                     {/* Componentes de Tabela - Adicionado props de delete da main */}
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} />}
-                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>}
-                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
+                    {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>
                 </div>
               )
@@ -526,8 +526,12 @@ const handleSearchMedicos = (term) => {
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja excluir este agendamento? 
+                  Tem certeza que deseja excluir este agendamento?               
                 </p>
+                <div className='campo-de-input'> 
+                  <label htmlFor="">Qual o motivo do cancelamento</label>
+                  <input type="text" />
+                </div>
               </div>
 
               <div className="modal-footer">
@@ -582,7 +586,7 @@ const handleSearchMedicos = (term) => {
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja ? 
+                  Tem certeza que deseja retirar o cancelamento ? 
                 </p>
               </div>
 
@@ -591,7 +595,7 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => setShowConfirmModal(false)}
+                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
                 >
                   Cancelar
                 </button>
@@ -600,7 +604,11 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-success"
-                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)}}  
+                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
+                    setCorModal("card-verde")
+                   
+
+                  }}  
                   
                 >
                   <i className="bi bi-trash me-1"></i> Confirmar