Atualização da main

src/_assets/css/pages/agendamento/Agendamento.css

@@ -268,3 +268,36 @@
   align-items: center;
   justify-content: center;
 }
+.container-btns-agenda-fila_esepera {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 15px 0 20px;
+}
+
+.tabs-agenda-fila {
+  display: flex;
+  gap: 10px;
+}
+
+.btns-gerenciamento-e-consulta {
+  display: flex;
+  gap: 10px;
+}
+.container-btns-agenda-fila_esepera {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 8px;   
+}
+
+
+.calendario-ou-filaespera {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+
+.calendar-wrapper {
+  margin-top: 0;
+}

src/pages/secretaria/ListaAgendamentos.jsx

@@ -68,9 +68,10 @@ const Agendamento = ({ setDictInfo }) => {
     year: currentDate.year()
   });
 
-
   const fetchAppointments = async () => {
-        const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY);
+    const myHeaders = new Headers();
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("apikey", API_KEY);
     const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
     try {
       const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*", requestOptions);
@@ -81,9 +82,12 @@ const Agendamento = ({ setDictInfo }) => {
     }
   };
 
-
   const updateAppointmentStatus = async (id, updates) => {
-        const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY); myHeaders.append("Content-Type", "application/json"); myHeaders.append("Prefer", "return=representation");
+    const myHeaders = new Headers();
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append("Prefer", "return=representation");
     const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
 
     try {
@@ -101,10 +105,13 @@ const Agendamento = ({ setDictInfo }) => {
     }
   };
 
-
   const deleteConsulta = async (id) => {
     setShowSpinner(true);
-        const success = await updateAppointmentStatus(id, { status: "cancelled", cancellation_reason: motivoCancelamento, updated_at: new Date().toISOString() });
+    const success = await updateAppointmentStatus(id, {
+      status: "cancelled",
+      cancellation_reason: motivoCancelamento,
+      updated_at: new Date().toISOString()
+    });
     setShowSpinner(false);
     if (success) {
       setShowDeleteModal(false);
@@ -117,7 +124,11 @@ const Agendamento = ({ setDictInfo }) => {
 
   const confirmConsulta = async (id) => {
     setShowSpinner(true);
-        const success = await updateAppointmentStatus(id, { status: "agendado", cancellation_reason: null, updated_at: new Date().toISOString() });
+    const success = await updateAppointmentStatus(id, {
+      status: "agendado",
+      cancellation_reason: null,
+      updated_at: new Date().toISOString()
+    });
     setShowSpinner(false);
     if (success) {
       setShowConfirmModal(false);
@@ -127,12 +138,10 @@ const Agendamento = ({ setDictInfo }) => {
     }
   };
 
-
   const handleQuickJumpChange = (type, value) => {
     setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
   };
 
-
   useEffect(() => {
     setQuickJump({
       month: currentDate.month(),
@@ -140,23 +149,26 @@ const Agendamento = ({ setDictInfo }) => {
     });
   }, [currentDate]);
 
-
   const applyQuickJump = () => {
     let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
     setCurrentDate(newDate);
     setSelectedDay(newDate);
   };
 
-
   useEffect(() => {
     if (!listaTodosAgendamentos.length) { setShowSpinner(false); return; }
     setShowSpinner(true);
     const fetchDados = async () => {
-            const newDict = {}; const newFila = [];
+      const newDict = {};
+      const newFila = [];
       for (const agendamento of listaTodosAgendamentos) {
         if (!agendamento.doctor_id || !agendamento.patient_id) continue;
-                if (!cacheMedicos[agendamento.doctor_id]) { cacheMedicos[agendamento.doctor_id] = (await GetDoctorByID(agendamento.doctor_id, authHeader))[0]; }
+        if (!cacheMedicos[agendamento.doctor_id]) {
-                if (!cachePacientes[agendamento.patient_id]) { cachePacientes[agendamento.patient_id] = (await GetPatientByID(agendamento.patient_id, authHeader))[0]; }
+          cacheMedicos[agendamento.doctor_id] = (await GetDoctorByID(agendamento.doctor_id, authHeader))[0];
+        }
+        if (!cachePacientes[agendamento.patient_id]) {
+          cachePacientes[agendamento.patient_id] = (await GetPatientByID(agendamento.patient_id, authHeader))[0];
+        }
         const medico = cacheMedicos[agendamento.doctor_id];
         const paciente = cachePacientes[agendamento.patient_id];
 
@@ -167,14 +179,20 @@ const Agendamento = ({ setDictInfo }) => {
           paciente_cpf: paciente?.cpf
         };
 
-                if (agendamento.status === "requested") { newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado }); }
+        if (agendamento.status === "requested") {
-                else {
+          newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
+        } else {
           const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
-                    if (newDict[DiaAgendamento]) { newDict[DiaAgendamento].push(agendamentoMelhorado); }
+          if (newDict[DiaAgendamento]) {
-                    else { newDict[DiaAgendamento] = [agendamentoMelhorado]; }
+            newDict[DiaAgendamento].push(agendamentoMelhorado);
+          } else {
+            newDict[DiaAgendamento] = [agendamentoMelhorado];
           }
         }
-            for (const key in newDict) { newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at)); }
+      }
+      for (const key in newDict) {
+        newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
+      }
       setAgendamentosOrganizados(newDict);
       setFilaEsperaData(newFila);
       setShowSpinner(false);
@@ -182,58 +200,74 @@ const Agendamento = ({ setDictInfo }) => {
     fetchDados();
   }, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);
 
-
   useEffect(() => {
     fetchAppointments();
-        GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
+    GetAllDoctors(authHeader).then(docs =>
+      setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })))
+    );
   }, [authHeader]);
 
