Atualizacao de modais e ajuste de tabela

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -2,7 +2,6 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import API_KEY from '../components/utils/apiKeys.js';
 import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
-// Removidos imports não utilizados no novo fluxo
 import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
 import { useAuth } from '../components/utils/AuthProvider.js';
 import dayjs from 'dayjs';
@@ -25,7 +24,7 @@ const Agendamento = () => {
     const { getAuthorizationHeader, user } = useAuth();
     const authHeader = getAuthorizationHeader();
 
-    // ID do médico que você quer visualizar
+
     const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
 
     const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
@@ -56,7 +55,7 @@ const Agendamento = () => {
         year: currentDate.year()
     });
 
-    // ✨ ALTERAÇÃO PRINCIPAL: A busca agora filtra pelo ID do médico direto na API
+
     const fetchAppointments = useCallback(async () => {
         if (!authHeader) return;
         setShowSpinner(true);
@@ -65,7 +64,7 @@ const Agendamento = () => {
         myHeaders.append("apikey", API_KEY);
         const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
 
-        // A URL agora contém o filtro para o ID do médico específico
+     
         const apiUrl = `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?doctor_id=eq.${ID_MEDICO_ESPECIFICO}&select=*`;
 
         try {
@@ -131,7 +130,7 @@ const Agendamento = () => {
     useEffect(() => {
         if(authHeader) {
             fetchAppointments();
-            // A busca de todos os médicos pode continuar caso a secretária precise ver a lista
+   
             if (user?.role !== 'doctor') {
                 GetAllDoctors(authHeader).then(docs => {
                     if (docs) {
@@ -144,7 +143,7 @@ const Agendamento = () => {
 
     useEffect(() => {
         const processData = async () => {
-            // Como os dados já vêm filtrados da API, não precisamos mais da verificação de 'user' aqui
+    
             if (!listaTodosAgendamentos.length) {
                 setAgendamentosOrganizados({});
                 setFilaEsperaData([]);
@@ -153,8 +152,7 @@ const Agendamento = () => {
 
             setShowSpinner(true);
 
-            // ✨ SIMPLIFICAÇÃO: Não é mais necessário filtrar por `user.role`,
+
-            // pois a API já retornou apenas os agendamentos do médico desejado.
             const appointmentsToShow = listaTodosAgendamentos;
 
             const patientIdsToFetch = new Set();
@@ -179,7 +177,7 @@ const Agendamento = () => {
                     }).then(res => res.json())
                 );
             } else {
-                fetchPromises.push(Promise.resolve(null)); // Mantém a ordem do Promise.all
+                fetchPromises.push(Promise.resolve(null));
             }
 
             if (doctorIdsToFetch.size > 0) {
@@ -239,9 +237,9 @@ const Agendamento = () => {
         };
 
         processData();
-    }, [listaTodosAgendamentos, authHeader]); // Removido 'user' das dependências pois não é mais usado aqui
+    }, [listaTodosAgendamentos, authHeader]); 
+
 
-    // O restante do código permanece o mesmo...
 
     const handleEditConsulta = (agendamento) => {
         setAgendamentoParaEdicao(agendamento);
@@ -276,22 +274,20 @@ const Agendamento = () => {
     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 fade show delete-modal" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
         <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-                <div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
+                <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                     <h5 className="modal-title">Confirmação de Cancelamento</h5>
-                    <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
                 </div>
                 <div className="modal-body">
-                    <p>Qual o motivo do cancelamento? (Opcional)</p>
+                    <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)} placeholder="Ex: Motivo pessoal, reagendamento, etc."></textarea>
                 </div>
-                <div className="modal-footer justify-content-center">
+                <div className="modal-footer">
-                    <button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Manter Agendamento</button>
+                    <button type="button" className="btn btn-primary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
-                    {/* ✨ Botão sempre ativo ✨ */}
                     <button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>
-                        <Trash2 size={16} className="me-1" /> Confirmar Cancelamento
+                        Confirmar Cancelamento
                     </button>
                 </div>
             </div>
@@ -379,33 +375,58 @@ const DeleteModal = () => (
             {!PageNovaConsulta ? (
                 <div className='atendimento-eprocura'>
                     {user?.role !== 'doctor' && (
-                        <div className='unidade-selecionarprofissional'>
+                        <div className="card p-3 mb-3 table-paciente-filters">
-                            <div className='busca-atendimento-container'>
+                            <h5 className="mb-3">
-                                <div className='input-e-dropdown-wrapper'>
+                                <i className="bi bi-funnel-fill me-2 text-primary"></i>
-                                    <div className='busca-atendimento'>
+                                Filtrar por Médico
-                                        <div className='mb-5'>
+                            </h5>
-                                            <input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
+                            <div className="position-relative">
-                                        </div>
+                                <input 
-                                    </div>
+                                    type="text" 
+                                    className="form-control"
+                                    placeholder="Digite o nome do médico..." 
+                                    value={searchTermDoctor} 
+                                    onChange={(e) => handleSearchMedicos(e.target.value)} 
+                                />
+                                <small className="text-muted">Buscar médico para filtrar consultas</small>
+                                
                                 {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
-                                        <div className='dropdown-medicos'>
+                                    <div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
                                         {FiltredTodosMedicos.map((medico) => (
-                                                <div
+                                            <button
                                                 key={medico.idMedico}
-                                                    className='dropdown-item'
+                                                type="button"
+                                                className="list-group-item list-group-item-action"
                                                 onClick={() => {
                                                     setSearchTermDoctor(medico.nomeMedico);
                                                     setFiltredTodosMedicos([]);
                                                     setMedicoFiltrado({ id: medico.idMedico });
                                                 }}
                                             >
-                                                    <p>{medico.nomeMedico}</p>
+                                                {medico.nomeMedico}
-                                                </div>
+                                            </button>
                                         ))}
                                     </div>
                                 )}
                             </div>
+                            
+                            {MedicoFiltrado.id !== "vazio" && (
+                                <div className="mt-3">
+                                    <span className="badge bg-primary me-2">
+                                        <i className="bi bi-person-check me-1"></i>
+                                        {searchTermDoctor}
+                                        <button 
+                                            type="button" 
+                                            className="btn-close btn-close-white ms-2" 
+                                            style={{ fontSize: '0.6rem' }}
+                                            onClick={() => {
+                                                setMedicoFiltrado({ id: "vazio" });
+                                                setSearchTermDoctor('');
+                                            }}
+                                        ></button>
+                                    </span>
                                 </div>
+                            )}
                         </div>
                     )}
                     <div className='container-btns-agenda-fila_esepera'>

src/PagesMedico/DoctorRelatorioManager.jsx

@@ -46,7 +46,7 @@ const DoctorRelatorioManager = () => {
         if (authHeader) myHeaders.append('Authorization', authHeader);
         const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
 
-        // Tenta descobrir o ID do usuário logado para aplicar filtro por médico
+ 
         let userId = null;
         let userFullName = null;
         try {
@@ -60,12 +60,12 @@ const DoctorRelatorioManager = () => {
           console.warn('Não foi possível obter UserInfos (pode não estar logado):', err);
         }
 
-        // Monta a URL com possíveis filtros preferenciais
+  
         const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*";
         let data = [];
 
         if (userId) {
-          // 1) tenta por doctor_id
+
           try {
             const res = await fetch(`${baseUrl}&doctor_id=eq.${userId}`, requestOptions);
             data = await res.json();
@@ -74,7 +74,7 @@ const DoctorRelatorioManager = () => {
             data = [];
           }
 
-          // 2) fallback para created_by (se vazio)
+
           if ((!Array.isArray(data) || data.length === 0) && userId) {
             try {
               const res2 = await fetch(`${baseUrl}&created_by=eq.${userId}`, requestOptions);
@@ -85,10 +85,9 @@ const DoctorRelatorioManager = () => {
             }
           }
 
-          // 3) fallback para requested_by com nome completo (se ainda vazio)
           if ((!Array.isArray(data) || data.length === 0) && userFullName) {
             try {
-              // encode para evitar problemas com espaços/caracteres especiais
+   
               const encodedName = encodeURIComponent(userFullName);
               const res3 = await fetch(`${baseUrl}&requested_by=eq.${encodedName}`, requestOptions);
               data = await res3.json();
@@ -99,7 +98,6 @@ const DoctorRelatorioManager = () => {
           }
         }
 
-        // Se não obteve userId ou nenhuma das tentativas acima retornou algo, busca tudo (comportamento anterior)
         if (!userId || (!Array.isArray(data) || data.length === 0)) {
           try {
             const resAll = await fetch(baseUrl, requestOptions);
@@ -110,7 +108,7 @@ const DoctorRelatorioManager = () => {
           }
         }
 
-        // garante unicidade e ordenação por criação
+
         const uniqueMap = new Map();
         (Array.isArray(data) ? data : []).forEach(r => {
           if (r && r.id) uniqueMap.set(r.id, r);
@@ -144,14 +142,14 @@ const DoctorRelatorioManager = () => {
     };
   }, [authHeader]);
 
-  // Busca dados de pacientes e médicos baseados na lista final que aparece na tela
+
   useEffect(() => {
     const fetchRelData = async () => {
       const pacientes = [];
       const medicos = [];
       for (let i = 0; i < relatoriosFinais.length; i++) {
         const rel = relatoriosFinais[i];
-        // paciente
+ 
         try {
           const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
           pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
@@ -159,13 +157,12 @@ const DoctorRelatorioManager = () => {
           pacientes.push(null);
         }
 
-        // médico: prioriza campos com id (doctor_id ou created_by). Se tiver somente requested_by (nome), usa nome.
         try {
           if (rel.doctor_id) {
             const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
             medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
           } else if (rel.created_by) {
-            // created_by costuma ser id
+ 
             const docRes = await GetDoctorByID(rel.created_by, authHeader);
             medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
           } else if (rel.requested_by) {
@@ -174,7 +171,6 @@ const DoctorRelatorioManager = () => {
             medicos.push({ full_name: '' });
           }
         } catch (err) {
-          // fallback para requested_by se houver
           medicos.push({ full_name: rel.requested_by || '' });
         }
       }
@@ -190,7 +186,6 @@ const DoctorRelatorioManager = () => {
   }, [relatoriosFinais, authHeader]);
 
   const abrirModal = (relatorio, pageIndex) => {
-    // encontra índice global do relatório no array relatoriosFinais (para alinhar com pacientes/medicos)
     const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
     const indexToUse = globalIndex >= 0 ? globalIndex : (indiceInicial + pageIndex);
     setRelatorioModal(relatorio);
@@ -198,7 +193,7 @@ const DoctorRelatorioManager = () => {
     setShowModal(true);
   };
 
-  // Função para limpar filtros
+
   const limparFiltros = () => {
     setTermoPesquisa('');
     setFiltroExame('');
@@ -256,12 +251,11 @@ const DoctorRelatorioManager = () => {
   return (
     <div>
       {showModal && (
-        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
+        <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-dialog modal-dialog-centered modal-lg">
             <div className="modal-content">
-              <div className="modal-header custom-modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
                 <h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name}</h5>
-                <button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
               </div>
 
               <div className="modal-body">
@@ -290,11 +284,11 @@ const DoctorRelatorioManager = () => {
                 </div>
               </div>
 
-              <div className="modal-footer custom-modal-footer">
+              <div className="modal-footer">
                 <button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name, modalIndex)}>
-                  <i className='bi bi-file-pdf-fill'></i> baixar em pdf
+                  <i className='bi bi-file-pdf-fill me-1'></i> Baixar em PDF
                 </button>
-                <button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
+                <button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
                   Fechar
                 </button>
               </div>

src/PagesPaciente/ConsultasPaciente.jsx

@@ -42,6 +42,16 @@ const Agendamento = ({ setDictInfo }) => {
     });
 
 
+    const [searchConsultas, setSearchConsultas] = useState('');
+    const [searchFilaEspera, setSearchFilaEspera] = useState('');
+    
+   
+    const [waitPage, setWaitPage] = useState(1);
+    const [waitPerPage, setWaitPerPage] = useState(10);
+    const [waitSortKey, setWaitSortKey] = useState(null);
+    const [waitSortDir, setWaitSortDir] = useState('asc');
+
+
    
     const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
     const [appointmentToCancel, setAppointmentToCancel] = useState(null); 
@@ -202,6 +212,63 @@ const Agendamento = ({ setDictInfo }) => {
     const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
     const handleDateClick = (day) => setSelectedDay(day);
 
+
+    const consultasDoDiaFiltradas = useMemo(() => {
+        const consultas = DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || [];
+        if (!searchConsultas.trim()) return consultas;
+        const term = searchConsultas.toLowerCase();
+        return consultas.filter(app => 
+            app.medico_nome?.toLowerCase().includes(term) ||
+            app.status?.toLowerCase().includes(term)
+        );
+    }, [DictAgendamentosOrganizados, selectedDay, searchConsultas]);
+
+    
+    const filaEsperaFiltrada = useMemo(() => {
+        if (!searchFilaEspera.trim()) return filaEsperaData;
+        const term = searchFilaEspera.toLowerCase();
+        return filaEsperaData.filter(item =>
+            item.Infos?.medico_nome?.toLowerCase().includes(term)
+        );
+    }, [filaEsperaData, searchFilaEspera]);
+
+    const applySortingWaitlist = (arr) => {
+        if (!Array.isArray(arr) || !waitSortKey) return arr;
+        const copy = [...arr];
+        if (waitSortKey === 'medico') {
+            copy.sort((a, b) => (a?.Infos?.medico_nome || '').localeCompare(b?.Infos?.medico_nome || ''));
+        } else if (waitSortKey === 'data') {
+            copy.sort((a, b) => new Date(a?.agendamento?.created_at || 0) - new Date(b?.agendamento?.created_at || 0));
+        }
+        if (waitSortDir === 'desc') copy.reverse();
+        return copy;
+    };
+
+    const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
+
+    // Paginação
+    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;
+        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);
+    }, [searchFilaEspera, waitSortKey, waitSortDir]);
+
     const activeButtonStyle = {
         backgroundColor: '#1B2A41', 
         color: 'white',
@@ -274,10 +341,21 @@ const Agendamento = ({ setDictInfo }) => {
                                 <div className="calendar-info-panel">
                                     <div className="info-date-display"><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="mb-3">
+                                        <input
+                                            type="text"
+                                            className="form-control form-control-sm"
+                                            placeholder="Buscar por médico ou status..."
+                                            value={searchConsultas}
+                                            onChange={(e) => setSearchConsultas(e.target.value)}
+                                        />
+                                    </div>
+                                    
                                     <div className="appointments-list">
                                         <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
-                                        {(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
+                                        {(consultasDoDiaFiltradas.length > 0) ? (
-                                            DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
+                                            consultasDoDiaFiltradas.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-details">
@@ -340,6 +418,56 @@ const Agendamento = ({ setDictInfo }) => {
                                         <div className="card table-paciente-card">
                                             <div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em 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>
+                                                    <div className="mb-3">
+                                                        <input
+                                                            type="text"
+                                                            className="form-control"
+                                                            placeholder="Buscar por médico..."
+                                                            value={searchFilaEspera}
+                                                            onChange={(e) => setSearchFilaEspera(e.target.value)}
+                                                        />
+                                                        <small className="text-muted">Digite o nome do médico</small>
+                                                    </div>
+                                                    
+                                                    <div className="d-flex align-items-center gap-2 mb-3">
+                                                        <span className="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="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 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">
                                                         <thead>
@@ -350,7 +478,7 @@ const Agendamento = ({ setDictInfo }) => {
                                                             </tr>
                                                         </thead>
                                                         <tbody>
-                                                            {filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
+                                                            {filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item) => (
                                                                 <tr key={item.agendamento.id}>
                                                                     <td>Dr(a). {item.Infos?.medico_nome}</td>
                                                                     <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
@@ -369,6 +497,58 @@ const Agendamento = ({ setDictInfo }) => {
                                                             )}
                                                         </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>
+                                                            
+                                                            <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>
@@ -383,44 +563,55 @@ const Agendamento = ({ setDictInfo }) => {
             )}
 
 
-            {}
             {isCancelModalOpen && (
-                <div className="modal-overlay">
+                <div
-                    <div className="modal-content" style={{ maxWidth: '400px' }}>
+                    className="modal fade show delete-modal"
-                        <div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
+                    style={{
-                            <h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
+                        display: "block",
-                            <button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    }}
+                    tabIndex="-1"
+                >
+                    <div className="modal-dialog modal-dialog-centered">
+                        <div className="modal-content">
+                            <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
+                                <h5 className="modal-title">
+                                    Confirmação de Cancelamento
+                                </h5>
                             </div>
-                        <div className="modal-body" style={{ padding: '20px' }}>
+
+                            <div className="modal-body">
                                 <p>Qual o motivo do cancelamento?</p>
                                 <textarea
+                                    className="form-control"
+                                    rows="3"
                                     value={cancellationReason}
                                     onChange={(e) => setCancellationReason(e.target.value)}
                                     placeholder="Ex: Precisei viajar, motivo pessoal, etc."
-                                rows="4"
-                                style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
                                 ></textarea>
                             </div>
-                        <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
+
+                            <div className="modal-footer">
                                 <button
-                                className="btn btn-secondary" 
+                                    type="button"
+                                    className="btn btn-primary"
                                     onClick={() => setIsCancelModalOpen(false)}
-                                style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
                                 >
                                     Cancelar
                                 </button>
+
                                 <button
+                                    type="button"
                                     className="btn btn-danger"
                                     onClick={executeCancellation}
-                                style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
                                 >
-                                <Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
+                                    Excluir
                                 </button>
                             </div>
                         </div>
                     </div>
+                </div>
             )}
-            {}
         </div>
     )
 }

src/components/Header/Header.css

@@ -461,6 +461,115 @@
     background-color: #0056b3;
 }
 
+/* Avatar Modal */
+.avatar-modal-content {
+    max-width: 500px;
+}
+
+.avatar-preview-container {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.avatar-preview-wrapper {
+    width: 150px;
+    height: 150px;
+    margin: 0 auto 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar-preview-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.avatar-preview-placeholder {
+    font-size: 4rem;
+    color: white;
+}
+
+.avatar-error-message {
+    color: #dc3545;
+    margin-bottom: 10px;
+    font-size: 0.9rem;
+}
+
+.avatar-file-input {
+    display: none;
+}
+
+.avatar-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.avatar-upload-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    background: #007bff;
+    color: white;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+}
+
+.avatar-upload-button:hover {
+    background: #0056b3;
+}
+
+.avatar-upload-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.avatar-remove-button {
+    padding: 10px 20px;
+    border: 1px solid #dc3545;
+    border-radius: 8px;
+    background: transparent;
+    color: #dc3545;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.avatar-remove-button:hover {
+    background: #dc3545;
+    color: white;
+}
+
+.avatar-remove-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.avatar-info-text {
+    margin-top: 15px;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.avatar-actions-spacing {
+    margin-top: 20px;
+}
+
+.avatar-close-button {
+    background: #6c757d;
+}
+
+.avatar-close-button:hover {
+    background: #5a6268;
+}
+
 /* Responsividade */
 @media (max-width: 768px) {
     .header-container {
@@ -487,4 +596,13 @@
         width: calc(100vw - 20px);
         max-width: none;
     }
+    
+    .avatar-modal-content {
+        max-width: 90%;
+    }
+    
+    .avatar-preview-wrapper {
+        width: 120px;
+        height: 120px;
+    }
 }

src/components/Header/Header.jsx

@@ -1,6 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './Header.css';
+import API_KEY from '../utils/apiKeys';
+
+const SUPABASE_URL = 'https://yuanqfswhberkoevtmfr.supabase.co';
 
 const Header = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -10,16 +13,111 @@ const Header = () => {
   const [mensagens, setMensagens] = useState([]);
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState(null);
+  const [showAvatarModal, setShowAvatarModal] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [avatarError, setAvatarError] = useState(null);
   const navigate = useNavigate();
   const chatInputRef = useRef(null);
   const mensagensContainerRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  const loadAvatarFromSupabase = async (userId) => {
+    const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
+    
+    for (const ext of extensions) {
+      try {
+        const avatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
+        
+        const response = await fetch(avatarUrl, {
+          method: 'GET',
+          mode: 'cors'
+        });
+        
+        if (response.ok) {
+          const blob = await response.blob();
+          const imageUrl = URL.createObjectURL(blob);
+          return imageUrl;
+        }
+      } catch (err) {
+        continue;
+      }
+    }
+    
+    return null;
+  };
 
   useEffect(() => {
-    const loadAvatar = () => {
+    const loadAvatar = async () => {
+      let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
+      
+      if (!userId) {
+        try {
+          const userData = localStorage.getItem('user') || localStorage.getItem('userData');
+          if (userData) {
+            const parsed = JSON.parse(userData);
+            userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
+            
+            if (userId) {
+              localStorage.setItem('userId', userId);
+            }
+          }
+        } catch (e) {
+          console.error('Erro ao parsear dados do usuário:', e);
+        }
+      }
+      
+      if (!userId) {
+        try {
+          const token = localStorage.getItem('token') || 
+                        localStorage.getItem('authToken') || 
+                        localStorage.getItem('access_token');
+          
+          if (token) {
+            const myHeaders = new Headers();
+            myHeaders.append('apikey', API_KEY);
+            myHeaders.append('Authorization', token.startsWith('Bearer') ? token : `Bearer ${token}`);
+            
+            const response = await fetch(
+              'https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/user-info',
+              { method: 'GET', headers: myHeaders }
+            );
+            
+            if (response.ok) {
+              const userInfo = await response.json();
+              userId = userInfo.id || userInfo.user_id || userInfo.sub || userInfo.user?.id;
+              
+              if (userId) {
+                localStorage.setItem('userId', userId);
+              }
+            }
+          }
+        } catch (e) {
+          console.error('Erro ao buscar userId da API:', e);
+        }
+      }
+      
+      if (!userId) {
         const localAvatar = localStorage.getItem('user_avatar');
         if (localAvatar) {
           setAvatarUrl(localAvatar);
         }
+        return;
+      }
+
+      const localAvatar = localStorage.getItem('user_avatar');
+      if (localAvatar) {
+        setAvatarUrl(localAvatar);
+      }
+
+      try {
+        const supabaseAvatarUrl = await loadAvatarFromSupabase(userId);
+        if (supabaseAvatarUrl) {
+          setAvatarUrl(supabaseAvatarUrl);
+          localStorage.setItem('user_avatar', supabaseAvatarUrl);
+        }
+      } catch (error) {
+        console.error('Erro ao carregar avatar do Supabase:', error);
+      }
     };
 
     loadAvatar();
@@ -44,7 +142,6 @@ const Header = () => {
     }
   }, [mensagens]);
 
-  // --- Logout ---
   const handleLogoutClick = () => {
     setShowLogoutModal(true);
     setIsDropdownOpen(false);
@@ -100,7 +197,7 @@ const Header = () => {
   };
 
   const clearAuthData = () => {
-    ["token", "authToken", "userToken", "access_token", "user", "auth", "userData"].forEach(key => {
+    ["token", "authToken", "userToken", "access_token", "user", "auth", "userData", "user_avatar"].forEach(key => {
       localStorage.removeItem(key);
       sessionStorage.removeItem(key);
     });
@@ -121,10 +218,169 @@ const Header = () => {
   };
 
   const handleViewProfile = () => {
-    navigate('/perfil');
+    setShowAvatarModal(true);
     setIsDropdownOpen(false);
   };
 
+  const handleAvatarUpload = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    setAvatarError(null);
+
+    const MAX_FILE_SIZE = 5 * 1024 * 1024;
+    const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+
+    if (file.size > MAX_FILE_SIZE) {
+      setAvatarError("Arquivo muito grande. Máximo 5MB.");
+      return;
+    }
+
+    if (!ACCEPTED_TYPES.includes(file.type)) {
+      setAvatarError("Tipo de arquivo não suportado. Use JPEG, PNG, GIF ou WebP.");
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
+      
+      if (!userId) {
+        try {
+          const userData = localStorage.getItem('user') || localStorage.getItem('userData');
+          if (userData) {
+            const parsed = JSON.parse(userData);
+            userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
+            if (userId) {
+              localStorage.setItem('userId', userId);
+            }
+          }
+        } catch (e) {
+          console.error('Erro ao buscar userId:', e);
+        }
+      }
+      
+      if (userId) {
+        try {
+          await uploadAvatarToSupabase(file, userId);
+          
+          const ext = file.name.split('.').pop();
+          const publicAvatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
+          
+          const response = await fetch(publicAvatarUrl);
+          if (response.ok) {
+            const blob = await response.blob();
+            const imageUrl = URL.createObjectURL(blob);
+            setAvatarUrl(imageUrl);
+            localStorage.setItem('user_avatar', imageUrl);
+            window.dispatchEvent(new Event('storage'));
+            return;
+          }
+        } catch (apiError) {
+          console.error('Erro ao enviar para Supabase:', apiError);
+        }
+      }
+
+  
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageDataUrl = e.target.result;
+        localStorage.setItem('user_avatar', imageDataUrl);
+        setAvatarUrl(imageDataUrl);
+        window.dispatchEvent(new Event('storage'));
+      };
+      reader.readAsDataURL(file);
+
+    } catch (error) {
+      console.error('Erro no processamento:', error);
+      setAvatarError('Erro ao processar imagem');
+ 
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageDataUrl = e.target.result;
+        localStorage.setItem('user_avatar', imageDataUrl);
+        setAvatarUrl(imageDataUrl);
+      };
+      reader.readAsDataURL(file);
+    } finally {
+      setIsUploading(false);
+      if (event.target) event.target.value = '';
+    }
+  };
+
+  const uploadAvatarToSupabase = async (file, userId) => {
+    const ext = file.name.split('.').pop();
+    const filePath = `${userId}/avatar.${ext}`;
+
+    const myHeaders = new Headers();
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append('Content-Type', file.type);
+    
+    const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+    if (token) {
+      myHeaders.append('Authorization', `Bearer ${token}`);
+    }
+
+    const response = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
+      method: 'POST',
+      headers: myHeaders,
+      body: file
+    });
+
+    if (!response.ok) {
+  
+      const updateResponse = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
+        method: 'PUT',
+        headers: myHeaders,
+        body: file
+      });
+      
+      if (!updateResponse.ok) {
+        throw new Error('Erro ao fazer upload do avatar');
+      }
+      return await updateResponse.json();
+    }
+
+    return await response.json();
+  };
+
+  const clearAvatar = async () => {
+    const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
+    
+    if (userId) {
+      try {
+        const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
+        
+        for (const ext of extensions) {
+          const filePath = `${userId}/avatar.${ext}`;
+          const myHeaders = new Headers();
+          myHeaders.append('apikey', API_KEY);
+          
+          const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+          if (token) {
+            myHeaders.append('Authorization', `Bearer ${token}`);
+          }
+
+          try {
+            await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
+              method: 'DELETE',
+              headers: myHeaders
+            });
+          } catch (e) {
+            continue;
+          }
+        }
+      } catch (error) {
+        console.error('Erro ao remover avatar da API:', error);
+      }
+    }
+
+    localStorage.removeItem('user_avatar');
+    setAvatarUrl(null);
+    window.dispatchEvent(new Event('storage'));
+  };
+
   const handleSuporteClick = () => {
     setIsSuporteCardOpen(!isSuporteCardOpen);
     if (isDropdownOpen) setIsDropdownOpen(false);
@@ -157,7 +413,7 @@ const Header = () => {
     e.preventDefault();
     if (mensagem.trim() === '') return;
 
-    // Mensagem do usuário
+  
     const novaMensagemUsuario = {
       id: Date.now(),
       texto: mensagem,
@@ -177,7 +433,7 @@ const Header = () => {
 
       const data = await response.json();
 
-      // Resposta da IA
+
       const respostaSuporte = {
         id: Date.now() + 1,
         texto: data.resposta || data.reply || "Desculpe, não consegui processar sua pergunta no momento 😅",
@@ -266,7 +522,31 @@ const Header = () => {
 
         <div className="profile-section">
           <div className="profile-picture-container" onClick={handleProfileClick}>
-            <div className="profile-placeholder"></div>
+            {avatarUrl ? (
+              <img 
+                src={avatarUrl} 
+                alt="Avatar" 
+                className="profile-photo" 
+                onError={() => {
+                  const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
+                  if (userId) {
+                    loadAvatarFromSupabase(userId).then(newUrl => {
+                      if (newUrl) {
+                        setAvatarUrl(newUrl);
+                        localStorage.setItem('user_avatar', newUrl);
+                      } else {
+                        setAvatarUrl(null);
+                        localStorage.removeItem('user_avatar');
+                      }
+                    });
+                  }
+                }}
+              />
+            ) : (
+              <div className="profile-placeholder">
+                <span className="placeholder-icon"></span>
+              </div>
+            )}
           </div>
 
           {isDropdownOpen && (
@@ -282,7 +562,6 @@ const Header = () => {
         </div>
       </div>
 
-      {/* Modal de Logout */}
       {showLogoutModal && (
         <div className="logout-modal-overlay">
           <div className="logout-modal-content">
@@ -315,6 +594,79 @@ const Header = () => {
           </div>
         </div>
       )}
+      {showAvatarModal && (
+        <div className="logout-modal-overlay" onClick={() => setShowAvatarModal(false)}>
+          <div className="logout-modal-content avatar-modal-content" onClick={(e) => e.stopPropagation()}>
+            <h3>Gerenciar Avatar</h3>
+            
+            <div className="avatar-preview-container">
+              <div className="avatar-preview-wrapper">
+                {avatarUrl ? (
+                  <img 
+                    src={avatarUrl} 
+                    alt="Avatar" 
+                    className="avatar-preview-image"
+                    onError={() => {
+                      setAvatarUrl(null);
+                      localStorage.removeItem('user_avatar');
+                    }}
+                  />
+                ) : (
+                  <span className="avatar-preview-placeholder">👤</span>
+                )}
+              </div>
+
+              {avatarError && (
+                <div className="avatar-error-message">
+                  {avatarError}
+                </div>
+              )}
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={handleAvatarUpload}
+                disabled={isUploading}
+                className="avatar-file-input"
+              />
+
+              <div className="avatar-actions">
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isUploading}
+                  className="avatar-upload-button"
+                >
+                  {isUploading ? 'Enviando...' : ' Alterar Foto'}
+                </button>
+
+                {avatarUrl && (
+                  <button
+                    onClick={clearAvatar}
+                    disabled={isUploading}
+                    className="avatar-remove-button"
+                  >
+                     Remover
+                  </button>
+                )}
+              </div>
+
+              <p className="avatar-info-text">
+                Formatos aceitos: JPEG, PNG, GIF, WebP (máx. 5MB)
+              </p>
+            </div>
+
+            <div className="logout-modal-buttons avatar-actions-spacing">
+              <button 
+                onClick={() => setShowAvatarModal(false)} 
+                className="logout-confirm-button avatar-close-button"
+              >
+                Fechar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/Agendamento.jsx

@@ -184,7 +184,18 @@ const Agendamento = ({ setDictInfo }) => {
     }, [authHeader]);
 
 
-    const handleSearchMedicos = (term) => { };
+    const handleSearchMedicos = (term) => {
+        setSearchTermDoctor(term);
+        if (term.trim() === '') {
+            setFiltredTodosMedicos([]);
+            setMedicoFiltrado({ id: "vazio" });
+            return;
+        }
+        const filtered = ListaDeMedicos.filter(medico =>
+            medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
+        );
+        setFiltredTodosMedicos(filtered);
+    };
 
 
     const filaEsperaFiltrada = useMemo(() => {
@@ -233,9 +244,8 @@ const Agendamento = ({ setDictInfo }) => {
         <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
             <div className="modal-dialog modal-dialog-centered">
                 <div className="modal-content">
-                    <div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
+                    <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                         <h5 className="modal-title">Confirmação de Cancelamento</h5>
-                        <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
                     </div>
                     <div className="modal-body">
                         <p>Qual o motivo do cancelamento?</p>
@@ -243,7 +253,7 @@ const Agendamento = ({ setDictInfo }) => {
                     </div>
                     <div className="modal-footer justify-content-center">
                         <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>
+                        <button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>Excluir</button>
                     </div>
                 </div>
             </div>
@@ -278,33 +288,79 @@ const Agendamento = ({ setDictInfo }) => {
         <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
+                    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>
             {!PageNovaConsulta ? (
                 <div className='atendimento-eprocura'>
-                    <div className='unidade-selecionarprofissional'>
-                        <div className='busca-atendimento-container'>
-                            <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)} />
-                                    </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>
                     <div className='container-btns-agenda-fila_esepera'>
                         <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>
+                
+                    {!FiladeEspera && (
+                        <div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
+                            <h5 className="mb-3">
+                                <i className="bi bi-funnel-fill me-2 text-primary"></i>
+                                Filtrar por Médico
+                            </h5>
+                            <div className="mb-3">
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    placeholder="Digite o nome do médico..."
+                                    value={searchTermDoctor}
+                                    onChange={(e) => handleSearchMedicos(e.target.value)}
+                                />
+                                <small className="text-muted">
+                                    Filtre os agendamentos por médico
+                                </small>
+                            </div>
+                            {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
+                                <div className="list-group">
+                                    {FiltredTodosMedicos.map((medico) => (
+                                        <button
+                                            key={medico.idMedico}
+                                            className="list-group-item list-group-item-action"
+                                            onClick={() => {
+                                                setSearchTermDoctor(medico.nomeMedico);
+                                                setFiltredTodosMedicos([]);
+                                                setMedicoFiltrado(medico);
+                                            }}
+                                        >
+                                            {medico.nomeMedico}
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+                            {MedicoFiltrado.id !== "vazio" && (
+                                <div className="alert alert-info mt-2" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                    <span>
+                                        <i className="bi bi-info-circle me-2"></i>
+                                        Filtrando por: <strong>{searchTermDoctor}</strong>
+                                    </span>
+                                    <button 
+                                        className="btn btn-sm btn-outline-secondary"
+                                        onClick={() => {
+                                            setSearchTermDoctor('');
+                                            setMedicoFiltrado({ id: "vazio" });
+                                            setFiltredTodosMedicos([]);
+                                        }}
+                                    >
+                                        <i className="bi bi-x-circle me-1"></i>
+                                        Limpar filtro
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                    
                     <section className='calendario-ou-filaespera'>
                         {FiladeEspera === false ? (
                             <div className="calendar-wrapper">
@@ -313,18 +369,24 @@ const Agendamento = ({ setDictInfo }) => {
                                     <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')]
+                                                .filter(app => {
+                                                    if (MedicoFiltrado.id === "vazio") return true;
+                                                    return app.doctor_id === MedicoFiltrado.idMedico;
+                                                })
+                                                .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-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); }}>
-                                                            <Edit size={16} /> {/* Botão de Reverter Cancelamento */}
+                                                            <Edit size={16} />
                                                         </button>
                                                     ) : (
                                                         <>
-                                                            {/* MUDANÇA: PASSA O OBJETO COMPLETO 'app' PARA O ESTADO DE EDIÇÃO */}
+
                                                             <button
                                                                 className="btn-action btn-edit"
                                                                 onClick={() => {
@@ -335,7 +397,7 @@ const Agendamento = ({ setDictInfo }) => {
                                                             >
                                                                 <Edit size={16} />
                                                             </button>
-                                                            {/* Botão de Cancelar */}
+                                            
                                                             <button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
                                                                 <Trash2 size={16} />
                                                             </button>

src/pages/DisponibilidadesDoctorPage.jsx

@@ -18,6 +18,8 @@ const DisponibilidadesDoctorPage = () => {
   const [selectedDoctor, setSelectedDoctor] = useState(null);
   const [editando, setEditando] = useState(null);
   const [doctorsLoading, setDoctorsLoading] = useState(true);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedDisponibilidadeId, setSelectedDisponibilidadeId] = useState(null);
 
   useEffect(() => {
     const fetchDoctors = async () => {
@@ -108,8 +110,6 @@ const DisponibilidadesDoctorPage = () => {
   };
 
   const deletarDisponibilidade = async (id) => {
-    if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
-      return;
     try {
       const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
         method: "DELETE",
@@ -118,6 +118,8 @@ const DisponibilidadesDoctorPage = () => {
       if (res.ok) {
         alert("Disponibilidade excluída com sucesso!");
         setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
+        setShowDeleteModal(false);
+        setSelectedDisponibilidadeId(null);
       } else {
         const errorData = await res.json();
         console.error("Erro na resposta:", errorData);
@@ -181,62 +183,68 @@ const DisponibilidadesDoctorPage = () => {
         Disponibilidades dos Médicos
       </h1>
 
-      <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+      <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>
+          Filtrar por Médico
+        </h5>
+        <div className="position-relative">
           <input
             type="text"
-          placeholder="Buscar médico por nome..."
+            className="form-control"
+            placeholder="Digite o nome do médico..."
             value={searchTerm}
             onChange={(e) => {
               setSearchTerm(e.target.value);
-            setSelectedDoctor(null);
+              if (!e.target.value) setSelectedDoctor(null);
-          }}
-          style={{
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-            padding: "6px",
-            width: "300px",
             }}
           />
-        {searchTerm && (
+          <small className="text-muted">Buscar médico para filtrar disponibilidades</small>
-          <ul
+          
-            style={{
+          {searchTerm && !selectedDoctor && filteredDoctors.length > 0 && (
-              border: "1px solid #ddd",
+            <div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
-              borderRadius: "4px",
+              {filteredDoctors.map((doc) => (
-              backgroundColor: "white",
+                <button
-              position: "absolute",
-              zIndex: 10,
-              width: "300px",
-              maxHeight: "150px",
-              overflowY: "auto",
-              marginTop: "4px",
-              listStyle: "none",
-              padding: 0,
-            }}
-          >
-            {filteredDoctors.length > 0 ? (
-              filteredDoctors.map((doc) => (
-                <li
                   key={doc.id}
+                  type="button"
+                  className="list-group-item list-group-item-action"
                   onClick={() => {
                     setSelectedDoctor(doc);
                     setSearchTerm(doc.name);
                   }}
-                  style={{
-                    padding: "6px 8px",
-                    cursor: "pointer",
-                    borderBottom: "1px solid #eee",
-                  }}
                 >
                   {doc.name}
-                </li>
+                </button>
-              ))
+              ))}
-            ) : (
+            </div>
-              <li style={{ padding: "6px 8px", color: "#888" }}>
-                Nenhum médico encontrado
-              </li>
           )}
-          </ul>
+        </div>
+        
+        <div className="mt-3 d-flex justify-content-between align-items-center">
+          <div>
+            {selectedDoctor && (
+              <span className="badge bg-primary me-2">
+                <i className="bi bi-person-check me-1"></i>
+                {selectedDoctor.name}
+              </span>
             )}
+            <div className="contador-pacientes" style={{ display: 'inline-block' }}>
+              {disponibilidades.length} DISPONIBILIDADES ENCONTRADAS
+            </div>
+          </div>
+          
+          {selectedDoctor && (
+            <button
+              className="btn btn-outline-secondary btn-sm"
+              onClick={() => {
+                setSelectedDoctor(null);
+                setSearchTerm('');
+              }}
+            >
+              <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtro
+            </button>
+          )}
+        </div>
       </div>
 
       <section className="calendario-ou-filaespera">
@@ -312,37 +320,22 @@ const DisponibilidadesDoctorPage = () => {
                         </span>
                       </td>
                       <td>
-                      <div style={{ display: "flex", gap: "8px" }}>
+                        <div className="d-flex gap-2">
                           <button
                             className="btn btn-sm btn-edit"
-                          style={{
+                            onClick={() => setEditando(disp.id)}
-                            backgroundColor: "#3b82f6",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "6px",
-                            padding: "6px 10px",
-                            cursor: "pointer",
-                            fontWeight: "bold",
-                          }}
-                          onClick={() => console.log("Editar clicado")}
                           >
-                          Editar
+                            <i className="bi bi-pencil me-1"></i> Editar
                           </button>
 
                           <button
                             className="btn btn-sm btn-delete"
-                          style={{
+                            onClick={() => {
-                            backgroundColor: "#ef4444",
+                              setSelectedDisponibilidadeId(disp.id);
-                            color: "white",
+                              setShowDeleteModal(true);
-                            border: "none",
-                            borderRadius: "6px",
-                            padding: "6px 10px",
-                            cursor: "pointer",
-                            fontWeight: "bold",
                             }}
-                          onClick={() => console.log("Excluir clicado")}
                           >
-                          Excluir
+                            <i className="bi bi-trash me-1"></i> Excluir
                           </button>
                         </div>
                       </td>
@@ -354,6 +347,54 @@ const DisponibilidadesDoctorPage = () => {
           )}
         </div>
       </section>
+
+      {showDeleteModal && (
+        <div
+          className="modal fade show delete-modal"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
+                <h5 className="modal-title">
+                  Confirmação de Exclusão
+                </h5>
+              </div>
+
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja excluir esta disponibilidade?
+                </p>
+              </div>
+
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => {
+                    setShowDeleteModal(false);
+                    setSelectedDisponibilidadeId(null);
+                  }}
+                >
+                  Cancelar
+                </button>
+
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={() => deletarDisponibilidade(selectedDisponibilidadeId)}
+                >
+                  Excluir
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/DoctorEditPage.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
 import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
 import DoctorForm from "../components/doctors/DoctorForm";
 import { useAuth } from "../components/utils/AuthProvider";
@@ -10,7 +10,9 @@ const ENDPOINT_AVAILABILITY =
 
 const DoctorEditPage = ({DictInfo}) => {
   const { getAuthorizationHeader } = useAuth();
+  const navigate = useNavigate();
   const [DoctorToPUT, setDoctorPUT] = useState({});
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
 
   const Parametros = useParams();
   const [searchParams] = useSearchParams();
@@ -46,10 +48,17 @@ const DoctorEditPage = ({DictInfo}) => {
     };
 
    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
-   	.then(response => console.log(response))
+   	.then(response => {
+      console.log(response)
+      if (response.ok) {
+        setShowSuccessModal(true)
+      }
+      return response
+    })
+    .catch(error => console.log("erro", error))
   };
 
-  // 2. Função para Atualizar DISPONIBILIDADE (PATCH)
+
   const HandlePatchAvailability = async (data) => {
     const authHeader = getAuthorizationHeader();
 
@@ -76,8 +85,6 @@ const DoctorEditPage = ({DictInfo}) => {
       );
       console.log("Resposta PATCH Disponibilidade:", response);
       alert("Disponibilidade atualizada com sucesso!");
-      // Opcional: Redirecionar de volta para a lista de disponibilidades
-      // navigate('/disponibilidades');
     } catch (error) {
       console.error("Erro ao atualizar disponibilidade:", error);
       alert("Erro ao atualizar disponibilidade.");
@@ -97,6 +104,46 @@ const DoctorEditPage = ({DictInfo}) => {
         }
         isEditingAvailability={mode === "availability"}
       />
+
+      {showSuccessModal && (
+        <div
+          className="modal fade show delete-modal"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
+                <h5 className="modal-title">
+                  Médico Editado
+                </h5>
+              </div>
+
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Médico editado com sucesso!
+                </p>
+              </div>
+
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => {
+                    setShowSuccessModal(false)
+                    navigate(-1)
+                  }}
+                >
+                  OK
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/DoctorTable.jsx

@@ -27,9 +27,8 @@ function TableDoctor({setDictInfo}) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDoctorId, setSelectedDoctorId] = useState(null);
 
-  // Ordenação rápida
+  const [sortKey, setSortKey] = useState(null); 
-  const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
+  const [sortDir, setSortDir] = useState('asc'); 
-  const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
 
   const limparFiltros = () => {
     setSearch("");
@@ -147,7 +146,6 @@ function TableDoctor({setDictInfo}) {
     return resultado;
   }) : [];
 
-  // Aplica ordenação rápida
   const applySorting = (arr) => {
     if (!Array.isArray(arr) || !sortKey) return arr;
     const copy = [...arr];
@@ -277,7 +275,7 @@ function TableDoctor({setDictInfo}) {
                       </button>
                     </div>
 
-                    {/* Ordenação rápida */}
+
                     <div className="vr mx-2 d-none d-md-block" />
                     <div className="d-flex align-items-center gap-2">
                       <span className="text-muted small">Ordenar por:</span>
@@ -481,7 +479,6 @@ function TableDoctor({setDictInfo}) {
                     </tbody>
                   </table>
                   
-                  {/* Paginação */}
                   {medicosFiltrados.length > 0 && (
                     <div className="d-flex justify-content-between align-items-center mt-3">
                       <div className="d-flex align-items-center">
@@ -554,15 +551,10 @@ function TableDoctor({setDictInfo}) {
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                 <h5 className="modal-title">
                   Confirmação de Exclusão
                 </h5>
-                <button
-                  type="button"
-                  className="btn-close"
-                  onClick={() => setShowDeleteModal(false)}
-                ></button>
               </div>
 
               <div className="modal-body">

src/pages/EditPage.jsx

@@ -9,6 +9,7 @@ import { useAuth } from '../components/utils/AuthProvider'
 const EditPage = ({DictInfo}) => {
   const navigate = useNavigate()
   const [PatientToPUT, setPatientPUT] = useState({})
+  const [showSuccessModal, setShowSuccessModal] = useState(false)
 
    const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
@@ -37,9 +38,15 @@ const HandlePutPatient = async () => {
   };
 
     fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions) 
-      .then(response => console.log(response))   
+      .then(response => {
+        console.log(response)
+        if (response.ok) {
+          setShowSuccessModal(true)
+        }
+        return response
+      })   
       .then(result => console.log(result))
-      .catch(console.log("erro"))
+      .catch(error => console.log("erro", error))
    
 };
 
@@ -53,6 +60,46 @@ const HandlePutPatient = async () => {
     setFormData={setPatientPUT}
     />
 
+    {showSuccessModal && (
+      <div
+        className="modal fade show delete-modal"
+        style={{
+          display: "block",
+          backgroundColor: "rgba(0, 0, 0, 0,5)",
+        }}
+        tabIndex="-1"
+      >
+        <div className="modal-dialog modal-dialog-centered">
+          <div className="modal-content">
+            <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
+              <h5 className="modal-title">
+                Paciente Editado
+              </h5>
+            </div>
+
+            <div className="modal-body">
+              <p className="mb-0 fs-5">
+                Paciente editado com sucesso!
+              </p>
+            </div>
+
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={() => {
+                  setShowSuccessModal(false)
+                  navigate(-1)
+                }}
+              >
+                OK
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )}
+    
     </div>
   )
 }

src/pages/ExcecoesDisponibilidade.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import 'dayjs/locale/pt-br';
 import weekday from 'dayjs/plugin/weekday';
@@ -23,12 +24,10 @@ const getDateRange = (date, view) => {
         toDate = startDayjs.format('YYYY-MM-DD');
         titleRange = startDayjs.format('DD/MM/YYYY');
     } else if (view === 'semanal') {
-        // Padrão Dayjs: Sunday=0, Monday=1. 
+ 
-        // startOf('week') pode ser Domingo ou Segunda, dependendo do locale.
-        // Se precisar forçar a Segunda-feira:
         let weekStart = startDayjs.startOf('week'); 
-        if (weekStart.day() !== 1) { // Se não for segunda-feira (1), ajusta
+        if (weekStart.day() !== 1) { 
-             weekStart = startDayjs.weekday(1); // Vai para a segunda-feira desta semana
+             weekStart = startDayjs.weekday(1); 
         }
         
         const weekEnd = weekStart.add(6, 'day');
@@ -52,12 +51,21 @@ const getDateRange = (date, view) => {
 const ExcecoesDisponibilidade = () => {
 
     const { getAuthorizationHeader } = useAuth();
+    const navigate = useNavigate();
     const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
     const [excecoes, setExcecoes] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [selectedExceptionId, setSelectedExceptionId] = useState(null);
+    const [showSuccessModal, setShowSuccessModal] = useState(false);
+    const [successMessage, setSuccessMessage] = useState('');
     
     const [filtroMedicoId, setFiltroMedicoId] = useState('');
     const [filtroData, setFiltroData] = useState(dayjs().format('YYYY-MM-DD'));
+    const [listaDeMedicos, setListaDeMedicos] = useState([]);
+    const [searchTermDoctor, setSearchTermDoctor] = useState('');
+    const [filteredDoctors, setFilteredDoctors] = useState([]);
+    const [selectedDoctor, setSelectedDoctor] = useState(null);
     
     const [visualizacao, setVisualizacao] = useState('diario');
 
@@ -123,8 +131,51 @@ const ExcecoesDisponibilidade = () => {
         fetchExcecoes(fromDate, toDate, filtroMedicoId);
     }, [fetchExcecoes, filtroMedicoId, fromDate, toDate]);
 
+    useEffect(() => {
+        const fetchDoctors = async () => {
+            const myHeaders = new Headers();
+            const authHeader = resolveAuthHeader();
+            if (authHeader) myHeaders.append("Authorization", authHeader);
+            if (API_KEY) myHeaders.append("apikey", API_KEY);
+
+            try {
+                const response = await fetch('https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?select=id,full_name', {
+                    method: 'GET',
+                    headers: myHeaders
+                });
+                if (response.ok) {
+                    const doctors = await response.json();
+                    setListaDeMedicos(doctors);
+                }
+            } catch (error) {
+                console.error('Erro ao buscar médicos:', error);
+            }
+        };
+        fetchDoctors();
+    }, []);
+
+    const handleSearchDoctors = (term) => {
+        setSearchTermDoctor(term);
+        if (term.trim() === '') {
+            setFilteredDoctors([]);
+            return;
+        }
+        const filtered = listaDeMedicos.filter(doc =>
+            doc.full_name.toLowerCase().includes(term.toLowerCase())
+        );
+        setFilteredDoctors(filtered);
+    };
+
+    const limparFiltros = () => {
+        setSearchTermDoctor('');
+        setFilteredDoctors([]);
+        setSelectedDoctor(null);
+        setFiltroMedicoId('');
+        setFiltroData(dayjs().format('YYYY-MM-DD'));
+        setVisualizacao('diario');
+    };
+
     const deleteExcecao = async (id) => {
-        if (!window.confirm("Confirma exclusão desta exceção?")) return;
         const myHeaders = new Headers();
         const authHeader = resolveAuthHeader();
         if (authHeader) myHeaders.append("Authorization", authHeader);
@@ -139,6 +190,9 @@ const ExcecoesDisponibilidade = () => {
             });
             if (res.ok) {
                 setExcecoes(prev => prev.filter(x => x.id !== id));
+                setShowDeleteModal(false);
+                setSuccessMessage('Exceção excluída com sucesso!');
+                setShowSuccessModal(true);
             } else {
                 const text = await res.text();
                 console.error('Erro ao deletar exceção', res.status, text);
@@ -163,7 +217,7 @@ const ExcecoesDisponibilidade = () => {
 
     return (
         <div>
-            {/* Título e Botão de Criação */} 
+
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
                 <h1>Gerenciar Exceções de Disponibilidade</h1>
                 <button 
@@ -175,30 +229,80 @@ const ExcecoesDisponibilidade = () => {
                 </button>
             </div>
 
-            <div className='atendimento-eprocura'>
+            <div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
+                <h5 className="mb-3">
+                    <i className="bi bi-funnel-fill me-2 text-primary"></i>
+                    Filtros
+                </h5>
                 
-                {/* Filtros de Médico e Data */} 
+                <div className="row g-3 mb-3">
-                <div className='busca-atendimento'>
+                    <div className="col-md-6">
-                    <div>
+                        <label className="form-label fw-bold">Buscar Médico</label>
-                        <i className="fa-solid fa-user-doctor"></i>
                         <input
                             type="text"
-                            placeholder="Filtrar por ID do Médico..."
+                            className="form-control"
-                            value={filtroMedicoId}
+                            placeholder="Digite o nome do médico..."
-                            onChange={(e) => setFiltroMedicoId(e.target.value)}
+                            value={searchTermDoctor}
+                            onChange={(e) => handleSearchDoctors(e.target.value)}
                         />
+                        <small className="text-muted">Filtre as exceções por médico</small>
+                        {searchTermDoctor && filteredDoctors.length > 0 && (
+                            <div className="list-group mt-2" style={{ maxHeight: '200px', overflowY: 'auto' }}>
+                                {filteredDoctors.map((doc) => (
+                                    <button
+                                        key={doc.id}
+                                        className="list-group-item list-group-item-action"
+                                        onClick={() => {
+                                            setSearchTermDoctor(doc.full_name);
+                                            setFilteredDoctors([]);
+                                            setSelectedDoctor(doc);
+                                            setFiltroMedicoId(doc.id);
+                                        }}
+                                    >
+                                        {doc.full_name}
+                                    </button>
+                                ))}
                             </div>
-                    <div>
+                        )}
-                        <i className="fa-solid fa-calendar"></i>
+                    </div>
+                    
+                    <div className="col-md-6">
+                        <label className="form-label fw-bold">Data de Referência</label>
                         <input
                             type="date"
+                            className="form-control"
                             value={filtroData}
                             onChange={(e) => setFiltroData(e.target.value)}
                         />
+                        <small className="text-muted">Selecione a data base para visualização</small>
                     </div>
                 </div>
 
-                {/* Botões de Visualização (Dia/Semana/Mês) */} 
+                <div className="d-flex justify-content-between align-items-center">
+                    <div>
+                        {selectedDoctor && (
+                            <span className="badge bg-primary me-2">
+                                <i className="bi bi-person-fill me-1"></i>
+                                {selectedDoctor.full_name}
+                            </span>
+                        )}
+                        <div className="contador-pacientes" style={{ display: 'inline-block' }}>
+                            {excecoes.length} DE {excecoes.length} EXCEÇÕES ENCONTRADAS
+                        </div>
+                    </div>
+                    
+                    <button
+                        className="btn btn-outline-secondary btn-sm"
+                        onClick={limparFiltros}
+                    >
+                        <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                    </button>
+                </div>
+            </div>
+
+            <div className='atendimento-eprocura'>
+
+
                 <div className='container-btns-agenda-fila_esepera'>
                     <button
                         className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
@@ -220,7 +324,7 @@ const ExcecoesDisponibilidade = () => {
                     </button>
                 </div>
                 
-                {/* Tabela de Exceções (Título usa o titleRange calculado) */} 
+
                 <section className='calendario-ou-filaespera'>
                     <div className="fila-container">
                         <h2 className="fila-titulo">Exceções em {titleRange} ({excecoes.length})</h2>
@@ -264,7 +368,10 @@ const ExcecoesDisponibilidade = () => {
 
                                                     <button
                                                         className="btn btn-sm btn-delete"
-                                                        onClick={() => deleteExcecao(exc.id)}
+                                                        onClick={() => {
+                                                            setSelectedExceptionId(exc.id);
+                                                            setShowDeleteModal(true);
+                                                        }}
                                                     >
                                                         <i className="bi bi-trash me-1"></i> Excluir
                                                     </button>
@@ -278,6 +385,89 @@ const ExcecoesDisponibilidade = () => {
                     </div>
                 </section>
             </div>
+
+            {showDeleteModal && (
+                <div
+                    className="modal fade show delete-modal"
+                    style={{
+                        display: "block",
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    }}
+                    tabIndex="-1"
+                >
+                    <div className="modal-dialog modal-dialog-centered">
+                        <div className="modal-content">
+                            <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
+                                <h5 className="modal-title">
+                                    Confirmação de Exclusão
+                                </h5>
+                            </div>
+
+                            <div className="modal-body">
+                                <p className="mb-0 fs-5">
+                                    Tem certeza que deseja excluir esta exceção?
+                                </p>
+                            </div>
+
+                            <div className="modal-footer">
+                                <button
+                                    type="button"
+                                    className="btn btn-primary"
+                                    onClick={() => setShowDeleteModal(false)}
+                                >
+                                    Cancelar
+                                </button>
+
+                                <button
+                                    type="button"
+                                    className="btn btn-danger"
+                                    onClick={() => deleteExcecao(selectedExceptionId)}
+                                >
+                                    Excluir
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+
+            {showSuccessModal && (
+                <div
+                    className="modal fade show delete-modal"
+                    style={{
+                        display: "block",
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    }}
+                    tabIndex="-1"
+                >
+                    <div className="modal-dialog modal-dialog-centered">
+                        <div className="modal-content">
+                            <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
+                                <h5 className="modal-title">
+                                    Sucesso
+                                </h5>
+                            </div>
+
+                            <div className="modal-body">
+                                <p className="mb-0 fs-5">
+                                    {successMessage}
+                                </p>
+                            </div>
+
+                            <div className="modal-footer">
+                                <button
+                                    type="button"
+                                    className="btn btn-primary"
+                                    onClick={() => setShowSuccessModal(false)}
+                                >
+                                    OK
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

src/pages/LaudoManager.jsx

@@ -32,7 +32,6 @@ const LaudoManager = () => {
   const [paginaAtual, setPaginaAtual] = useState(1);
   const [itensPorPagina, setItensPorPagina] = useState(10);
 
-  // agora guardamos a mensagem (null = sem aviso)
   const [noPermissionText, setNoPermissionText] = useState(null);
 
   const isSecretary = true;
@@ -162,11 +161,11 @@ const LaudoManager = () => {
 
   const handleLiberarLaudo = async (relatorio) => {
     if (isSecretary) {
-      // MUDANÇA: mostrar "Ainda não implementado"
+
       setNoPermissionText('Ainda não implementado');
       return;
     }
-    // para médicos: implementação real já estava antes (mantive o bloco, caso queira)
+  
     try {
       const myHeaders = new Headers();
       myHeaders.append('apikey', API_KEY);
@@ -187,7 +186,6 @@ const LaudoManager = () => {
         throw new Error('Erro ao liberar laudo: ' + res.status + ' ' + txt);
       }
 
-      // refetch simples
       const refreshed = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", {
         method: 'GET',
         headers: (() => { const h=new Headers(); h.append('apikey', API_KEY); if(authHeader) h.append('Authorization', authHeader); return h; })(),
@@ -327,7 +325,7 @@ const LaudoManager = () => {
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>
 
-                                  {/* Removido o botão "Imprimir" daqui (agora no Ver Detalhes) */}
+                        
 
                                   <button className="btn btn-sm btn-protocolo" onClick={() => handleOpenProtocol(relatorio, index)}>
                                     <i className="bi bi-send me-1"></i> Protocolo
@@ -405,14 +403,13 @@ const LaudoManager = () => {
         </section>
       </div>
 
-      {/* Modal principal (detalhes) */}
+
       {showModal && relatorioModal && (
-        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
+        <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-dialog modal-dialog-centered modal-lg">
             <div className="modal-content">
-              <div className="modal-header custom-modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
                 <h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || 'Paciente'}</h5>
-                <button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
               </div>
 
               <div className="modal-body">
@@ -441,11 +438,11 @@ const LaudoManager = () => {
                 </div>
               </div>
 
-              <div className="modal-footer custom-modal-footer">
+              <div className="modal-footer">
                 <button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name || 'paciente', modalIndex)}>
-                  <i className='bi bi-file-pdf-fill'></i> baixar em pdf
+                  <i className='bi bi-file-pdf-fill me-1'></i> Baixar em PDF
                 </button>
-                <button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
+                <button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
                   Fechar
                 </button>
               </div>
@@ -454,14 +451,13 @@ const LaudoManager = () => {
         </div>
       )}
 
-      {/* Modal Protocolo */}
+  
       {showProtocolModal && protocolForIndex && (
-        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowProtocolModal(false)}>
+        <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-tabela-relatorio" role="document" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header custom-modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
                 <h5 className="modal-title">Protocolo de Entrega - {protocolForIndex.relatorio?.patient_name || 'Paciente'}</h5>
-                <button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowProtocolModal(false)}></button>
               </div>
 
               <div className="modal-body">
@@ -474,14 +470,14 @@ const LaudoManager = () => {
                 </div>
               </div>
 
-              <div className="modal-footer custom-modal-footer">
+              <div className="modal-footer">
                 <button className="btn btn-primary" onClick={() => {
                   const idx = protocolForIndex.index ?? 0;
                   BaixarPDFdoRelatorio(protocolForIndex.relatorio?.patient_name || 'paciente', idx);
                 }}>
-                  <i className='bi bi-file-earmark-pdf-fill'></i> baixar protocolo (PDF)
+                  <i className='bi bi-file-earmark-pdf-fill me-1'></i> Baixar Protocolo (PDF)
                 </button>
-                <button type="button" className="btn btn-outline-secondary" onClick={() => setShowProtocolModal(false)}>
+                <button type="button" className="btn btn-secondary" onClick={() => setShowProtocolModal(false)}>
                   Fechar
                 </button>
               </div>
@@ -490,17 +486,18 @@ const LaudoManager = () => {
         </div>
       )}
 
-      {/* Variável de aviso: mostra texto personalizado */}
       {noPermissionText && (
-        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setNoPermissionText(null)}>
+        <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div style={{ padding: 18 }}>
+              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
-                <h5 style={{ marginBottom: 8 }}>{noPermissionText}</h5>
+                <h5 className="modal-title">Aviso</h5>
-                <p style={{ color: '#6c757d' }}>{/* opcional descrição aqui */}</p>
-                <div style={{ textAlign: 'right', marginTop: 12 }}>
-                  <button className="btn btn-outline-secondary" onClick={() => setNoPermissionText(null)}>Fechar</button>
               </div>
+              <div className="modal-body">
+                <p>{noPermissionText}</p>
+              </div>
+              <div className="modal-footer">
+                <button className="btn btn-primary" onClick={() => setNoPermissionText(null)}>Fechar</button>
               </div>
             </div>
           </div>

src/pages/ProfilePage.jsx

@@ -2,14 +2,6 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./style/ProfilePage.css";
 
-
-const MOCK_API_BASE_URL = "https://mock.apidog.com/m1/1053378-0-default";
-
-
-const getLocalAvatar = () => localStorage.getItem('user_avatar');
-const setLocalAvatar = (avatarData) => localStorage.setItem('user_avatar', avatarData);
-const clearLocalAvatar = () => localStorage.removeItem('user_avatar');
-
 const ROLES = {
   ADMIN: "Administrador",
   SECRETARY: "Secretária",
@@ -36,7 +28,6 @@ const ProfilePage = () => {
   const [userEmail, setUserEmail] = useState("admin@squad23.com");
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [isEditingName, setIsEditingName] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
   const [error, setError] = useState(null);
 
 
@@ -52,14 +43,21 @@ const ProfilePage = () => {
 
   useEffect(() => {
     const loadProfileData = () => {
-
+      const localAvatar = localStorage.getItem('user_avatar');
-      const localAvatar = getLocalAvatar();
       if (localAvatar) {
         setAvatarUrl(localAvatar);
       }
     };
 
     loadProfileData();
+
+   
+    const handleStorageChange = () => {
+      loadProfileData();
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
   }, []);
 
   const handleNameSave = () => {
@@ -83,104 +81,6 @@ const ProfilePage = () => {
 
   const handleClose = () => navigate(-1);
 
-
-  const handleAvatarUpload = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    setError(null);
-
-
-    const MAX_FILE_SIZE = 5 * 1024 * 1024;
-    const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-
-    if (file.size > MAX_FILE_SIZE) {
-      setError("Arquivo muito grande. Máximo 5MB.");
-      return;
-    }
-
-    if (!ACCEPTED_TYPES.includes(file.type)) {
-      setError("Tipo de arquivo não suportado. Use JPEG, PNG, GIF ou WebP.");
-      return;
-    }
-
-    setIsUploading(true);
-
-    try {
-
-      try {
-        const result = await uploadAvatarToMockAPI(file);
-
-        const newAvatarUrl = result.url || result.avatarUrl;
-        if (newAvatarUrl) {
-          setAvatarUrl(newAvatarUrl);
-          setLocalAvatar(newAvatarUrl);
-          console.log('Avatar enviado para API com sucesso');
-          return;
-        }
-      } catch (apiError) {
-
-        console.log('API não disponível, salvando localmente...');
-      }
-
-
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageDataUrl = e.target.result;
-        setLocalAvatar(imageDataUrl);
-        setAvatarUrl(imageDataUrl);
-        console.log('Avatar salvo localmente');
-      };
-      reader.readAsDataURL(file);
-
-    } catch (error) {
-
-      console.error('Erro no processamento:', error);
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageDataUrl = e.target.result;
-        setLocalAvatar(imageDataUrl);
-        setAvatarUrl(imageDataUrl);
-      };
-      reader.readAsDataURL(file);
-    } finally {
-      setIsUploading(false);
-      event.target.value = '';
-    }
-  };
-
-
-  const uploadAvatarToMockAPI = async (file) => {
-    const formData = new FormData();
-    formData.append("avatar", file);
-
-    const response = await fetch(`${MOCK_API_BASE_URL}/storage/v1/object/avatars/[path]`, {
-      method: "POST",
-      body: formData
-    });
-
-    if (!response.ok) {
-
-      return null;
-    }
-
-    return await response.json();
-  };
-
-
-  const clearAvatar = () => {
-
-    fetch(`${MOCK_API_BASE_URL}/storage/v1/object/avatars/[path]`, {
-      method: "DELETE"
-    }).catch(() => {
-
-    });
-
-
-    clearLocalAvatar();
-    setAvatarUrl(null);
-  };
-
   return (
     <div className="profile-overlay" role="dialog" aria-modal="true">
       <div className="profile-modal">
@@ -203,7 +103,7 @@ const ProfilePage = () => {
                     className="avatar-img"
                     onError={() => {
                       setAvatarUrl(null);
-                      clearLocalAvatar();
+                      localStorage.removeItem('user_avatar');
                     }}
                   />
                 ) : (
@@ -213,25 +113,14 @@ const ProfilePage = () => {
                 )}
               </div>
               
-              <label
+              <p style={{ 
-                className={`avatar-edit-btn ${isUploading ? 'uploading' : ''}`}
+                textAlign: 'center', 
-                title="Alterar foto de perfil"
+                marginTop: '10px', 
-              >
+                fontSize: '0.85rem', 
-                {isUploading ? 'Enviando...' : 'Alterar Foto'}
+                color: '#666' 
-                <input
+              }}>
-                  type="file"
+                Gerencie seu avatar no menu do perfil acima
-                  accept="image/*"
-                  onChange={handleAvatarUpload}
-                  disabled={isUploading}
-                  style={{ display: "none" }}
-                />
-              </label>
-
-              {isUploading && (
-                <p className="upload-status">
-                  Processando imagem...
               </p>
-              )}
             </div>
           </div>
 
@@ -287,11 +176,6 @@ const ProfilePage = () => {
             </div>
 
             <div className="profile-actions">
-              {avatarUrl && (
-                <button onClick={clearAvatar} className="btn btn-clear">
-                  Remover Avatar
-                </button>
-              )}
               <button
                 className="btn btn-close"
                 onClick={handleClose}

src/pages/TablePaciente.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
 import "./style/TablePaciente.css"; 
@@ -9,6 +9,7 @@ import manager from "../components/utils/fetchErros/ManagerFunction";
 function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
 
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
 
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
@@ -23,9 +24,9 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
   const [dataInicial, setDataInicial] = useState("");
   const [dataFinal, setDataFinal] = useState("");
 
-  // Ordenação rápida
+ 
-  const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
+  const [sortKey, setSortKey] = useState(null); 
-  const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
+  const [sortDir, setSortDir] = useState('asc'); 
 
   
   const [paginaAtual, setPaginaAtual] = useState(1);
@@ -250,7 +251,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
     return resultado;
   }) : [];
 
-  // Aplica ordenação rápida
+ 
   const applySorting = (arr) => {
     if (!Array.isArray(arr) || !sortKey) return arr;
     const copy = [...arr];
@@ -377,7 +378,6 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
                       <i className="bi bi-calendar me-1"></i> Aniversariantes
                     </button>
 
-                    {/* Ordenação rápida (estilo compacto por select) */}
                     <div className="vr mx-2 d-none d-md-block" />
                     <div className="d-flex align-items-center gap-2">
                       <span className="text-muted small">Ordenar por:</span>
@@ -550,11 +550,15 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
                                   </button>
                                 </Link>
 
-                                <Link to={"edit"}>
+                                <button 
-                                  <button className="btn btn-sm btn-edit" onClick={() => setDictInfo(paciente)}>
+                                  className="btn btn-sm btn-edit" 
+                                  onClick={() => {
+                                    setDictInfo(paciente);
+                                    navigate('edit');
+                                  }}
+                                >
                                   <i className="bi bi-pencil me-1"></i> Editar
                                 </button>
-                                </Link>
 
                                 <button
                                   className="btn btn-sm btn-delete"
@@ -588,7 +592,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
                     </tbody>
                   </table>
                   
-                  {/* Paginação */}
+  
                   {pacientesFiltrados.length > 0 && (
                     <div className="d-flex justify-content-between align-items-center mt-3">
                       <div className="d-flex align-items-center">
@@ -661,15 +665,10 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                 <h5 className="modal-title">
                   Confirmação de Exclusão
                 </h5>
-                <button
-                  type="button"
-                  className="btn-close"
-                  onClick={() => setShowDeleteModal(false)}
-                ></button>
               </div>
 
               <div className="modal-body">