Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad23 into Disponibilidades5

package.json

@@ -5,6 +5,14 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^41.4.2",
     "@ckeditor/ckeditor5-react": "^11.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@fullcalendar/core": "^6.1.19",
+    "@fullcalendar/daygrid": "^6.1.19",
+    "@fullcalendar/interaction": "^6.1.19",
+    "@fullcalendar/react": "^6.1.19",
+    "@fullcalendar/timegrid": "^6.1.19",
     "@jitsi/react-sdk": "^1.4.0",
     "@sweetalert2/theme-dark": "^5.0.27",
     "@testing-library/dom": "^10.4.1",
@@ -20,7 +28,7 @@
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "cors": "^2.8.5",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
     "firebase": "^12.5.0",
@@ -44,6 +52,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^7.9.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^11.0.5",
     "recharts": "^3.1.2",
     "sweetalert2": "^11.22.4",
     "tiptap": "^1.32.2",

src/PagesMedico/DoctorRelatorioManager.jsx

@@ -1,9 +1,11 @@
+// src/PagesMedico/DoctorRelatorioManager.jsx
 import API_KEY from '../components/utils/apiKeys';
 import { Link } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { useAuth } from '../components/utils/AuthProvider';
 import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient';
 import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor';
+import { UserInfos } from '../components/utils/Functions-Endpoints/General';
 import { useNavigate } from 'react-router-dom';
 import html2pdf from 'html2pdf.js';
 import TiptapViewer from './TiptapViewer';
@@ -12,12 +14,11 @@ import './styleMedico/DoctorRelatorioManager.css';
 const DoctorRelatorioManager = () => {
   const navigate = useNavigate();
   const { getAuthorizationHeader } = useAuth();
-  let authHeader = getAuthorizationHeader();
+  const authHeader = getAuthorizationHeader();
 
   const [relatoriosOriginais, setRelatoriosOriginais] = useState([]);
   const [relatoriosFiltrados, setRelatoriosFiltrados] = useState([]);
   const [relatoriosFinais, setRelatoriosFinais] = useState([]);
-  const [pacientesData, setPacientesData] = useState({});
   const [pacientesComRelatorios, setPacientesComRelatorios] = useState([]);
   const [medicosComRelatorios, setMedicosComRelatorios] = useState([]);
   const [showModal, setShowModal] = useState(false);
@@ -30,8 +31,7 @@ const DoctorRelatorioManager = () => {
   const [paginaAtual, setPaginaAtual] = useState(1);
   const [itensPorPagina, setItensPorPagina] = useState(10);
 
-
+  const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
-  const totalPaginas = Math.ceil(relatoriosFinais.length / itensPorPagina);
   const indiceInicial = (paginaAtual - 1) * itensPorPagina;
   const indiceFinal = indiceInicial + itensPorPagina;
   const relatoriosPaginados = relatoriosFinais.slice(indiceInicial, indiceFinal);
@@ -41,14 +41,76 @@ const DoctorRelatorioManager = () => {
 
     const fetchReports = async () => {
       try {
-        var myHeaders = new Headers();
+        const myHeaders = new Headers();
         myHeaders.append('apikey', API_KEY);
         if (authHeader) myHeaders.append('Authorization', authHeader);
-        var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
+        const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
 
-        const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", requestOptions);
+        // Tenta descobrir o ID do usuário logado para aplicar filtro por médico
-        const data = await res.json();
+        let userId = null;
+        let userFullName = null;
+        try {
+          const token = authHeader ? authHeader.replace(/^Bearer\s+/i, '') : '';
+          if (token) {
+            const userInfo = await UserInfos(token);
+            userId = userInfo?.id || userInfo?.user?.id || userInfo?.sub || null;
+            userFullName = userInfo?.full_name || (userInfo?.user && userInfo.user.full_name) || null;
+          }
+        } catch (err) {
+          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();
+          } catch (e) {
+            console.warn('Erro ao buscar por doctor_id:', e);
+            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);
+              data = await res2.json();
+            } catch (e) {
+              console.warn('Erro ao buscar por created_by:', e);
+              data = [];
+            }
+          }
+
+          // 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();
+            } catch (e) {
+              console.warn('Erro ao buscar por requested_by:', e);
+              data = [];
+            }
+          }
+        }
+
+        // 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);
+            data = await resAll.json();
+          } catch (e) {
+            console.error('Erro listar relatórios (busca completa):', e);
+            data = [];
+          }
+        }
+
+        // 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);
@@ -62,7 +124,7 @@ const DoctorRelatorioManager = () => {
           setRelatoriosFinais(unique);
         }
       } catch (err) {
-        console.error('Erro listar relatórios', err);
+        console.error('Erro listar relatórios (catch):', err);
         if (mounted) {
           setRelatoriosOriginais([]);
           setRelatoriosFiltrados([]);
@@ -82,43 +144,57 @@ 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 < relatoriosFiltrados.length; i++) {
+      for (let i = 0; i < relatoriosFinais.length; i++) {
-        const rel = relatoriosFiltrados[i];
+        const rel = relatoriosFinais[i];
+        // paciente
         try {
           const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
           pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
         } catch (err) {
           pacientes.push(null);
         }
+
+        // médico: prioriza campos com id (doctor_id ou created_by). Se tiver somente requested_by (nome), usa nome.
         try {
-          const doctorId = rel.created_by || rel.requested_by || null;
+          if (rel.doctor_id) {
-          if (doctorId) {
+            const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
-            const docRes = await GetDoctorByID(doctorId, 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) {
+            medicos.push({ full_name: rel.requested_by });
           } else {
-            medicos.push({ full_name: rel.requested_by || '' });
+            medicos.push({ full_name: '' });
           }
         } catch (err) {
+          // fallback para requested_by se houver
           medicos.push({ full_name: rel.requested_by || '' });
         }
       }
       setPacientesComRelatorios(pacientes);
       setMedicosComRelatorios(medicos);
     };
-    if (relatoriosFiltrados.length > 0) fetchRelData();
+
+    if (relatoriosFinais.length > 0) fetchRelData();
     else {
       setPacientesComRelatorios([]);
       setMedicosComRelatorios([]);
     }
-  }, [relatoriosFiltrados, authHeader]);
+  }, [relatoriosFinais, authHeader]);
 
-  const abrirModal = (relatorio, index) => {
+  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);
-    setModalIndex(index);
+    setModalIndex(indexToUse);
     setShowModal(true);
   };
 
@@ -127,6 +203,7 @@ const DoctorRelatorioManager = () => {
     setTermoPesquisa('');
     setFiltroExame('');
     setRelatoriosFinais(relatoriosOriginais);
+    setPaginaAtual(1);
   };
 
   const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
@@ -198,17 +275,17 @@ const DoctorRelatorioManager = () => {
                   <div id='infoPaciente' style={{ padding: '0 6px' }}>
                     <p><strong>Paciente:</strong> {pacientesComRelatorios[modalIndex]?.full_name}</p>
                     <p><strong>Data de nascimento:</strong> {pacientesComRelatorios[modalIndex]?.birth_date || '—'}</p>
-                    <p><strong>Data do exame:</strong> {relatoriosFiltrados[modalIndex]?.due_at || '—'}</p>
+                    <p><strong>Data do exame:</strong> {relatoriosFinais[modalIndex]?.due_at || '—'}</p>
 
                     <p style={{ marginTop: 12, fontWeight: '700' }}>Conteúdo do Relatório:</p>
                     <div className="tiptap-viewer-wrapper">
-                      <TiptapViewer htmlContent={relatoriosFiltrados[modalIndex]?.content_html || relatoriosFiltrados[modalIndex]?.content || 'Relatório não preenchido.'} />
+                      <TiptapViewer htmlContent={relatoriosFinais[modalIndex]?.content_html || relatoriosFinais[modalIndex]?.content || 'Relatório não preenchido.'} />
                     </div>
                   </div>
 
                   <div style={{ marginTop: 20, padding: '0 6px' }}>
-                    <p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatoriosFiltrados[modalIndex]?.requested_by}</p>
+                    <p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatoriosFinais[modalIndex]?.requested_by}</p>
-                    <p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatoriosFiltrados[modalIndex]?.created_at || '—'}</p>
+                    <p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatoriosFinais[modalIndex]?.created_at || '—'}</p>
                   </div>
                 </div>
               </div>