-
   const handleSearchMedicos = (term) => { };
 
-
   const filaEsperaFiltrada = useMemo(() => {
     if (!waitlistSearch.trim()) return filaEsperaData;
     const term = waitlistSearch.toLowerCase();
-        return filaEsperaData.filter(item => (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) || (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) || (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term));
+    return filaEsperaData.filter(item =>
+      (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
+      (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
+      (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term)
+    );
   }, [waitlistSearch, filaEsperaData]);
 
   const applySortingWaitlist = (arr) => {
     if (!Array.isArray(arr) || !waitSortKey) return arr;
     const copy = [...arr];
-        if (waitSortKey === 'paciente') { copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || ''))); }
+    if (waitSortKey === 'paciente') {
-        else if (waitSortKey === 'medico') { copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || ''))); }
+      copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || '')));
-        else if (waitSortKey === 'data') { copy.sort((a, b) => new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)); }
+    } else if (waitSortKey === 'medico') {
+      copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || '')));
+    } else if (waitSortKey === 'data') {
+      copy.sort((a, b) =>
+        new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)
+      );
+    }
     if (waitSortDir === 'desc') copy.reverse();
     return copy;
   };
+
   const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
   const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
   const waitIndiceInicial = (waitPage - 1) * waitPerPage;
   const waitIndiceFinal = waitIndiceInicial + waitPerPage;
   const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
+
   const gerarNumerosWaitPages = () => {
-        const paginas = []; const paginasParaMostrar = 5;
+    const paginas = [];
+    const paginasParaMostrar = 5;
     let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
     let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
     inicio = Math.max(1, fim - paginasParaMostrar + 1);
     for (let i = inicio; i <= fim; i++) { paginas.push(i); }
     return paginas;
   };
+
   useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
 
-
   const generateDateGrid = () => {
-        const grid = []; const startOfMonth = currentDate.startOf('month');
+    const grid = [];
+    const startOfMonth = currentDate.startOf('month');
     let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
-        for (let i = 0; i < 42; i++) { grid.push(currentDay); currentDay = currentDay.add(1, 'day'); }
+    for (let i = 0; i < 42; i++) {
+      grid.push(currentDay);
+      currentDay = currentDay.add(1, 'day');
+    }
     return grid;
   };
+
   const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
   const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
   const handleDateClick = (day) => setSelectedDay(day);
 
-
   const DeleteModal = () => (
     <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
       <div className="modal-dialog modal-dialog-centered">
@@ -244,18 +278,34 @@ const Agendamento = ({ setDictInfo }) => {
           </div>
           <div className="modal-body">
             <p>Qual o motivo do cancelamento?</p>
-                        <textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
+            <textarea
+              className="form-control"
+              rows="3"
+              value={motivoCancelamento}
+              onChange={(e) => setMotivoCancelamento(e.target.value)}
+            ></textarea>
           </div>
           <div className="modal-footer justify-content-center">
-                        <button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
+            <button
-                        <button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}><Trash2 size={16} className="me-1" /> Excluir</button>
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}
+            >
+              Cancelar
+            </button>
+            <button
+              type="button"
+              className="btn btn-danger"
+              onClick={() => deleteConsulta(selectedID)}
+            >
+              <Trash2 size={16} className="me-1" /> Excluir
+            </button>
           </div>
         </div>
       </div>
     </div>
   );
 
