Adicionado-novas-tabelas

src/pages/Agendamento.jsx

@@ -23,7 +23,7 @@ import { Search } from 'lucide-react';
 
 
 
-const Agendamento = ({setDictInfo}) => {
+const Agendamento = ({ setDictInfo }) => {
   const navigate = useNavigate();
 
   const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([])
@@ -35,8 +35,8 @@ const Agendamento = ({setDictInfo}) => {
   const [PageNovaConsulta, setPageConsulta] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [agendamentos, setAgendamentos] = useState()
-  const {getAuthorizationHeader} = useAuth()
+  const { getAuthorizationHeader } = useAuth()
-  const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
+  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({})
 
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
@@ -45,7 +45,7 @@ const Agendamento = ({setDictInfo}) => {
   const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
   const [searchTermDoctor, setSearchTermDoctor] = useState('');
 
-    const [MedicoFiltrado, setMedicoFiltrado] = useState({id:"vazio"})
+  const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" })
 
 
   const [cacheAgendamentos, setCacheAgendamentos] = useState([])
@@ -57,20 +57,24 @@ const Agendamento = ({setDictInfo}) => {
   const [corModal, setCorModal] = useState("")
 
   const [listaConsultasID, setListaConsultaID] = useState([])
-    const [coresConsultas,setCoresConsultas] = useState([])
+  const [coresConsultas, setCoresConsultas] = useState([])
-
 
+  // Estados para a tabela da fila de espera
+  const [searchTermFila, setSearchTermFila] = useState('');
+  const [filtroMedicoFila, setFiltroMedicoFila] = useState('Todos');
+  const [paginaAtualFila, setPaginaAtualFila] = useState(1);
+  const [itensPorPaginaFila, setItensPorPaginaFila] = useState(10);
 
   let authHeader = getAuthorizationHeader()
 
-const cacheMedicos = {};
+  const cacheMedicos = {};
-const cachePacientes = {};
+  const cachePacientes = {};
 
 
 
-useMemo(() => {
+  useMemo(() => {
     if (!listaTodosAgendamentos.length) return { agendamentosOrganizados: {}, filaEsperaData: [] };
-console.log("recarregando")
+    console.log("recarregando")
     const DictAgendamentosOrganizados = {};
     const ListaFilaDeEspera = [];
 
@@ -128,7 +132,7 @@ console.log("recarregando")
     fetchDados();
 
     return { agendamentosOrganizados: DictAgendamentosOrganizados, filaEsperaData: ListaFilaDeEspera };
-}, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda
+  }, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda
 
 
   useEffect(() => {
@@ -144,15 +148,16 @@ console.log("recarregando")
 
     fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
       .then(response => response.json())
-      .then(result => {setListaTodosAgendamentos(result);console.log(result)})
+      .then(result => { setListaTodosAgendamentos(result); console.log(result) })
       .catch(error => console.log('error', error));
 
     const PegarTodosOsMedicos = async () => {
       let lista = []
       const TodosOsMedicos = await GetAllDoctors(authHeader)
 
-      for(let d = 0; TodosOsMedicos.length > d; d++){
+      for (let d = 0; TodosOsMedicos.length > d; d++) {
-        lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
+        lista.push({ nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })
+      }
       setListaDeMedicos(lista)
     }
     PegarTodosOsMedicos()
@@ -160,14 +165,15 @@ console.log("recarregando")
   }, [])
 
 
-const deleteConsulta = (selectedPatientId) => {
+  const deleteConsulta = (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":"cancelled",
+    var raw = JSON.stringify({
+      "status": "cancelled",
       "cancellation_reason": motivoCancelamento
     });
 
@@ -180,19 +186,20 @@ const deleteConsulta = (selectedPatientId) => {
     };
 
     fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
-            .then(response => {if(response.status !== 200)(console.log(response))})
+      .then(response => { if (response.status !== 200) (console.log(response)) })
       .then(result => console.log(result))
       .catch(error => console.log('error', error));
-}
+  }
 
-const confirmConsulta = (selectedPatientId) => {
+  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 raw = JSON.stringify({
+      "status": "confirmed"
     });
 
 
@@ -204,11 +211,11 @@ const confirmConsulta = (selectedPatientId) => {
     };
 
     fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
-            .then(response => {if(response.status !== 200)(console.log(response))})
+      .then(response => { if (response.status !== 200) (console.log(response)) })
       .then(result => console.log(result))
       .catch(error => console.log('error', error));
 
-}
+  }
 
 
 
@@ -247,7 +254,7 @@ const confirmConsulta = (selectedPatientId) => {
         default: break
       }
     }
-    let ListaDiasDatas = {segundas:segundas,tercas:tercas,quartas: quartas,quintas: quintas,sextas: sextas}
+    let ListaDiasDatas = { segundas: segundas, tercas: tercas, quartas: quartas, quintas: quintas, sextas: sextas }
     return ListaDiasDatas
   }
 
@@ -255,12 +262,12 @@ const confirmConsulta = (selectedPatientId) => {
   const handleClickAgendamento = (agendamento) => {
     if (agendamento.status !== 'vazio') return
     else setPageConsulta(true)
-};
+  };
 
 
   useEffect(() => {
     console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
-   if (MedicoFiltrado.id != "vazio" ) {  
+    if (MedicoFiltrado.id != "vazio") {
       const unicoMedico = MedicoFiltrado;
       console.log(unicoMedico)
       const idMedicoFiltrado = unicoMedico.idMedico;
@@ -280,7 +287,7 @@ const confirmConsulta = (selectedPatientId) => {
     }
   }, [FiltredTodosMedicos, MedicoFiltrado]);
 
-const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => { 
+  const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     setCacheAgendamentos(DictAgendamentosOrganizados);
 
     const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
@@ -291,12 +298,12 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     );
 
     return agendamentosFiltrados;
-};
+  };
 
-const handleSearchMedicos = (term) => {
+  const handleSearchMedicos = (term) => {
     setSearchTermDoctor(term);
     if (term.trim() === '') {
-      if(MedicoFiltrado.id !== "vazio"){
+      if (MedicoFiltrado.id !== "vazio") {
         console.log("Medico escolhido, mas vai ser apagado")
         console.log(cacheAgendamentos, "cache ")
 
@@ -304,20 +311,20 @@ const handleSearchMedicos = (term) => {
 
 
       setFiltredTodosMedicos([]);
-        setMedicoFiltrado({id:"vazio"})
+      setMedicoFiltrado({ id: "vazio" })
 
       //2  FiltrarAgendamentos()
       return;
     }
-    if (FiltredTodosMedicos.length === 1){
+    if (FiltredTodosMedicos.length === 1) {
-      setMedicoFiltrado({...FiltredTodosMedicos[0]})
+      setMedicoFiltrado({ ...FiltredTodosMedicos[0] })
     }
 
     const filtered = ListaDeMedicos.filter(medico =>
       medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
     );
     setFiltredTodosMedicos(filtered);
-};
+  };
 
 
   return (
@@ -437,68 +444,282 @@ const handleSearchMedicos = (term) => {
 
                     {/* 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 === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} 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}/>}
+                    {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>
                 </div>
               )
               :
               (
-                <div className="fila-container">
+                <div className="page-content table-paciente-container">
-                  <div className="fila-header">
+                  <section className="row">
+                    <div className="col-12">
+                      <div className="card table-paciente-card">
+                        <div className="card-header">
+                          <h4 className="card-title mb-0">Fila de Espera</h4>
+                        </div>
+
+                        <div className="card-body">
+                          {/* Filtros */}
+                          <div className="card p-3 mb-3 table-paciente-filters">
+                            <h5 className="mb-3">
+                              <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
+                            </h5>
+
+                            <div className="mb-3">
                               <input
                                 type="text"
-                      placeholder="Pesquisar na fila de espera..."
+                                className="form-control"
-                      className="busca-fila-espera"
+                                placeholder="Buscar por nome do paciente ou CPF..."
-                      value={searchTerm}
+                                value={searchTermFila}
-                      onChange={(e) => setSearchTerm(e.target.value)}
+                                onChange={(e) => setSearchTermFila(e.target.value)}
                               />
-                    <h2 className="fila-titulo">Fila de Espera</h2>
+                              <small className="text-muted">
+                                Digite o nome completo ou número do CPF
+                              </small>
                             </div>
-                  <table className="fila-tabela">
+
+                            <div className="mb-3">
+                              <input
+                                type="text"
+                                className="form-control"
+                                placeholder="Filtrar por nome do médico..."
+                                value={filtroMedicoFila === 'Todos' ? '' : filtroMedicoFila}
+                                onChange={(e) => setFiltroMedicoFila(e.target.value || 'Todos')}
+                              />
+                              <small className="text-muted">
+                                Digite o nome do médico para filtrar
+                              </small>
+                            </div>
+
+                            <div className="d-flex justify-content-end">
+                              <button
+                                className="btn btn-outline-secondary btn-sm"
+                                onClick={() => {
+                                  setSearchTermFila('');
+                                  setFiltroMedicoFila('Todos');
+                                  setPaginaAtualFila(1);
+                                }}
+                              >
+                                <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                              </button>
+                            </div>
+
+                            <div className="mt-3">
+                              <div className="contador-pacientes">
+                                {(() => {
+                                  const filtrados = filaEsperaData.filter((item) => {
+                                    const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
+                                    const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
+                                    const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
+                                    const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
+                                    return passaBusca && passaMedico;
+                                  });
+                                  return filtrados.length;
+                                })()} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Filtros Ativos */}
+                          {(searchTermFila || filtroMedicoFila !== "Todos") && (
+                            <div className="alert alert-info mb-3 filters-active">
+                              <strong>Filtros ativos:</strong>
+                              <div className="mt-1">
+                                {searchTermFila && <span className="badge bg-primary me-2">Busca: "{searchTermFila}"</span>}
+                                {filtroMedicoFila !== "Todos" && <span className="badge bg-primary me-2">Médico: {filtroMedicoFila}</span>}
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Tabela */}
+                          <div className="table-responsive">
+                            <table className="table table-striped table-hover table-paciente-table">
                               <thead>
                                 <tr>
-                        <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
+                                  <th>Nome do Paciente</th>
-                        <th>CPF</th> {/* Ajustado o cabeçalho */}
+                                  <th>CPF</th>
-                        <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
+                                  <th>Médico Solicitado</th>
-                        <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
+                                  <th>Data da Solicitação</th>
                                   <th>Ações</th>
                                 </tr>
                               </thead>
                               <tbody>
-                      {filaEsperaData.map((item, index) => (
+                                {(() => {
-                        <tr key={index}>
+                                  // Filtrar dados
-                          <td> <p>{item.Infos?.paciente_nome} </p>  </td>
+                                  const filaFiltrada = filaEsperaData.filter((item) => {
-                          <td><p>{item.Infos?.paciente_cpf} </p></td>
+                                    const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
-                          <td><p>{item.Infos?.nome_medico} </p></td>
+                                    const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
-                          <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td> 
+                                    const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
-                          <td> <div className="d-flex gap-2">
+                                    const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
+                                    return passaBusca && passaMedico;
+                                  });
 
-                              <button className="btn btn-sm btn-edit"
+                                  // Paginação
+                                  const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
+                                  const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
+                                  const indiceFinal = indiceInicial + itensPorPaginaFila;
+                                  const filaPaginada = filaFiltrada.slice(indiceInicial, indiceFinal);
+
+                                  if (filaPaginada.length > 0) {
+                                    return filaPaginada.map((item, index) => (
+                                      <tr key={index}>
+                                        <td>
+                                          <div className="d-flex align-items-center">
+                                            {item.Infos?.paciente_nome}
+                                          </div>
+                                        </td>
+                                        <td>{item.Infos?.paciente_cpf}</td>
+                                        <td>
+                                          <span className="badge insurance-badge">
+                                            {item.Infos?.nome_medico || 'Não informado'}
+                                          </span>
+                                        </td>
+                                        <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
+                                        <td>
+                                          <div className="d-flex gap-2">
+                                            <button
+                                              className="btn btn-sm btn-edit"
                                               onClick={() => {
-                                console.log(item, 'item')
+                                                console.log(item, 'item');
-                                navigate(`${2}/edit`) 
+                                                navigate(`${2}/edit`);
-                                setDictInfo(item)
+                                                setDictInfo(item);
                                               }}
                                             >
                                               <i className="bi bi-pencil me-1"></i> Editar
                                             </button>
 
-
                                             <button
                                               className="btn btn-sm btn-delete"
                                               onClick={() => {
-                                setSelectedId(item.agendamento.id)
+                                                setSelectedId(item.agendamento.id);
                                                 setShowDeleteModal(true);
                                               }}
                                             >
                                               <i className="bi bi-trash me-1"></i> Excluir
                                             </button>
-                          </div></td>
+                                          </div>
+                                        </td>
                                       </tr>
-                      ))}
+                                    ));
+                                  } else {
+                                    return (
+                                      <tr>
+                                        <td colSpan="5" className="text-center py-4">
+                                          <div className="text-muted">
+                                            <i className="bi bi-search display-4"></i>
+                                            <p className="mt-2">Nenhuma solicitação encontrada com os filtros aplicados.</p>
+                                            {(searchTermFila || filtroMedicoFila !== "Todos") && (
+                                              <button
+                                                className="btn btn-outline-primary btn-sm mt-2"
+                                                onClick={() => {
+                                                  setSearchTermFila('');
+                                                  setFiltroMedicoFila('Todos');
+                                                  setPaginaAtualFila(1);
+                                                }}
+                                              >
+                                                Limpar filtros
+                                              </button>
+                                            )}
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    );
+                                  }
+                                })()}
                               </tbody>
                             </table>
+
+                            {/* Paginação */}
+                            {(() => {
+                              const filaFiltrada = filaEsperaData.filter((item) => {
+                                const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
+                                const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
+                                const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
+                                const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
+                                return passaBusca && passaMedico;
+                              });
+
+                              const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
+                              const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
+                              const indiceFinal = indiceInicial + itensPorPaginaFila;
+
+                              if (filaFiltrada.length > 0) {
+                                return (
+                                  <div className="d-flex justify-content-between align-items-center mt-3">
+                                    <div className="d-flex align-items-center">
+                                      <span className="me-2 text-muted">Itens por página:</span>
+                                      <select
+                                        className="form-select form-select-sm w-auto"
+                                        value={itensPorPaginaFila}
+                                        onChange={(e) => {
+                                          setItensPorPaginaFila(Number(e.target.value));
+                                          setPaginaAtualFila(1);
+                                        }}
+                                      >
+                                        <option value={5}>5</option>
+                                        <option value={10}>10</option>
+                                        <option value={25}>25</option>
+                                        <option value={50}>50</option>
+                                      </select>
+                                    </div>
+
+                                    <div className="d-flex align-items-center">
+                                      <span className="me-3 text-muted">
+                                        Página {paginaAtualFila} de {totalPaginasFila} •
+                                        Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, filaFiltrada.length)} de {filaFiltrada.length} solicitações
+                                      </span>
+
+                                      <nav>
+                                        <ul className="pagination pagination-sm mb-0">
+                                          <li className={`page-item ${paginaAtualFila === 1 ? 'disabled' : ''}`}>
+                                            <button
+                                              className="page-link"
+                                              onClick={() => setPaginaAtualFila(paginaAtualFila - 1)}
+                                            >
+                                              <i className="bi bi-chevron-left"></i>
+                                            </button>
+                                          </li>
+
+                                          {Array.from({ length: Math.min(5, totalPaginasFila) }, (_, i) => {
+                                            const startPage = Math.max(1, paginaAtualFila - 2);
+                                            const pageNum = startPage + i;
+                                            if (pageNum <= totalPaginasFila) {
+                                              return (
+                                                <li key={pageNum} className={`page-item ${pageNum === paginaAtualFila ? 'active' : ''}`}>
+                                                  <button
+                                                    className="page-link"
+                                                    onClick={() => setPaginaAtualFila(pageNum)}
+                                                  >
+                                                    {pageNum}
+                                                  </button>
+                                                </li>
+                                              );
+                                            }
+                                            return null;
+                                          })}
+
+                                          <li className={`page-item ${paginaAtualFila === totalPaginasFila ? 'disabled' : ''}`}>
+                                            <button
+                                              className="page-link"
+                                              onClick={() => setPaginaAtualFila(paginaAtualFila + 1)}
+                                            >
+                                              <i className="bi bi-chevron-right"></i>
+                                            </button>
+                                          </li>
+                                        </ul>
+                                      </nav>
+                                    </div>
+                                  </div>
+                                );
+                              }
+                              return null;
+                            })()}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </section>
                 </div>
               )
             }
@@ -550,7 +771,8 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => {setShowDeleteModal(false);
+                  onClick={() => {
+                    setShowDeleteModal(false);
 
                   }}
                 >
@@ -561,7 +783,8 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-danger"
-                  onClick={() => {deleteConsulta(selectedID);
+                  onClick={() => {
+                    deleteConsulta(selectedID);
                     setShowDeleteModal(false)
                     let lista_cores = coresConsultas
 
@@ -590,7 +813,7 @@ const handleSearchMedicos = (term) => {
 
 
 
-        {showConfirmModal &&(
+      {showConfirmModal && (
         <div
           className="modal fade show"
           style={{
@@ -623,7 +846,7 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
+                  onClick={() => { setShowConfirmModal(false); setSelectedId("") }}
                 >
                   Cancelar
                 </button>
@@ -632,7 +855,8 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-success"
-                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
+                  onClick={() => {
+                    confirmConsulta(selectedID); setShowConfirmModal(false)
                     let lista_cores = coresConsultas
 
                     let lista = listaConsultasID

src/pages/style/Agendamento.css

@@ -433,3 +433,21 @@ html[data-bs-theme="dark"] {
   width: 80%;
 }
 
+/* Estilo para o botão Excluir nos modais de Agendamento - vermelho escuro */
+.modal-footer .btn-danger,
+button.btn.btn-danger {
+  background-color: #c82333 !important;
+  border-color: #bd2130 !important;
+  color: #ffffff !important;
+}
+
+.modal-footer .btn-danger:hover,
+.modal-footer .btn-danger:focus,
+.modal-footer .btn-danger:active,
+button.btn.btn-danger:hover,
+button.btn.btn-danger:focus,
+button.btn.btn-danger:active {
+  background-color: #a71d2a !important;
+  border-color: #9c1c28 !important;
+  color: #ffffff !important;
+}