@@ -295,7 +372,8 @@ const DoctorRelatorioManager = () => {
                     <tbody>
                       {relatoriosPaginados.length > 0 ? (
                         relatoriosPaginados.map((relatorio, index) => {
-                          const paciente = pacientesData[relatorio.patient_id];
+                          const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
+                          const paciente = pacientesComRelatorios[globalIndex];
                           return (
                             <tr key={relatorio.id}>
                               <td>{paciente?.full_name || 'Carregando...'}</td>

src/PagesPaciente/ConsultasPaciente.jsx

@@ -1,419 +1,429 @@
-import React from 'react'
+import React, { useState, useMemo, useEffect } from 'react';
-import "./style.css"
+import { useNavigate } from 'react-router-dom';
-import CardConsultaPaciente from './CardConsultaPaciente'
+import API_KEY from '../components/utils/apiKeys.js';
-import { useNavigate } from 'react-router-dom'
+import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx'; 
-import { useEffect, useState, useMemo } from 'react'
+import { useAuth } from '../components/utils/AuthProvider.js';
-import API_KEY from '../components/utils/apiKeys'
+import dayjs from 'dayjs';
-import { useAuth } from '../components/utils/AuthProvider'
+import 'dayjs/locale/pt-br';
-import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
+import isBetween from 'dayjs/plugin/isBetween';
-import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
+import localeData from 'dayjs/plugin/localeData'; 
+import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react'; 
+import "../pages/style/Agendamento.css"; 
+import '../pages/style/FilaEspera.css';
+import Spinner from '../components/Spinner.jsx';
 
-import { UserInfos } from '../components/utils/Functions-Endpoints/General'
-import dayjs from 'dayjs'
-import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"
 
-const ConsultasPaciente = ({ setDictInfo }) => {
+dayjs.locale('pt-br');
-    const { getAuthorizationHeader } = useAuth()
+dayjs.extend(isBetween);
-    const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
+dayjs.extend(localeData); 
-    const [listaTodasConsultas, setListaTodasConsultas] = useState([])
-    const [patientID, setPatientID] = useState("")
-    const [showDeleteModal, setShowDeleteModal] = useState(false)
-    const [selectedID, setSelectedId] = useState("")
-    let authHeader = getAuthorizationHeader()
 
-    const [motivoCancelamento, setMotivoCancelamento] = useState("")
 
-    const [consultas, setConsultas] = useState([])
+const Agendamento = ({ setDictInfo }) => {
+    const navigate = useNavigate();
+    const { getAuthorizationHeader, user } = useAuth();
 
-    const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
-    const [filaDeEspera, setFilaDeEspera] = useState([])
-    const [viewFila, setViewFila] = useState(false)
 
-     const [listaConsultasID, setListaConsultaID] = useState([])
-    const [coresConsultas,setCoresConsultas] = useState([])
    
-    const [showConfirmModal, setShowConfirmModal] = useState(false)
+    const [isLoading, setIsLoading] = useState(true);
+    const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
+    
+    
+    const [filaEsperaData, setFilaDeEsperaData] = useState([]);
+    
+    const [FiladeEspera, setFiladeEspera] = useState(false); 
+    const [PageNovaConsulta, setPageConsulta] = useState(false);
+    
+
+    const [currentDate, setCurrentDate] = useState(dayjs());
+    const [selectedDay, setSelectedDay] = useState(dayjs());
+    const [quickJump, setQuickJump] = useState({ 
+        month: currentDate.month(), 
+        year: currentDate.year() 
+    });
+
+
+   
+    const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+    const [appointmentToCancel, setAppointmentToCancel] = useState(null); 
+    const [cancellationReason, setCancellationReason] = useState('');
+    
+    const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
+
 
    
     useEffect(() => {
+        const carregarDados = async () => {
            
-        console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")
+            const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
             
-    }, [coresConsultas, listaConsultasID])
+            if (!authHeader) {
-
+                console.warn("Header de autorização não disponível.");
-    useMemo(() => {
+                setIsLoading(false);
-        let conjuntoConsultas = {}
+                return;
-        let filaEspera = []
-
-        const fetchInfosConsultas = async (consulta) => {
-            //console.log(doctor, "PACIENTE TRAZIDO PELO ")
-
-           //let consultaMelhorada = {...consulta, paciente_nome:paciente[0].full_name, medico_nome:doctor[0].full_name } 
-
-            //console.log(consultaMelhorada,"ID DO MEDICO")
-
-            for(let i = 0; listaTodasConsultas.length > i; i++){
-
-            let consulta = listaTodasConsultas[i]
-
-              let doctor = await GetDoctorByID(consulta.doctor_id, authHeader)
-            let paciente = await GetPatientByID(consulta.patient_id, authHeader)
-
-            consulta = {...consulta, medico_nome:doctor[0]?.full_name, paciente_nome:paciente[0]?.full_name}
-
-        
-
-
-            if(consulta.status === "requested"){
-                
-                filaEspera.push(consulta)
-            
-            }else{
-                
-                let data = consulta.scheduled_at.split("T")[0]
-                let chavesConsultas = Object.keys(conjuntoConsultas)
-                  
-               if(chavesConsultas.includes(data)){
-                let lista = conjuntoConsultas[data]
-                
-                lista.push(consulta)
-
-                conjuntoConsultas = {...conjuntoConsultas, [data]:lista}
-               }else{
-                conjuntoConsultas = {...conjuntoConsultas, [data]:[consulta]   }
-               }
             }
-        }
 
 
-        setConsultasOrganizadas(conjuntoConsultas)
+            setIsLoading(true);
-        setFilaDeEspera(filaEspera)
-        
-        }
-
-        console.log("so muda")
-        if(!listaTodasConsultas.length) return     
-
-        console.log(filaEspera, "fila de espera")
-        fetchInfosConsultas();
-    
-    }, [listaTodasConsultas])
-   
-
-    useEffect(() => {
-        let userInfos = UserInfos(authHeader)
-
-        const fetchConsultas = async () => {
             try {
-                const myHeaders = new Headers();
-                myHeaders.append("Authorization", authHeader);
-                myHeaders.append("apikey", API_KEY)
                 
-                const requestOptions = {
+                const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
-                    method: 'GET',
+                const requestOptions = { method: 'GET', headers: myHeaders };
-                    headers: myHeaders,
+                const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);
-                    redirect: 'follow'
-                };
                 
-                const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?patient_id=eq.${"6e7f8829-0574-42df-9290-8dbb70f75ada"}`, requestOptions);
+                if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);
-                const result = await response.json();
+                
-                setListaTodasConsultas(result);
+                const consultasBrutas = await response.json() || [];
-            } catch (error) {
+
-                console.log('error', error);
+
+               
+                const newDict = {};
+                const newFila = [];
+
+
+                for (const agendamento of consultasBrutas) {
+                    const agendamentoMelhorado = { 
+                        ...agendamento, 
+                        medico_nome: agendamento.doctors?.full_name || 'Médico não informado' 
+                    };
+                    
+                    if (agendamento.status === "requested") {
+                        newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
+                    } else {
+                        const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
+                        if (newDict[diaAgendamento]) {
+                            newDict[diaAgendamento].push(agendamentoMelhorado);
+                        } else {
+                            newDict[diaAgendamento] = [agendamentoMelhorado];
+                        }
+                    }
+                }
+                
+                for (const key in newDict) {
+                    newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
+                }
+                
+                setDictAgendamentosOrganizados(newDict);
+                setFilaDeEsperaData(newFila);
+
+
+            } catch (err) {
+                console.error('Falha ao buscar ou processar agendamentos:', err);
+                setDictAgendamentosOrganizados({});
+                setFilaDeEsperaData([]);
+            } finally {
+                setIsLoading(false);
             }
         };
 
-        fetchConsultas();
-    }, []);
 
-    const navigate = useNavigate()
+        carregarDados();
+    }, [authHeader, user]); 
 
 
-const confirmConsulta = (selectedPatientId) => {
+    const updateAppointmentStatus = async (id, updates) => {
-     var myHeaders = new Headers();
+        const myHeaders = new Headers({
-            myHeaders.append("Content-Type", "application/json");
+            "Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
-            myHeaders.append('apikey', API_KEY)
+        });
-            myHeaders.append("authorization", authHeader)
+        const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
         
-    
-            var raw = JSON.stringify({ "status":"confirmed"      
-            });
-    
-    
-            var requestOptions = {
-            method: 'PATCH',
-            headers: myHeaders,
-            body: raw,
-            redirect: 'follow'
-            };
-    
-            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
-            .then(response => {if(response.status !== 200)(console.log(response))})
-            .then(result => console.log(result))
-            .catch(error => console.log('error', error));
-
-}
-
-    const deleteConsulta = async (ID) => {
         try {
-            const myHeaders = new Headers();
+            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
-            myHeaders.append("Content-Type", "application/json");
+            if (!response.ok) throw new Error('Falha ao atualizar o status.');
-            myHeaders.append('apikey', API_KEY);
+            return true;
-            myHeaders.append("authorization", authHeader);
-
-            const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });
-
-            const requestOptions = {
-                method: 'PATCH',
-                headers: myHeaders,
-                body: raw,
-                redirect: 'follow'
-            };
-
-            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${ID}`, requestOptions);
-
-            if (!response.ok) {
-                const errorText = await response.text();
-                throw new Error(`Falha ao cancelar consulta: ${response.status} - ${errorText}`);
-            }
-            setConsultas(prevConsultas => prevConsultas.filter(consulta => consulta.id !== ID));
-
-            console.log("Consulta cancelada com sucesso!");
-            alert("Consulta cancelada com sucesso!");
-
         } catch (error) {
-            console.error('Erro ao cancelar a consulta:', error);
+            console.error('Erro de rede/servidor:', error);
-            alert('Erro ao cancelar a consulta. Veja o console.');
+            return false;
         }
+    };
+    
+   
+    const handleCancelClick = (appointmentId) => {
+        setAppointmentToCancel(appointmentId);
+        setCancellationReason(''); 
+        setIsCancelModalOpen(true);
+    };
+
+
+   
+    const executeCancellation = async () => {
+        if (!appointmentToCancel) return;
+        
+        setIsLoading(true);
+        
+      
+        const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
+        
+        const success = await updateAppointmentStatus(appointmentToCancel, { 
+            status: "cancelled", 
+            cancellation_reason: motivo, 
+            updated_at: new Date().toISOString() 
+        });
+        
+       
+        setIsCancelModalOpen(false); 
+        setAppointmentToCancel(null);
+        setCancellationReason('');
+
+
+        if (success) {
+            alert("Solicitação cancelada com sucesso!");
+            
+            setDictAgendamentosOrganizados(prev => {
+                const newDict = { ...prev };
+                for (const date in newDict) {
+                    newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
+                }
+                return newDict;
+            });
+            setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
+        } else {
+            alert("Falha ao cancelar a solicitação.");
+        }
+        setIsLoading(false);
+    };
+    
+  
+    const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
+    const applyQuickJump = () => {
+        const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
+        setCurrentDate(newDate);
+        setSelectedDay(newDate);
+    };
+    const dateGrid = useMemo(() => {
+        const grid = [];
+        const startOfMonth = currentDate.startOf('month');
+        let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
+        for (let i = 0; i < 42; i++) {
+            grid.push(currentDay);
+            currentDay = currentDay.add(1, 'day');
+        }
+        return grid;
+    }, [currentDate]);
+    const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
+    const handleDateClick = (day) => setSelectedDay(day);
+
+    const activeButtonStyle = {
+        backgroundColor: '#1B2A41', 
+        color: 'white',
+        padding: '6px 12px',
+        fontSize: '0.875rem',
+        borderRadius: '8px',
+        border: '1px solid white', 
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        cursor: 'pointer'
+    };
+
+    const inactiveButtonStyle = {
+        backgroundColor: '#1B2A41', 
+        color: 'white',
+        padding: '6px 12px',
+        fontSize: '0.875rem',
+        borderRadius: '8px',
+        border: '1px solid #1B2A41', 
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        cursor: 'pointer'
+    };
+
+
+
+    if (isLoading) {
+        return (
+            <div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                <Spinner />
+            </div>
+        );
     }
 
+
     return (
         <div>
-            <h1> Gerencie suas consultas</h1>
+            <h1>Minhas consultas</h1>
+            <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
                 
-            {/*Adicionei esse className para poder ter o fundo branco presente no style, mesmo não sendo para um form */}
-            <div className='form-container'>
-
-              <div className='btns-container'>
-                <button className="btn btn-primary" onClick={() => { navigate("criar") }}>
-                    <i className="bi bi-plus-circle"></i> Adicionar Consulta
-                </button>
-                {!viewFila ?
-                <button onClick={() => setViewFila(true)} className="btn btn-primary">Ver fila de espera</button>
-                :
-                <button onClick={() => setViewFila(false)} className="btn btn-primary">Ver consultas </button>
-                }
-              </div>
-               
-
-                
-                {viewFila ? 
-           <div className="fila-container">
-            <div className="fila-header">
-            <input
-                type="text"
-                placeholder="Pesquisar na fila de espera..."
-                className="busca-fila-espera"
-                //value={searchTerm}
-                //onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            <h2 className="fila-titulo">Fila de Espera</h2>
-            </div>
-            <table className="fila-tabela">
-            <thead>
-                <tr>
-                <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
-                <th>CPF</th> {/* Ajustado o cabeçalho */}
-                <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
-                <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
-                <th>Ações</th>
-                </tr>
-            </thead>
-            <tbody>
-                {filaDeEspera.map((item, index) => (
-                <tr key={index}>
-                    <td> <p>{item?.paciente_nome} </p>  </td>
-                    <td><p>{item?.paciente_cpf} </p></td>
-                    <td><p>{item?.medico_nome} </p></td>
-                    <td>{dayjs(item?.created_at).format('DD/MM/YYYY HH:mm')}</td> 
-                    <td> <div className="d-flex gap-2">                 
-
-                    <button
-                        className="btn btn-sm btn-delete"
-                        onClick={() => {
-                        setSelectedId(item.id)
-                        setShowDeleteModal(true);
-                        }}
-                    >
-                        <i className="bi bi-trash me-1"></i> Excluir
-                    </button>
-                    </div></td>
-                </tr>
-                ))}
-            </tbody>
-            </table>
-        </div>   
-            :
-            <div>
-                <h2 className='fila-titulo'>Suas proximas consultas</h2>
-
-               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} setDictInfo={setDictInfo} 
-               selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
-               coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
-               listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
-               />
-            </div>
-            } 
-             
-                 {showDeleteModal && (
-        <div
-          className="modal fade show"
-          style={{
-            display: "block",
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-          }}
-          tabIndex="-1"
-          onClick={(e) =>
-            e.target.classList.contains("modal") && setShowDeleteModal(false)
-          }
-        >
-          <div className="modal-dialog modal-dialog-centered">
-            <div className="modal-content">
-            
-              <div className="modal-header bg-danger bg-opacity-25">
-                <h5 className="modal-title text-danger">
-                  Confirmação de Cancelamento
-                </h5>
                 <button 
-                  type="button"
+                    style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
-                  className="btn-close"
+                    onClick={() => {
-                  onClick={() => setShowDeleteModal(false)}
+                        setPageConsulta(true);
-                ></button>
+                        setFiladeEspera(false);
-              </div>
+                    }}
+                >
+                    <i className="bi bi-plus-circle"></i> Solicitar Agendamento
+                </button>
                 
-              <div className="modal-body">
+                <button 
-                <p className="mb-0 fs-5">
+                    style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
-                 Qual o motivo do cancelamento?               
+                    onClick={() => {
-                </p>
+                        setFiladeEspera(!FiladeEspera);
-                <div className='campo-de-input'> 
+                        setPageConsulta(false);
+                    }}
+                >
+                    <i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
+                </button>
+            </div>
             
-                  <textarea  className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
+            {!PageNovaConsulta ? (
+                <div className='atendimento-eprocura'>
+                    <section className='calendario-ou-filaespera'>
+                        {!FiladeEspera ? (
+                            
+                            <div className="calendar-wrapper">
+                                <div className="calendar-info-panel">
+                                    <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
+                                    <div className="info-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>
+                                        {(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
+                                            DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
+                                                <div key={app.id} className="appointment-item" data-status={app.status}>
+                                                    <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
+                                                    <div className="item-details">
+                                                        <span>Consulta com Dr(a). {app.medico_nome}</span>
+                                                    </div>
+                                                    <div className='item-actions'>
+                                                        {app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
+                                                            <button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
+                                                                <Trash2 size={16} />
+                                                            </button>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            ))
+                                        ) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
+                                    </div>
+                                </div>
+                                <div className="calendar-main">
+                                    <div className="calendar-legend">
+                                        <div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
+                                    </div>
+                                    <div className="calendar-controls">
+                                        <div className="date-indicator">
+                                            <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
+                                            <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
+                                                <select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
+                                                    {dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
+                                                </select>
+                                                <select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
+                                                    {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
+                                                </select>
+                                                <button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
+                                            </div>
+                                        </div>
+                                        <div className="nav-buttons">
+                                            <button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
+                                            <button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
+                                            <button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
+                                        </div>
+                                    </div>
+                                    <div className="calendar-grid">
+                                        {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
+                                        {dateGrid.map((day, index) => {
+                                            const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
+                                            const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
+                                            return (
+                                                <div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
+                                                    <span>{day.format('D')}</span>
+                                                    {appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="page-content table-paciente-container">
+                                <section className="row">
+                                    <div className="col-12">
+                                        <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="table-responsive">
+                                                    <table className="table table-striped table-hover">
+                                                        <thead>
+                                                            <tr>
+                                                                <th>Médico Solicitado</th>
+                                                                <th>Data da Solicitação</th>
+                                                                <th>Ações</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            {filaEsperaData.length > 0 ? (filaEsperaData.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>
+                                                                    <td>
+                                                                        <button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
+                                                                            <i className="bi bi-trash me-1"></i> Cancelar
+                                                                        </button>
+                                                                    </td>
+                                                                </tr>
+                                                            ))) : (
+                                                                <tr>
+                                                                    <td colSpan="3" className="text-center py-4">
+                                                                        <div className="text-muted">Nenhuma solicitação na fila de espera.</div>
+                                                                    </td>
+                                                                </tr>
+                                                            )}
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </section>
+                            </div>
+                        )}
+                    </section>
                 </div>
-              </div>
+            ) : (
-
+                <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
-              <div className="modal-footer">
+            )}
-              
-                <button
-                  type="button"
-                  className="btn btn-primary"
-                  onClick={() => {setShowDeleteModal(false);
-
-                                   }}
-                >
-                  Cancelar
-                </button>
 
 
-                <button
+            {}
-                  type="button"
+            {isCancelModalOpen && (
-                  className="btn btn-danger"
+                <div className="modal-overlay">
-                  onClick={() => {
+                    <div className="modal-content" style={{ maxWidth: '400px' }}>
-                    
+                        <div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
-                    deleteConsulta(selectedID)
+                            <h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
-                    setShowDeleteModal(false)
+                            <button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
-                  let lista_cores = coresConsultas
+                        </div>
-        
+                        <div className="modal-body" style={{ padding: '20px' }}>
-                  let lista = listaConsultasID
+                            <p>Qual o motivo do cancelamento?</p>
-
+                            <textarea 
-                lista.push(selectedID)
+                                value={cancellationReason}
-                lista_cores.push("cancelled")
+                                onChange={(e) => setCancellationReason(e.target.value)}
-
+                                placeholder="Ex: Precisei viajar, motivo pessoal, etc."
-                setCoresConsultas(lista_cores)
+                                rows="4"
-
+                                style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
-                setListaConsultaID(lista)
+                            ></textarea>
-
+                        </div>
-                console.log("lista", lista)
+                        <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
-                  
+                            <button 
-                  }}  
+                                className="btn btn-secondary" 
-                  
+                                onClick={() => setIsCancelModalOpen(false)}
-                >
+                                style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
-                  <i className="bi bi-trash me-1"></i> Excluir
+                            >
-                </button>
+                                Cancelar
-              </div>
+                            </button>
-            </div>
+                            <button 
-          </div>
+                                className="btn btn-danger" 
-        </div>)}
+                                onClick={executeCancellation}
-
+                                style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
-        {showConfirmModal &&(
+                            >
-        <div
+                                <Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
-          className="modal fade show"
+                            </button>
-          style={{
+                        </div>
-            display: "block",
+                    </div>
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
+                </div>
-          }}
+            )}
-          tabIndex="-1"
+            {}
-          onClick={(e) =>
-            e.target.classList.contains("modal") && setShowDeleteModal(false)
-          }
-        >
-          <div className="modal-dialog modal-dialog-centered">
-            <div className="modal-content">
-            
-              <div className="modal-header bg-success">
-                <h5 className="modal-title">
-                  Confirmação de edição
-                </h5>
-               
-              </div>
-
-              <div className="modal-body">
-                <p className="mb-0 fs-5">
-                  Tem certeza que deseja retirar o cancelamento ? 
-                </p>
-              </div>
-
-              <div className="modal-footer">
-              
-                <button
-                  type="button"
-                  className="btn btn-primary"
-                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
-                >
-                  Cancelar
-                </button>
-
-              
-                <button
-                  type="button"
-                  className="btn btn-success"
-                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
-                         let lista_cores = coresConsultas
-                
-                  let lista = listaConsultasID
-
-                lista.push(selectedID)
-                lista_cores.push("confirmed")
-
-                setCoresConsultas(lista_cores)
-
-                setListaConsultaID(lista)
-                  }}  
-                  
-                >
-                  <i className="bi bi-trash me-1"></i> Confirmar
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>)
-        
-        
-        
-        }
-            </div>
-
         </div>
     )
 }
 
-export default ConsultasPaciente;
+
+export default Agendamento;

src/components/AgendarConsulta/CalendarComponent.jsx

@@ -0,0 +1,165 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
+import Spinner from '../Spinner.jsx'; // Certifique-se de que o caminho está correto
+
+const CalendarComponent = ({
+    currentDate,
+    setCurrentDate,
+    selectedDay,
+    setSelectedDay,
+    DictAgendamentosOrganizados,
+    showSpinner,
+    setSelectedId,
+    setShowDeleteModal,
+    setShowConfirmModal,
+    quickJump,
+    handleQuickJumpChange,
+    applyQuickJump
+}) => {
+    
+    // Gera os 42 dias para o grid do calendário
+    const generateDateGrid = () => {
+        const grid = []; 
+        const startOfMonth = currentDate.startOf('month');
+        // Começa no domingo da semana em que o mês começa (day() retorna 0 para domingo)
+        let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day'); 
+
+        // Gera 6 semanas (6*7 = 42 dias)
+        for (let i = 0; i < 42; i++) { 
+            grid.push(currentDay); 
+            currentDay = currentDay.add(1, 'day'); 
+        }
+        return grid;
+    };
+
+    const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
+    const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
+    
+    const handleDateClick = (day) => {
+        setSelectedDay(day);
+        // Opcional: Adicionar lógica para abrir o agendamento do dia/semana/mês (sua primeira imagem)
+        // Se você quiser que o clique abra a tela de agendamento de slots:
+        // Exemplo: onSelectDate(day);
+    };
+
+    // Função para obter o status de agendamentos para o indicador (ponto azul)
+    const getAppointmentCount = (day) => {
+        return DictAgendamentosOrganizados[day.format('YYYY-MM-DD')]?.length || 0;
+    };
+
+    return (
+        <div className="calendar-wrapper">
+            {/* Painel lateral de informações */}
+            <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="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 => (
+                            <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} />
+                                        </button>
+                                    ) : (
+                                        <button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
+                                            <Trash2 size={16} />
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>
+                    )}
+                </div>
+            </div>
+
+            {/* Calendário Principal */}
+            <div className="calendar-main">
+                {/* Legenda */}
+                <div className="calendar-legend">
+                    <div className="legend-item" data-status="completed">Realizado</div>
+                    <div className="legend-item" data-status="confirmed">Confirmado</div>
+                    <div className="legend-item" data-status="agendado">Agendado</div>
+                    <div className="legend-item" data-status="cancelled">Cancelado</div>
+                </div>
+
+                {/* Controles de navegação e Jump */}
+                <div className="calendar-controls">
+                    <div className="date-indicator">
+                        <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
+                        <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
+                            <select
+                                value={quickJump.month}
+                                onChange={(e) => handleQuickJumpChange('month', e.target.value)}
+                                className="form-select form-select-sm w-auto"
+                            >
+                                {dayjs.months().map((month, index) => (
+                                    <option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
+                                ))}
+                            </select>
+                            <select
+                                value={quickJump.year}
+                                onChange={(e) => handleQuickJumpChange('year', e.target.value)}
+                                className="form-select form-select-sm w-auto"
+                            >
+                                {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
+                                    <option key={year} value={year}>{year}</option>
+                                ))}
+                            </select>
+                            <button 
+                                className="btn btn-sm btn-outline-primary"
+                                onClick={applyQuickJump}
+                                disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
+                            >
+                                Ir
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div className="nav-buttons">
+                        <button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
+                        <button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
+                        <button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
+                    </div>
+                </div>
+                
+                {/* Grid dos dias */}
+                <div className="calendar-grid">
+                    {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
+                    {dateGrid.map((day, index) => {
+                        const count = getAppointmentCount(day);
+                        const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
+                        return (
+                            <div 
+                                key={index} 
+                                className={cellClasses} 
+                                onClick={() => handleDateClick(day)}
+                            >
+                                <span>{day.format('D')}</span>
+                                {count > 0 && <div className="appointments-indicator">{count}</div>}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CalendarComponent;

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,11 +1,12 @@
 import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect, useCallback } from "react";
-import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
+import { GetPatientByCPF, GetAllPatients } from "../utils/Functions-Endpoints/Patient";
 import { GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../utils/AuthProvider";
 import API_KEY from "../utils/apiKeys";
 
+
 const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const { getAuthorizationHeader } = useAuth();
 
@@ -19,6 +20,10 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
   const [horarioTermino, setHorarioTermino] = useState('');
   const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
 
+  const [todosPacientes, setTodosPacientes] = useState([])
+  const [pacientesFiltrados, setPacientesFiltrados] = useState([])
+  const [isDropdownPacienteOpen, setIsDropdownPacienteOpen] = useState(false)
+
   const [status, setStatus] = useState("confirmed")
 
   let authHeader = getAuthorizationHeader()
@@ -70,6 +75,13 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     setTodosProfissionais(Medicos);
   }, [authHeader]);
 
+  const ChamarPacientes = useCallback (async () => {
+	const Pacientes = await GetAllPatients(authHeader);
+	  setTodosPacientes(Pacientes)
+	console.log("pacientes")
+	console.log(Pacientes)
+  }, [authHeader])
+
   useEffect(() => {
    
     console.log("Horario","tessssste"  )
@@ -82,6 +94,11 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     ChamarMedicos();
   }, [ChamarMedicos]);
 
+  useEffect(() => {
+
+    ChamarPacientes()
+  }, [ChamarPacientes])
+
   useEffect(() => {
     if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
 
@@ -126,6 +143,25 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     setIsDropdownOpen(filtered.length > 0);
   };
 
+   const handleSearchPaciente = (e) => {
+     const term = e.target.value;    
+    handleChange(e); 
+    
+    if (term.trim() === '') {
+      setPacientesFiltrados([]);
+      setIsDropdownPacienteOpen(false);
+      return;
+    }
+
+    const filtered = todosPacientes.filter(p => 
+      p.full_name.toLowerCase().includes(term.toLowerCase())
+    );
+    console.log(filtered.length > 0, "filtrados")
+    
+    setPacientesFiltrados(filtered);
+    setIsDropdownPacienteOpen(filtered.length > 0);
+   }
+
   const handleSelectProfissional = (profissional) => {
     setAgendamento(prev => ({
       ...prev,
@@ -136,6 +172,18 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     setIsDropdownOpen(false);
   };
 
+  const handleSelectPaciente = (paciente) => {
+    setAgendamento(prev => ({
+      ...prev,
+      patient_id:paciente.id,
+      paciente_nome: paciente.full_name,
+      paciente_cpf: paciente.cpf    
+    }))
+    setProfissionaisFiltrados([])
+    setIsDropdownPacienteOpen(false)
+
+  }
+
   const formatarHora = (datetimeString) => {
     return datetimeString?.substring(11, 16) || '';
   };
@@ -195,7 +243,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
       <div className="modal-content">
         <div className="modal-header">
           <h5 className="modal-title">Sucesso</h5>
-          <button onClick={handleCloseModal} className="modal-close-btn">×</button>
         </div>
         <div className="modal-body">
           <p className="modal-message">Agendamento salvo com sucesso!</p>
@@ -211,17 +258,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     <h2 className="section-title">Informações do paciente</h2>
 
     <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
-      <div className="campo-de-input">
+      <div className="campo-de-input-container">
-        <label>CPF do paciente</label> 
-        <input
-          type="text"
-          name="paciente_cpf"
-          placeholder="000.000.000-00"
-          onChange={handleChange}
-          value={agendamento.paciente_cpf}
-        />
-      </div>
-
       <div className="campo-de-input">
         <label>Nome *</label>
         <input
@@ -229,8 +266,34 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
           name="paciente_nome"
           placeholder="Insira o nome do paciente"
           required
+          onChange={(e) => handleSearchPaciente(e)}
+          value={agendamento?.paciente_nome || ""}
+          autoComplete="off"
+        />
+      </div>
+       {isDropdownPacienteOpen && pacientesFiltrados.length > 0 && (
+          <div className="dropdown-pacientes">
+            {pacientesFiltrados.map((paciente) => (
+              <div
+                key={paciente.id}
+                className="dropdown-item"
+                onClick={() => handleSelectPaciente(paciente)}
+              >
+                {`${paciente.full_name.split(" ")[0]} ${paciente.full_name.split(" ")[1]}  - ${paciente.cpf}`}
+              </div>
+            ))}
+          </div>
+        )}
+        </div>
+
+      <div className="campo-de-input campo-cpf">
+        <label>CPF do paciente</label> 
+        <input
+          type="text"
+          name="paciente_cpf"
+          placeholder="000.000.000-00"
           onChange={handleChange}
-          value={agendamento.paciente_nome}
+          value={agendamento.paciente_cpf}
         />
       </div>
     </div>
@@ -320,29 +383,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
             </select>
           </div>
 
-          <div className="seletor-wrapper">
-            <label>Número de Sessões *</label>
-            <div className="sessao-contador">
-              <button
-                type="button"
-                onClick={() => setSessoes(prev => Math.max(0, prev - 1))}
-                disabled={sessoes === 0}
-              >
-                <i className="bi bi-chevron-compact-left"></i>
-              </button>
-
-              <p className="sessao-valor">{sessoes}</p>
-
-              <button
-                type="button"
-                onClick={() => setSessoes(prev => Math.min(3, prev + 1))}
-                disabled={sessoes === 3}
-              >
-                <i className="bi bi-chevron-compact-right"></i>
-              </button>
-            </div>
-          </div>
-
           <div className="campo-de-input">
             <label htmlFor="termino">Término *</label>
             <input

src/components/AgendarConsulta/style/formagendamentos.css

@@ -414,96 +414,248 @@ html[data-bs-theme="dark"] svg {
 }
 
 
+/* ========== Modal Overlay ========== */
 .modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  animation: fadeIn 0.3s ease-in;
 }
 
-.modal-content {
+@keyframes fadeIn {
-  background: white;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-  max-width: 400px;
-  width: 90%;
-  text-align: center;
-  animation: modalAppear 0.3s ease-out;
-}
-
-@keyframes modalAppear {
   from {
     opacity: 0;
-    transform: scale(0.9) translateY(-20px);
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
   }
 }
 
-.modal-header h3 {
+/* ========== Modal Content ========== */
-  margin: 0 0 1rem 0;
+.modal-content {
-  color: #28a745;
+  background-color: #fff;
-  font-size: 1.5rem;
+  border-radius: 10px;
-  font-weight: 600;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
 }
 
-.modal-body {
+@keyframes slideIn {
-  margin-bottom: 1.5rem;
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
-.modal-body p {
+/* ========== Modal Header ========== */
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header.success {
+  background-color: #1e3a8a !important;
+}
+
+.modal-header.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-header .modal-title {
+  color: #fff;
   margin: 0;
-  color: #333;
+  font-size: 1.2rem;
-  font-size: 1.1rem;
+  font-weight: bold;
-  line-height: 1.5;
 }
 
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.modal-close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ========== Modal Body ========== */
+.modal-body {
+  padding: 25px 20px;
+  background: #fff;
+}
+
+.modal-body .modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.modal-submessage {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 10px 0 0 0;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* ========== Modal Footer ========== */
 .modal-footer {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+  background: #fff;
 }
 
-.modal-footer .btn-primary {
+.modal-confirm-btn {
-  background: #28a745;
+  background-color: #1e3a8a;
-  padding: 10px 24px;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
   font-size: 1rem;
-  font-weight: 500;
+  font-weight: bold;
+  transition: all 0.2s ease;
 }
 
-.modal-footer .btn-primary:hover {
+.modal-confirm-btn:hover {
-  background: #218838;
+  background-color: #1e40af;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.modal-confirm-btn.success {
+  background-color: #1e3a8a !important;
+}
+
+.modal-confirm-btn.success:hover {
+  background-color: #1e40af !important;
+}
+
+.modal-confirm-btn.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-confirm-btn.error:hover {
+  background-color: #c82333 !important;
 }
 
 
+/* ========== Dark Mode ========== */
 html[data-bs-theme="dark"] .modal-content {
   background: #232323 !important;
-  color: #e0e0e0 !important;
+  border: 1px solid #404053;
-  border: 1px solid #404053 !important;
 }
 
-html[data-bs-theme="dark"] .modal-header h3 {
+html[data-bs-theme="dark"] .modal-header {
-  color: #4ade80 !important;
+  background: #1e3a8a !important;
 }
 
-html[data-bs-theme="dark"] .modal-body p {
+html[data-bs-theme="dark"] .modal-header.success {
+  background-color: #1e3a8a !important;
+}
+
+html[data-bs-theme="dark"] .modal-header.error {
+  background-color: #dc3545 !important;
+}
+
+html[data-bs-theme="dark"] .modal-header .modal-title,
+html[data-bs-theme="dark"] .modal-close-btn {
+  color: white !important;
+}
+
+html[data-bs-theme="dark"] .modal-body {
+  background: #232323 !important;
+}
+
+html[data-bs-theme="dark"] .modal-body .modal-message {
   color: #e0e0e0 !important;
 }
 
-html[data-bs-theme="dark"] .modal-footer .btn-primary {
+html[data-bs-theme="dark"] .modal-submessage {
-  background: #16a34a !important;
+  color: #b0b7c3 !important;
 }
 
-html[data-bs-theme="dark"] .modal-footer .btn-primary:hover {
+html[data-bs-theme="dark"] .modal-footer {
-  background: #15803d !important;
+  background: #232323 !important;
+  border-top: 1px solid #404053;
+}
+
+html[data-bs-theme="dark"] .modal-confirm-btn {
+  background: #2563eb !important;
+}
+
+html[data-bs-theme="dark"] .modal-confirm-btn:hover {
+  background: #1e40af !important;
+}
+
+/* ========== Responsive ========== */
+@media (max-width: 768px) {
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+  }
+  
+  .modal-body {
+    padding: 20px 15px;
+  }
+  
+  .modal-message {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-header {
+    padding: 12px 15px;
+  }
+  
+  .modal-header .modal-title {
+    font-size: 1.1rem;
+  }
+  
+  .modal-body {
+    padding: 15px;
+  }
+  
+  .modal-footer {
+    padding: 12px 15px;
+  }
+  
+  .modal-confirm-btn {
+    padding: 6px 16px;
+    font-size: 0.9rem;
+  }
 }
 
 
@@ -517,3 +669,24 @@ html[data-bs-theme="dark"] .horario-termino-readonly {
   background-color: #2d3748 !important;
   color: #a0aec0 !important;
 }
+
+.campo-cpf{
+  margin-left: 40px;
+}
+
+input[name="paciente_cpf"]{
+  width: 12rem;  
+}
+
+.dropdown-pacientes{
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    max-height: 200px;
+    overflow-y: auto;
+}

src/components/Estilo/Toggle.css

@@ -0,0 +1,339 @@
+/* ========== Variáveis CSS ========== */
+:root {
+    --toggle-bg: #ffffff;
+    --toggle-border: #e5e7eb;
+    --toggle-hover: #f3f4f6;
+    --toggle-active: #dbeafe;
+    --toggle-text: #1f2937;
+    --toggle-text-secondary: #374151;
+    --toggle-icon: #6b7280;
+    --toggle-accent: #2563eb;
+    --toggle-accent-hover: #1d4ed8;
+    --toggle-shadow: rgba(0, 0, 0, 0.05);
+    --toggle-shadow-hover: rgba(0, 0, 0, 0.1);
+}
+
+/* ========== Container Principal ========== */
+.toggle-sidebar-wrapper {
+    background: var(--toggle-bg);
+    border-radius: 12px;
+    border: 1px solid var(--toggle-border);
+    margin-bottom: 16px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-shadow: 0 1px 3px var(--toggle-shadow);
+    transition: box-shadow 0.2s ease;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.toggle-sidebar-wrapper::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+.toggle-sidebar-wrapper:hover {
+    box-shadow: 0 4px 6px var(--toggle-shadow-hover);
+}
+
+.container-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    cursor: pointer;
+    background-color: var(--toggle-bg);
+    transition: background-color 0.2s ease;
+    border-bottom: 1px solid var(--toggle-border);
+}
+
+.container-title:hover {
+    background-color: var(--toggle-hover);
+}
+
+.toggle-title {
+    color: var(--toggle-text);
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0;
+    user-select: none;
+    letter-spacing: -0.01em;
+}
+
+.toggle-arrow {
+    color: var(--toggle-icon);
+    transition: transform 0.2s ease;
+    font-size: 14px;
+}
+
+.container-title:hover .toggle-arrow {
+    color: var(--toggle-accent);
+}
+
+/* ========== Menu Lista ========== */
+.sidebar-menu-list {
+    list-style: none;
+    padding: 8px;
+    margin: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    
+    /* Scroll invisível mas funcional */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.sidebar-menu-list::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+.sidebar-item {
+    list-style: none;
+    margin: 2px 0;
+}
+
+/* ========== Links da Sidebar ========== */
+.sidebar-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: var(--toggle-text-secondary);
+    padding: 11px 14px;
+    border-radius: 8px;
+    font-size: 15px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: none;
+    gap: 12px;
+}
+
+.sidebar-link i {
+    font-size: 19px;
+    color: var(--toggle-icon);
+    transition: none;
+}
+
+.sidebar-link:hover {
+    background-color: var(--toggle-hover);
+    color: var(--toggle-text);
+}
+
+.sidebar-link:hover i {
+    color: var(--toggle-accent);
+}
+
+.sidebar-link.active {
+    background-color: var(--toggle-active);
+    color: var(--toggle-accent);
+    font-weight: 600;
+}
+
+.sidebar-link.active i {
+    color: var(--toggle-accent);
+}
+
+/* ========== Título da Sidebar ========== */
+.sidebar-title {
+    padding: 18px 14px 10px;
+    font-size: 13px;
+    color: var(--toggle-text-secondary);
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+}
+
+/* ========== Itens com Submenu ========== */
+.sidebar-item.has-sub {
+    margin: 4px 0;
+}
+
+.sidebar-item.has-sub .sidebar-link {
+    position: relative;
+}
+
+.sidebar-item.has-sub .sidebar-link::after {
+    content: "\F285";
+    font-family: "bootstrap-icons";
+    margin-left: auto;
+    transition: transform 0.2s ease;
+    font-size: 12px;
+    color: var(--toggle-icon);
+}
+
+.sidebar-item.has-sub.active .sidebar-link::after {
+    transform: rotate(180deg);
+}
+
+.sidebar-item.has-sub .sidebar-link.submenu-active {
+    background-color: var(--toggle-hover);
+    color: var(--toggle-text);
+}
+
+.sidebar-item.has-sub .sidebar-link.submenu-active i {
+    color: var(--toggle-accent);
+}
+
+/* ========== Submenu ========== */
+.submenu {
+    list-style: none;
+    padding: 4px 0 4px 8px;
+    margin: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    
+    /* Scroll invisível */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.submenu::-webkit-scrollbar {
+    display: none;
+}
+
+.sidebar-item.has-sub.active .submenu {
+    max-height: 1000px;
+    overflow: visible;
+}
+
+.submenu-item {
+    margin: 2px 0;
+}
+
+.submenu-item .sidebar-link {
+    padding: 9px 14px 9px 40px;
+    font-size: 14px;
+    position: relative;
+}
+
+.submenu-item .sidebar-link::before {
+    content: '';
+    position: absolute;
+    left: 22px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: var(--toggle-icon);
+}
+
+.submenu-item .sidebar-link:hover::before {
+    background-color: var(--toggle-accent);
+}
+
+.submenu-item .sidebar-link.active::before {
+    background-color: var(--toggle-accent);
+}
+
+/* ========== Ícones e Indicadores ========== */
+.external-icon {
+    font-size: 11px;
+    margin-left: auto;
+    opacity: 0.6;
+    color: var(--toggle-icon);
+}
+
+.active-indicator {
+    display: none;
+}
+
+/* ========== Botão de Logout ========== */
+.logout-item {
+    margin-top: auto;
+    padding-top: 16px;
+    border-top: 1px solid var(--toggle-border);
+    position: sticky;
+    bottom: 0;
+    background: var(--toggle-bg);
+    z-index: 10;
+}
+
+.logout-button {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #dc3545;
+    padding: 11px 14px;
+    border-radius: 8px;
+    font-size: 15px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+    gap: 12px;
+}
+
+.logout-button i {
+    font-size: 19px;
+    color: #dc3545;
+}
+
+.logout-button:hover {
+    background-color: #fee;
+    color: #c82333;
+}
+
+.logout-button:hover i {
+    color: #c82333;
+}
+
+/* ========== Scroll Invisível mas Funcional ========== */
+/* Containers do Mazer template que envolvem o ToggleSidebar */
+#sidebar,
+#sidebar .sidebar-wrapper,
+#sidebar .sidebar-wrapper.active,
+.sidebar-wrapper,
+.sidebar-wrapper.active,
+.sidebar-menu,
+.sidebar-menu ul,
+.sidebar-menu ul.menu,
+ul.menu {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+}
+
+#sidebar::-webkit-scrollbar,
+#sidebar .sidebar-wrapper::-webkit-scrollbar,
+#sidebar .sidebar-wrapper.active::-webkit-scrollbar,
+.sidebar-wrapper::-webkit-scrollbar,
+.sidebar-wrapper.active::-webkit-scrollbar,
+.sidebar-menu::-webkit-scrollbar,
+.sidebar-menu ul::-webkit-scrollbar,
+.sidebar-menu ul.menu::-webkit-scrollbar,
+ul.menu::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    background: transparent !important;
+}
+
+/* ========== Dark Mode Support ========== */
+html[data-bs-theme="dark"] {
+    --toggle-bg: #1f2937;
+    --toggle-border: #374151;
+    --toggle-hover: #374151;
+    --toggle-active: #1e3a8a;
+    --toggle-text: #f9fafb;
+    --toggle-text-secondary: #d1d5db;
+    --toggle-icon: #9ca3af;
+    --toggle-accent: #60a5fa;
+    --toggle-accent-hover: #3b82f6;
+    --toggle-shadow: rgba(0, 0, 0, 0.3);
+    --toggle-shadow-hover: rgba(0, 0, 0, 0.5);
+}

src/components/Sidebar.jsx

@@ -1,7 +1,16 @@
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import TrocardePerfis from "./TrocardePerfis";
 import MobileMenuToggle from "./MobileMenuToggle";
+import ToggleSidebar from "./ToggleSidebar";
+import { useAuth } from "./utils/AuthProvider";
+
+import PacienteItems from "../data/sidebar-items-paciente.json"
+import DoctorItems from "../data/sidebar-items-medico.json"
+import admItems from "../data/sidebar-items-adm.json"
+import SecretariaItems from "../data/sidebar-items-secretaria.json"
+import FinanceiroItems from "../data/sidebar-items-financeiro.json"
+
+import { UserInfos } from "./utils/Functions-Endpoints/General";
 
 function Sidebar({ menuItems }) {
   const [isActive, setIsActive] = useState(true);
@@ -10,6 +19,24 @@ function Sidebar({ menuItems }) {
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const navigate = useNavigate();
  
+  const [roleUser, setRoleUser] = useState([])
+
+  const {getAuthorizationHeader} = useAuth();
+
+  const authHeader = getAuthorizationHeader();
+
+  let pathname = window.location.pathname.split("/")[1] 
+
+
+// useEffect para definir quais toggle da sidebar devem aparecer 
+  useEffect(() => {
+	let teste = localStorage.getItem("roleUser")
+     setRoleUser(teste)
+	   
+  }, [authHeader])
+
+
+
   // Detecta se é mobile/tablet
   useEffect(() => {
     const checkScreenSize = () => {
@@ -18,6 +45,7 @@ function Sidebar({ menuItems }) {
       setIsActive(!mobile);
     };
 
+
     checkScreenSize();
     window.addEventListener("resize", checkScreenSize);
     return () => window.removeEventListener("resize", checkScreenSize);
@@ -91,6 +119,7 @@ function Sidebar({ menuItems }) {
 
   const handleLogoutCancel = () => setShowLogoutModal(false);
 
+
   const renderLink = (item) => {
     if (item.url && item.url.startsWith("/")) {
       return (
@@ -213,55 +242,41 @@ function Sidebar({ menuItems }) {
 
           <div className="sidebar-menu">
             <ul className="menu">
-              {menuItems &&
-                menuItems.map((item, index) => {
-                  if (item.isTitle)
-                    return (
-                      <li key={index} className="sidebar-title">
-                        {item.name}
-                      </li>
-                    );
 
-                  if (item.submenu)
+              {roleUser.includes("admin") &&
-                    return (
+              <ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
-                      <li
+              }
-                        key={index}
+              {roleUser.includes("admin") || roleUser.includes("secretaria") ?
-                        className={`sidebar-item has-sub ${
+              <ToggleSidebar perfil={"secretaria"} items={SecretariaItems}  defaultOpen={pathname.includes("secretaria")} />
-                          openSubmenu === item.key ? "active" : ""
+              :
-                        }`}
+              null
-                      >
+              }
-                        <button
-                          type="button"
-                          className="sidebar-link btn"
-                          onClick={() => handleSubmenuClick(item.key)}
-                        >
-                          <i className={`bi bi-${item.icon}`}></i>
-                          <span>{item.name}</span>
-                        </button>
-                        <ul
-                          className={`submenu ${
-                            openSubmenu === item.key ? "active" : ""
-                          }`}
-                        >
-                          {item.submenu.map((subItem, subIndex) => (
-                            <li key={subIndex} className="submenu-item">
-                              {renderLink(subItem)}
-                            </li>
-                          ))}
-                        </ul>
-                      </li>
-                    );
 
-                  return (
+              {roleUser.includes("admin") || roleUser.includes("medico") ?
-                    <li key={index} className="sidebar-item">
+              <ToggleSidebar perfil={"medico"} items={DoctorItems} defaultOpen={pathname.includes("medico") } />
-                      {renderLink(item)}
+              :null
-                    </li>
+              }
-                  );
-                })}
 
-              {/* Logout */}
+              {roleUser.includes("admin") || roleUser.includes("financeiro") ?
+              <ToggleSidebar perfil={"financeiro"} items={FinanceiroItems} defaultOpen={pathname.includes("financeiro") }  />
+              :null
+              }
 
-              <TrocardePerfis />
+              {roleUser.includes("admin") || roleUser.includes("paciente") ? 
+              <ToggleSidebar perfil={"paciente"} items={PacienteItems}  defaultOpen={pathname.includes("paciente") } />
+              : null
+              }
+
+              {/* Botão de Logout */}
+              <li className="sidebar-item logout-item">
+                <button 
+                  className="sidebar-link logout-button"
+                  onClick={handleLogoutClick}
+                >
+                  <i className="bi bi-box-arrow-right"></i>
+                  <span>Sair</span>
+                </button>
+              </li>
             </ul>
           </div>
 

src/components/ToggleSidebar.jsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import "./Estilo/Toggle.css"
+
+const ToggleSidebar = ({ perfil, items, defaultOpen = false }) => {
+  const [isOpen, setOpen] = useState(defaultOpen)
+  const [openSubmenu, setOpenSubmenu] = useState(null)
+  const [activeLink, setActiveLink] = useState('')
+  const location = useLocation()
+
+  useEffect(() => {
+    const currentPath = location.pathname
+    setActiveLink(currentPath)
+    
+    const findActiveSubmenu = () => {
+      for (let item of items) {
+        if (item.submenu) {
+          const activeSubItem = item.submenu.find(subItem => 
+            subItem.url === currentPath
+          )
+          if (activeSubItem) {
+            setOpenSubmenu(item.key)
+            return
+          }
+        } else if (item.url === currentPath) {
+          setActiveLink(currentPath)
+        }
+      }
+    }
+    
+    findActiveSubmenu()
+  }, [location.pathname, items])
+
+  const OpenClose = () => {
+    setOpen(!isOpen)
+  }
+
+  const handleSubmenuClick = (key) => {
+    setOpenSubmenu(openSubmenu === key ? null : key)
+  }
+
+  const isLinkActive = (url) => {
+    return activeLink === url
+  }
+
+  const renderLink = (item, isSubmenu = false) => {
+    const isActive = isLinkActive(item.url)
+    const linkClass = `sidebar-link ${isActive ? 'active' : ''} ${isSubmenu ? 'submenu-link' : ''}`
+
+    if (item.url && item.url.startsWith("/")) {
+      return (
+        <Link 
+          to={item.url} 
+          className={linkClass}
+          onClick={() => !isSubmenu && setActiveLink(item.url)}
+        >
+          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+          <span>{item.name}</span>
+          {isActive && <div className="active-indicator"></div>}
+        </Link>
+      )
+    }
+    
+    return (
+      <a 
+        href={item.url} 
+        className={linkClass}
+        target="_blank" 
+        rel="noopener noreferrer"
+      >
+        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+        <span>{item.name}</span>
+        <i className="bi bi-box-arrow-up-right external-icon"></i>
+      </a>
+    )
+  }
+
+  return (
+    <div className="toggle-sidebar-wrapper">
+      <div className='container-title' onClick={OpenClose}>
+        <p className='toggle-title'>{perfil}</p>
+        {isOpen
+          ? <i className="bi bi-caret-down-fill toggle-arrow"></i>
+          : <i className="bi bi-caret-right-fill toggle-arrow"></i>
+        }
+      </div>
+
+      {isOpen && (
+        <ul className='sidebar-menu-list'>
+          {items.map((item, index) => {
+            if (item.isTitle) {
+              return (
+                <li key={`title-${index}`} className="sidebar-title">
+                  <span>{item.name}</span>
+                </li>
+              )
+            }
+
+            if (item.submenu) {
+              const isSubmenuActive = openSubmenu === item.key
+              return (
+                <li
+                  key={item.key || index}
+                  className={`sidebar-item has-sub ${isSubmenuActive ? "active" : ""}`}
+                >
+                  <button
+                    type="button"
+                    className={`sidebar-link btn ${isSubmenuActive ? "submenu-active" : ""}`}
+                    onClick={() => handleSubmenuClick(item.key)}
+                  >
+                    <i className={`bi bi-${item.icon}`}></i>
+                    <span>{item.name}</span>
+                  </button>
+
+                  <ul className={`submenu ${isSubmenuActive ? "active" : ""}`}>
+                    {item.submenu.map((subItem, subIndex) => (
+                      <li key={subIndex} className="submenu-item">
+                        {renderLink(subItem, true)}
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              )
+            }
+
+            return (
+              <li key={item.key || index} className="sidebar-item">
+                {renderLink(item)}
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default ToggleSidebar

src/components/doctors/DoctorForm.jsx

@@ -338,7 +338,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         }
       }
 
-      alert("Médico salvo com sucesso!");
     } catch (error) {
       console.error("Erro ao salvar médico ou disponibilidade:", error);
       alert("Erro ao salvar médico ou disponibilidade.");

src/components/patients/PatientForm.jsx

@@ -52,6 +52,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }));
   };
 
+ 
+
   useEffect(() => {
     const peso = parseFloat(formData.weight_kg);
     const altura = parseFloat(formData.height_m);
@@ -63,9 +65,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   }, [formData.weight_kg, formData.height_m, setFormData]);
 
+  const handleCep = (value) => {
+   if(value.length === 8){
+	fetch(`https://viacep.com.br/ws/${value}/json/`)
+	   .then(response => response.json())
+	  .then(result => {setFormData(prev => ({...prev, street:result.logradouro,neighborhood:result.bairro,city:result.localidade,
+		  state:result.estado
+
+	  }))})
+   }
+  }
+
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
-
+	console.log(name, value)
     if (value && emptyFields.includes(name)) {
       setEmptyFields(prev => prev.filter(field => field !== name));
     }
@@ -102,7 +115,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       setFormData(prev => ({ ...prev, [name]: FormatPeso(value) }));
     } else if (name === 'rn_in_insurance' || name === 'vip' || name === 'validadeIndeterminada') {
       setFormData(prev => ({ ...prev, [name]: checked }));	
-    } else {
+    } else if(name === 'cep'){
+    handleCep(value)
+    setFormData(prev => ({...prev, [name]: value}))
+    }else {
       setFormData(prev => ({ ...prev, [name]: value }));
     }
   };
@@ -189,9 +205,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
 
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(formData.email)) {
-      throw new Error('Email inválido. Por favor, verifique o email digitado.');
-    }
 
     await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
   };

src/components/utils/Functions-Endpoints/General.js

@@ -38,4 +38,10 @@ const UserInfos = async (access_token) => {
   }
 };
 
-export { UserInfos };
+const SearchCep = async (cep) => {
+	fetch(`https://brasilapi.com.br/api/cep/v1/${cep}`)
+	.then(response => console.log(response))
+}
+
+
+export { UserInfos,SearchCep };

src/data/sidebar-items-adm.json

@@ -1,8 +1,4 @@
 [
-  {
-    "name": "Menu",
-    "isTitle": true
-  },
   {
     "name": "Lista de Pacientes",
     "icon": "clipboard-heart-fill",
@@ -25,13 +21,6 @@
     "icon": "table",
     "url": "/admin/laudo"
   },  
-  
-  {
-    "name": "Gestão de Usuários",
-    "icon": "person-badge-fill",
-    "url": "/admin/gestao"
-  },
-  
   {
     "name": "Painel Administrativo",
     "icon": "file-bar-graph-fill",

src/data/sidebar-items-financeiro.json

@@ -1,8 +1,4 @@
 [
-  {
-    "name": "Menu-Financeiro",
-    "isTitle": true
-  },
   {
     "name": "Controle Financeiro",
     "icon": "cash-coin",

src/data/sidebar-items-medico.json

@@ -1,14 +1,4 @@
 [
-  {
-    "name": "Menu",
-    "isTitle": true
-  },
-
-  {
-    "name": "Prontuário",
-    "icon": "calendar-plus-fill",
-    "url": "/medico/prontuario"
-  },
 {
   "name": "Seus Agendamentos",
   "icon": "calendar",

src/data/sidebar-items-paciente.json

@@ -1,10 +1,14 @@
 [
-{
+  {
+    "name": "Início",
+    "icon": "house-fill",
+    "url": "/paciente"
+  },
+  {
     "name": "Minhas consulta",
     "icon": "calendar-plus-fill",
     "url": "/paciente/agendamento"
   },
-  
   {
     "name": "Meus laudos",
     "icon": "table",

src/data/sidebar-items-secretaria.json

@@ -1,9 +1,4 @@
 [
-  {
-    "name": "Menu",
-    "isTitle": true
-  },
-
   {
     "name":"Início",
     "url": "/secretaria/",
@@ -25,11 +20,5 @@
     "name": "Agendar consulta",
     "icon": "calendar-plus-fill",
     "url": "/secretaria/agendamento"
-  },
-  
-  {
-    "name": "Laudo do Paciente",
-    "icon": "table",
-    "url": "/secretaria/laudo"
   }
 ]

src/pages/AgendamentoCadastroManager.jsx

@@ -1,82 +1,182 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react';
-import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
-import API_KEY from '../components/utils/apiKeys'
+import API_KEY from '../components/utils/apiKeys';
-import { useAuth } from '../components/utils/AuthProvider'
+import { useAuth } from '../components/utils/AuthProvider';
-import { useEffect,useState } from 'react'
+import dayjs from 'dayjs';
-import dayjs from 'dayjs'
+import { UserInfos } from '../components/utils/Functions-Endpoints/General';
-import { UserInfos } from '../components/utils/Functions-Endpoints/General'
+import { toast } from 'react-toastify'; 
-const AgendamentoCadastroManager = ({setPageConsulta, Dict}) => {
+const AgendamentoCadastroManager = ({ setPageConsulta, agendamentoInicial }) => {
 
-    const {getAuthorizationHeader} = useAuth()
+    const { getAuthorizationHeader } = useAuth();
-    const [agendamento, setAgendamento] = useState({status:'confirmed'})
-    const [idUsuario, setIDusuario] = useState('0')
   
-  let authHeader = getAuthorizationHeader() 
+    const [agendamento, setAgendamento] = useState({ status: 'agendado' });
+    const [idUsuario, setIDusuario] = useState('0');
+    const [isEditMode, setIsEditMode] = useState(false); 
+
+    let authHeader = getAuthorizationHeader();
+
+    useEffect(() => {
         
       
-  useEffect(() => {
+        if (agendamentoInicial && agendamentoInicial.id) {
            
-    if(!Dict){setAgendamento({})}
+            const scheduled_at = dayjs(agendamentoInicial.scheduled_at);
-    else{
-      console.log(Dict)
-      setAgendamento(Dict)
-    }
 
-    const ColherInfoUsuario =async () => {
+            setAgendamento({
-      const result = await UserInfos(authHeader)
+                ...agendamentoInicial,
               
-      setIDusuario(result?.profile?.id)
+                dataAtendimento: scheduled_at.format('YYYY-MM-DD'), 
-    
+                horarioInicio: scheduled_at.format('HH:mm'),         
-    }
-    ColherInfoUsuario()
                 
               
-  }, [])
+                tipo_consulta: agendamentoInicial.appointment_type || 'Presencial',
+                convenio: agendamentoInicial.insurance_provider || 'Público',
                 
               
+                paciente_nome: agendamentoInicial.paciente_nome || '',
+                paciente_cpf: agendamentoInicial.paciente_cpf || '',
+                medico_nome: agendamentoInicial.medico_nome || '',
                 
-      const handleSave = (Dict) => {
+                
-        let DataAtual = dayjs()
+                patient_id: agendamentoInicial.patient_id, 
+                doctor_id: agendamentoInicial.doctor_id,
+                status: agendamentoInicial.status,
+            });
+            setIsEditMode(true);
+            
+        } else {
+          
+            setAgendamento({
+                status: 'agendado',
+                patient_id: null,
+                doctor_id: null,
+                dataAtendimento: dayjs().format('YYYY-MM-DD'),
+                horarioInicio: '',
+                tipo_consulta: 'Presencial',
+                convenio: 'Público',
+                paciente_nome: '',
+                paciente_cpf: '',
+                medico_nome: ''
+            });
+            setIsEditMode(false);
+        }
+
+        
+        const ColherInfoUsuario = async () => {
+            const result = await UserInfos(authHeader);
+            setIDusuario(result?.profile?.id);
+        };
+        ColherInfoUsuario();
+        
+       
+    }, [agendamentoInicial, authHeader]);
+    const handleSave = async (Dict) => {
         var myHeaders = new Headers();
         myHeaders.append("apikey", API_KEY);
         myHeaders.append("Authorization", authHeader);
         myHeaders.append("Content-Type", "application/json");
+        myHeaders.append("Prefer", "return=representation");
    
-    var raw = JSON.stringify({
+        var raw = JSON.stringify({
+            "patient_id": Dict.patient_id,
+            "doctor_id": Dict.doctor_id,
+            "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
+            "duration_minutes": Dict.duration_minutes || 30, 
+            "appointment_type": Dict.tipo_consulta,
+            "insurance_provider": Dict.convenio,
+            "status": Dict.status || 'agendado', 
+            "created_by": idUsuario,
+            "created_at": dayjs().toISOString(),
             
-       "patient_id": Dict.patient_id,
+        });
-       "doctor_id": Dict.doctor_id,
-       "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
-       "duration_minutes": 30,
-       "appointment_type": Dict.tipo_consulta,
         
-       "patient_notes": "",
+        var requestOptions = {
-       "insurance_provider": Dict.convenio,
+            method: 'POST',
-       "status": Dict.status,
+            headers: myHeaders,
-       "created_by": idUsuario
+            body: raw,
-    });
+            redirect: 'follow'
+        };
         
-    var requestOptions = {
+        try {
-       method: 'POST',
+            const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
-       headers: myHeaders,
+            if (response.ok) {
-       body: raw,
+                toast.success("Agendamento criado com sucesso! ✅");
-       redirect: 'follow'
+                setPageConsulta(false); 
-    };
+            } else {
+                const errorText = await response.text();
+                console.error('Erro ao cadastrar agendamento:', errorText);
+                toast.error(`Falha ao criar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
+            }
+        } catch (error) {
+            console.error('Erro de rede:', error);
+            toast.error("Erro de rede ao salvar. ❌");
+        }
+    }
+    const handleUpdate = async (Dict) => {
+        const appointmentId = agendamentoInicial.id;
         
-    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
+        var myHeaders = new Headers();
-       .then(response => response.text())
+        myHeaders.append("apikey", API_KEY);
-       .then(result => console.log(result))
+        myHeaders.append("Authorization", authHeader);
-       .catch(error => console.log('error', error));
+        myHeaders.append("Content-Type", "application/json");
+        myHeaders.append("Prefer", "return=representation");
     
-      }
+        var raw = JSON.stringify({
+            "patient_id": Dict.patient_id,
+            "doctor_id": Dict.doctor_id,
+            "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
+            "duration_minutes": Dict.duration_minutes || 30,
+            "appointment_type": Dict.tipo_consulta,
+            "insurance_provider": Dict.convenio,
+            "status": Dict.status,
+            "updated_at": dayjs().toISOString(),
+            "updated_by": idUsuario, 
+        });
         
-  return (
+        var requestOptions = {
-    <div>
+            method: 'PATCH',
+            headers: myHeaders,
+            body: raw,
+            redirect: 'follow'
+        };
         
-    <FormNovaConsulta onSave={handleSave} agendamento={agendamento} setAgendamento={setAgendamento} onCancel={() => setPageConsulta(false)}/>
+        try {
+            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${appointmentId}`, requestOptions);
+            if (response.ok) {
+                toast.success("Agendamento atualizado com sucesso! 📝");
+                setPageConsulta(false); 
+            } else {
+                const errorText = await response.text();
+                console.error('Erro ao atualizar agendamento:', errorText);
+                toast.error(`Falha ao atualizar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
+            }
+        } catch (error) {
+            console.error('Erro de rede:', error);
+            toast.error("Erro de rede ao atualizar. ❌");
+        }
+    }
+    const handleFormSubmit = (Dict) => {
+        if (isEditMode) {
            
-    </div>
+            handleUpdate(Dict);
-  )
+        } else {
-}
          
-export default AgendamentoCadastroManager
+            handleSave(Dict);
+        }
+    }
+
+
+    return (
+        <div>
+            {}
+            <FormNovaConsulta 
+                onSave={handleFormSubmit} 
+                agendamento={agendamento} 
+                setAgendamento={setAgendamento} 
+                onCancel={() => setPageConsulta(false)}
+            />
+        </div>
+    );
+};
+
+export default AgendamentoCadastroManager;

src/pages/Details.jsx

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 import { useAuth } from "../components/utils/AuthProvider";
 
 
-const Details = () => {
+const Details = (DictInfo) => {
   const parametros = useParams();
   const {getAuthorizationHeader, isAuthenticated} = useAuth();
   const [paciente, setPaciente] = useState({});
@@ -22,19 +22,29 @@ const Details = () => {
     navigate(`/${prefixo}/pacientes`);
   }
 
+
+const navigateEdit = () => {
+   const prefixo = location.pathname.split("/")[1]; 
+    navigate(`/${prefixo}/medicos/edit`);
+  }
+
+
+
+
+
   useEffect(() => {
-    if (!patientID) return;
+    if (!DictInfo) return;
     console.log(patientID, 'teu id')
     const authHeader = getAuthorizationHeader()
 
-    GetPatientByID(patientID, authHeader)
+    GetPatientByID(DictInfo.DictInfo.id, authHeader)
       .then((data) => {
         console.log(data, "paciente vindo da API");
         setPaciente(data[0]); // supabase retorna array
       })
       .catch((err) => console.error("Erro ao buscar paciente:", err));
 
-   }, [patientID]);
+   }, [DictInfo]);
 
   
   const handleDelete = async (anexoId) => {
@@ -82,11 +92,9 @@ const Details = () => {
           </div>
         </div>
 
-         <Link to={`edit`}>
+            <button className="btn btn-light" onClick={() => navigateEdit()} >
-            <button className="btn btn-light"  >
               <i className="bi bi-pencil-square"></i> Editar
             </button>
-          </Link>
       
       </div>
     </div>

src/pages/DoctorDetails.jsx

@@ -4,37 +4,24 @@ import { useParams,Link, useNavigate, useLocation } from "react-router-dom";
 import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../components/utils/AuthProvider";
   
-const Details = () => {
+const DoctorDetails = ({DictInfo}) => {
   const {getAuthorizationHeader} = useAuth(); 
-  const [doctor, setDoctor] = useState({});
   const Parametros = useParams()
   const navigate = useNavigate();
   const location = useLocation();
 
-  const Voltar = () => {
+const navigateEdit = () => {
+   const prefixo = location.pathname.split("/")[1]; 
+    navigate(`/${prefixo}/medicos/edit`);
+  }
+
+ 
+
+const Voltar = () => {
    const prefixo = location.pathname.split("/")[1]; 
     navigate(`/${prefixo}/medicos`);
   }
 
-  const doctorID = Parametros.id
-  useEffect(() => {
-    if (!doctorID) return;
-
-    const authHeader = getAuthorizationHeader()
-
-    GetDoctorByID(doctorID, authHeader)
-      .then((data) => {
-        console.log(data, "médico vindo da API");
-        setDoctor(data[0])
-        ; // supabase retorna array
-      })
-      .catch((err) => console.error("Erro ao buscar paciente:", err));
-
-
-  }, [doctorID]);
-
-  //if (!doctor) return <p style={{ textAlign: "center" }}>Carregando...</p>;
-
   return (
     <>
     <div className="card p-3 shadow-sm">
@@ -50,15 +37,13 @@ const Details = () => {
             <img src={avatarPlaceholder} alt="" />
           </div>
           <div className="media-body ms-3 font-extrabold">
-            <span>{doctor.nome || "Nome Completo"}</span>
+            <span>{DictInfo.full_name || "Nome Completo"}</span>
-            <p>{doctor.cpf || "CPF"}</p>
+            <p>{DictInfo.cpf || "CPF"}</p>
           </div>
         </div>
-        <Link to={`edit`}>
+          <button className="btn btn-light" onClick={() => {navigateEdit()}} >
-          <button className="btn btn-light" onClick={() => {console.log(doctor.id)}} >
             <i className="bi bi-pencil-square"></i> Editar
           </button>
-        </Link>
       </div>
     </div>
       
@@ -69,29 +54,29 @@ const Details = () => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome:</label>
-          <p>{doctor.full_name || "-"}</p>
+          <p>{DictInfo.full_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Data de nascimento:</label>
-          <p>{doctor.birth_date || "-"}</p>
+          <p>{DictInfo.birth_date || "-"}</p>
         </div>
         
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CPF:</label>
-          <p>{doctor.cpf || "-"}</p>
+          <p>{DictInfo.cpf || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CRM:</label>
-          <p>{doctor.crm || "-"}</p>
+          <p>{DictInfo.crm || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Estado do CRM:</label>
-          <p>{doctor.crm_uf || "-"}</p>
+          <p>{DictInfo.crm_uf || "-"}</p>
         </div>
         
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Especialização:</label>
-          <p>{doctor.specialty || "-"}</p>
+          <p>{DictInfo.specialty || "-"}</p>
         </div>
       </div>
       </div>
@@ -103,31 +88,31 @@ const Details = () => {
       <div className="row">
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">CEP:</label>
-          <p>{doctor.cep || "-"}</p>
+          <p>{DictInfo.cep || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Rua:</label>
-          <p>{doctor.street || "-"}</p>
+          <p>{DictInfo.street || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Bairro:</label>
-          <p>{doctor.neighborhood || "-"}</p>
+          <p>{DictInfo.neighborhood || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Cidade:</label>
-          <p>{doctor.city || "-"}</p>
+          <p>{DictInfo.city || "-"}</p>
         </div>
         <div className="col-md-2 mb-3">
           <label className="font-extrabold">Estado:</label>
-          <p>{doctor.state || "-"}</p>
+          <p>{DictInfo.state || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Número:</label>
-          <p>{doctor.number || "-"}</p>
+          <p>{DictInfo.number || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Complemento:</label>
-          <p>{doctor.complement || "-"}</p>
+          <p>{DictInfo.complement || "-"}</p>
         </div>
       </div>
       </div>
@@ -139,15 +124,15 @@ const Details = () => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Email:</label>
-          <p>{doctor.email || "-"}</p>
+          <p>{DictInfo.email || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone:</label>
-          <p>{doctor.phone_mobile || "-"}</p>
+          <p>{DictInfo.phone_mobile || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone 2:</label>
-          <p>{doctor.phone2 || "-"}</p>
+          <p>{DictInfo.phone2 || "-"}</p>
         </div>
         
       </div>
@@ -156,4 +141,4 @@ const Details = () => {
   );
 };
 
-export default Details;
+export default DoctorDetails;

src/pages/DoctorEditPage.jsx

@@ -8,49 +8,23 @@ import API_KEY from "../components/utils/apiKeys";
 const ENDPOINT_AVAILABILITY =
   "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
 
-const DoctorEditPage = () => {
+const DoctorEditPage = ({DictInfo}) => {
   const { getAuthorizationHeader } = useAuth();
   const [DoctorToPUT, setDoctorPUT] = useState({});
 
   const Parametros = useParams();
   const [searchParams] = useSearchParams();
-  const DoctorID = Parametros.id;
+ 
+  const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
   const availabilityId = searchParams.get("availabilityId");
 
   const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
   const [mode, setMode] = useState("doctor");
+  console.log("teste", DictInfo)
 
   useEffect(() => {    
-    const authHeader = getAuthorizationHeader();
+   setDoctorPUT(DictInfo)
-
+  }, [DictInfo]);
-    if (availabilityId) {
-      setMode("availability");
-
-      fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}&select=*`, {
-        method: "GET",
-        headers: {
-          apikey: API_KEY,
-          Authorization: authHeader,
-        },
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          if (data && data.length > 0) {
-            setAvailabilityToPATCH(data[0]);
-            console.log("Disponibilidade vinda da API:", data[0]);
-          }
-        })
-        .catch((err) => console.error("Erro ao buscar disponibilidade:", err));
-    } else {
-      setMode("doctor");
-      GetDoctorByID(DoctorID, authHeader)
-        .then((data) => {
-          console.log(data, "médico vindo da API");
-          setDoctorPUT(data[0]);
-        })
-        .catch((err) => console.error("Erro ao buscar paciente:", err));
-    }
-  }, [DoctorID, availabilityId, getAuthorizationHeader]);
 
   const HandlePutDoctor = async () => {
     const authHeader = getAuthorizationHeader();
@@ -71,18 +45,8 @@ const DoctorEditPage = () => {
       redirect: "follow",
     };
 
-    try {
+   fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
-      const response = await fetch(
+   	.then(response => console.log(response))
-        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,
-        requestOptions
-      );
-      console.log("Resposta PUT Doutor:", response);
-      alert("Dados do médico atualizados com sucesso!");
-    } catch (error) {
-      console.error("Erro ao atualizar médico:", error);
-      alert("Erro ao atualizar dados do médico.");
-      throw error;
-    }
   };
 
   // 2. Função para Atualizar DISPONIBILIDADE (PATCH)
@@ -123,12 +87,6 @@ const DoctorEditPage = () => {
 
   return (
     <div>
-      <h1 className="text-2xl font-bold mb-4">
-        {mode === "availability"
-          ? `Editar Horário Disponível (ID: ${availabilityId.substring(0, 8)})`
-          : `Editar Médico (ID: ${DoctorID})`}
-      </h1>
-
       <DoctorForm
         onSave={
           mode === "availability" ? HandlePatchAvailability : HandlePutDoctor

src/pages/DoctorTable.jsx

@@ -4,7 +4,7 @@ import { useAuth } from "../components/utils/AuthProvider";
 import { Link } from "react-router-dom";
 import "./style/TableDoctor.css";
 
-function TableDoctor() {
+function TableDoctor({setDictInfo}) {
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
   const [medicos, setMedicos] = useState([]);
@@ -27,6 +27,10 @@ function TableDoctor() {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDoctorId, setSelectedDoctorId] = useState(null);
 
+  // Ordenação rápida
+  const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
+  const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
+
   const limparFiltros = () => {
     setSearch("");
     setFiltroEspecialidade("Todos");
@@ -143,11 +147,25 @@ function TableDoctor() {
     return resultado;
   }) : [];
 
+  // Aplica ordenação rápida
+  const applySorting = (arr) => {
+    if (!Array.isArray(arr) || !sortKey) return arr;
+    const copy = [...arr];
+    if (sortKey === 'nome') {
+      copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
+    } else if (sortKey === 'idade') {
+      copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
+    }
+    if (sortDir === 'desc') copy.reverse();
+    return copy;
+  };
+
+  const medicosOrdenados = applySorting(medicosFiltrados);
 
   const totalPaginas = Math.ceil(medicosFiltrados.length / itensPorPagina);
   const indiceInicial = (paginaAtual - 1) * itensPorPagina;
   const indiceFinal = indiceInicial + itensPorPagina;
-  const medicosPaginados = medicosFiltrados.slice(indiceInicial, indiceFinal);
+  const medicosPaginados = medicosOrdenados.slice(indiceInicial, indiceFinal);
 
  
   const irParaPagina = (pagina) => {
@@ -185,7 +203,7 @@ function TableDoctor() {
 
   useEffect(() => {
     setPaginaAtual(1);
-  }, [search, filtroEspecialidade, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal]);
+  }, [search, filtroEspecialidade, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
 
   return (
     <>
@@ -258,6 +276,34 @@ function TableDoctor() {
                         <i className="bi bi-calendar me-1"></i> Aniversariantes
                       </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>
+                      {(() => {
+                        const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
+                        return (
+                          <select
+                            className="form-select compact-select sort-select w-auto"
+                            value={sortValue}
+                            onChange={(e) => {
+                              const v = e.target.value;
+                              if (!v) { setSortKey(null); setSortDir('asc'); return; }
+                              const [k, d] = v.split('-');
+                              setSortKey(k);
+                              setSortDir(d);
+                            }}
+                          >
+                            <option value="">Sem ordenação</option>
+                            <option value="nome-asc">Nome (A-Z)</option>
+                            <option value="nome-desc">Nome (Z-A)</option>
+                            <option value="idade-asc">Idade (crescente)</option>
+                            <option value="idade-desc">Idade (decrescente)</option>
+                          </select>
+                        );
+                      })()}
+                    </div>
                   </div>
 
                   <div className="d-flex justify-content-between align-items-center mt-3">
@@ -357,24 +403,6 @@ function TableDoctor() {
                   </div>
                 </div>
 
-                {(search || filtroEspecialidade !== "Todos" || filtroAniversariante ||
-                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
-                    <div className="alert alert-info mb-3 filters-active">
-                      <strong>Filtros ativos:</strong>
-                      <div className="mt-1">
-                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
-                        {filtroEspecialidade !== "Todos" && <span className="badge bg-primary me-2">Especialidade: {filtroEspecialidade}</span>}
-                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
-                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
-                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
-                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
-                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
-                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
-                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
-                      </div>
-                    </div>
-                  )}
-
                 <div className="table-responsive">
                   <table className="table table-striped table-hover table-doctor-table">
                     <thead>
@@ -409,14 +437,14 @@ function TableDoctor() {
                             <td>{medico.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
-                                <Link to={`${medico.id}`}>
+                                <Link to={`details`}>
-                                  <button className="btn btn-sm btn-view">
+                                  <button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
                                     <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
-                                <Link to={`${medico.id}/edit`}>
+                                <Link to={`edit`}>
-                                  <button className="btn btn-sm btn-edit">
+                                  <button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>
                                 </Link>

src/pages/EditPage.jsx

@@ -1,34 +1,20 @@
 import React from 'react'
-
 import PatientForm from '../components/patients/PatientForm'
-
 import {useEffect, useState} from 'react'
 import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
 import API_KEY from '../components/utils/apiKeys'
 import {useNavigate, useParams } from 'react-router-dom'
 import { useAuth } from '../components/utils/AuthProvider'
-const EditPage = () => {
+
+const EditPage = ({DictInfo}) => {
   const navigate = useNavigate()
-  const Parametros = useParams()
   const [PatientToPUT, setPatientPUT] = useState({})
 
    const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
-const PatientID = Parametros.id
-
 useEffect(() => {
-   const authHeader = getAuthorizationHeader()
+	setPatientPUT(DictInfo)
-
+}, [DictInfo])
-   GetPatientByID(PatientID, authHeader)
-  .then((data) => {
-        console.log(data[0], "paciente vindo da API");
-        setPatientPUT(data[0]); // supabase retorna array
-      })
-      .catch((err) => console.error("Erro ao buscar paciente:", err));
-
-
-    
-}, [PatientID])
 
 const HandlePutPatient = async () => { 
   const authHeader = getAuthorizationHeader()
@@ -39,9 +25,9 @@ const HandlePutPatient = async () => {
   myHeaders.append("Authorization", authHeader);
   myHeaders.append("Content-Type", "application/json");
 
-  var raw = JSON.stringify(PatientToPUT);
+  var raw = JSON.stringify({...PatientToPUT, bmi:Number(PatientToPUT) || null});
 
-  console.log("Enviando paciente para atualização:", PatientToPUT);
+  console.log("Enviando  atualização:", PatientToPUT);
 
   var requestOptions = {
     method: 'PATCH',
@@ -50,25 +36,10 @@ const HandlePutPatient = async () => {
     redirect: 'follow'
   };
 
-  try {
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions) 
-    const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions); 
+      .then(response => console.log(response))   
-    console.log(response)   
+      .then(result => console.log(result))
-  
+      .catch(console.log("erro"))
-   
-    if(response.ok === false){
-      console.error("Erro ao atualizar paciente:");
-    }
-    else{
-      console.log("ATUALIZADO COM SUCESSO");
-      navigate('/secretaria/pacientes')
-    }
-
-    return response;
-  } catch (error) {
-    console.error("Erro ao atualizar paciente:", error);
-    throw error;
-  }
-
    
 };
 

src/pages/Inicio.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
+import { useAuth } from '../components/utils/AuthProvider';
+import API_KEY from '../components/utils/apiKeys';
 import './style/Inicio.css';
 
 import { Link } from 'react-router-dom';
@@ -8,19 +10,142 @@ import { Link } from 'react-router-dom';
 function Inicio() {
 
   const navigate = useNavigate();
+  const { getAuthorizationHeader, isAuthenticated } = useAuth();
   const [pacientes, setPacientes] = useState([]);
+  const [medicos, setMedicos] = useState([]);
   const [agendamentos, setAgendamentos] = useState([]);
+  const [agendamentosComPacientes, setAgendamentosComPacientes] = useState([]);
+  const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    const fetchPacientes = async () => {
+      try {
+        const authHeader = getAuthorizationHeader();
+        
+        const myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+
+        const requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow'
+        };
+
+        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setPacientes(data);
+          console.log('Pacientes carregados:', data.length);
+        } else {
+          console.error(' Erro ao buscar pacientes:', response.status);
+        }
+      } catch (error) {
+        console.error(' Erro ao buscar pacientes:', error);
+      }
+    };
+
+    const fetchMedicos = async () => {
+      try {
+        const authHeader = getAuthorizationHeader();
+        
+        const myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+
+        const requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow'
+        };
+
+        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setMedicos(data);
+          console.log(' Médicos carregados:', data.length);
+        } else {
+          console.error('Erro ao buscar médicos:', response.status);
+        }
+      } catch (error) {
+        console.error(' Erro ao buscar médicos:', error);
+      }
+    };
+
+    const fetchAgendamentos = async () => {
+      try {
+        const authHeader = getAuthorizationHeader();
+        
+        const myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+
+        const requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow'
+        };
+
+        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setAgendamentos(data);
+          console.log(' Agendamentos carregados:', data.length);
+        } else {
+          console.error(' Erro ao buscar agendamentos:', response.status);
+        }
+      } catch (error) {
+        console.error(' Erro ao buscar agendamentos:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isAuthenticated) {
+      fetchPacientes();
+      fetchMedicos();
+      fetchAgendamentos();
+    }
+  }, [isAuthenticated, getAuthorizationHeader]);
+
+
+  useEffect(() => {
+    if (agendamentos.length > 0 && pacientes.length > 0 && medicos.length > 0) {
+      const agendamentosComNomes = agendamentos.map(agendamento => {
+        const paciente = pacientes.find(p => p.id === agendamento.patient_id);
+        const medico = medicos.find(m => m.id === agendamento.doctor_id);
+        return {
+          ...agendamento,
+          nomePaciente: paciente?.full_name || 'Paciente não encontrado',
+          nomeMedico: medico?.full_name || 'Médico não encontrado',
+          especialidadeMedico: medico?.specialty || ''
+        };
+      });
+      setAgendamentosComPacientes(agendamentosComNomes);
+    }
+  }, [agendamentos, pacientes, medicos]);
 
   const totalPacientes = pacientes.length;
-  const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length;
+  const novosEsseMes = pacientes.filter(p => p.created_at && new Date(p.created_at).getMonth() === new Date().getMonth()).length;
 
   const hoje = new Date();
-  const agendamentosDoDia = agendamentos.filter(
+  hoje.setHours(0, 0, 0, 0);
-    a => a.data && new Date(a.data).getDate() === hoje.getDate()
+  
-  );
+  const agendamentosDoDia = agendamentosComPacientes.filter(a => {
+    if (!a.scheduled_at) return false;
+    const dataAgendamento = new Date(a.scheduled_at);
+    dataAgendamento.setHours(0, 0, 0, 0);
+    return dataAgendamento.getTime() === hoje.getTime();
+  });
+  
   const agendamentosHoje = agendamentosDoDia.length;
   
+
+  const pendencias = agendamentos.filter(a => a.status === 'pending' || a.status === 'scheduled').length;
+
   return (
     <div className="dashboard-container">
       <div className="dashboard-header">
@@ -57,7 +182,7 @@ function Inicio() {
         <div className="stat-card">
           <div className="stat-info">
             <span className="stat-label">PENDÊNCIAS</span>
-            <span className="stat-value">0</span>
+            <span className="stat-value">{loading ? '...' : pendencias}</span>
           </div>
           <div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
         </div>
@@ -92,14 +217,54 @@ function Inicio() {
 
       <div className="appointments-section">
         <h2>Próximos Agendamentos</h2>
-        {agendamentosHoje > 0 ? (
+        {loading ? (
-          <div>
+          <div className="no-appointments-content">
-            {agendamentosDoDia.map(agendamento => (
+            <p>Carregando agendamentos...</p>
+          </div>
+        ) : agendamentosHoje > 0 ? (
+          <div className="agendamentos-list">
+            {agendamentosDoDia.slice(0, 5).map(agendamento => (
               <div key={agendamento.id} className="agendamento-item">
-                <p>{agendamento.nomePaciente}</p>
+                <div className="agendamento-info">
-                <p>{new Date(agendamento.data).toLocaleTimeString()}</p>
+                  <div className="agendamento-time-date">
+                    <p className="agendamento-hora">
+                      {new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', { 
+                        hour: '2-digit', 
+                        minute: '2-digit' 
+                      })}
+                    </p>
+                    <p className="agendamento-data">
+                      {new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: 'numeric'
+                      })}
+                    </p>
+                  </div>
+                  <div className="agendamento-detalhes">
+                    <p className="agendamento-paciente">
+                      <strong>Paciente:</strong> {agendamento.nomePaciente}
+                    </p>
+                    <p className="agendamento-medico">
+                      <strong>Dr(a):</strong> {agendamento.nomeMedico}
+                      {agendamento.especialidadeMedico && ` - ${agendamento.especialidadeMedico}`}
+                    </p>
+                  </div>
+                  <span className={`agendamento-status status-${agendamento.status}`}>
+                    {agendamento.status === 'scheduled' ? 'Agendado' : 
+                     agendamento.status === 'completed' ? 'Concluído' : 
+                     agendamento.status === 'pending' ? 'Pendente' : 
+                     agendamento.status === 'cancelled' ? 'Cancelado' : 
+                     agendamento.status === 'requested' ? '' : agendamento.status}
+                  </span>
+                </div>
               </div>
             ))}
+            {agendamentosHoje > 5 && (
+              <button className="view-all-button" onClick={() => navigate('/secretaria/agendamento')}>
+                Ver todos os {agendamentosHoje} agendamentos
+              </button>
+            )}
           </div>
         ) : (
           <div className="no-appointments-content">

src/pages/LaudoManager.jsx

@@ -1,337 +1,514 @@
 // src/pages/LaudoManager.jsx
-import React, { useState, useEffect } from "react";
+import API_KEY from '../components/utils/apiKeys';
-import "./LaudoStyle.css"; // Importa o CSS externo
+import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../components/utils/AuthProvider';
+import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient';
+import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor';
+import { useNavigate } from 'react-router-dom';
+import html2pdf from 'html2pdf.js';
+import TiptapViewer from '../PagesMedico/TiptapViewer'
+import '../PagesMedico/styleMedico/DoctorRelatorioManager.css';
 
-/* ===== Mock data (simula APIDOG) ===== */
+const LaudoManager = () => {
-function mockFetchLaudos() {
+  const navigate = useNavigate();
-  return [
+  const { getAuthorizationHeader } = useAuth();
-    {
+  const authHeader = getAuthorizationHeader();
-      id: "LAU-300551296",
-      pedido: 300551296,
-      data: "29/07/2025",
-      paciente: { nome: "Sarah Mariana Oliveira", cpf: "616.869.070-**", nascimento: "1990-03-25", convenio: "Unimed" },
-      solicitante: "Sandro Rangel Santos",
-      exame: "US - Abdome Total",
-      conteudo: "RELATÓRIO MÉDICO\n\nAchados: Imagens compatíveis com ...\nConclusão: Órgãos sem alterações significativas.",
-      status: "rascunho"
-    },
-    {
-      id: "LAU-300659170",
-      pedido: 300659170,
-      data: "29/07/2025",
-      paciente: { nome: "Laissa Helena Marquetti", cpf: "950.684.57-**", nascimento: "1986-09-12", convenio: "Bradesco" },
-      solicitante: "Sandro Rangel Santos",
-      exame: "US - Mamária Bilateral",
-      conteudo: "RELATÓRIO MÉDICO\n\nAchados: text...",
-      status: "liberado"
-    },
-    {
-      id: "LAU-300658301",
-      pedido: 300658301,
-      data: "28/07/2025",
-      paciente: { nome: "Vera Lúcia Oliveira Santos", cpf: "928.005.**", nascimento: "1979-02-02", convenio: "Particular" },
-      solicitante: "Dr. Fulano",
-      exame: "US - Transvaginal",
-      conteudo: "RELATÓRIO MÉDICO\n\nAchados: ...",
-      status: "entregue"
-    }
-  ];
-}
 
-function mockDeleteLaudo(id) {
+  const [relatoriosOriginais, setRelatoriosOriginais] = useState([]);
-  return new Promise((res) => setTimeout(() => res({ ok: true }), 500));
+  const [relatoriosFiltrados, setRelatoriosFiltrados] = useState([]);
-}
+  const [relatoriosFinais, setRelatoriosFinais] = useState([]);
+  const [pacientesComRelatorios, setPacientesComRelatorios] = useState([]);
+  const [medicosComRelatorios, setMedicosComRelatorios] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [relatorioModal, setRelatorioModal] = useState(null);
+  const [termoPesquisa, setTermoPesquisa] = useState('');
+  const [filtroExame, setFiltroExame] = useState('');
+  const [modalIndex, setModalIndex] = useState(0);
 
-/* ===== Componente ===== */
+  const [showProtocolModal, setShowProtocolModal] = useState(false);
-export default function LaudoManager() {
+  const [protocolForIndex, setProtocolForIndex] = useState(null);
-  const [laudos, setLaudos] = useState([]);
-  const [openDropdownId, setOpenDropdownId] = useState(null);
 
-  /* viewerLaudo é usado para mostrar o editor/leitura;
+  const [paginaAtual, setPaginaAtual] = useState(1);
-     previewLaudo é usado para a pré-visualização (sem bloquear) */
+  const [itensPorPagina, setItensPorPagina] = useState(10);
-  const [viewerLaudo, setViewerLaudo] = useState(null);
-  const [previewLaudo, setPreviewLaudo] = useState(null);
-  const [showPreview, setShowPreview] = useState(false);
 
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
+  // agora guardamos a mensagem (null = sem aviso)
-  const [toDelete, setToDelete] = useState(null);
+  const [noPermissionText, setNoPermissionText] = useState(null);
-  const [loadingDelete, setLoadingDelete] = useState(false);
 
-  /* notificação simples (sem backdrop) para 'sem permissão' */
+  const isSecretary = true;
-  const [showNoPermission, setShowNoPermission] = useState(false);
 
-  /* pesquisa */
+  const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
-  const [query, setQuery] = useState("");
+  const indiceInicial = (paginaAtual - 1) * itensPorPagina;
-
+  const indiceFinal = indiceInicial + itensPorPagina;
-  /* Para simplificar: eu assumo aqui que estamos na visão da secretaria */
+  const relatoriosPaginados = relatoriosFinais.slice(indiceInicial, indiceFinal);
-  const isSecretary = true; // permanece true (somente leitura)
 
   useEffect(() => {
-    // Importa os dados mock apenas
+    let mounted = true;
-    const data = mockFetchLaudos();
-    setLaudos(data);
-  }, []);
 
-  // Fecha dropdown ao clicar fora
+    const fetchReports = async () => {
-  useEffect(() => {
+      try {
-    function onDocClick(e) {
+        const myHeaders = new Headers();
-      if (e.target.closest && e.target.closest('.action-btn')) return;
+        myHeaders.append('apikey', API_KEY);
-      if (e.target.closest && e.target.closest('.dropdown')) return;
+        if (authHeader) myHeaders.append('Authorization', authHeader);
-      setOpenDropdownId(null);
+        const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
-    }
-    document.addEventListener('click', onDocClick);
-    return () => document.removeEventListener('click', onDocClick);
-  }, []);
 
-  function toggleDropdown(id, e) {
+        const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", requestOptions);
-    e.stopPropagation();
+        const data = await res.json();
-    setOpenDropdownId(prev => (prev === id ? null : id));
-  }
 
-  /* (botao editar) */
+        const uniqueMap = new Map();
-  function handleOpenViewer(laudo) {
+        (Array.isArray(data) ? data : []).forEach(r => {
-    setOpenDropdownId(null);
+          if (r && r.id) uniqueMap.set(r.id, r);
-    if (isSecretary) {
+        });
-      // (notificação sem bloquear)
+        const unique = Array.from(uniqueMap.values())
-      setShowNoPermission(true);
+          .sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0));
-      return;
-    }
-    setViewerLaudo(laudo);
-  }
 
-  /* (botao imprimir) */
+        if (mounted) {
-  function handlePrint(laudo) {
+          setRelatoriosOriginais(unique);
-    // evitar bug: fechar viewer antes de abrir preview
+          setRelatoriosFiltrados(unique);
-    setViewerLaudo(null);
+          setRelatoriosFinais(unique);
-    setPreviewLaudo(laudo);
+        }
-    setShowPreview(true);
+      } catch (err) {
-    setOpenDropdownId(null);
+        console.error('Erro listar relatórios', err);
-  }
+        if (mounted) {
-
+          setRelatoriosOriginais([]);
-  /* (botao excluir) */
+          setRelatoriosFiltrados([]);
-  function handleRequestDelete(laudo) {
+          setRelatoriosFinais([]);
-    setToDelete(laudo);
+        }
-    setOpenDropdownId(null);
-    setShowConfirmDelete(true);
-  }
-
-  /* (funcionalidade do botao de excluir) */
-  async function doConfirmDelete(confirm) {
-    if (!toDelete) return;
-    if (!confirm) {
-      setShowConfirmDelete(false);
-      setToDelete(null);
-      return;
-    }
-    setLoadingDelete(true);
-    try {
-      const resp = await mockDeleteLaudo(toDelete.id);
-      if (resp.ok || resp === true) {
-        // removo o laudo da lista local
-        setLaudos(curr => curr.filter(l => l.id !== toDelete.id));
-        setShowConfirmDelete(false);
-        setToDelete(null);
-        alert("Laudo excluído com sucesso.");
-      } else {
-        alert("Erro ao excluir. Tente novamente.");
       }
-    } catch (err) {
+    };
-      alert("Erro de rede ao excluir.");
-    } finally {
-      setLoadingDelete(false);
-    }
-  }
 
-  /* filtro de pesquisa (por pedido ou nome do paciente) */
+    fetchReports();
-  const normalized = (s = "") => String(s).toLowerCase();
+    const refreshHandler = () => fetchReports();
-  const filteredLaudos = laudos.filter(l => {
+    window.addEventListener('reports:refresh', refreshHandler);
-    const q = normalized(query).trim();
+    return () => {
-    if (!q) return true;
+      mounted = false;
-    if (normalized(l.pedido).includes(q)) return true;
+      window.removeEventListener('reports:refresh', refreshHandler);
-    if (normalized(l.paciente?.nome).includes(q)) return true;
+    };
-    return false;
+  }, [authHeader]);
-  });
+
+  useEffect(() => {
+    const fetchRelData = async () => {
+      const pacientes = [];
+      const medicos = [];
+      for (let i = 0; i < relatoriosFiltrados.length; i++) {
+        const rel = relatoriosFiltrados[i];
+        try {
+          const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
+          pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
+        } catch (err) {
+          pacientes.push(null);
+        }
+        try {
+          const doctorId = rel.created_by || rel.requested_by || null;
+          if (doctorId) {
+            const docRes = await GetDoctorByID(doctorId, authHeader);
+            medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
+          } else {
+            medicos.push({ full_name: rel.requested_by || '' });
+          }
+        } catch (err) {
+          medicos.push({ full_name: rel.requested_by || '' });
+        }
+      }
+      setPacientesComRelatorios(pacientes);
+      setMedicosComRelatorios(medicos);
+    };
+    if (relatoriosFiltrados.length > 0) fetchRelData();
+    else {
+      setPacientesComRelatorios([]);
+      setMedicosComRelatorios([]);
+    }
+  }, [relatoriosFiltrados, authHeader]);
+
+  const abrirModal = (relatorio, index) => {
+    setRelatorioModal(relatorio);
+    setModalIndex(index);
+    setShowModal(true);
+  };
+
+  const limparFiltros = () => {
+    setTermoPesquisa('');
+    setFiltroExame('');
+    setRelatoriosFinais(relatoriosOriginais);
+  };
+
+  const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
+    const elemento = document.getElementById(`folhaA4-${idx}`);
+    if (!elemento) {
+      console.error('Elemento para gerar PDF não encontrado:', `folhaA4-${idx}`);
+      return;
+    }
+    const opt = {
+      margin: 0,
+      filename: `relatorio_${nome_paciente || "paciente"}.pdf`,
+      html2canvas: { scale: 2 },
+      jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }
+    };
+    html2pdf().set(opt).from(elemento).save();
+  };
+
+  const handleEditClick = (relatorio) => {
+    if (isSecretary) {
+      setNoPermissionText('Sem permissão para editar/criar laudo.');
+      return;
+    }
+    navigate(`/medico/relatorios/${relatorio.id}/edit`);
+  };
+
+  const handleOpenProtocol = (relatorio, index) => {
+    setProtocolForIndex({ relatorio, index });
+    setShowProtocolModal(true);
+  };
+
+  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);
+      if (authHeader) myHeaders.append('Authorization', authHeader);
+      myHeaders.append('Content-Type', 'application/json');
+      myHeaders.append('Prefer', 'return=representation');
+
+      const body = JSON.stringify({ status: 'liberado' });
+
+      const res = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${relatorio.id}`, {
+        method: 'PATCH',
+        headers: myHeaders,
+        body
+      });
+
+      if (!res.ok) {
+        const txt = await res.text().catch(()=> '');
+        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; })(),
+      });
+      const data = await refreshed.json();
+      setRelatoriosOriginais(Array.isArray(data)? data : []);
+      setRelatoriosFiltrados(Array.isArray(data)? data : []);
+      setRelatoriosFinais(Array.isArray(data)? data : []);
+      alert('Laudo liberado com sucesso.');
+    } catch (err) {
+      console.error(err);
+      alert('Erro ao liberar laudo. Veja console.');
+    }
+  };
+
+  useEffect(() => {
+    const q = (termoPesquisa || '').toLowerCase().trim();
+    const ex = (filtroExame || '').toLowerCase().trim();
+
+    let items = relatoriosOriginais || [];
+    if (q) {
+      items = items.filter(r => {
+        const patientName = (r.patient_name || r.patient_fullname || '').toString().toLowerCase();
+        const pedido = (r.id || r.request_id || r.request || '').toString().toLowerCase();
+        return patientName.includes(q) || pedido.includes(q) || (r.patient_id && r.patient_id.toString().includes(q));
+      });
+    }
+    if (ex) items = items.filter(r => (r.exam || r.exame || '').toLowerCase().includes(ex));
+
+    setRelatoriosFiltrados(items);
+    setRelatoriosFinais(items);
+    setPaginaAtual(1);
+  }, [termoPesquisa, filtroExame, relatoriosOriginais]);
+
+  const irParaPagina = (pagina) => setPaginaAtual(pagina);
+  const avancarPagina = () => { if (paginaAtual < totalPaginas) setPaginaAtual(paginaAtual + 1); };
+  const voltarPagina = () => { if (paginaAtual > 1) setPaginaAtual(paginaAtual - 1); };
+  const gerarNumerosPaginas = () => {
+    const paginas = [];
+    const paginasParaMostrar = 5;
+    let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
+    let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
+    inicio = Math.max(1, fim - paginasParaMostrar + 1);
+    for (let i = inicio; i <= fim; i++) paginas.push(i);
+    return paginas;
+  };
 
   return (
-    <div className="laudo-wrap">
+    <div>
-      <div className="left-col">
+      <div className="page-heading"><h3>Lista de Relatórios</h3></div>
-        <div className="title-row">
+      <div className="page-content">
-          <div>
+        <section className="row">
-            <div className="page-title">Gerenciamento de Laudo</div>
+          <div className="col-12">
-            {/* removi a linha "Visualização: Secretaria" conforme pedido */}
+            <div className="card">
-          </div>
+              <div className="card-header d-flex justify-content-between align-items-center">
-        </div>
+                <h4 className="card-title mb-0">Relatórios Cadastrados</h4>
-
+                <div>
-        <div style={{ marginBottom:12 }}>
+                  <button
-          <input
+                    className="btn btn-primary"
-            placeholder="Pesquisar paciente ou pedido..."
+                    onClick={() => setNoPermissionText('Sem permissão para editar/criar laudo.')}
-            value={query}
+                    title="Secretaria não pode criar relatórios"
-            onChange={e => setQuery(e.target.value)}
+                  >
-            style={{ width:"100%", padding:12, borderRadius:8, border:"1px solid #e6eef8" }}
+                    <i className="bi bi-plus-circle"></i> Adicionar Relatório
-          />
+                  </button>
-        </div>
-
-        {filteredLaudos.length === 0 ? (
-          <div className="empty">Nenhum laudo encontrado.</div>
-        ) : (
-          <div style={{ borderRadius:8, overflow:"visible", boxShadow:"0 0 0 1px #eef6ff" }}>
-            {filteredLaudos.map((l) => (
-              <div className="laudo-row" key={l.id}>
-                <div className="col" style={{ flex: "0 0 160px" }}>
-                  <div style={{ fontWeight:700 }}>{l.pedido}</div>
-                  <div className="small-muted">{l.data}</div>
                 </div>
-                <div className="col" style={{ flex:2 }}>
+              </div>
-                  <div style={{ fontWeight:600 }}>{l.paciente.nome}</div>
-                  <div className="small-muted">{l.paciente.cpf} • {l.paciente.convenio}</div>
-                </div>
-                <div className="col" style={{ flex:1 }}>{l.exame}</div>
-                <div className="col small">{l.solicitante}</div>
-                <div className="col small" style={{ flex: "0 0 80px", textAlign:"left" }}>{l.status}</div>
 
-                <div className="row-actions">
+              <div className="card-body">
-                  <div className="action-btn" onClick={(e)=> toggleDropdown(l.id, e)} title="Ações">
+                <div className="card p-3 mb-3">
-                    <i class="bi bi-three-dots-vertical"></i>
+                  <h5 className="mb-3">
+                    <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
+                  </h5>
+                  <div className="row">
+                    <div className="col-md-5">
+                      <div className="mb-3">
+                        <label className="form-label">Buscar por nome ou CPF do paciente</label>
+                        <input
+                          type="text"
+                          className="form-control"
+                          placeholder="Digite nome ou CPF do paciente..."
+                          value={termoPesquisa}
+                          onChange={(e) => setTermoPesquisa(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-md-5">
+                      <div className="mb-3">
+                        <label className="form-label">Filtrar por tipo de exame</label>
+                        <input
+                          type="text"
+                          className="form-control"
+                          placeholder="Digite o tipo de exame..."
+                          value={filtroExame}
+                          onChange={(e) => setFiltroExame(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-md-2 d-flex align-items-end">
+                      <button className="btn btn-outline-secondary w-100" onClick={limparFiltros}>
+                        <i className="bi bi-arrow-clockwise"></i> Limpar
+                      </button>
+                    </div>
                   </div>
+                  <div className="mt-2">
+                    <div className="contador-relatorios">
+                      {relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
+                    </div>
+                  </div>
+                </div>
 
-                  {openDropdownId === l.id && (
+                <div className="table-responsive">
-                    <div className="dropdown" data-laudo-dropdown={l.id}>
+                  <table className="table table-striped table-hover">
-                      <div className="item" onClick={() => handleOpenViewer(l)}>Editar</div>
+                    <thead>
-                      <div className="item" onClick={() => handlePrint(l)}>Imprimir</div>
+                      <tr>
-                      <div className="item" onClick={() => { alert("Protocolo de entrega: formulário (não implementado)."); setOpenDropdownId(null); }}>Protocolo de entrega</div>
+                        <th>Paciente</th>
-                      <div className="item" onClick={() => { alert("Liberar laudo: requer permissão de médico. (não implementado)"); setOpenDropdownId(null); }}>Liberar laudo</div>
+                        <th>CPF</th>
-                      <div className="item" onClick={() => handleRequestDelete(l)} style={{ color:"#c23b3b" }}>Excluir laudo</div>
+                        <th>Exame</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {relatoriosPaginados.length > 0 ? (
+                        relatoriosPaginados.map((relatorio, index) => {
+                          const paciente = pacientesComRelatorios[index] || {};
+                          return (
+                            <tr key={relatorio.id || index}>
+                              <td>{paciente?.full_name || relatorio.patient_name || 'Carregando...'}</td>
+                              <td>{paciente?.cpf || 'Carregando...'}</td>
+                              <td>{relatorio.exam || relatorio.exame || '—'}</td>
+                              <td>
+                                <div className="d-flex gap-2">
+                                  <button className="btn btn-sm btn-ver-detalhes" onClick={() => abrirModal(relatorio, index)}>
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                  </button>
+
+                                  <button className="btn btn-sm btn-editar" onClick={() => handleEditClick(relatorio)}>
+                                    <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
+                                  </button>
+
+                                  <button className="btn btn-sm btn-liberar" onClick={() => handleLiberarLaudo(relatorio)}>
+                                    <i className="bi bi-unlock me-1"></i> Liberar laudo
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })
+                      ) : (
+                        <tr><td colSpan="4" className="text-center">Nenhum relatório encontrado.</td></tr>
+                      )}
+                    </tbody>
+                  </table>
+
+                  {relatoriosFinais.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={itensPorPagina}
+                          onChange={(e) => {
+                            setItensPorPagina(Number(e.target.value));
+                            setPaginaAtual(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 {paginaAtual} de {totalPaginas} •
+                          Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} itens
+                        </span>
+
+                        <nav>
+                          <ul className="pagination pagination-sm mb-0">
+                            <li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
+                              <button className="page-link" onClick={voltarPagina}>
+                                <i className="bi bi-chevron-left"></i>
+                              </button>
+                            </li>
+
+                            {gerarNumerosPaginas().map(pagina => (
+                              <li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
+                                <button className="page-link" onClick={() => irParaPagina(pagina)}>
+                                  {pagina}
+                                </button>
+                              </li>
+                            ))}
+
+                            <li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
+                              <button className="page-link" onClick={avancarPagina}>
+                                <i className="bi bi-chevron-right"></i>
+                              </button>
+                            </li>
+                          </ul>
+                        </nav>
+                      </div>
                     </div>
                   )}
                 </div>
               </div>
-            ))}
+            </div>
           </div>
-        )}
+        </section>
       </div>
 
-      {/* Viewer modal (modo leitura) — só abre para quem tem permissão */}
+      {/* Modal principal (detalhes) */}
-      {viewerLaudo && !showPreview && !isSecretary && (
+      {showModal && relatorioModal && (
-        <div className="viewer-modal" style={{ pointerEvents:"auto" }}>
+        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
-          <div className="modal-backdrop" onClick={() => setViewerLaudo(null)} />
+          <div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
-          <div className="modal-card" role="dialog" aria-modal="true">
+            <div className="modal-content">
-            <div className="viewer-header">
+              <div className="modal-header custom-modal-header">
-              <div>
+                <h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || 'Paciente'}</h5>
-                <div style={{ fontSize:18, fontWeight:700 }}>{viewerLaudo.paciente.nome}</div>
+                <button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
-                <div className="patient-info">
+              </div>
-                  Nasc.: {viewerLaudo.paciente.nascimento} • {computeAge(viewerLaudo.paciente.nascimento)} anos • {viewerLaudo.paciente.cpf} • {viewerLaudo.paciente.convenio}
+
+              <div className="modal-body">
+                <div id={`folhaA4-${modalIndex}`} className="folhaA4">
+                  <div id='header-relatorio' style={{ textAlign: 'center', marginBottom: 24 }}>
+                    <p style={{ margin: 0 }}>Clinica Rise up</p>
+                    <p style={{ margin: 0 }}>Dr - CRM/SP 123456</p>
+                    <p style={{ margin: 0 }}>Avenida - (79) 9 4444-4444</p>
+                  </div>
+
+                  <div id='infoPaciente' style={{ padding: '0 6px' }}>
+                    <p><strong>Paciente:</strong> {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || '—'}</p>
+                    <p><strong>Data de nascimento:</strong> {pacientesComRelatorios[modalIndex]?.birth_date || '—'}</p>
+                    <p><strong>Data do exame:</strong> {relatorioModal?.due_at || relatorioModal?.date || '—'}</p>
+
+                    <p style={{ marginTop: 12, fontWeight: '700' }}>Conteúdo do Relatório:</p>
+                    <div className="tiptap-viewer-wrapper">
+                      <TiptapViewer htmlContent={relatorioModal?.content_html || relatorioModal?.content || relatorioModal?.diagnosis || 'Relatório não preenchido.'} />
+                    </div>
+                  </div>
+
+                  <div style={{ marginTop: 20, padding: '0 6px' }}>
+                    <p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatorioModal?.requested_by || '—'}</p>
+                    <p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatorioModal?.created_at || '—'}</p>
+                  </div>
                 </div>
               </div>
 
-              <div style={{ display:"flex", gap:8 }}>
+              <div className="modal-footer custom-modal-footer">
-                <button className="tool-btn" onClick={() => { setPreviewLaudo(viewerLaudo); setShowPreview(true); setViewerLaudo(null); }}>Pré-visualizar / Imprimir</button>
+                <button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name || 'paciente', modalIndex)}>
-                <button className="tool-btn" onClick={() => setViewerLaudo(null)}>Fechar</button>
+                  <i className='bi bi-file-pdf-fill'></i> baixar em pdf
-              </div>
+                </button>
-            </div>
+                <button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
-
+                  Fechar
-            <div className="toolbar">
+                </button>
-              <div className="tool-btn">B</div>
-              <div className="tool-btn"><i>I</i></div>
-              <div className="tool-btn"><u>U</u></div>
-              <div className="tool-btn">Fonte</div>
-              <div className="tool-btn">Tamanho</div>
-              <div className="tool-btn">Lista</div>
-              <div className="tool-btn">Campos</div>
-              <div className="tool-btn">Modelos</div>
-              <div className="tool-btn">Imagens</div>
-            </div>
-
-            <div className="editor-area" aria-readonly>
-              {viewerLaudo.conteudo.split("\n").map((line, i) => (
-                <p key={i} style={{ margin: line.trim()==="" ? "8px 0" : "6px 0" }}>{line}</p>
-              ))}
-            </div>
-
-            <div className="footer-controls">
-              <div className="toggle small-muted">
-                <label><input type="checkbox" disabled /> Pré-visualização</label>
-                <label style={{ marginLeft:12 }}><input type="checkbox" disabled /> Ocultar data</label>
-                <label style={{ marginLeft:12 }}><input type="checkbox" disabled /> Ocultar assinatura</label>
-              </div>
-
-              <div style={{ display:"flex", gap:8 }}>
-                <button className="btn secondary" onClick={() => { if(window.confirm("Cancelar e voltar à lista? Todas alterações não salvas serão perdidas.")) setViewerLaudo(null); }}>Cancelar</button>
-                <button className="btn primary" onClick={() => alert("Salvar (não implementado para secretaria).")}>Salvar laudo</button>
               </div>
             </div>
           </div>
         </div>
       )}
 
-      {/* Preview modal — agora não bloqueia a tela (sem backdrop escuro), botão imprimir é interativo */}
+      {/* Modal Protocolo */}
-      {showPreview && previewLaudo && (
+      {showProtocolModal && protocolForIndex && (
-        <div className="preview-modal" style={{ pointerEvents:"none" /* container não bloqueia */ }}>
+        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowProtocolModal(false)}>
-          <div /* sem backdrop, assim não deixa a tela escura/blocked */ />
+          <div className="modal-dialog modal-dialog-tabela-relatorio" role="document" onClick={(e) => e.stopPropagation()}>
-          <div className="modal-card" style={{ maxWidth:900, pointerEvents:"auto" }}>
+            <div className="modal-content">
-            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
+              <div className="modal-header custom-modal-header">
-              <div style={{ fontWeight:700 }}>Pré-visualização - {previewLaudo.paciente.nome}</div>
+                <h5 className="modal-title">Protocolo de Entrega - {protocolForIndex.relatorio?.patient_name || 'Paciente'}</h5>
-              <div style={{ display:"flex", gap:8 }}>
+                <button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowProtocolModal(false)}></button>
-                <button className="tool-btn" onClick={() => alert("Imprimir (simulado).")}>Imprimir / Download</button>
-                <button className="tool-btn" onClick={() => { setShowPreview(false); setPreviewLaudo(null); }}>Fechar</button>
-              </div>
-            </div>
-
-            <div style={{ border: "1px solid #e6eef8", borderRadius:6, padding:18, background:"#fff" }}>
-              <div style={{ marginBottom:8, fontSize:14, color:"#33475b" }}>
-                <strong>RELATÓRIO MÉDICO</strong>
-              </div>
-              <div style={{ marginBottom:14, fontSize:13, color:"#546b7f" }}>
-                {previewLaudo.paciente.nome} • Nasc.: {previewLaudo.paciente.nascimento} • CPF: {previewLaudo.paciente.cpf}
               </div>
 
-              <div style={{ whiteSpace:"pre-wrap", fontSize:15, color:"#1f2d3d", lineHeight:1.5 }}>
+              <div className="modal-body">
-                {previewLaudo.conteudo}
+                <div style={{ padding: '0 6px' }}>
+                  <p><strong>Pedido:</strong> {protocolForIndex.relatorio?.id || protocolForIndex.relatorio?.pedido}</p>
+                  <p><strong>Paciente:</strong> {protocolForIndex.relatorio?.patient_name || '—'}</p>
+                  <p><strong>Data:</strong> {protocolForIndex.relatorio?.due_at || protocolForIndex.relatorio?.date || '—'}</p>
+                  <hr />
+                  <p>Protocolo de entrega gerado automaticamente. (Substitua pelo endpoint real se houver)</p>
+                </div>
+              </div>
+
+              <div className="modal-footer custom-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)
+                </button>
+                <button type="button" className="btn btn-outline-secondary" onClick={() => setShowProtocolModal(false)}>
+                  Fechar
+                </button>
               </div>
             </div>
           </div>
         </div>
       )}
 
-      {/* Notificação simples: Sem permissão (exibe sem backdrop escuro) - centralizada */}
+      {/* Variável de aviso: mostra texto personalizado */}
-      {showNoPermission && (
+      {noPermissionText && (
-        <div className="notice-card" role="alert" aria-live="polite">
+        <div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setNoPermissionText(null)}>
-          <div style={{ fontWeight:700, marginBottom:6 }}>Sem permissão para editar</div>
+          <div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
-          <div style={{ marginBottom:10, color:"#5a6f80" }}>Você está na visualização da secretaria. Edição disponível somente para médicos autorizados.</div>
+            <div className="modal-content">
-          <div style={{ textAlign:"right" }}>
+              <div style={{ padding: 18 }}>
-            <button className="tool-btn" onClick={() => setShowNoPermission(false)}>Fechar</button>
+                <h5 style={{ marginBottom: 8 }}>{noPermissionText}</h5>
-          </div>
+                <p style={{ color: '#6c757d' }}>{/* opcional descrição aqui */}</p>
-        </div>
+                <div style={{ textAlign: 'right', marginTop: 12 }}>
-      )}
+                  <button className="btn btn-outline-secondary" onClick={() => setNoPermissionText(null)}>Fechar</button>
-
+                </div>
-      {/* Confirm delete modal (simples: Sim / Não) */}
+              </div>
-      {showConfirmDelete && toDelete && (
-        <div className="confirm-modal" style={{ pointerEvents:"auto" }}>
-          <div className="modal-card" style={{ maxWidth:480 }}>
-            <div style={{ fontWeight:700, marginBottom:8 }}>Confirmar exclusão</div>
-            <div style={{ marginBottom:12 }}>Você tem certeza que quer excluir o laudo <strong>{toDelete.pedido} - {toDelete.paciente.nome}</strong> ? Esta ação é irreversível.</div>
-
-            <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
-              <button className="tool-btn" onClick={() => doConfirmDelete(false)} disabled={loadingDelete}>Não</button>
-              <button className="tool-btn" onClick={() => doConfirmDelete(true)} disabled={loadingDelete} style={{ background: loadingDelete ? "#d7e8ff" : "#ffecec", border: "1px solid #ffd7d7" }}>
-                {loadingDelete ? "Excluindo..." : "Sim, excluir"}
-              </button>
             </div>
           </div>
         </div>
       )}
+
     </div>
   );
-}
+};
 
-/* ===== Helpers ===== */
+export default LaudoManager;
-function computeAge(birth) {
-  if (!birth) return "-";
-  const [y,m,d] = birth.split("-").map(x => parseInt(x,10));
-  if (!y) return "-";
-  const today = new Date();
-  let age = today.getFullYear() - y;
-  const mm = today.getMonth() + 1;
-  const dd = today.getDate();
-  if (mm < m || (mm === m && dd < d)) age--;
-  return age;
-}

src/pages/LaudoStyle.css

@@ -310,3 +310,38 @@ html[data-bs-theme="dark"] .notice-card {
     color: #e0e0e0 !important;
     box-shadow: 0 8px 30px rgba(10,20,40,0.32) !important;
 }
+
+/* Botões coloridos para Protocolo e Liberar (combina com estilo dos outros botões) */
+.btn-protocolo {
+  background-color: #E6F2FF;
+  color: #004085;
+  border: 1px solid #d6e9ff;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.btn-protocolo:hover {
+  background-color: #cce5ff;
+}
+
+/* Liberar laudo - estilo parecido com o botão editar (amarelo claro) */
+.btn-liberar {
+  background-color: #FFF3CD;
+  color: #856404;
+  border: 1px solid #ffeaa7;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.btn-liberar:hover {
+  background-color: #ffeaa7;
+}
+
+/* Ajuste visual (pequeno) para espaçamento horizontal dos botões da linha */
+.table-responsive .d-flex.gap-2 .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}

src/pages/Login.jsx

@@ -118,6 +118,7 @@ function Login({ onEnterSystem }) {
       if (data.access_token) {
         const UserData = await UserInfos(`bearer ${data.access_token}`);
         console.log(UserData, "Dados do usuário");
+	localStorage.setItem("roleUser", UserData.roles)
 
         if (UserData?.roles?.includes("admin")) {
           navigate(`/admin/`);
@@ -131,7 +132,7 @@ function Login({ onEnterSystem }) {
           navigate(`/paciente/`);
         }
       }else{
-        console.log("ERROROROROROOR")
+        console.log("Erro na tentativa de login")
         setShowCabecalho(true)
       }
     } else {

src/pages/MedicoAgendamento.jsx

@@ -0,0 +1,139 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import dayjs from 'dayjs';
+import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx'; 
+import { useAuth } from '../components/utils/AuthProvider.js'; 
+import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia'; 
+
+dayjs.locale('pt-br');
+
+const MedicoAgendamento = () => {
+    const { getAuthorizationHeader, user } = useAuth(); 
+    const [currentDate, setCurrentDate] = useState(dayjs());
+    const [selectedDay, setSelectedDay] = useState(dayjs());
+    const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
+    const [showSpinner, setShowSpinner] = useState(true);
+    const [modoVisualizacao, setModoVisualizacao] = useState('Dia'); 
+    
+  
+    const [quickJump, setQuickJump] = useState({ 
+        month: currentDate.month(), 
+        year: currentDate.year() 
+    });
+
+    const handleQuickJumpChange = (type, value) => {
+        setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
+    };
+
+    const applyQuickJump = () => {
+        let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
+        setCurrentDate(newDate);
+        setSelectedDay(newDate); 
+    };
+
+   
+    const [selectedID, setSelectedId] = useState('0'); 
+    const [showDeleteModal, setShowDeleteModal] = useState(false); 
+    const [showConfirmModal, setShowConfirmModal] = useState(false); t
+    
+   
+    useEffect(() => {
+       
+        const mockAgendamentos = {
+            [dayjs().format('YYYY-MM-DD')]: [
+                { id: 1, scheduled_at: dayjs().set('hour', 10).set('minute', 0).toISOString(), paciente_nome: "Paciente Teste 1", medico_nome: "Dr. Mock", status: "agendado" },
+                { id: 2, scheduled_at: dayjs().set('hour', 11).set('minute', 30).toISOString(), paciente_nome: "Paciente Teste 2", medico_nome: "Dr. Mock", status: "confirmed" },
+            ],
+          
+            '2025-10-27': [ 
+                { id: 3, scheduled_at: '2025-10-27T19:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
+                { id: 4, scheduled_at: '2025-10-27T20:00:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
+                { id: 5, scheduled_at: '2025-10-27T21:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
+            ]
+        };
+
+        const today = dayjs();
+        const startOfMonth = today.startOf('month');
+        const nov11 = startOfMonth.add(10, 'day').format('YYYY-MM-DD'); 
+        
+      
+        mockAgendamentos[nov11] = [
+             { id: 6, scheduled_at: `${nov11}T10:30:00Z`, paciente_nome: 'Paciente C', medico_nome: 'Isaac Kauã', status: 'agendado' },
+             { id: 7, scheduled_at: `${nov11}T11:00:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
+             { id: 8, scheduled_at: `${nov11}T12:30:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
+             { id: 9, scheduled_at: `${nov11}T15:00:00Z`, paciente_nome: 'Pedro Abravanel', medico_nome: 'Fernando Prichowski', status: 'agendado' },
+        ];
+
+
+        setAgendamentosOrganizados(mockAgendamentos);
+        setShowSpinner(false);
+    }, []); 
+
+   
+    const handleSelectSlot = (timeSlot, doctorId) => {
+        alert(`Abrir tela de Nova Consulta para o dia ${selectedDay.format('DD/MM/YYYY')} às ${timeSlot} com o Médico ID: ${doctorId}`);
+        
+    };
+
+    const isMedico = true; 
+    const medicoLogadoID = user?.doctor_id || "ID_MEDICO_DEFAULT"; 
+
+    return (
+        <div className='agendamento-medico-container'>
+            <h1>Agenda do Médico: {user?.full_name || "Nome do Médico"}</h1>
+            <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+                <button className='manage-button btn' onClick={() => {}}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
+                <button className="btn btn-primary" onClick={() => {}}><i className="bi bi-person-plus-fill"></i> Adicionar Paciente</button>
+            </div>
+            
+            <div className="tab-buttons" style={{ marginBottom: '20px' }}>
+                <button className={`btn ${modoVisualizacao === 'Dia' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Dia')}>Dia</button>
+                <button className={`btn ${modoVisualizacao === 'Semana' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Semana')}>Semana</button>
+                <button className={`btn ${modoVisualizacao === 'Mês' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Mês')}>Mês</button>
+            </div>
+
+            <div className='agenda-e-calendario-wrapper'>
+                {}
+                <div className='medico-calendar-column' style={{ flex: 1 }}>
+                    <CalendarComponent
+                        currentDate={currentDate}
+                        setCurrentDate={setCurrentDate}
+                        selectedDay={selectedDay}
+                        setSelectedDay={setSelectedDay}
+                        DictAgendamentosOrganizados={DictAgendamentosOrganizados}
+                        showSpinner={showSpinner}
+                       T
+                        setSelectedId={setSelectedId} 
+                        setShowDeleteModal={setShowDeleteModal} 
+                        setShowConfirmModal={setShowConfirmModal}
+                        quickJump={quickJump}
+                        handleQuickJumpChange={handleQuickJumpChange}
+                        applyQuickJump={applyQuickJump}
+                    />
+                </div>
+
+                {}
+                <div className='medico-schedule-column' style={{ flex: 2 }}>
+                    {modoVisualizacao === 'Dia' && (
+                        <TabelaAgendamentoDia 
+                            selectedDay={selectedDay} 
+                            agendamentosDoDia={DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || []}
+                            onSelectSlot={handleSelectSlot}
+                            isMedicoView={isMedico} 
+                            medicoID={medicoLogadoID} 
+                            horariosDeTrabalho={[
+                                { hora: '19:30', medicoId: '123' }, 
+                                { hora: '20:00', medicoId: '123' }, 
+                                { hora: '21:30', medicoId: '123' }
+                            ]}
+                        />
+                    )}
+                    {}
+                    {}
+                    {}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MedicoAgendamento;

src/pages/TabelaAgendamentoDia.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/pt-br';
+import { ChevronLeft, ChevronRight, Edit, Trash2, User, Stethoscope } from 'lucide-react';
+
+
+// Configura o Day.js para usar o idioma português do Brasil
+dayjs.locale('pt-br');
+
+
+const TabelaAgendamentoDia = ({
+  agendamentos,
+  setDictInfo,
+  setShowDeleteModal,
+  setSelectedId,
+  setShowConfirmModal,
+  listaConsultasID,
+  coresConsultas
+}) => {
+  const [currentDate, setCurrentDate] = useState(dayjs());
+  const [appointmentsForDay, setAppointmentsForDay] = useState([]);
+
+
+  useEffect(() => {
+    const formattedDate = currentDate.format('YYYY-MM-DD');
+    const dailyAppointments = agendamentos[formattedDate] || [];
+
+
+    const appointmentsComStatusAtualizado = dailyAppointments.map(app => {
+      const index = listaConsultasID.indexOf(app.id);
+      if (index > -1) {
+        return { ...app, status: coresConsultas[index] };
+      }
+      return app;
+    });
+
+
+    setAppointmentsForDay(appointmentsComStatusAtualizado);
+  }, [currentDate, agendamentos, listaConsultasID, coresConsultas]);
+
+
+  const handlePrevDay = () => {
+    setCurrentDate(currentDate.subtract(1, 'day'));
+  };
+
+
+  const handleNextDay = () => {
+    setCurrentDate(currentDate.add(1, 'day'));
+  };
+
+
+  const handleEdit = (agendamento) => {
+    // Adapte para a sua lógica de edição, talvez abrindo um modal
+    console.log("Editar:", agendamento);
+    setDictInfo(agendamento);
+  };
+
+
+  const handleDelete = (id) => {
+    setSelectedId(id);
+    setShowDeleteModal(true);
+  };
+
+
+  // Gera os horários do dia (ex: 08:00 às 18:00)
+  const renderTimeSlots = () => {
+    const slots = [];
+    for (let i = 8; i <= 18; i++) {
+      const time = `${i.toString().padStart(2, '0')}:00`;
+      const hourlyAppointments = appointmentsForDay.filter(app =>
+        dayjs(app.scheduled_at).format('HH:mm') === time
+      );
+
+
+      slots.push(
+        <div className="time-slot" key={time}>
+          <div className="time-marker">{time}</div>
+          <div className="appointments-container">
+            {hourlyAppointments.length > 0 ? (
+              hourlyAppointments.map(app => (
+                <div key={app.id} className="appointment-card" data-status={app.status}>
+                  <div className="card-content">
+                    <div className="card-line">
+                      <Stethoscope size={16} className="card-icon" />
+                      <strong>Dr(a):</strong> {app.medico_nome}
+                    </div>
+                    <div className="card-line">
+                      <User size={16} className="card-icon" />
+                      <strong>Paciente:</strong> {app.paciente_nome}
+                    </div>
+                  </div>
+                  <div className="card-actions">
+                    <button className="btn-card-action" onClick={() => handleEdit(app)}>
+                      <Edit size={16} />
+                    </button>
+                    <button className="btn-card-action btn-delete" onClick={() => handleDelete(app.id)}>
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="no-appointment-placeholder"></div>
+            )}
+          </div>
+        </div>
+      );
+    }
+    return slots;
+  };
+
+
+  return (
+    <div className="modern-daily-view">
+      <div className="calendar-header">
+        <button onClick={handlePrevDay} className="btn-nav">
+          <ChevronLeft size={24} />
+        </button>
+        <h2>{currentDate.format('dddd, D [de] MMMM [de] YYYY')}</h2>
+        <button onClick={handleNextDay} className="btn-nav">
+          <ChevronRight size={24} />
+        </button>
+      </div>
+      <div className="timeline">
+        {renderTimeSlots()}
+      </div>
+    </div>
+  );
+};
+
+
+export default TabelaAgendamentoDia;

src/pages/TablePaciente.jsx

@@ -6,7 +6,7 @@ import "./style/TablePaciente.css";
 import ModalErro from "../components/utils/fetchErros/ModalErro";
 import manager from "../components/utils/fetchErros/ManagerFunction";
 
-function TablePaciente({ setCurrentPage, setPatientID }) {
+function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
 
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
@@ -23,6 +23,10 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const [dataInicial, setDataInicial] = useState("");
   const [dataFinal, setDataFinal] = useState("");
 
+  // Ordenação rápida
+  const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
+  const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
+
   
   const [paginaAtual, setPaginaAtual] = useState(1);
   const [itensPorPagina, setItensPorPagina] = useState(10);
@@ -109,11 +113,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     }
   };
 
-  // Função para refresh token (adicionada)
   const RefreshingToken = () => {
     console.log("Refreshing token...");
-    // Aqui você pode adicionar a lógica de refresh do token se necessário
-    // Por enquanto é apenas um placeholder para evitar o erro
   };
 
   useEffect(() => {
@@ -249,11 +250,25 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     return resultado;
   }) : [];
 
+  // Aplica ordenação rápida
+  const applySorting = (arr) => {
+    if (!Array.isArray(arr) || !sortKey) return arr;
+    const copy = [...arr];
+    if (sortKey === 'nome') {
+      copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
+    } else if (sortKey === 'idade') {
+      copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
+    }
+    if (sortDir === 'desc') copy.reverse();
+    return copy;
+  };
+
+  const pacientesOrdenados = applySorting(pacientesFiltrados);
 
   const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
   const indiceInicial = (paginaAtual - 1) * itensPorPagina;
   const indiceFinal = indiceInicial + itensPorPagina;
-  const pacientesPaginados = pacientesFiltrados.slice(indiceInicial, indiceFinal);
+  const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);
 
 
   const irParaPagina = (pagina) => {
@@ -292,7 +307,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
  
   useEffect(() => {
     setPaginaAtual(1);
-  }, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal]);
+  }, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
 
   return (
     <>
@@ -361,6 +376,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                     >
                       <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>
+                      {(() => {
+                        const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
+                        return (
+                          <select
+                            className="form-select compact-select sort-select w-auto"
+                            value={sortValue}
+                            onChange={(e) => {
+                              const v = e.target.value;
+                              if (!v) { setSortKey(null); setSortDir('asc'); return; }
+                              const [k, d] = v.split('-');
+                              setSortKey(k);
+                              setSortDir(d);
+                            }}
+                          >
+                            <option value="">Sem ordenação</option>
+                            <option value="nome-asc">Nome (A-Z)</option>
+                            <option value="nome-desc">Nome (Z-A)</option>
+                            <option value="idade-asc">Idade (crescente)</option>
+                            <option value="idade-desc">Idade (decrescente)</option>
+                          </select>
+                        );
+                      })()}
+                    </div>
                   </div>
 
                   <div className="d-flex justify-content-between align-items-center">
@@ -460,25 +503,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                   </div>
                 </div>
 
-                {(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
-                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
-                    <div className="alert alert-info mb-3 filters-active">
-                      <strong>Filtros ativos:</strong>
-                      <div className="mt-1">
-                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
-                        {filtroConvenio !== "Todos" && <span className="badge bg-primary me-2">Convênio: {filtroConvenio}</span>}
-                        {filtroVIP && <span className="badge bg-primary me-2">VIP</span>}
-                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
-                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
-                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
-                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
-                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
-                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
-                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
-                      </div>
-                    </div>
-                  )}
-
                 <div className="table-responsive">
                   <table className="table table-striped table-hover table-paciente-table">
                     <thead>
@@ -520,14 +544,14 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                             <td>{paciente.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
-                                <Link to={`${paciente.id}`}>
+                                <Link to={"details"}>
-                                  <button className="btn btn-sm btn-view">
+                                  <button className="btn btn-sm btn-view" onClick={() => setDictInfo(paciente)}>
                                     <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
-                                <Link to={`${paciente.id}/edit`}>
+                                <Link to={"edit"}>
-                                  <button className="btn btn-sm btn-edit">
+                                  <button className="btn btn-sm btn-edit" onClick={() => setDictInfo(paciente)}>
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>
                                 </Link>

src/pages/inicioPaciente.jsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa';
+import { useAuth } from '../components/utils/AuthProvider';
+import API_KEY from '../components/utils/apiKeys';
+import './style/inicioPaciente.css';
+
+function InicioPaciente() {
+  const navigate = useNavigate();
+  const { getAuthorizationHeader, isAuthenticated } = useAuth();
+  const [agendamentos, setAgendamentos] = useState([]);
+  const [medicos, setMedicos] = useState([]);
+  const [agendamentosComMedicos, setAgendamentosComMedicos] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [pacienteId, setPacienteId] = useState(null);
+
+  useEffect(() => {
+    const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
+    setPacienteId(userId);
+  }, []);
+
+  useEffect(() => {
+    const fetchMedicos = async () => {
+      try {
+        const authHeader = getAuthorizationHeader();
+        
+        const myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+
+        const requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow'
+        };
+
+        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setMedicos(data);
+          console.log(' Médicos carregados:', data.length);
+        } else {
+          console.error(' Erro ao buscar médicos:', response.status);
+        }
+      } catch (error) {
+        console.error(' Erro ao buscar médicos:', error);
+      }
+    };
+
+    const fetchAgendamentos = async () => {
+      try {
+        const authHeader = getAuthorizationHeader();
+        
+        const myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+
+        const requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow'
+        };
+
+        // Buscar todos os agendamentos (depois filtraremos pelo paciente)
+        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setAgendamentos(data);
+          console.log(' Agendamentos carregados:', data.length);
+        } else {
+          console.error(' Erro ao buscar agendamentos:', response.status);
+        }
+      } catch (error) {
+        console.error(' Erro ao buscar agendamentos:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isAuthenticated) {
+      fetchMedicos();
+      fetchAgendamentos();
+    }
+  }, [isAuthenticated, getAuthorizationHeader]);
+
+  useEffect(() => {
+    if (agendamentos.length > 0 && medicos.length > 0) {
+      const agendamentosComNomes = agendamentos.map(agendamento => {
+        const medico = medicos.find(m => m.id === agendamento.doctor_id);
+        return {
+          ...agendamento,
+          nomeMedico: medico?.full_name || 'Médico não encontrado',
+          especialidadeMedico: medico?.specialty || ''
+        };
+      });
+      setAgendamentosComMedicos(agendamentosComNomes);
+    }
+  }, [agendamentos, medicos]);
+
+  const meusAgendamentos = agendamentosComMedicos.filter(a => 
+    pacienteId ? a.patient_id === pacienteId : true
+  );
+
+  const hoje = new Date();
+  hoje.setHours(0, 0, 0, 0);
+  
+  const agendamentosFuturos = meusAgendamentos.filter(a => {
+    if (!a.scheduled_at) return false;
+    const dataAgendamento = new Date(a.scheduled_at);
+    return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed';
+  }).sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
+
+  const proximasConsultas = agendamentosFuturos.length;
+  const consultasHoje = agendamentosFuturos.filter(a => {
+    const dataAgendamento = new Date(a.scheduled_at);
+    dataAgendamento.setHours(0, 0, 0, 0);
+    return dataAgendamento.getTime() === hoje.getTime();
+  }).length;
+
+  const consultasPendentes = meusAgendamentos.filter(a => 
+    a.status === 'pending' || a.status === 'requested'
+  ).length;
+
+  const historicoConsultas = meusAgendamentos.filter(a => 
+    a.status === 'completed'
+  ).length;
+
+  return (
+    <div className="dashboard-paciente-container">
+      <div className="dashboard-paciente-header">
+        <h1>Bem-vindo ao MediConnect</h1>
+        <p>Gerencie suas consultas e acompanhe seu histórico médico</p>
+      </div>
+
+      <div className="stats-paciente-grid">
+        <div className="stat-paciente-card">
+          <div className="stat-paciente-info">
+            <span className="stat-paciente-label">Próximas Consultas</span>
+            <span className="stat-paciente-value">{proximasConsultas}</span>
+          </div>
+          <div className="stat-paciente-icon-wrapper blue">
+            <FaCalendarAlt className="stat-paciente-icon" />
+          </div>
+        </div>
+
+        <div className="stat-paciente-card">
+          <div className="stat-paciente-info">
+            <span className="stat-paciente-label">Consultas Hoje</span>
+            <span className="stat-paciente-value">{consultasHoje}</span>
+          </div>
+          <div className="stat-paciente-icon-wrapper green">
+            <FaCalendarCheck className="stat-paciente-icon" />
+          </div>
+        </div>
+        
+        <div className="stat-paciente-card">
+          <div className="stat-paciente-info">
+            <span className="stat-paciente-label">Aguardando</span>
+            <span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span>
+          </div>
+          <div className="stat-paciente-icon-wrapper purple">
+            <FaClock className="stat-paciente-icon" />
+          </div>
+        </div>
+        
+        <div className="stat-paciente-card">
+          <div className="stat-paciente-info">
+            <span className="stat-paciente-label">Realizadas</span>
+            <span className="stat-paciente-value">{historicoConsultas}</span>
+          </div>
+          <div className="stat-paciente-icon-wrapper orange">
+            <FaFileAlt className="stat-paciente-icon" />
+          </div>
+        </div>
+      </div>
+
+      <div className="quick-actions-paciente">
+        <h2>Acesso Rápido</h2>
+        <div className="actions-paciente-grid">
+          <div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+            <FaCalendarCheck className="action-paciente-icon" />
+            <div className="action-paciente-info">
+              <span className="action-paciente-title">Minhas Consultas</span>
+              <span className="action-paciente-desc">Ver todos os agendamentos</span>
+            </div>
+          </div>
+          
+          <div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
+            <FaFileAlt className="action-paciente-icon" />
+            <div className="action-paciente-info">
+              <span className="action-paciente-title">Meus Laudos</span>
+              <span className="action-paciente-desc">Acessar documentos médicos</span>
+            </div>
+          </div>
+          
+          <div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+            <FaUserMd className="action-paciente-icon" />
+            <div className="action-paciente-info">
+              <span className="action-paciente-title">Meus Médicos</span>
+              <span className="action-paciente-desc">Ver histórico de atendimentos</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="proximas-consultas-section">
+        <h2>Próximas Consultas</h2>
+        {loading ? (
+          <div className="no-consultas-content">
+            <p>Carregando suas consultas...</p>
+          </div>
+        ) : agendamentosFuturos.length > 0 ? (
+          <div className="consultas-paciente-list">
+            {agendamentosFuturos.slice(0, 3).map(agendamento => (
+              <div key={agendamento.id} className="consulta-paciente-item">
+                <div className="consulta-paciente-info">
+                  <div className="consulta-paciente-time-date">
+                    <p className="consulta-paciente-hora">
+                      {new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', { 
+                        hour: '2-digit', 
+                        minute: '2-digit' 
+                      })}
+                    </p>
+                    <p className="consulta-paciente-data">
+                      {new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
+                        day: '2-digit',
+                        month: 'short',
+                        year: 'numeric'
+                      })}
+                    </p>
+                  </div>
+                  <div className="consulta-paciente-detalhes">
+                    <p className="consulta-paciente-medico">
+                      <FaUserMd className="consulta-icon" />
+                      <strong>Dr(a):</strong> {agendamento.nomeMedico}
+                    </p>
+                    {agendamento.especialidadeMedico && (
+                      <p className="consulta-paciente-especialidade">
+                        {agendamento.especialidadeMedico}
+                      </p>
+                    )}
+                  </div>
+                  <span className={`consulta-paciente-status status-${agendamento.status}`}>
+                    {agendamento.status === 'scheduled' ? 'Confirmado' : 
+                     agendamento.status === 'pending' ? 'Aguardando' : 
+                     agendamento.status === 'requested' ? 'Solicitado' : agendamento.status}
+                  </span>
+                </div>
+              </div>
+            ))}
+            {agendamentosFuturos.length > 3 && (
+              <button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+                Ver todas as consultas
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="no-consultas-content">
+            <FaCalendarCheck className="no-consultas-icon" />
+            <p>Você não tem consultas agendadas</p>
+            <button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}>
+              Agendar Consulta
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default InicioPaciente;

src/pages/style/Agendamento.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 .filtros-container select,
 .filtros-container input {
   padding: 0.5rem;
@@ -14,420 +16,210 @@
   cursor: pointer;
 }
 
-.unidade-selecionarprofissional{
+.unidade-selecionarprofissional {
-  background-color: #fdfdfdde;
+  background-color: #ffffff;
-  padding: 20px 10px;
+  padding: 20px 20px;
   display: flex;
-  border-radius:10px ;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.unidade-selecionarprofissional input,  .unidade-selecionarprofissional select {
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 5px;
-  width: 20%;
-}
-
-.unidade-selecionarprofissional select{
-  width: 7%;
-}
-
-.busca-atendimento{
-  display: flex;
-  flex-direction: row;
-  margin:10px;
   justify-content: flex-start;
-}
-
-.busca-atendimento select{
-  padding:5px;
-  border-radius:8px ;
-  margin-left: 15px;
-  background-color: #0078d7;
-  color: white;
-  font-weight: bold;
-}
-
-.busca-atendimento input{
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 5px;
-  width: 100%;
-}
-
-.btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames {
-  background-color: rgba(231, 231, 231, 0.808);
-  padding:8px 10px;
-  font-size: larger;
-  font-weight: bold;
-  border-style: hidden;
-}
-
-.btn-selecionar-tabeladia{
-  border-radius: 10px 0px 0px 10px;
-}
-
-.btn-selecionar-tabelames{
-  border-radius: 0px 10px 10px 0px;
-}
-
-.btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo{
-  background-color: lightcyan;
-  border-color: darkcyan;
-  font-weight: bolder;
-}
-
-.legenda-tabela{
-  display: flex;
-  
-  margin-top: 30px;
-  margin-bottom: 10px;
-  gap: 15px;
-  justify-content: flex-end;
-}
-
-.legenda-item-realizado{
-  background-color: #2c5e37;
-}
-
-.legenda-item-confirmed{
-  background-color: #1e90ff;
-}
-.legenda-item-cancelado{
-  background-color: #d9534f;
-}
-
-.legenda-item-agendado{
-  background-color: #f0ad4e;
-}
-
-#status-card-consulta-completed, .legenda-item-realizado {
-  background-color: #b7ffbd;
-  border:3px solid #91d392;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-cancelled, .legenda-item-cancelado {
-  background-color: #ffb7cc;
-  border:3px solid #ff6c84;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-confirmed, .legenda-item-confirmed {
-  background-color: #eef8fb;
-  border:3px solid #d8dfe7;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-agendado, .legenda-item-agendado {
-  background-color: #f7f7c4;
-  border:3px solid #f3ce67;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-.btns-e-legenda-container{  
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  margin-top: 10px;
-}
-
-.calendario {
-  border-collapse: collapse;
-  width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgb(255, 255, 255);
-  border: 10px solid #ffffffc5;
-  background-color: rgb(253, 253, 253);
-}
-
-.calendario-ou-filaespera{
-  margin-top: 0;
-}
-
-.container-btns-agenda-fila_esepera{
-  margin-top: 30px;
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  margin-left:20px ;
-}
-
-.btn-fila-espera, .btn-agenda{
-  background-color: transparent;
-  border: 0px ;
-  border-bottom: 3px solid rgb(253, 253, 253);
-  padding: 8px;
-  border-radius: 10px 10px 0px 0px;
-  font-weight: bold;
-}
-
-.opc-filaespera-ativo, .opc-agenda-ativo{
-  color: white;
-  background-color: #5980fd;
-}
-
-html[data-bs-theme="dark"] {
-  body {
-    background-color: #121212;
-    color: #e0e0e0;
-  }
-
-  .calendario {
-    background-color: #1e1e1e;
-    border: 10px solid #333;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  }
-
-  .unidade-selecionarprofissional {
-    background-color: #1e1e1e;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  }
-
-
-  .busca-atendimento input {
-    background-color: #2c2c2c;
-    color: #e0e0e0;
-    border: 1px solid #444;
-  }
-
-  .btn-buscar,
-  .btn-selecionar-tabeladia,
-  .btn-selecionar-tabelasemana,
-  .btn-selecionar-tabelames {
-    background-color: #2c2c2c;
-    color: #e0e0e0;
-    border: none;
-  }
-
-  .btn-selecionar-tabeladia.ativo,
-  .btn-selecionar-tabelasemana.ativo,
-  .btn-selecionar-tabelames.ativo {
-    background-color: #005a9e;
-    border-color: #004578;
-    color: #fff;
-  }
-
-  .legenda-item-realizado {
-    background-color: #14532d;
-    border-color: #166534;
-  }
-
-  .legenda-item-confirmado {
-    background-color: #1e3a8a;
-    border-color: #2563eb;
-  }
-
-  .legenda-item-cancelado {
-    background-color: #7f1d1d;
-    border-color: #dc2626;
-  }
-
-  .legenda-item-agendado {
-    background-color: #78350f;
-    border-color: #f59e0b;
-  }
-
-  #status-card-consulta-realizado,
-  .legenda-item-realizado {
-    background-color: #14532d;
-    border: 3px solid #166534;
-    color: #e0e0e0;
-  }
-
-  #status-card-consulta-cancelado,
-  .legenda-item-cancelado {
-    background-color: #7f1d1d;
-    border: 3px solid #dc2626;
-    color: #e0e0e0;
-  }
-
-  #status-card-consulta-confirmado,
-  .legenda-item-confirmado {
-    background-color: #1e3a8a;
-    border: 3px solid #2563eb;
-    color: #e0e0e0;
-  }
-
-  #status-card-consulta-agendado,
-  .legenda-item-agendado {
-    background-color: #78350f;
-    border: 3px solid #f59e0b;
-    color: #e0e0e0;
-  }
-
-  .btns-e-legenda-container {
-    background-color: #181818;
-  }
-
-  .container-btns-agenda-fila_esepera {
-    background-color: #181818;
-  }
-
-  .btn-fila-espera,
-  .btn-agenda {
-    background-color: #2c2c2c;
-    color: #e0e0e0;
-    border-bottom: 3px solid #333;
-  }
-
-  .opc-filaespera-ativo,
-  .opc-agenda-ativo {
-    color: #fff;
-    background-color: #005a9e;
-  }
-}
-
-/* Estilo para o botão de Editar */
-.btn-edit-custom {
-  background-color: #FFF3CD;
-  color: #856404;
-}
-
-/* Estilo para o botão de Excluir (Deletar) */
-.btn-delete-custom {
-  background-color: #F8D7DA;
-  color: #721C24;
-  padding: 10px;
-}
-
-.cardconsulta{
-  display:flex;
   align-items: center;
-  flex-direction: row;
+  border-radius: 10px;
-}
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-
+  margin-bottom: 20px;
-.container-botons{
-  display: flex;
-  flex-direction: column;
-}
-
-#tabela-seletor-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 6px 12px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
-  width: fit-content;
-  margin: 0 auto;
-}
-
-#tabela-seletor-container p {
-  margin: 0;
-  font-size: 23px;
-  font-weight: 500;
-  color: #4085f6;
-  text-align: center;
-  white-space: nowrap;
-}
-
-#tabela-seletor-container button {
-  background: transparent;
-  border: none;
-  color: #555;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 4px 6px;
-  border-radius: 6px;
-  transition: all 0.2s ease-in-out;
-}
-
-#tabela-seletor-container button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #000;
-}
-
-#tabela-seletor-container i {
-  pointer-events: none;
-}
-
-
-.input-e-dropdown-wrapper {
-    position: relative; 
-    
-   
-    width: 350px;
-    margin-left: auto; 
 }
 
 .busca-atendimento {
-
+  display: flex;
-}
+  flex-direction: row;
-
+  margin: 0;
-.busca-atendimento > div {
+  justify-content: flex-start;
-    /* Garante que a div interna do input ocupe toda a largura do wrapper */
-    width: 100%;
-    /* Estilos para o contêiner do ícone e input, se necessário */
 }
 
 .busca-atendimento input {
-    /* Garante que o input preencha a largura disponível dentro do seu contêiner */
+  border: 2px solid #000000;
-    width: calc(100% - 40px); /* Exemplo: 100% menos a largura do ícone (aprox. 40px) */
+  border-radius: 8px;
-    /* ... outros estilos de borda, padding, etc. do seu input ... */
+  padding: 10px 15px;
+  width: 100%;
+  font-size: 1rem;
+  margin-left: 0;
 }
 
+.container-btns-agenda-fila_esepera {
+  margin-top: 20px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  border-bottom: 2px solid #E2E8F0;
+  margin-bottom: 20px;
+}
+
+.btn-fila-espera, .btn-agenda {
+  background-color: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 12px 24px;
+  border-radius: 0;
+  font-weight: 600;
+  color: #718096;
+  cursor: pointer;
+  margin-bottom: -2px;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.btn-fila-espera:hover, .btn-agenda:hover {
+    color: #2B6CB0;
+}
+
+.opc-filaespera-ativo, .opc-agenda-ativo {
+  color: #4299E1;
+  background-color: transparent;
+  border-bottom: 2px solid #4299E1;
+}
+
+.input-e-dropdown-wrapper {
+    position: relative; 
+    width: 100%;
+    margin: 0;
+}
 
-/* 3. O Dropdown: Posicionamento e Estilização */
 .dropdown-medicos {
-    /* POSICIONAMENTO: Faz o dropdown flutuar */
     position: absolute; 
-    
-    /* POSICIONAMENTO: Coloca o topo do dropdown logo abaixo do input */
     top: 100%; 
     left: 0;
-    
-    /* LARGURA: Essencial. Ocupa 100% do .input-e-dropdown-wrapper, limitando-se a ele. */
     width: 100%; 
-    
-    /* SOBREPOSIÇÃO: Garante que fique acima de outros elementos (como a Fila de Espera) */
     z-index: 1000; 
-    
+    background-color: #ffffff;
-    /* ESTILIZAÇÃO: Aparência */
+    border: 1px solid #ccc;
-    background-color: #ffffff; /* Fundo branco para não vazar */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border: 1px solid #ccc; /* Borda leve */
+    border-top: none;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
-    border-top: none; /* Deixa o visual mais integrado ao input */
-    
-    /* COMPORTAMENTO: Limite de altura e scroll */
     max-height: 250px; 
     overflow-y: auto; 
 }
+.dropdown-item { padding: 10px 15px; cursor: pointer; }
+.dropdown-item:hover { background-color: #f0f0f0; }
 
-/* 4. Estilização de cada item do dropdown */
+.calendar-wrapper {
-.dropdown-item {
+  display: flex;
-    padding: 10px 15px;
+  gap: 24px;
-    cursor: pointer;
+  background-color: #fff;
-    font-size: 14px;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  font-family: 'Inter', sans-serif;
+  margin-top: 20px;
+}
+.calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
+.info-date-display { background-color: #EDF2F7; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 16px; }
+.info-date-display span { font-weight: 600; color: #718096; text-transform: uppercase; font-size: 0.9rem; }
+.info-date-display strong { display: block; font-size: 2.5rem; font-weight: 700; color: #2D3748; }
+.info-details { text-align: center; margin-bottom: 24px; }
+.info-details h3 { font-size: 1.25rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
+.info-details p { color: #718096; margin: 0; }
+.appointments-list { flex-grow: 1; overflow-y: auto; }
+.appointments-list h4 { font-size: 1rem; font-weight: 600; color: #4A5568; margin-bottom: 12px; position: sticky; top: 0; background-color: #fff; padding-bottom: 8px; }
+.appointment-item { display: flex; gap: 12px; padding: 10px; border-radius: 6px; border-left: 4px solid; margin-bottom: 8px; background-color: #F7FAFC; }
+.item-time { font-weight: 600; color: #2B6CB0; }
+.item-details { display: flex; flex-direction: column; }
+.item-details span { font-weight: 500; color: #2D3748; }
+.item-details small { color: #718096; }
+.no-appointments-info { text-align: center; padding: 20px; color: #A0AEC0; }
+.appointment-item[data-status="confirmed"] { border-color: #4299E1; }
+.appointment-item[data-status="completed"] { border-color: #48BB78; }
+.appointment-item[data-status="cancelled"] { border-color: #F56565; }
+.appointment-item[data-status="agendado"],
+.appointment-item[data-status="requested"] { border-color: #ED8936; }
+.calendar-main { flex-grow: 1; }
+.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.date-indicator h2 { font-size: 1.5rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
+.nav-buttons { display: flex; gap: 8px; }
+.nav-buttons button { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E0; background-color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; }
+.nav-buttons button:hover { background-color: #EDF2F7; }
+.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
+.day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; }
+.day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
+.day-cell span { font-weight: 600; color: #4A5568; }
+.day-cell:hover { background-color: #EDF2F7; border-color: #BEE3F8; }
+.day-cell.other-month { background-color: #F7FAFC; }
+.day-cell.other-month span { color: #A0AEC0; }
+.day-cell.today span { background-color: #4299E1; color: #fff; border-radius: 50%; padding: 2px 6px; display: inline-block; }
+.day-cell.selected { background-color: #BEE3F8; border-color: #4299E1; }
+.appointments-indicator { background-color: #4299E1; color: white; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 8px; right: 8px; }
+
+.calendar-legend {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.legend-item {
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
     color: #333;
-    /* Evita que nomes muito longos quebrem ou saiam da caixa */
-    white-space: nowrap; 
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
-.dropdown-item:hover {
+.legend-item[data-status="completed"] {
-    background-color: #f0f0f0; /* Cor ao passar o mouse */
+    background-color: #C6F6D5;
-    color: #007bff;
+    border: 1px solid #9AE6B4;
+    color: #2F855A;
+}
+.legend-item[data-status="confirmed"] {
+    background-color: #EBF8FF;
+    border: 1px solid #BEE3F8;
+    color: #3182CE;
+}
+.legend-item[data-status="agendado"] {
+    background-color: #FEFCBF;
+    border: 1px solid #F6E05E;
+    color: #B7791F;
+}
+.legend-item[data-status="cancelled"] {
+    background-color: #FED7D7;
+    border: 1px solid #FEB2B2;
+    color: #C53030;
 }
 
 
-.input-modal{
+.appointment-item {
-  width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
+.item-details {
+    flex-grow: 1;
+}
+
+.appointment-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-action {
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.btn-action.btn-edit {
+    background-color: #FEFCBF;
+    color: #B7791F;
+}
+.btn-action.btn-edit:hover {
+    background-color: #F6E05E;
+}
+
+.btn-action.btn-delete {
+    background-color: #E53E3E;
+    color: #fff;
+}
+.btn-action.btn-delete:hover {
+    background-color: #C53030;
+}

src/pages/style/Inicio.css

@@ -229,3 +229,191 @@ html[data-bs-theme="dark"] .manage-button {
 html[data-bs-theme="dark"] .manage-button:hover {
     background-color: #2323b0;
 }
+
+/* Lista de Agendamentos */
+.agendamentos-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.agendamento-item {
+    background-color: #f9fafb;
+    border-left: 4px solid #5d5dff;
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    transition: all 0.2s ease;
+}
+
+.agendamento-item:hover {
+    background-color: #f0f2f5;
+    transform: translateX(5px);
+}
+
+.agendamento-info {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.agendamento-time-date {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 90px;
+}
+
+.agendamento-hora {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #5d5dff;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.agendamento-data {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #888;
+    margin: 0;
+    margin-top: 0.25rem;
+}
+
+.agendamento-detalhes {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 300px;
+}
+
+.agendamento-paciente,
+.agendamento-medico {
+    font-size: 0.95rem;
+    color: #444;
+    margin: 0;
+    line-height: 1.4;
+}
+
+.agendamento-paciente strong,
+.agendamento-medico strong {
+    font-weight: 600;
+    color: #333;
+}
+
+.agendamento-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    text-transform: uppercase;
+}
+
+.agendamento-status.status-scheduled {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.agendamento-status.status-completed {
+    background-color: #e8f5e9;
+    color: #388e3c;
+}
+
+.agendamento-status.status-pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.agendamento-status.status-cancelled {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.agendamento-status.status-requested {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+.view-all-button {
+    width: 100%;
+    margin-top: 1rem;
+    background-color: #f0f2f5;
+    color: #5d5dff;
+    border: 2px solid #5d5dff;
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.view-all-button:hover {
+    background-color: #5d5dff;
+    color: #fff;
+}
+
+/* Dark Mode - Agendamentos */
+html[data-bs-theme="dark"] .agendamento-item {
+    background-color: #2a2a2a;
+    border-left-color: #6c6cff;
+}
+
+html[data-bs-theme="dark"] .agendamento-item:hover {
+    background-color: #333;
+}
+
+html[data-bs-theme="dark"] .agendamento-hora {
+    color: #8888ff;
+}
+
+html[data-bs-theme="dark"] .agendamento-data {
+    color: #999;
+}
+
+html[data-bs-theme="dark"] .agendamento-paciente,
+html[data-bs-theme="dark"] .agendamento-medico {
+    color: #d0d0d0;
+}
+
+html[data-bs-theme="dark"] .agendamento-paciente strong,
+html[data-bs-theme="dark"] .agendamento-medico strong {
+    color: #e0e0e0;
+}
+
+html[data-bs-theme="dark"] .agendamento-status.status-scheduled {
+    background-color: #1a3a52;
+    color: #64b5f6;
+}
+
+html[data-bs-theme="dark"] .agendamento-status.status-completed {
+    background-color: #1b3a1f;
+    color: #81c784;
+}
+
+html[data-bs-theme="dark"] .agendamento-status.status-pending {
+    background-color: #3d2817;
+    color: #ffb74d;
+}
+
+html[data-bs-theme="dark"] .agendamento-status.status-cancelled {
+    background-color: #3d1f1f;
+    color: #e57373;
+}
+
+html[data-bs-theme="dark"] .agendamento-status.status-requested {
+    background-color: #2d1f3d;
+    color: #ba68c8;
+}
+
+html[data-bs-theme="dark"] .view-all-button {
+    background-color: #2a2a2a;
+    color: #8888ff;
+    border-color: #6c6cff;
+}
+
+html[data-bs-theme="dark"] .view-all-button:hover {
+    background-color: #6c6cff;
+    color: #fff;
+}

src/pages/style/inicioPaciente.css

@@ -0,0 +1,454 @@
+.dashboard-paciente-container {
+    padding: 2rem;
+    background-color: #f7f9fc;
+    flex-grow: 1;
+    min-height: 100vh;
+}
+
+/* Header - Paciente */
+.dashboard-paciente-header {
+    margin-bottom: 2rem;
+}
+
+.dashboard-paciente-header h1 {
+    font-size: 2rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0.5rem;
+}
+
+.dashboard-paciente-header p {
+    font-size: 1rem;
+    color: #666;
+}
+
+/* Estatísticas - Paciente */
+.stats-paciente-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.stat-paciente-card {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-paciente-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+
+.stat-paciente-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-paciente-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #888;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-paciente-value {
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: #444;
+}
+
+.stat-paciente-icon-wrapper {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.stat-paciente-icon {
+    font-size: 1.4rem;
+    color: #fff;
+}
+
+/* Cores dos ícones - Paciente */
+.stat-paciente-icon-wrapper.blue { background-color: #5d5dff; }
+.stat-paciente-icon-wrapper.green { background-color: #30d158; }
+.stat-paciente-icon-wrapper.purple { background-color: #a272ff; }
+.stat-paciente-icon-wrapper.orange { background-color: #f1952e; }
+
+/* Ações Rápidas - Paciente */
+.quick-actions-paciente h2 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 1.5rem;
+}
+
+.actions-paciente-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.action-paciente-button {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 1.5rem;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+.action-paciente-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
+}
+
+.action-paciente-icon {
+    font-size: 2.5rem;
+    margin-right: 1.2rem;
+    color: #5d5dff;
+}
+
+.action-paciente-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.action-paciente-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #444;
+    margin-bottom: 0.25rem;
+}
+
+.action-paciente-desc {
+    font-size: 0.85rem;
+    color: #888;
+}
+
+/* Próximas Consultas - Paciente */
+.proximas-consultas-section {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+.proximas-consultas-section h2 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 1.5rem;
+}
+
+/* Lista de Consultas - Paciente */
+.consultas-paciente-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+
+.consulta-paciente-item {
+    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
+    border-left: 5px solid #5d5dff;
+    border-radius: 10px;
+    padding: 1.25rem 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.consulta-paciente-item:hover {
+    background: linear-gradient(135deg, #f0f2f5 0%, #fafbfc 100%);
+    transform: translateX(8px);
+    box-shadow: 0 4px 12px rgba(93, 93, 255, 0.15);
+}
+
+.consulta-paciente-info {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+.consulta-paciente-time-date {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 90px;
+    padding: 0.5rem;
+    background-color: #f0f2ff;
+    border-radius: 8px;
+}
+
+.consulta-paciente-hora {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #5d5dff;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.consulta-paciente-data {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #7777aa;
+    margin: 0;
+    margin-top: 0.25rem;
+    text-transform: capitalize;
+}
+
+.consulta-paciente-detalhes {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 250px;
+}
+
+.consulta-paciente-medico {
+    font-size: 1rem;
+    color: #444;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.consulta-icon {
+    color: #5d5dff;
+    font-size: 1.1rem;
+}
+
+.consulta-paciente-medico strong {
+    font-weight: 600;
+    color: #333;
+}
+
+.consulta-paciente-especialidade {
+    font-size: 0.85rem;
+    color: #666;
+    margin: 0;
+    margin-left: 1.6rem;
+    font-style: italic;
+}
+
+.consulta-paciente-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.consulta-paciente-status.status-scheduled {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.consulta-paciente-status.status-pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.consulta-paciente-status.status-requested {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+/* Sem Consultas */
+.no-consultas-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 3rem 1rem;
+}
+
+.no-consultas-icon {
+    font-size: 4rem;
+    color: #bbb;
+    margin-bottom: 1.5rem;
+}
+
+.no-consultas-content p {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 2rem;
+}
+
+.agendar-paciente-button,
+.view-all-paciente-button {
+    background-color: #5d5dff;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    padding: 0.875rem 2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.agendar-paciente-button:hover,
+.view-all-paciente-button:hover {
+    background-color: #4444ff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(93, 93, 255, 0.3);
+}
+
+.view-all-paciente-button {
+    width: 100%;
+    margin-top: 1rem;
+    background-color: #f0f2f5;
+    color: #5d5dff;
+    border: 2px solid #5d5dff;
+}
+
+.view-all-paciente-button:hover {
+    background-color: #5d5dff;
+    color: #fff;
+}
+
+/* Dark Mode - Paciente */
+html[data-bs-theme="dark"] .dashboard-paciente-container {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+html[data-bs-theme="dark"] .dashboard-paciente-header h1,
+html[data-bs-theme="dark"] .dashboard-paciente-header p,
+html[data-bs-theme="dark"] .quick-actions-paciente h2,
+html[data-bs-theme="dark"] .proximas-consultas-section h2,
+html[data-bs-theme="dark"] .action-paciente-title,
+html[data-bs-theme="dark"] .stat-paciente-value {
+    color: #e0e0e0;
+}
+
+html[data-bs-theme="dark"] .stat-paciente-card,
+html[data-bs-theme="dark"] .action-paciente-button,
+html[data-bs-theme="dark"] .proximas-consultas-section {
+    background-color: #1e1e1e;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+}
+
+html[data-bs-theme="dark"] .stat-paciente-label,
+html[data-bs-theme="dark"] .action-paciente-desc,
+html[data-bs-theme="dark"] .no-consultas-content p {
+    color: #b0b0b0;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-item {
+    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
+    border-left-color: #6c6cff;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-item:hover {
+    background: linear-gradient(135deg, #333 0%, #252525 100%);
+    box-shadow: 0 4px 12px rgba(108, 108, 255, 0.2);
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-time-date {
+    background-color: #2a2a3a;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-hora {
+    color: #8888ff;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-data {
+    color: #9999cc;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-medico,
+html[data-bs-theme="dark"] .consulta-paciente-especialidade {
+    color: #d0d0d0;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-medico strong {
+    color: #e0e0e0;
+}
+
+html[data-bs-theme="dark"] .consulta-icon,
+html[data-bs-theme="dark"] .action-paciente-icon {
+    color: #8888ff;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-status.status-scheduled {
+    background-color: #1a3a52;
+    color: #64b5f6;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-status.status-pending {
+    background-color: #3d2817;
+    color: #ffb74d;
+}
+
+html[data-bs-theme="dark"] .consulta-paciente-status.status-requested {
+    background-color: #2d1f3d;
+    color: #ba68c8;
+}
+
+html[data-bs-theme="dark"] .no-consultas-icon {
+    color: #666;
+}
+
+html[data-bs-theme="dark"] .agendar-paciente-button {
+    background-color: #6c6cff;
+}
+
+html[data-bs-theme="dark"] .agendar-paciente-button:hover {
+    background-color: #5555dd;
+}
+
+html[data-bs-theme="dark"] .view-all-paciente-button {
+    background-color: #2a2a2a;
+    color: #8888ff;
+    border-color: #6c6cff;
+}
+
+html[data-bs-theme="dark"] .view-all-paciente-button:hover {
+    background-color: #6c6cff;
+    color: #fff;
+}
+
+/* Responsivo */
+@media (max-width: 768px) {
+    .dashboard-paciente-container {
+        padding: 1rem;
+    }
+
+    .stats-paciente-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .actions-paciente-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .consulta-paciente-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .consulta-paciente-time-date {
+        width: 100%;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+}

src/perfis/Perfil_adm/Perfiladm.jsx

@@ -14,11 +14,14 @@ import DoctorEditPage from "../../pages/DoctorEditPage";
 import UserDashboard from '../../PagesAdm/gestao.jsx';
 import PainelAdministrativo from '../../PagesAdm/painel.jsx';
 import admItems from "../../data/sidebar-items-adm.json";
-
+import {useState} from "react"
 
 // ...restante do código...
 function Perfiladm() {
-  return (
+
+  const [DictInfo, setDictInfo] = useState({})
+
+	return (
     
       <div id="app" className="active">
        <Sidebar menuItems={admItems} />
@@ -27,12 +30,12 @@ function Perfiladm() {
             <Route path="/" element={<UserDashboard />} />
             <Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
             <Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
-            <Route path="/pacientes" element={<TablePaciente />} />
+            <Route path="/pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
-            <Route path="/medicos" element={<DoctorTable />} />
+            <Route path="/medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
-            <Route path="/pacientes/:id" element={<Details />} />
+            <Route path="/pacientes/details" element={<Details DictInfo={DictInfo} />} />
-            <Route path="/pacientes/:id/edit" element={<EditPage />} />
+            <Route path="/pacientes/edit" element={<EditPage DictInfo={DictInfo} />} />
-            <Route path="/medicos/:id" element={<DoctorDetails />} />
+            <Route path="/medicos/details" element={<DoctorDetails DictInfo={DictInfo}/>} />
-            <Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
+            <Route path="/medicos/edit" element={<DoctorEditPage DictInfo={DictInfo}/>} />
             <Route path="/agendamento" element={<Agendamento />} />
             <Route path="/laudo" element={<LaudoManager />} />
             

src/perfis/Perfil_paciente/Perfilpaciente.jsx

@@ -2,21 +2,14 @@ import { Routes, Route } from "react-router-dom";
 import Sidebar from "../../components/Sidebar"; 
 import PacienteItems from "../../data/sidebar-items-paciente.json";
 import { useState } from "react";
+import InicioPaciente from "../../pages/inicioPaciente";
 import LaudoManager from "../../pages/LaudoManager";
 import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
 import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
 import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
-
-// 1. IMPORTAÇÃO ADICIONADA
-import BotaoVideoPaciente from "../../components/BotaoVideoPaciente";
-
 function PerfilPaciente({ onLogout }) {
 
-
+const [dadosConsulta, setConsulta] = useState({})
-
-const [DictInfo, setDictInfo] = useState({})
-
-
   return (
 
     <div id="app" className="active">
@@ -24,20 +17,15 @@ const [DictInfo, setDictInfo] = useState({})
       
       <div id="main">
         <Routes>
-          <Route path="/" element={<LaudoManager />} /> 
+          <Route path="/" element={<InicioPaciente />} /> 
-          <Route path="agendamento" element={<ConsultasPaciente setDictInfo={setDictInfo}/>} />
+          <Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
           <Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
-          <Route path="agendamento/edit" element={<ConsultaEditPage DictInfo={DictInfo} />} />
+          <Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
           <Route path="laudo" element={<LaudoManager />} /> 
           <Route path="*" element={<h2>Página não encontrada</h2>} />
         </Routes>
       </div>
-
-      {/* 2. COMPONENTE ADICIONADO AQUI */}
-      <BotaoVideoPaciente />
-
     </div>
-
   );
 }
 

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -24,18 +24,18 @@ function PerfilSecretaria({ onLogout }) {
   return (
     // <Router>
       <div id="app" className="active">
-        <Sidebar onLogout={onLogout} menuItems={SecretariaItems} />
+        <Sidebar onLogout={onLogout} />
         <div id="main">
           <Routes>
             <Route path="/" element={<Inicio/>}/>
             <Route path="pacientes/cadastro" element={<PatientCadastroManager />} />
             <Route path="medicos/cadastro" element={<DoctorCadastroManager />} />
-            <Route path="pacientes" element={<TablePaciente />} />
+            <Route path="pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
-            <Route path="medicos" element={<DoctorTable />} />
+            <Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
-            <Route path="pacientes/:id" element={<Details />} />
+            <Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
-            <Route path="pacientes/:id/edit" element={<EditPage />} />
+            <Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
-            <Route path="medicos/:id" element={<DoctorDetails />} />
+            <Route path="medicos/details" element={<DoctorDetails doctor={DictInfo} />} />
-            <Route path="medicos/:id/edit" element={<DoctorEditPage />} />
+            <Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
             <Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
             <Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
             <Route path="laudo" element={<LaudoManager />} />