-
   const ConfirmEditModal = () => (
     <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
       <div className="modal-dialog modal-dialog-centered">
@@ -269,29 +319,30 @@ const Agendamento = ({ setDictInfo }) => {
             <small className="text-muted">Isso reverterá o status do agendamento para Agendado.</small>
           </div>
           <div className="modal-footer justify-content-center">
-                        <button type="button" className="btn btn-secondary" onClick={() => setShowConfirmModal(false)}>Cancelar</button>
+            <button
-                        <button type="button" className="btn btn-success" onClick={() => confirmConsulta(selectedID)}><Trash2 size={16} className="me-1" style={{ transform: 'rotate(45deg)' }} /> Confirmar</button>
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => setShowConfirmModal(false)}
+            >
+              Cancelar
+            </button>
+            <button
+              type="button"
+              className="btn btn-success"
+              onClick={() => confirmConsulta(selectedID)}
+            >
+              <Trash2 size={16} className="me-1" style={{ transform: 'rotate(45deg)' }} /> Confirmar
+            </button>
           </div>
         </div>
       </div>
     </div>
   );
 
-
-
   return (
     <div>
       <h1>Agendar nova consulta</h1>
-            <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+
-                {/* LIMPA O OBJETO DE EDIÇÃO AO CLICAR EM "ADICIONAR" */}
-                <button className="btn btn-primary" onClick={() => {
-                    setPageConsulta(true);
-                    setEditingAppointmentId(null);
-                    setAppointmentToEdit(null); // <-- LIMPA O OBJETO AQUI PARA GARANTIR MODO CADASTRO
-                }}><i className="bi bi-plus-circle"></i> Adicionar Consulta</button>
-                <button className="manage-button btn" onClick={() => navigate("/secretaria/excecoes-disponibilidade")}><i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções</button>
-                <button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
-            </div>
       {!PageNovaConsulta ? (
         <div className='atendimento-eprocura'>
           <div className='unidade-selecionarprofissional'>
@@ -299,37 +350,114 @@ const Agendamento = ({ setDictInfo }) => {
               <div className='input-e-dropdown-wrapper'>
                 <div className='busca-atendimento'>
                   <div className='mb-5'>
-                                        <input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
+                    <input
+                      type="text"
+                      placeholder="Filtrar atendimento do medico..."
+                      value={searchTermDoctor}
+                      onChange={(e) => handleSearchMedicos(e.target.value)}
+                    />
                   </div>
                 </div>
-                                {searchTermDoctor && FiltredTodosMedicos.length > 0 && (<div className='dropdown-medicos'>{FiltredTodosMedicos.map((medico) => (<div key={medico.idMedico} className='dropdown-item' onClick={() => { setSearchTermDoctor(medico.nomeMedico); setFiltredTodosMedicos([]); setMedicoFiltrado(medico); }}><p>{medico.nomeMedico}</p></div>))}</div>)}
+                {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
+                  <div className='dropdown-medicos'>
+                    {FiltredTodosMedicos.map((medico) => (
+                      <div
+                        key={medico.idMedico}
+                        className='dropdown-item'
+                        onClick={() => {
+                          setSearchTermDoctor(medico.nomeMedico);
+                          setFiltredTodosMedicos([]);
+                          setMedicoFiltrado(medico);
+                        }}
+                      >
+                        <p>{medico.nomeMedico}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           </div>
+
+          {/* ABA + BOTÕES NA MESMA BARRA */}
           <div className='container-btns-agenda-fila_esepera'>
-                        <button className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`} onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}>Agenda</button>
+            <div className="tabs-agenda-fila">
-                        <button className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`} onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}>Fila de espera</button>
+              <button
+                className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
+                onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}
+              >
+                Agenda
+              </button>
+              <button
+                className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
+                onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}
+              >
+                Fila de espera
+              </button>
             </div>
+
+            <div className="btns-gerenciamento-e-consulta">
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  setPageConsulta(true);
+                  setEditingAppointmentId(null);
+                  setAppointmentToEdit(null);
+                }}
+              >
+                <i className="bi bi-plus-circle"></i> Adicionar Consulta
+              </button>
+              <button
+                className="manage-button btn"
+                onClick={() => navigate("/secretaria/excecoes-disponibilidade")}
+              >
+                <i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções
+              </button>
+              <button
+                className='manage-button btn'
+                onClick={() => navigate('/secretaria/disponibilidade')}
+              >
+                <i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade
+              </button>
+            </div>
+          </div>
+
           <section className='calendario-ou-filaespera'>
             {FiladeEspera === false ? (
               <div className="calendar-wrapper">
                 <div className="calendar-info-panel">
-                                    <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
+                  <div className="info-date-display">
-                                    <div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
+                    <span>{selectedDay.format('MMM')}</span>
+                    <strong>{selectedDay.format('DD')}</strong>
+                  </div>
+                  <div className="info-details">
+                    <h3>{selectedDay.format('dddd')}</h3>
+                    <p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p>
+                  </div>
                   <div className="appointments-list">
                     <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
-                                        {showSpinner ? <Spinner/> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
+                    {showSpinner ? (
+                      <Spinner />
+                    ) : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
+                      DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
                         <div key={app.id} className="appointment-item" data-status={app.status}>
-                                                <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
+                          <div className="item-time">
-                                                <div className="item-details"><span>{app.paciente_nome}</span><small>Dr(a). {app.medico_nome}</small></div>
+                            {dayjs(app.scheduled_at).format('HH:mm')}
+                          </div>
+                          <div className="item-details">
+                            <span>{app.paciente_nome}</span>
+                            <small>Dr(a). {app.medico_nome}</small>
+                          </div>
                           <div className="appointment-actions">
                             {app.status === 'cancelled' ? (
-                                                        <button className="btn-action btn-edit" onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}>
+                              <button
-                                                            <Edit size={16} /> {/* Botão de Reverter Cancelamento */}
+                                className="btn-action btn-edit"
+                                onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}
+                              >
+                                <Edit size={16} />
                               </button>
                             ) : (
                               <>
-                                                            {/* MUDANÇA: PASSA O OBJETO COMPLETO 'app' PARA O ESTADO DE EDIÇÃO */}
                                 <button
                                   className="btn-action btn-edit"
                                   onClick={() => {
@@ -340,20 +468,31 @@ const Agendamento = ({ setDictInfo }) => {
                                 >
                                   <Edit size={16} />
                                 </button>
-                                                            {/* Botão de Cancelar */}
+                                <button
-                                                            <button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
+                                  className="btn-action btn-delete"
+                                  onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}
+                                >
                                   <Trash2 size={16} />
                                 </button>
                               </>
                             )}
                           </div>
                         </div>
-                                        ))) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
+                      ))
+                    ) : (
+                      <div className="no-appointments-info">
+                        <p>Nenhuma consulta agendada.</p>
+                      </div>
+                    )}
                   </div>
                 </div>
+
                 <div className="calendar-main">
                   <div className="calendar-legend">
-                                        <div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
+                    <div className="legend-item" data-status="completed">Realizado</div>
+                    <div className="legend-item" data-status="confirmed">Confirmado</div>
+                    <div className="legend-item" data-status="agendado">Agendado</div>
+                    <div className="legend-item" data-status="cancelled">Cancelado</div>
                   </div>
                   <div className="calendar-controls">
                     <div className="date-indicator">
@@ -365,7 +504,9 @@ const Agendamento = ({ setDictInfo }) => {
                           className="form-select form-select-sm w-auto"
                         >
                           {dayjs.months().map((month, index) => (
-                                                        <option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
+                            <option key={index} value={index}>
+                              {month.charAt(0).toUpperCase() + month.slice(1)}
+                            </option>
                           ))}
                         </select>
                         <select
@@ -388,18 +529,41 @@ const Agendamento = ({ setDictInfo }) => {
                     </div>
 
                     <div className="nav-buttons">
-                                            <button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
+                      <button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}>
-                                            <button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
+                        <ChevronLeft size={20} />
-                                            <button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
+                      </button>
+                      <button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>
+                        Hoje
+                      </button>
+                      <button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}>
+                        <ChevronRight size={20} />
+                      </button>
                     </div>
                   </div>
 
                   <div className="calendar-grid">
-                                        {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
+                    {weekDays.map(day => (
+                      <div key={day} className="day-header">{day}</div>
+                    ))}
                     {dateGrid.map((day, index) => {
                       const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
-                                            const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
+                      const cellClasses = `day-cell ${
-                                            return (<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}><span>{day.format('D')}</span>{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}</div>);
+                        day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'
+                      } ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${
+                        day.isSame(selectedDay, 'day') ? 'selected' : ''
+                      }`;
+                      return (
+                        <div
+                          key={index}
+                          className={cellClasses}
+                          onClick={() => handleDateClick(day)}
+                        >
+                          <span>{day.format('D')}</span>
+                          {appointmentsOnDay.length > 0 && (
+                            <div className="appointments-indicator">{appointmentsOnDay.length}</div>
+                          )}
+                        </div>
+                      );
                     })}
                   </div>
                 </div>
@@ -409,38 +573,172 @@ const Agendamento = ({ setDictInfo }) => {
                 <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-header">
+                        <h4 className="card-title mb-0">Fila de Espera</h4>
+                      </div>
                       <div className="card-body">
                         <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>
+                          <h5 className="mb-3">
-                                                    <div className="mb-3"><input type="text" className="form-control" placeholder="Buscar por paciente, CPF ou médico..." value={waitlistSearch} onChange={(e) => setWaitlistSearch(e.target.value)} /><small className="text-muted">Digite o nome do paciente, CPF ou nome do médico</small></div>
+                            <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
+                          </h5>
+                          <div className="mb-3">
+                            <input
+                              type="text"
+                              className="form-control"
+                              placeholder="Buscar por paciente, CPF ou médico..."
+                              value={waitlistSearch}
+                              onChange={(e) => setWaitlistSearch(e.target.value)}
+                            />
+                            <small className="text-muted">
+                              Digite o nome do paciente, CPF ou nome do médico
+                            </small>
+                          </div>
                           <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
                             <div className="d-flex align-items-center gap-2">
                               <span className="me-2 text-muted small">Ordenar por:</span>
-                                                            {(() => { const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''; return (<select className="form-select compact-select sort-select w-auto" value={sortValue} onChange={(e) => { const v = e.target.value; if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; } const [k, d] = v.split('-'); setWaitSortKey(k); setWaitSortDir(d); }}>
+                              {(() => {
-                                                                <option value="">Sem ordenação</option><option value="paciente-asc">Paciente (A-Z)</option><option value="paciente-desc">Paciente (Z-A)</option><option value="medico-asc">Médico (A-Z)</option><option value="medico-desc">Médico (Z-A)</option><option value="data-asc">Data (mais antiga)</option><option value="data-desc">Data (mais recente)</option>
+                                const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : '';
-                                                            </select>);})()}
+                                return (
+                                  <select
+                                    className="form-select compact-select sort-select w-auto"
+                                    value={sortValue}
+                                    onChange={(e) => {
+                                      const v = e.target.value;
+                                      if (!v) {
+                                        setWaitSortKey(null);
+                                        setWaitSortDir('asc');
+                                        return;
+                                      }
+                                      const [k, d] = v.split('-');
+                                      setWaitSortKey(k);
+                                      setWaitSortDir(d);
+                                    }}
+                                  >
+                                    <option value="">Sem ordenação</option>
+                                    <option value="paciente-asc">Paciente (A-Z)</option>
+                                    <option value="paciente-desc">Paciente (Z-A)</option>
+                                    <option value="medico-asc">Médico (A-Z)</option>
+                                    <option value="medico-desc">Médico (Z-A)</option>
+                                    <option value="data-asc">Data (mais antiga)</option>
+                                    <option value="data-desc">Data (mais recente)</option>
+                                  </select>
+                                );
+                              })()}
                             </div>
                           </div>
-                                                    <div className="mt-3"><div className="contador-pacientes">{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS</div></div>
+                          <div className="mt-3">
+                            <div className="contador-pacientes">
+                              {filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
                             </div>
+                          </div>
+                        </div>
+
                         <div className="table-responsive">
                           <table className="table table-striped table-hover table-paciente-table">
-                                                        <thead><tr><th>Nome do Paciente</th><th>CPF</th><th>Médico Solicitado</th><th>Data da Solicitação</th><th>Ações</th></tr></thead>
+                            <thead>
+                              <tr>
+                                <th>Nome do Paciente</th>
+                                <th>CPF</th>
+                                <th>Médico Solicitado</th>
+                                <th>Data da Solicitação</th>
+                                <th>Ações</th>
+                              </tr>
+                            </thead>
                             <tbody>
-                                                            {filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item, index) => (
+                              {filaEsperaPaginada.length > 0 ? (
-                                                                <tr key={index}><td>{item?.Infos?.paciente_nome}</td><td>{item?.Infos?.paciente_cpf}</td><td>{item?.Infos?.nome_medico}</td><td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td><td><button className="btn btn-sm btn-delete" onClick={() => { setSelectedId(item.agendamento.id); setShowDeleteModal(true); }}><i className="bi bi-trash me-1"></i> Excluir</button></td></tr>
+                                filaEsperaPaginada.map((item, index) => (
-                                                            ))) : (<tr><td colSpan="5" className="text-center py-4"><div className="text-muted">{showSpinner ? <Spinner /> : (<><i className="bi bi-inbox display-4"></i><p className="mt-2">Nenhuma solicitação encontrada.</p></>)}</div></td></tr>)}
+                                  <tr key={index}>
+                                    <td>{item?.Infos?.paciente_nome}</td>
+                                    <td>{item?.Infos?.paciente_cpf}</td>
+                                    <td>{item?.Infos?.nome_medico}</td>
+                                    <td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td>
+                                    <td>
+                                      <button
+                                        className="btn btn-sm btn-delete"
+                                        onClick={() => { setSelectedId(item.agendamento.id); setShowDeleteModal(true); }}
+                                      >
+                                        <i className="bi bi-trash me-1"></i> Excluir
+                                      </button>
+                                    </td>
+                                  </tr>
+                                ))
+                              ) : (
+                                <tr>
+                                  <td colSpan="5" className="text-center py-4">
+                                    <div className="text-muted">
+                                      {showSpinner ? (
+                                        <Spinner />
+                                      ) : (
+                                        <>
+                                          <i className="bi bi-inbox display-4"></i>
+                                          <p className="mt-2">Nenhuma solicitação encontrada.</p>
+                                        </>
+                                      )}
+                                    </div>
+                                  </td>
+                                </tr>
+                              )}
                             </tbody>
                           </table>
-                                                    {filaEsperaFiltrada.length > 0 && (<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={waitPerPage} onChange={(e) => { setWaitPerPage(Number(e.target.value)); setWaitPage(1); }}><option value={5}>5</option><option value={10}>10</option><option value={25}>25</option><option value={50}>50</option></select></div>
+                          {filaEsperaFiltrada.length > 0 && (
-                                                        <div className="d-flex align-items-center"><span className="me-3 text-muted">Página {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}</span><nav><ul className="pagination pagination-sm mb-0">
+                            <div className="d-flex justify-content-between align-items-center mt-3">
-                                                            <li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.max(1, p - 1))}><i className="bi bi-chevron-left"></i></button></li>
+                              <div className="d-flex align-items-center">
-                                                            {gerarNumerosWaitPages().map(pagina => (<li key={pagina} className={`page-item ${pagina === waitPage ? 'active' : ''}`}><button className="page-link" onClick={() => setWaitPage(pagina)}>{pagina}</button></li>))}
+                                <span className="me-2 text-muted">Itens por página:</span>
-                                                            <li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}><i className="bi bi-chevron-right"></i></button></li>
+                                <select
-                                                        </ul></nav></div>
+                                  className="form-select form-select-sm w-auto"
-                                                    </div>)}
+                                  value={waitPerPage}
+                                  onChange={(e) => {
+                                    setWaitPerPage(Number(e.target.value));
+                                    setWaitPage(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 {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}
+                                </span>
+                                <nav>
+                                  <ul className="pagination pagination-sm mb-0">
+                                    <li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}>
+                                      <button
+                                        className="page-link"
+                                        onClick={() => setWaitPage(p => Math.max(1, p - 1))}
+                                      >
+                                        <i className="bi bi-chevron-left"></i>
+                                      </button>
+                                    </li>
+                                    {gerarNumerosWaitPages().map(pagina => (
+                                      <li
+                                        key={pagina}
+                                        className={`page-item ${pagina === waitPage ? 'active' : ''}`}
+                                      >
+                                        <button
+                                          className="page-link"
+                                          onClick={() => setWaitPage(pagina)}
+                                        >
+                                          {pagina}
+                                        </button>
+                                      </li>
+                                    ))}
+                                    <li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}>
+                                      <button
+                                        className="page-link"
+                                        onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}
+                                      >
+                                        <i className="bi bi-chevron-right"></i>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </nav>
+                              </div>
+                            </div>
+                          )}
                         </div>
                       </div>
                     </div>
@@ -451,17 +749,17 @@ const Agendamento = ({ setDictInfo }) => {
           </section>
         </div>
       ) : (
-                
         <AgendamentoCadastroManager
           setPageConsulta={setPageConsulta}
           agendamentoInicial={appointmentToEdit}
           setEditingAppointmentId={setEditingAppointmentId}
         />
       )}
+
       {showDeleteModal && <DeleteModal />}
       {showConfirmModal && <ConfirmEditModal />}
     </div>
-    )
+  );
-}
+};
 
 export default Agendamento;