From ffea77d911efc63b15d6816d6c5d495810d03661 Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Fri, 10 Oct 2025 13:15:30 -0300
Subject: [PATCH 1/5] POST de agendamentos

---
 .../AgendarConsulta/FormNovaConsulta.jsx      | 211 +++++-------------
 .../utils/Functions-Endpoints/Doctor.js       |  34 ++-
 src/pages/Agendamento.jsx                     |  66 +++++-
 3 files changed, 148 insertions(+), 163 deletions(-)

diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
index 435bc8ee..d45e6596 100644
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -1,57 +1,20 @@
 import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect } from "react";
+import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
+import { GetDoctorByName } from "../utils/Functions-Endpoints/Doctor";
+import { useAuth } from "../utils/AuthProvider";
 
+const FormNovaConsulta = ({ onCancel, onSave }) => {
+  const {getAuthorizationHeader} = useAuth()
 
-const FormNovaConsulta = ({ onCancel, patientID }) => {
-  
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
-  const [paciente, setPaciente] = useState({})
+  const [agendamento, setAgendamento] = useState({})
   const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
 
-    useEffect(() => {
-    if (!patientID) return;
-
-    const fetchAnexos = async () => {
-      setLoadingAnexos(true);
-      try {
-        const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`);
-        const data = await res.json();
-        setAnexos(data.data || []);
-      } catch (err) {
-        console.error("Erro ao buscar anexos:", err);
-      } finally {
-        setLoadingAnexos(false);
-      }
-    };
-
-    fetchAnexos();
-  }, [patientID]);
-
-  const handleUpload = async () => {
-    if (!selectedFile) return;
-
-    const formData = new FormData();
-    formData.append("file", selectedFile);
-
-    try {
-      const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
-        method: "POST",
-        body: formData
-      });
-      if (res.ok) {
-        const novoAnexo = await res.json();
-        setAnexos(prev => [...prev, novoAnexo]);
-        setSelectedFile(null);
-      } else {
-        console.error("Erro ao enviar anexo");
-      }
-    } catch (err) {
-      console.error("Erro ao enviar anexo:", err);
-    }
-  }; 
+  let authHeader = getAuthorizationHeader()
 
 
   const handleclickAcessibilidade = (id) => {
@@ -62,112 +25,68 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
     console.log(id)
   }
-
   
-  const FormatCPF = (valor) => {
-    console.log(valor)
 
+  const FormatCPF = (valor) => {
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-    BuscarPacienteExistentePeloCPF(valor)
-    
     return digits
       .replace(/(\d{3})(\d)/, '$1.$2')
       .replace(/(\d{3})(\d)/, '$1.$2')
       .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
   }
 
-  
-  const FormatTelefones = (valor) => {
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-    return digits
-      .replace(/(\d)/, '($1')
-      .replace(/(\d{2})(\d)/, '$1) $2' )
-      .replace(/(\d)(\d{4})/, '$1 $2')
-      .replace(/(\d{4})(\d{4})/, '$1-$2')
-  }
-
-
-  const BuscarCPFnoBancodeDados = async (cpf) => {
-
-      var myHeaders = new Headers();
-  myHeaders.append("Authorization", "Bearer <token>");
-  myHeaders.append("Content-Type", "application/json");
-
-  var raw = JSON.stringify({
-    "cpf": cpf
-  });
-
-  var requestOptions = {
-    method: 'POST',
-    headers: myHeaders,
-    body: raw,
-    redirect: 'follow'
-  };
-
-   const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions);
-  const result = await response.json();
-  return result
-
-  
-  }
-
-  const BuscarPacienteExistentePeloCPF = async (value) => {
-   
-   if(isNaN(value[13]) === false && value.length === 14)try {
-      const result = await BuscarCPFnoBancodeDados(value);
-      console.log("Resultado:", result);
-      
-      if (result.data.existe === true){
-
-      var myHeaders = new Headers();
-    myHeaders.append("Authorization", "Bearer <token>");
-
-    var requestOptions = {
-      method: 'GET',
-      headers: myHeaders,
-      redirect: 'follow'
-    };
-
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
-      .then(response => response.json())
-      .then(result => setPaciente(result.data))
-      .catch(error => console.log('error', error));
-    }
-      
-
-
-    } catch (error) {
-      console.log("error", error);
-    }
-    //BuscarCPFnoBancodeDados(value)
-  }
+     
 
   const handleChange = (e) => {
 
     const {value, name} = e.target;
 
-    console.log(value, name)
+    console.log(value, name, agendamento)
 
     if(name === 'email'){
-      setPaciente({...paciente, contato:{
-        ...paciente.contato,
+      setAgendamento({...agendamento, contato:{
+        ...agendamento.contato,
         email:value
       }})
 
-    } else if(name === 'telefone'){
-      setPaciente({...paciente, contato:{
-        ...paciente.contato,
-        telefone1:FormatTelefones(value)
-      }})
+    }else if(name === 'cpf'){
+
+      let cpfFormatted = FormatCPF(value)
+       const fetchPatient = async () => {
+                  let patientData = await GetPatientByCPF(cpfFormatted, authHeader);
+                  if (patientData) {
+                    setAgendamento((prev) => ({
+                      ...prev,
+                      nome: patientData.full_name,
+                      patient_id: patientData.id
+                    }));
+                  }}
+      setAgendamento(prev => ({ ...prev, cpf: cpfFormatted }))
+      fetchPatient()
+    }else if(name==='convenio'){
+      setAgendamento({...agendamento,insurance_provider:value})
+    }else if(name ==='profissional'){
+     
+
+      const fetchDoctor = async () => {
+        let DoctorData =  await GetDoctorByName(value, authHeader)
+        if(DoctorData){
+         setAgendamento((prev) => ({
+                      ...prev,
+                      doctor_id:DoctorData.id
+                    }))
+      }}
+      fetchDoctor()
     }
     else{
-    setPaciente({...paciente,[name]:value})
+    setAgendamento({...agendamento,[name]:value})
     }
   }
 
   const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
+    onSave(agendamento)
   };
 
   return (
@@ -180,57 +99,33 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
           <div className="campo-de-input">
             <label>Nome *</label>
-            <input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
+            <input type="text" name="nome" value={agendamento.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
           </div>
 
           <div className="campo-de-input">
             <label>CPF do paciente</label>
             
-               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
+               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={handleChange}  value={agendamento.cpf}/>
            
           </div>
 
-          <div className="campo-de-input">
-            <label>RG</label>
-            <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
-          </div>
+         
       </div>
 
-      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
-          <div className="campo-de-input">
-            <label>Data de nascimento *</label>
-            <input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
-          </div>
-
-          <div className="campo-de-input">
-            <label>Telefone</label>
-            <input type="tel" name="telefone" placeholder="(99) 99999-9999" value={paciente.contato?.telefone1} onChange={handleChange} />
-          </div>
-
-          <div className="campo-de-input">
-            <label>E-mail</label>
-            <input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
-          </div>
-      </div>
+     
 
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
        
         <div className="campo-de-input">
           <label>Convênio</label>
-          <select name="convenio">
-            <option value="particular">Particular</option>
+          <select name="convenio" onChange={handleChange}>
             <option value="publico">Público</option>
+            <option value="unimed">Unimed</option>
+            <option value="bradesco_saude">Bradesco Saúde</option>
+            <option value="hapvida">Hapvida</option>
           </select>
         </div>
-        <div className="campo-de-input">
-          <label>Matrícula</label>
-          <input type="text" name="matricula" placeholder="000000000" />
-        </div>
-    
-        <div className="campo-de-input">
-        <label>Validade</label>
-          <input type="date" name="validade" />
-        </div>
+        
       </div>
 
         <h3 className="section-subtitle">Informações adicionais</h3>
@@ -243,7 +138,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
             onChange={(e) => setSelectedFile(e.target.files[0])}
           />
           {selectedFile && (
-            <button type="button" className="btn btn-primary ms-2" onClick={handleUpload}>
+            <button type="button" className="btn btn-primary ms-2" >
               Enviar
             </button>
           )}
@@ -291,7 +186,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
             
             <div className="campo-de-input">
               <label>Nome do profissional *</label>
-              <input type="text" name="profissional" required />
+              <input type="text" name="profissional" onChange={handleChange} value={agendamento.nome_medico}required />
             </div>
           
 
diff --git a/src/components/utils/Functions-Endpoints/Doctor.js b/src/components/utils/Functions-Endpoints/Doctor.js
index 2d6046f9..0aa4f437 100644
--- a/src/components/utils/Functions-Endpoints/Doctor.js
+++ b/src/components/utils/Functions-Endpoints/Doctor.js
@@ -23,4 +23,36 @@ return DictMedico
 
 }
 
-export {GetDoctorByID}
\ No newline at end of file
+const GetAllDoctors = async (authHeader) => {
+    var myHeaders = new Headers();
+  myHeaders.append("apikey", API_KEY);
+  myHeaders.append("Authorization", authHeader);
+
+  var requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow'
+  };
+
+  const result = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
+  const DictMedicos = await result.json()
+  return DictMedicos  
+  }
+
+
+const GetDoctorByName = async (nome, authHeader) => {
+  const Medicos = await GetAllDoctors(authHeader)
+      
+     for (let i = 0; i < Medicos.length; i++) {
+
+         if (Medicos[i].full_name === nome) {
+            console.log('Medico encontrado:', Medicos[i]);
+             return Medicos[i];
+         }
+         else{console.log("nada encontrado")}
+     }
+   
+
+}
+
+export {GetDoctorByID, GetDoctorByName}
\ No newline at end of file
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index d693cfee..c99ef275 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -1,23 +1,81 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
+import API_KEY from '../components/utils/apiKeys.js';
 
 import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
-
+import { useAuth } from '../components/utils/AuthProvider.js';
 // ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
 import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
 
+
 import dayjs from 'dayjs';
 import "./style/Agendamento.css";
 import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
-  const [FiladeEspera, setFiladeEspera] = useState(false);
+    const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
   const [PageNovaConsulta, setPageConsulta] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [agendamentos, setAgendamentos] = useState()
+  const {getAuthorizationHeader} = useAuth()
+
+  let authHeader = getAuthorizationHeader() 
+
+  const handleSave = (Dict) => {
+    let DataAtual = dayjs()
+    var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("Content-Type", "application/json");
+
+var raw = JSON.stringify({
+   "patient_id": Dict.patient_id,
+   "doctor_id": Dict.doctor_id,
+   "scheduled_at": DataAtual,
+   "duration_minutes": 30,
+   "appointment_type": "presencial",
+   "chief_complaint": "Dor de cabeça há 3 ",
+   "patient_notes": "Prefiro horário pela manhã",
+   "insurance_provider": "Unimed",
+   "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
+});
+
+var requestOptions = {
+   method: 'POST',
+   headers: myHeaders,
+   body: raw,
+   redirect: 'follow'
+};
+
+fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
+   .then(response => response.text())
+   .then(result => console.log(result))
+   .catch(error => console.log('error', error));
+
+  }
+
+  // Requisição inicial para mnostrar os agendamentos do banco de dados
+  useEffect(() => {
+        var myHeaders = new Headers();
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("apikey", API_KEY)
+
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
+      .then(response => response.json())
+      .then(result => setAgendamentos(result))
+      .catch(error => console.log('error', error));
+  }, [])
+
 
   // Dados da fila de espera (sem alteração)
   const filaEsperaData = [
@@ -216,7 +274,7 @@ const Agendamento = () => {
           </section>
         </div>
       ) : (
-        <FormNovaConsulta onCancel={handleClickCancel} />
+        <FormNovaConsulta onCancel={handleClickCancel} onSave={handleSave} />
       )}
     </div>
   )

From b949971a28e2578a3144c844e01f8dbb0793caef Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Fri, 10 Oct 2025 15:48:08 -0300
Subject: [PATCH 2/5] =?UTF-8?q?Come=C3=A7o=20da=20cria=C3=A7=C3=A3o=20de?=
 =?UTF-8?q?=20mostrar=20as=20consultas=20separadas=20por=20dias?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Agendamento.jsx | 137 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 135 insertions(+), 2 deletions(-)

diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index c99ef275..2c85001b 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -16,15 +16,148 @@ import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
+  // Dados mocados para simular consultas com a API de Hugo
+  const Agendamentos = [
+  {
+    id: "9d5c7233-0437-4283-84cd-668714b1c6af",
+    order_number: "APT-2025-0001",
+    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "presencial",
+    cancellation_reason: null,
+    cancelled_at: null,
+    checked_in_at: null,
+    chief_complaint: "Dor de cabeça há 3",
+    completed_at: null,
+    created_at: "2025-10-10T15:56:59.112231+00:00",
+    created_by: "87f2662c-9da7-45c0-9e05-521d9d92d105",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 30,
+    insurance_provider: "Unimed",
+    notes: null,
+    patient_notes: "Prefiro horário pela manhã",
+    scheduled_at: "2025-10-10T15:56:58.937+00:00",
+    status: "requested",
+    updated_at: "2025-10-10T15:56:59.112231+00:00",
+    updated_by: null
+  },
+  // mesma data
+  {
+    id: "c8d87a3a-f221-4e88-a71e-947c03f3a9c2",
+    order_number: "APT-2025-0002",
+    patient_id: "4b102ada-7d04-480a-a759-bae8a211973b",
+    appointment_type: "presencial",
+    chief_complaint: "Retorno de consulta",
+    created_at: "2025-10-10T09:30:00.000+00:00",
+    scheduled_at: "2025-10-10T09:30:00.000+00:00",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 45,
+    insurance_provider: "Amil",
+    status: "requested"
+  },
+  // dia anterior 1
+  {
+    id: "a3b77a12-1f11-45f8-912b-99372cd6a711",
+    order_number: "APT-2025-0003",
+    patient_id: "57902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "teleconsulta",
+    chief_complaint: "Tosse persistente",
+    created_at: "2025-10-09T10:15:00.000+00:00",
+    scheduled_at: "2025-10-09T10:15:00.000+00:00",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 20,
+    insurance_provider: "Bradesco Saúde",
+    status: "confirmed"
+  },
+  // dia anterior 2
+  {
+    id: "f77a42e1-b1a3-41af-8b4f-b92e8372bb20",
+    order_number: "APT-2025-0004",
+    patient_id: "5a902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "presencial",
+    chief_complaint: "Check-up anual",
+    created_at: "2025-10-09T14:00:00.000+00:00",
+    scheduled_at: "2025-10-09T14:00:00.000+00:00",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 60,
+    insurance_provider: "Unimed",
+    status: "requested"
+  },
+  // dia seguinte
+  {
+    id: "b832a7e3-7319-4c22-b17b-922a6d4a9287",
+    order_number: "APT-2025-0005",
+    patient_id: "6c902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "presencial",
+    chief_complaint: "Dor lombar",
+    created_at: "2025-10-11T11:45:00.000+00:00",
+    scheduled_at: "2025-10-11T11:45:00.000+00:00",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 30,
+    insurance_provider: "SulAmérica",
+    status: "requested"
+  },
+  // outro qualquer (para variedade)
+  {
+    id: "d112f76a-24a1-41de-8d03-9e8a20a73b54",
+    order_number: "APT-2025-0006",
+    patient_id: "78902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "teleconsulta",
+    chief_complaint: "Acompanhamento pós-cirurgia",
+    created_at: "2025-10-10T18:00:00.000+00:00",
+    scheduled_at: "2025-10-10T18:00:00.000+00:00",
+    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    duration_minutes: 25,
+    insurance_provider: "Unimed",
+    status: "requested"
+  }
+];
+
+
+
     const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
   const [PageNovaConsulta, setPageConsulta] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [agendamentos, setAgendamentos] = useState()
   const {getAuthorizationHeader} = useAuth()
+   const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
+
+  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
+
 
   let authHeader = getAuthorizationHeader() 
 
+
+  // id do doutor
+  // dias
+
+  const FiltrarAgendamentos = (listaTodosAgendamentos) => {
+   
+      
+  // cria um dicionário temporário
+  let DictAgendamentosOrganizados = {};
+
+  for (let i = 0; i < listaTodosAgendamentos.length; i++) {
+    const agendamento = listaTodosAgendamentos[i];
+    const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
+
+    console.log(DictAgendamentosOrganizados)
+
+    if (DiaAgendamento in DictAgendamentosOrganizados) {
+      // já existe a data → adiciona na lista
+      DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
+    } else {
+      // não existe → cria nova key com uma lista
+      DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
+    }
+  }
+
+  // faz o set de uma vez só ✅
+  setAgendamentosOrganizados(DictAgendamentosOrganizados);
+
+
+  }
+
   const handleSave = (Dict) => {
     let DataAtual = dayjs()
     var myHeaders = new Headers();
@@ -58,7 +191,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
 
   }
 
-  // Requisição inicial para mnostrar os agendamentos do banco de dados
+  // Requisição inicial para mostrar os agendamentos do banco de dados
   useEffect(() => {
         var myHeaders = new Headers();
     myHeaders.append("Authorization", authHeader);
@@ -72,7 +205,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
 
     fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
       .then(response => response.json())
-      .then(result => setAgendamentos(result))
+      .then(result => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos)})
       .catch(error => console.log('error', error));
   }, [])
 

From 39a78db8c5c0eb7f8ca7a5a0292a4276f884d7ee Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Mon, 13 Oct 2025 15:49:38 -0300
Subject: [PATCH 3/5] =?UTF-8?q?Fun=C3=A7=C3=A3o=20do=20agendamento=20GET?=
 =?UTF-8?q?=20para=20semana?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgendarConsulta/CardConsulta.jsx          |  26 ++-
 .../AgendarConsulta/TabelaAgendamentoDia.jsx  |  24 +-
 .../TabelaAgendamentoSemana.jsx               | 206 +++++++++++++++---
 .../utils/Functions-Endpoints/Doctor.js       |   2 -
 .../utils/Functions-Endpoints/Patient.js      |   2 -
 src/pages/Agendamento.jsx                     |  65 +++---
 src/pages/DoctorTable.jsx                     |   2 +-
 src/pages/PatientCadastroManager.jsx          |   1 -
 src/pages/TablePaciente.jsx                   |   4 +-
 9 files changed, 253 insertions(+), 79 deletions(-)

diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx
index 250a534d..f0cdd463 100644
--- a/src/components/AgendarConsulta/CardConsulta.jsx
+++ b/src/components/AgendarConsulta/CardConsulta.jsx
@@ -1,10 +1,24 @@
-import React from 'react'
-
+import React, { useState, useEffect } from 'react';import { GetDoctorByID } from '../utils/Functions-Endpoints/Doctor';
+import { GetPatientByID } from '../utils/Functions-Endpoints/Patient';
+import { useAuth } from '../utils/AuthProvider';
 const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
+  const {getAuthorizationHeader} = useAuth()
+  const authHeader = getAuthorizationHeader()
+  const [Paciente, setPaciente] = useState()
+  const [Medico, setMedico] = useState()
 
-
+  const BuscarMedicoEPaciente = async () => { 
+    const Doctor = await GetDoctorByID(DadosConsulta.doctor_id, authHeader)
+    const Patient = await GetPatientByID(DadosConsulta.patient_id, authHeader)
+    setMedico(Doctor[0])
+    setPaciente(Patient[0])
+    console.log(Doctor, Patient)
+  }
+   
   // Status (agendado, confirmado, realizado, cancelado)
-
+  useEffect(() => {
+ BuscarMedicoEPaciente()
+}, [])
 
   return (
     <div className={`container-cardconsulta-${TabelaAgendamento}`}>
@@ -12,11 +26,11 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
       {DadosConsulta.status !== 'vazio'?
       <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
       <section className='cardconsulta-infosecundaria'>
-        <p>{DadosConsulta.horario}|GEAP| {DadosConsulta.medico}</p>
+        <p>{DadosConsulta.horario}|GEAP| {Medico?.full_name}</p>
       </section>
 
       <section className='cardconsulta-infoprimaria'>
-        <p>{DadosConsulta.paciente} - {DadosConsulta.motivo} - 23 anos</p>
+        <p>{Paciente?.full_name} - {DadosConsulta.exam}</p>
       </section>
       </div>
       : 
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
index da73a5af..15cca203 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
@@ -1,14 +1,32 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
-
 const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
+  const [indiceAcesso, setIndiceAcesso] = useState(0)
+  const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
   const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
 
+  let ListaDiasComAgendamentos = Object.keys(agendamentos)
+
+  
+
+  console.log(Dia, "hshdhshhsdhs")
+
+  useEffect(() => {
+    setDia(ListaDiasComAgendamentos[indiceAcesso])
+  }, [indiceAcesso])
+  
+
+
   return (
     <div>
+        <div>
+                <button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}>voltar</button>
+                <p>{Dia}</p>
+                <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>Avançar</button>
+              </div>
       <table className='tabeladiaria'>
         <thead>
           <tr>
@@ -18,7 +36,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
         </thead>
 
         <tbody>
-          {agendamentosDoDia.map((agendamento, index) => (
+          {agendamentos[Dia]?.map((agendamento, index) => (
             <tr key={index}>
               <td><p>{agendamento.horario}</p></td>
               <td className='mostrar-horario'>
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
index 3f3c2b61..82f26bbf 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
@@ -1,31 +1,151 @@
 import React from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabelasemana.css";
+import dayjs from 'dayjs';
+import { useEffect, useState, useMemo } from 'react';
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+dayjs.extend(weekOfYear)
 
+const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
 
-const TabelaAgendamentoSemana = ({ agendamentos }) => {
+  // Armazena o objeto COMPLETO das semanas organizadas
+  const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
+  // Controla qual semana está sendo exibida (o índice da chave no objeto)
+  const [Indice, setIndice] = useState(0); 
 
+  const dataHoje = dayjs();
+  const AnoAtual = dataHoje.year();
+  const mes = dataHoje.month() + 1;
+
+  let DiasdoMes = ListarDiasdoMes(AnoAtual, mes)
+  
+  // Array de chaves (ex: ['semana40', 'semana41', ...])
+  const chavesDasSemanas = Object.keys(semanasOrganizadas);
+
+  // Armazena o total de semanas que foram organizadas (para definir os limites de navegação)
+  const totalSemanas = chavesDasSemanas.length; 
+
+  // --- LÓGICA DE ORGANIZAÇÃO (useMemo mantido para otimização) ---
+
+  const OrganizarAgendamentosSemanais = useMemo(() => {
+    if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
+
+    const DiasComAtendimentos = Object.keys(agendamentos)
+    const semanas = {}
+
+    for (let i = 0; i < DiasComAtendimentos.length; i++) {
+      const DiaComAtendimento = DiasComAtendimentos[i]
+      const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
+
+      const data = dayjs(`${AnoAtual}-${MesDoAgendamento}-${DiaDoAgendamento}`)
+      const diaSemana = data.format('dddd') 
+      const semanaKey = `semana${data.week()}`
+
+      if (!semanas[semanaKey]) {
+        semanas[semanaKey] = {
+          segunda: [], terça: [], quarta: [], quinta: [], sexta: []
+        }
+      }
+
+      switch (diaSemana) {
+        case 'Monday':
+          semanas[semanaKey].segunda.push(...agendamentos[DiaComAtendimento])
+          break
+        case 'Tuesday':
+          semanas[semanaKey].terça.push(...agendamentos[DiaComAtendimento])
+          break
+        case 'Wednesday':
+          semanas[semanaKey].quarta.push(...agendamentos[DiaComAtendimento])
+          break
+        case 'Thursday':
+          semanas[semanaKey].quinta.push(...agendamentos[DiaComAtendimento])
+          break
+        case 'Friday':
+          semanas[semanaKey].sexta.push(...agendamentos[DiaComAtendimento])
+          break
+        default:
+          break
+      }
+    }
+
+    return semanas
+  }, [agendamentos, AnoAtual]) // Adicionei AnoAtual como dependência por segurança
+
+  // --- EFEITO PARA POPULAR O ESTADO ---
+
+  useEffect(() => {
+    setSemanasOrganizadas(OrganizarAgendamentosSemanais);
+    // NOTA: Ao carregar, o Indice é 0, que é a primeira semana.
+  }, [OrganizarAgendamentosSemanais])
+
+  // --- NOVAS FUNÇÕES DE NAVEGAÇÃO ---
+
+  const avancarSemana = () => {
+    // Avança se o índice atual não for o último (totalSemanas - 1)
+    if (Indice < totalSemanas - 1) {
+      setIndice(Indice + 1);
+    }
+  };
+
+  const voltarSemana = () => {
+    // Volta se o índice atual não for o primeiro (0)
+    if (Indice > 0) {
+      setIndice(Indice - 1);
+    }
+  };
  
-  const agendamentoSemana = agendamentos?.semana1 || {};
-
   
-  const agendamentosDeSegunda = agendamentoSemana.segunda || [];
-  const agendamentosDeTerca = agendamentoSemana.terca || [];
-  const agendamentosDeQuarta = agendamentoSemana.quarta || [];
-  const agendamentosDeQuinta = agendamentoSemana.quinta || [];
-  const agendamentosDeSexta = agendamentoSemana.sexta || [];
+  // --- PREPARAÇÃO DOS DADOS PARA RENDERIZAÇÃO ---
 
-  
+  // Pega a chave da semana que deve ser exibida (usa o estado Indice)
+  const chaveDaSemanaAtual = chavesDasSemanas[Indice];
+
+  // Extrai os agendamentos da semana atual (ou um objeto vazio se não existir)
+  const semanaParaRenderizar = semanasOrganizadas[chaveDaSemanaAtual] || {
+    segunda: [], terça: [], quarta: [], quinta: [], sexta: []
+  };
+
+  // Determina o número máximo de linhas/consultas
   const numLinhas = Math.max(
-    agendamentosDeSegunda.length,
-    agendamentosDeTerca.length,
-    agendamentosDeQuarta.length,
-    agendamentosDeQuinta.length,
-    agendamentosDeSexta.length
+    semanaParaRenderizar.segunda.length,
+    semanaParaRenderizar.terça.length,
+    semanaParaRenderizar.quarta.length,
+    semanaParaRenderizar.quinta.length,
+    semanaParaRenderizar.sexta.length
   );
 
+  // Array de índices para iterar sobre as LINHAS da tabela
+  const indicesDeLinha = Array.from({ length: numLinhas }, (_, i) => i);
+  
+  // Título da semana (para mostrar ao usuário)
+  const tituloSemana = chaveDaSemanaAtual 
+    ? `Semana ${chaveDaSemanaAtual.replace('semana', '')} / ${AnoAtual}` 
+    : 'Nenhuma semana encontrada';
+
+  // --- RENDERIZAÇÃO ---
   return (
     <div>
+      {/* Container de Navegação */}
+      <div className='navegacao-semanal' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+        
+        <button 
+          onClick={voltarSemana} 
+          disabled={Indice === 0} // Desabilita se for a primeira semana
+        >
+          &lt; Voltar
+        </button>
+
+        <h2>{tituloSemana}</h2>
+
+        <button 
+          onClick={avancarSemana} 
+          disabled={Indice === totalSemanas - 1 || totalSemanas === 0} // Desabilita se for a última semana ou se não houver semanas
+        >
+          Avançar &gt;
+        </button>
+      </div>
+
+      {/* Tabela de Agendamentos */}
       <table className='tabelasemanal'>
         <thead>
           <tr>
@@ -38,28 +158,44 @@ const TabelaAgendamentoSemana = ({ agendamentos }) => {
           </tr>
         </thead>
         <tbody>
-          {Array.from({ length: numLinhas }).map((_, index) => {
-            
-            const consultaSeg = agendamentosDeSegunda[index];
-            const consultaTer = agendamentosDeTerca[index];
-            const consultaQua = agendamentosDeQuarta[index];
-            const consultaQui = agendamentosDeQuinta[index];
-            const consultaSex = agendamentosDeSexta[index];
+          {indicesDeLinha.map((indiceLinha) => (
+            <tr key={indiceLinha}>
+              {/* Célula para Horário (Pode ser ajustado para mostrar o horário real) */}
+              <td></td> 
 
-            
-            const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;
-
-            return (
-              <tr key={index}>
-                <td>{horarioDaLinha}</td>
-                <td>{consultaSeg && <CardConsulta DadosConsulta={consultaSeg} />}</td>
-                <td>{consultaTer && <CardConsulta DadosConsulta={consultaTer} />}</td>
-                <td>{consultaQua && <CardConsulta DadosConsulta={consultaQua} />}</td>
-                <td>{consultaQui && <CardConsulta DadosConsulta={consultaQui} />}</td>
-                <td>{consultaSex && <CardConsulta DadosConsulta={consultaSex} />}</td>
-              </tr>
-            );
-          })}
+              {/* Mapeamento de COLUNAS (dias) */}
+              <td>
+                {semanaParaRenderizar.segunda[indiceLinha] 
+                  ? <CardConsulta DadodsConsulta={semanaParaRenderizar.segunda[indiceLinha]} />
+                  : null
+                }
+              </td>
+              <td>
+                {semanaParaRenderizar.terça[indiceLinha]
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} />
+                  : null
+                }
+              </td>
+              <td>
+                {semanaParaRenderizar.quarta[indiceLinha]
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} />
+                  : null
+                }
+              </td>
+              <td>
+                {semanaParaRenderizar.quinta[indiceLinha]
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} />
+                  : null
+                }
+              </td>
+              <td>
+                {semanaParaRenderizar.sexta[indiceLinha]
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} />
+                  : null
+                }
+              </td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>
diff --git a/src/components/utils/Functions-Endpoints/Doctor.js b/src/components/utils/Functions-Endpoints/Doctor.js
index 0aa4f437..d3c0e28e 100644
--- a/src/components/utils/Functions-Endpoints/Doctor.js
+++ b/src/components/utils/Functions-Endpoints/Doctor.js
@@ -4,8 +4,6 @@ import API_KEY from "../apiKeys";
 
 const GetDoctorByID = async (ID,authHeader) => {
 
-  console.log(authHeader, 'mostrando autorização dentro da função')
-
   var myHeaders = new Headers();
   myHeaders.append('apikey', API_KEY)
   myHeaders.append('Authorization', authHeader)
diff --git a/src/components/utils/Functions-Endpoints/Patient.js b/src/components/utils/Functions-Endpoints/Patient.js
index ad848545..14cbfd6c 100644
--- a/src/components/utils/Functions-Endpoints/Patient.js
+++ b/src/components/utils/Functions-Endpoints/Patient.js
@@ -4,8 +4,6 @@ import API_KEY from "../apiKeys";
 
 const GetPatientByID = async (ID,authHeader) => {
 
-  console.log(authHeader, 'mostrando autorização dentro da função')
-
   var myHeaders = new Headers();
   myHeaders.append('apikey', API_KEY)
   myHeaders.append('Authorization', authHeader)
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index 2c85001b..cc0bebf7 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -19,9 +19,9 @@ const Agendamento = () => {
   // Dados mocados para simular consultas com a API de Hugo
   const Agendamentos = [
   {
-    id: "9d5c7233-0437-4283-84cd-668714b1c6af",
+    id: "",
     order_number: "APT-2025-0001",
-    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
+    patient_id: "a8039e6d-7271-4187-a719-e27d9c6d15b3",
     appointment_type: "presencial",
     cancellation_reason: null,
     cancelled_at: null,
@@ -30,7 +30,7 @@ const Agendamento = () => {
     completed_at: null,
     created_at: "2025-10-10T15:56:59.112231+00:00",
     created_by: "87f2662c-9da7-45c0-9e05-521d9d92d105",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
     duration_minutes: 30,
     insurance_provider: "Unimed",
     notes: null,
@@ -42,74 +42,85 @@ const Agendamento = () => {
   },
   // mesma data
   {
-    id: "c8d87a3a-f221-4e88-a71e-947c03f3a9c2",
+    id: "",
     order_number: "APT-2025-0002",
-    patient_id: "4b102ada-7d04-480a-a759-bae8a211973b",
+    patient_id: "becd4c18-042e-44ad-9bcb-cfef08f18046",
     appointment_type: "presencial",
     chief_complaint: "Retorno de consulta",
     created_at: "2025-10-10T09:30:00.000+00:00",
     scheduled_at: "2025-10-10T09:30:00.000+00:00",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
     duration_minutes: 45,
     insurance_provider: "Amil",
     status: "requested"
   },
   // dia anterior 1
   {
-    id: "a3b77a12-1f11-45f8-912b-99372cd6a711",
+    id: "",
     order_number: "APT-2025-0003",
-    patient_id: "57902ada-7d04-480a-a759-bae8a211973a",
+    patient_id: "e17e2bc6-6a90-4dc6-ae2d-b503e2835d36",
     appointment_type: "teleconsulta",
     chief_complaint: "Tosse persistente",
     created_at: "2025-10-09T10:15:00.000+00:00",
     scheduled_at: "2025-10-09T10:15:00.000+00:00",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
     duration_minutes: 20,
     insurance_provider: "Bradesco Saúde",
     status: "confirmed"
   },
   // dia anterior 2
   {
-    id: "f77a42e1-b1a3-41af-8b4f-b92e8372bb20",
+    id: "",
     order_number: "APT-2025-0004",
-    patient_id: "5a902ada-7d04-480a-a759-bae8a211973a",
+    patient_id: "d20e418f-6e45-495a-98be-16a9a163fab3",
     appointment_type: "presencial",
     chief_complaint: "Check-up anual",
     created_at: "2025-10-09T14:00:00.000+00:00",
     scheduled_at: "2025-10-09T14:00:00.000+00:00",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
     duration_minutes: 60,
     insurance_provider: "Unimed",
     status: "requested"
   },
   // dia seguinte
   {
-    id: "b832a7e3-7319-4c22-b17b-922a6d4a9287",
+    id: "",
     order_number: "APT-2025-0005",
-    patient_id: "6c902ada-7d04-480a-a759-bae8a211973a",
+    patient_id: "8f27e87d-851a-484a-8450-6e3a5f29476c",
     appointment_type: "presencial",
     chief_complaint: "Dor lombar",
     created_at: "2025-10-11T11:45:00.000+00:00",
-    scheduled_at: "2025-10-11T11:45:00.000+00:00",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    scheduled_at: "2025-10-08T11:45:00.000+00:00",
+    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
     duration_minutes: 30,
     insurance_provider: "SulAmérica",
     status: "requested"
   },
   // outro qualquer (para variedade)
   {
-    id: "d112f76a-24a1-41de-8d03-9e8a20a73b54",
+    id: "",
     order_number: "APT-2025-0006",
-    patient_id: "78902ada-7d04-480a-a759-bae8a211973a",
+    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
     appointment_type: "teleconsulta",
     chief_complaint: "Acompanhamento pós-cirurgia",
     created_at: "2025-10-10T18:00:00.000+00:00",
     scheduled_at: "2025-10-10T18:00:00.000+00:00",
-    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
+    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
     duration_minutes: 25,
     insurance_provider: "Unimed",
     status: "requested"
-  }
+  }, { id: "",
+    order_number: "APT-2025-0006",
+    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
+    appointment_type: "teleconsulta",
+    chief_complaint: "Acompanhamento pós-cirurgia",
+    created_at: "2025-10-10T18:00:00.000+00:00",
+    scheduled_at: "2025-10-24T18:00:00.000+00:00",
+    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
+    duration_minutes: 25,
+    insurance_provider: "Unimed",
+    status: "requested"}
+
 ];
 
 
@@ -155,7 +166,6 @@ const Agendamento = () => {
   // faz o set de uma vez só ✅
   setAgendamentosOrganizados(DictAgendamentosOrganizados);
 
-
   }
 
   const handleSave = (Dict) => {
@@ -190,9 +200,9 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
    .catch(error => console.log('error', error));
 
   }
-
   // Requisição inicial para mostrar os agendamentos do banco de dados
   useEffect(() => {
+    
         var myHeaders = new Headers();
     myHeaders.append("Authorization", authHeader);
     myHeaders.append("apikey", API_KEY)
@@ -205,11 +215,12 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
 
     fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
       .then(response => response.json())
-      .then(result => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos)})
+      .then(result => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos, "aqui")})
       .catch(error => console.log('error', error));
   }, [])
 
 
+
   // Dados da fila de espera (sem alteração)
   const filaEsperaData = [
     { nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
@@ -267,7 +278,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
         default: break
       }
     }
-    let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
+    let ListaDiasDatas = {segundas:segundas,tercas:tercas,quartas: quartas,quintas: quintas,sextas: sextas}
     return ListaDiasDatas
   }
 
@@ -360,9 +371,9 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
                       </div>
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
-                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
-                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados}  />}
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes}/>}
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} />}
                   </div>
                 </div>
               )
diff --git a/src/pages/DoctorTable.jsx b/src/pages/DoctorTable.jsx
index 019f7f74..47d9aacb 100644
--- a/src/pages/DoctorTable.jsx
+++ b/src/pages/DoctorTable.jsx
@@ -71,7 +71,7 @@ function TableDoctor() {
 
   fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
     .then(response => response.json())
-    .then(result => setMedicos(result))
+    .then(result => {setMedicos(result); console.log(result)})
     .catch(error => console.log('error', error));
   }, []);
 
diff --git a/src/pages/PatientCadastroManager.jsx b/src/pages/PatientCadastroManager.jsx
index 701e6b5b..4672f813 100644
--- a/src/pages/PatientCadastroManager.jsx
+++ b/src/pages/PatientCadastroManager.jsx
@@ -171,7 +171,6 @@ function PatientCadastroManager( {setCurrentPage} ) {
       });
       setShowModal(true);
       
-  
       setTimeout(() => {
         setShowModal(false);
         navigate('/secretaria/pacientes');
diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx
index a82e63d1..4386b1dc 100644
--- a/src/pages/TablePaciente.jsx
+++ b/src/pages/TablePaciente.jsx
@@ -102,7 +102,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
       const authHeader = getAuthorizationHeader()
 
-      console.log(authHeader, 'aqui autorização')
+      console.log(authHeader)
 
     var myHeaders = new Headers();
   myHeaders.append("apikey", API_KEY);
@@ -115,7 +115,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
     .then(response => response.json())
-    .then(result => setPacientes(result))
+    .then(result => {setPacientes(result); console.log(result)})
     .catch(error => console.log('error', error));
   }, [isAuthenticated, getAuthorizationHeader]);
 

From cc37ea60daee0206ff1f3af6a18ecd4d6c211bba Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Wed, 15 Oct 2025 09:34:32 -0300
Subject: [PATCH 4/5] =?UTF-8?q?Finaliza=C3=A7=C3=A3o=20das=20agendas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgendarConsulta/CardConsulta.jsx          |   8 +-
 .../AgendarConsulta/TabelaAgendamentoMes.jsx  | 293 ++++++++++++------
 .../style/styleTabelas/tabelames.css          |   4 +
 3 files changed, 201 insertions(+), 104 deletions(-)

diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx
index f0cdd463..accb6ccc 100644
--- a/src/components/AgendarConsulta/CardConsulta.jsx
+++ b/src/components/AgendarConsulta/CardConsulta.jsx
@@ -17,16 +17,18 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
    
   // Status (agendado, confirmado, realizado, cancelado)
   useEffect(() => {
- BuscarMedicoEPaciente()
+    if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()}
+ 
 }, [])
 
+
   return (
-    <div className={`container-cardconsulta-${TabelaAgendamento}`}>
+    <div className={`container-cardconsulta-${TabelaAgendamento}`} onClick={() => console.log('Clicou n aconsulta')}>
 
       {DadosConsulta.status !== 'vazio'?
       <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
       <section className='cardconsulta-infosecundaria'>
-        <p>{DadosConsulta.horario}|GEAP| {Medico?.full_name}</p>
+        <p>{DadosConsulta.horario} {Medico?.full_name}</p>
       </section>
 
       <section className='cardconsulta-infoprimaria'>
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
index 7e404084..616c4013 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
@@ -3,7 +3,8 @@ import React from 'react';
 import dayjs from "dayjs";
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabelames.css";
-
+import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
@@ -12,15 +13,174 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
   const mes = dataHoje.month() + 1;
 
   let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
+  const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({})
+  const [indice, setIndice] = useState("10")
 
-  let segundas = ListaDiasDatas[0];
-  let tercas = ListaDiasDatas[1];
-  let quartas = ListaDiasDatas[2];
-  let quintas = ListaDiasDatas[3];
-  let sextas = ListaDiasDatas[4];
+  const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({
+  "01": { "nomeDoMes": "janeiro" },
+  "02": { "nomeDoMes": "fevereiro" },
+  "03": { "nomeDoMes": "março" },
+  "04": { "nomeDoMes": "abril" },
+  "05": { "nomeDoMes": "maio" },
+  "06": { "nomeDoMes": "junho" },
+  "07": { "nomeDoMes": "julho" },
+  "08": { "nomeDoMes": "agosto" },
+  "09": { "nomeDoMes": "setembro" },
+  "10": { "nomeDoMes": "outubro" },
+  "11": { "nomeDoMes": "novembro" },
+  "12": { "nomeDoMes": "dezembro" }
+})
+
+
+  
+
+   const OrganizarAgendamentosSemanais = useMemo(() => {
+      if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
+  
+      const DiasComAtendimentos = Object.keys(agendamentos)
+      const semanas = {}
+
+  
+      for (let i = 0; i < DiasComAtendimentos.length; i++) {
+        const DiaComAtendimento = DiasComAtendimentos[i]
+        const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
+  
+        const data = dayjs(`${AnoAtual}-${MesDoAgendamento}-${DiaDoAgendamento}`)
+        const diaSemana = data.format('dddd') 
+        const semanaKey = `semana${data.week()}`
+  
+        if (!semanas[semanaKey]) {
+          semanas[semanaKey] = {
+            segunda: [], terça: [], quarta: [], quinta: [], sexta: []
+          }
+        }
+  
+        switch (diaSemana) {
+          case 'Monday':
+            semanas[semanaKey].segunda.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Tuesday':
+            semanas[semanaKey].terça.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Wednesday':
+            semanas[semanaKey].quarta.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Thursday':
+            semanas[semanaKey].quinta.push(...agendamentos[DiaComAtendimento])
+            break
+          case 'Friday':
+            semanas[semanaKey].sexta.push(...agendamentos[DiaComAtendimento])
+            break
+          default:
+            break
+        }
+      }
+  
+      return semanas
+    }, [agendamentos, AnoAtual])
+
+     useEffect(() => {
+       setAgendamentosSemanaisOrganizados(OrganizarAgendamentosSemanais);
+      
+
+        // NOTA: Ao carregar, o Indice é 0, que é a primeira semana.
+      }, [OrganizarAgendamentosSemanais])
+
+      useEffect(() => {
+        console.log(OrganizarAgendamentosMensais)
+        
+
+      }, [])
+
+      useEffect(() => {
+        console.log(AgendamentosMensaisOrganizados, 'aqui os agendamentos mensais')
+      }, [AgendamentosMensaisOrganizados])
+
+      const OrganizarAgendamentosMensais = useMemo(() => {
+  if (!AgendamentosSemanaisOrganizados || Object.keys(AgendamentosSemanaisOrganizados).length === 0)
+    return;
+
+  // Cria uma cópia local do estado atual
+  const novoEstado = { ...AgendamentosMensaisOrganizados };
+
+  const indices = Object.keys(AgendamentosSemanaisOrganizados);
+
+  for (let i = 0; i < indices.length; i++) {
+    const DictSemanais = AgendamentosSemanaisOrganizados[indices[i]];
+    const indicesDictSemanais = Object.keys(DictSemanais);
+
+    for (let d = 0; d < indicesDictSemanais.length; d++) {
+      const lista = DictSemanais[indicesDictSemanais[d]];
+
+      if (lista.length > 0) {
+        const [_, mesDaConsulta] = lista[0].scheduled_at.split("-");
+        
+        // Cria o mês se ainda não existir
+        if (!novoEstado[mesDaConsulta]) {
+          novoEstado[mesDaConsulta] = {
+            nomeDoMes: AgendamentosMensaisOrganizados[mesDaConsulta]?.nomeDoMes || "",
+          };
+        }
+
+        // Garante que a semana existe
+        novoEstado[mesDaConsulta][indices[i]] = {
+          ...novoEstado[mesDaConsulta][indices[i]],
+          ...DictSemanais,
+        };
+      }
+    }
+  }
+
+  // Faz o set de uma vez só
+  setAgendamentosMensaisOrganizados(novoEstado);
+}, [AgendamentosSemanaisOrganizados]);
+
+      const AvançarMes = () => {
+   let Indice = parseInt(indice)
+        Indice += 1        
+
+        console.log(Indice)
+        if(Indice < 10){
+          Indice = "0" + Indice.toString()
+          console.log(Indice)
+        }
+        if(Indice === 13){
+          return
+        }else{ 
+        setIndice(Indice)
+        }
+      }
+
+      const VoltarMes = () => {
+        let Indice = parseInt(indice)
+        
+        Indice -= 1
+
+        console.log(Indice)
+        if(Indice < 10){
+          Indice = "0" + Indice.toString()
+          console.log(Indice)
+        }
+        if(Indice === "00"){
+          return
+        }else{
+          
+        setIndice(Indice)
+        }
+
+
+      }
+  
 
   return (
     <div>
+      <div>
+        <button onClick={() => VoltarMes()}>voltar</button>
+          <p>{AgendamentosMensaisOrganizados[indice].nomeDoMes}</p>
+        
+        <button onClick={() => AvançarMes()}>Avançar</button>
+      </div>
+
       <table className='tabelamensal'>
         <thead>
           <tr>
@@ -32,105 +192,36 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
           </tr>
         </thead>
         <tbody>
-          {agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => (
-            <tr key={index}>
-              {/* Coluna de Segunda-feira */}
-              <td>
-                <div>
-                  <p>{segundas[index]}</p>
-                  <div>
-                    {(dias.segunda || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.segunda || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.segunda || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
+            {Object.keys(AgendamentosMensaisOrganizados[indice]).map((semanaKey) => {
+              const semana = AgendamentosMensaisOrganizados[indice][semanaKey]
+              console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh')
 
-              {/* Coluna de Terça-feira */}
-              <td>
-                <div>
-                  <p>{tercas[index]}</p>
-                  <div>
-                    {(dias.terca || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.terca || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.terca || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
+            
 
-              {/* Coluna de Quarta-feira */}
-              <td>
-                <div>
-                  <p>{quartas[index]}</p>
-                  <div>
-                    {(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.quarta || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.quarta || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
+              
 
-              {/* Coluna de Quinta-feira */}
-              <td>
-                <div>
-                  <p>{quintas[index]}</p>
-                  <div>
-                    {(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.quinta || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.quinta || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
+              return(
+               <tr key={semanaKey}>
+     
+      {
+        semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
+          <td key={dia} onClick={() => console.log('Clicou n aconsulta')}>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
+            {semana[dia].length > 3 ? (
+              <div>
+                <p>{` +${semana[dia].length - 2}`}</p>
+              </div>
 
-              {/* Coluna de Sexta-feira */}
-              <td>
-                <div>
-                  <p>{sextas[index]}</p>
-                  <div>
-                    {(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
-                      <CardConsulta
-                        key={idx}
-                        DadosConsulta={consulta}
-                        className={`usuario-${consulta.cor || "default"}`}
-                      />
-                    ))}
-                  </div>
-                  {(dias.sexta || []).length > 3 ?
-                    <div><p className='cards-que-faltam'>+ {(dias.sexta || []).length - 3}</p></div>
-                    : null}
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
+            ): null }
+          </td>
+        ))
+      }
+    </tr>
+
+              )})}
+            </tbody>
       </table>
     </div>
   )
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
index 5fbe05c0..b63f5e14 100644
--- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
@@ -219,4 +219,8 @@ html[data-bs-theme="dark"] .usuario-default {
 
 html[data-bs-theme="dark"] .cards-que-faltam {
   color: #90caf9;
+}
+
+th{
+  color: white;
 }
\ No newline at end of file

From 13e4064989fcc704adcb4653ca307e3fc59d1598 Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Wed, 15 Oct 2025 16:47:52 -0300
Subject: [PATCH 5/5] Melhorias no estilo

---
 .../AgendarConsulta/CardConsulta.jsx          |  89 ++++++--
 .../AgendarConsulta/FormNovaConsulta.jsx      |   8 +-
 .../AgendarConsulta/TabelaAgendamentoDia.jsx  |  10 +-
 .../AgendarConsulta/TabelaAgendamentoMes.jsx  |  20 +-
 .../TabelaAgendamentoSemana.jsx               |  13 +-
 .../style/styleTabelas/tabeladia.css          |   7 +-
 .../style/styleTabelas/tabelames.css          |   8 +-
 src/pages/Agendamento.jsx                     | 214 +++++-------------
 src/pages/AgendamentoCadastroManager.jsx      |  58 +++++
 src/pages/AgendamentoEditPage.jsx             |  70 ++++++
 src/pages/style/Agendamento.css               |  73 +++++-
 .../perfil_secretaria/PerfilSecretaria.jsx    |   4 +-
 12 files changed, 369 insertions(+), 205 deletions(-)
 create mode 100644 src/pages/AgendamentoCadastroManager.jsx
 create mode 100644 src/pages/AgendamentoEditPage.jsx

diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx
index accb6ccc..acd627c7 100644
--- a/src/components/AgendarConsulta/CardConsulta.jsx
+++ b/src/components/AgendarConsulta/CardConsulta.jsx
@@ -1,39 +1,86 @@
 import React, { useState, useEffect } from 'react';import { GetDoctorByID } from '../utils/Functions-Endpoints/Doctor';
 import { GetPatientByID } from '../utils/Functions-Endpoints/Patient';
 import { useAuth } from '../utils/AuthProvider';
-const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
+import { useNavigate } from 'react-router-dom';
+import { useMemo } from 'react';
+
+const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} ) => {
+  const navigate = useNavigate();
+
   const {getAuthorizationHeader} = useAuth()
   const authHeader = getAuthorizationHeader()
   const [Paciente, setPaciente] = useState()
   const [Medico, setMedico] = useState()
 
-  const BuscarMedicoEPaciente = async () => { 
-    const Doctor = await GetDoctorByID(DadosConsulta.doctor_id, authHeader)
-    const Patient = await GetPatientByID(DadosConsulta.patient_id, authHeader)
-    setMedico(Doctor[0])
-    setPaciente(Patient[0])
-    console.log(Doctor, Patient)
-  }
+  const ids = useMemo(() => {
+    return {
+      doctor_id: DadosConsulta?.doctor_id,
+      patient_id: DadosConsulta?.patient_id,
+      status: DadosConsulta?.status
+    };
+  }, [DadosConsulta]);
    
-  // Status (agendado, confirmado, realizado, cancelado)
-  useEffect(() => {
-    if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()}
- 
-}, [])
+  
+   useEffect(() => {
+    const BuscarMedicoEPaciente = async () => {
+      if (!ids.doctor_id || !ids.patient_id || ids.status === 'nada') return;
+
+      try {
+        const [Doctor, Patient] = await Promise.all([
+          GetDoctorByID(ids.doctor_id, authHeader),
+          GetPatientByID(ids.patient_id, authHeader)
+        ]);
+
+        setMedico(Doctor?.[0] || null);
+        setPaciente(Patient?.[0] || null);
+      } catch (error) {
+        console.error('Erro ao buscar médico/paciente:', error);
+      }
+    };
+
+    BuscarMedicoEPaciente();
+  }, [ids, authHeader]);
 
 
   return (
-    <div className={`container-cardconsulta-${TabelaAgendamento}`} onClick={() => console.log('Clicou n aconsulta')}>
+    <div className={`container-cardconsulta-${TabelaAgendamento}`}>
 
-      {DadosConsulta.status !== 'vazio'?
+      {DadosConsulta.id?
+      
       <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
-      <section className='cardconsulta-infosecundaria'>
-        <p>{DadosConsulta.horario} {Medico?.full_name}</p>
-      </section>
 
-      <section className='cardconsulta-infoprimaria'>
-        <p>{Paciente?.full_name} - {DadosConsulta.exam}</p>
-      </section>
+      <div>
+        <section className='cardconsulta-infosecundaria'>
+          <p>{DadosConsulta.horario} {Medico?.full_name}</p>
+        </section>
+
+        <section className='cardconsulta-infoprimaria'>
+          <p>{Paciente?.full_name} - {DadosConsulta.exam}</p>
+        </section>
+      </div>
+
+      <div className='container-botons'>        
+        <button className="btn btn-sm btn-edit-custom"
+            
+            onClick={() => {navigate(`${DadosConsulta.id}/edit`)}}
+          >
+            <i className="bi bi-pencil me-1"></i> Editar
+          </button>
+        
+
+           
+            <button
+              className="btn btn-sm btn-delete-custom"
+                            onClick={() => {
+                console.log(DadosConsulta.id)
+                              //setSelectedPatientId(DadosConsulta.id);
+               setShowDeleteModal(true);
+              }}
+            >
+              <i className="bi bi-trash me-1"></i> Excluir
+            </button>
+        </div>
+
       </div>
       : 
      null
diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
index d45e6596..bdae91d9 100644
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -5,13 +5,14 @@ import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
 import { GetDoctorByName } from "../utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../utils/AuthProvider";
 
-const FormNovaConsulta = ({ onCancel, onSave }) => {
+const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const {getAuthorizationHeader} = useAuth()
 
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
-  const [agendamento, setAgendamento] = useState({})
+  
+
   const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
 
   let authHeader = getAuthorizationHeader()
@@ -40,9 +41,6 @@ const FormNovaConsulta = ({ onCancel, onSave }) => {
   const handleChange = (e) => {
 
     const {value, name} = e.target;
-
-    console.log(value, name, agendamento)
-
     if(name === 'email'){
       setAgendamento({...agendamento, contato:{
         ...agendamento.contato,
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
index 15cca203..a248f234 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
-const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
+const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal }) => {
   const [indiceAcesso, setIndiceAcesso] = useState(0)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@@ -23,10 +23,12 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
   return (
     <div>
         <div>
-                <button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}>voltar</button>
+          <div id='tabela-seletor-container'>
+                <button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}> <i className="bi bi-chevron-compact-left"></i></button>
                 <p>{Dia}</p>
-                <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>Avançar</button>
+                <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>  <i className="bi bi-chevron-compact-right"></i></button>
               </div>
+            </div>
       <table className='tabeladiaria'>
         <thead>
           <tr>
@@ -41,7 +43,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
               <td><p>{agendamento.horario}</p></td>
               <td className='mostrar-horario'>
                 <div onClick={() => handleClickAgendamento(agendamento)}>
-                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
+                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} />
                 </div>
               </td>
             </tr>
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
index 616c4013..26dcb313 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
@@ -174,17 +174,18 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
   return (
     <div>
-      <div>
-        <button onClick={() => VoltarMes()}>voltar</button>
-          <p>{AgendamentosMensaisOrganizados[indice].nomeDoMes}</p>
-        
-        <button onClick={() => AvançarMes()}>Avançar</button>
+      <div >
+          <div id='tabela-seletor-container'>
+          <button onClick={() => VoltarMes()}><i className="bi bi-chevron-compact-left"></i></button>
+            <p>{AgendamentosMensaisOrganizados[indice].nomeDoMes}</p>
+          
+          <button onClick={() => AvançarMes()}> <i className="bi bi-chevron-compact-right"></i> </button>
+        </div>
       </div>
-
       <table className='tabelamensal'>
         <thead>
           <tr>
-            <th>Seg</th>
+            <td className='cabecalho-tabela'>Seg</td>
             <th>Ter</th>
             <th>Qua</th>
             <th>Qui</th>
@@ -196,16 +197,13 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
               const semana = AgendamentosMensaisOrganizados[indice][semanaKey]
               console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh')
 
-            
-
-              
 
               return(
                <tr key={semanaKey}>
      
       {
         semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
-          <td key={dia} onClick={() => console.log('Clicou n aconsulta')}>
+          <td key={dia} >
             <CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
             <CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
             <CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
index 82f26bbf..95a32380 100644
--- a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
+++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
@@ -126,22 +126,21 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
   return (
     <div>
       {/* Container de Navegação */}
-      <div className='navegacao-semanal' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+      <div id='tabela-seletor-container'>
         
         <button 
           onClick={voltarSemana} 
           disabled={Indice === 0} // Desabilita se for a primeira semana
         >
-          &lt; Voltar
+         <i className='bi bi-chevron-compact-left'></i>
         </button>
-
-        <h2>{tituloSemana}</h2>
-
+          <p>{tituloSemana}</p>
         <button 
           onClick={avancarSemana} 
           disabled={Indice === totalSemanas - 1 || totalSemanas === 0} // Desabilita se for a última semana ou se não houver semanas
+        
         >
-          Avançar &gt;
+        <i className='bi bi-chevron-compact-right'></i> 
         </button>
       </div>
 
@@ -166,7 +165,7 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
               {/* Mapeamento de COLUNAS (dias) */}
               <td>
                 {semanaParaRenderizar.segunda[indiceLinha] 
-                  ? <CardConsulta DadodsConsulta={semanaParaRenderizar.segunda[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.segunda[indiceLinha]} />
                   : null
                 }
               </td>
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
index 62284339..0e94023d 100644
--- a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
@@ -114,4 +114,9 @@ html[data-bs-theme="dark"] .mostrar-horario th {
   border: 1px solid #333;
   color: #e0e0e0;
   background-color: #232323;
-}
\ No newline at end of file
+}
+/*
+.container-botons{
+  margin-left: 10rem;
+  background-color: pink;
+}*/
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
index b63f5e14..21972607 100644
--- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
@@ -221,6 +221,12 @@ html[data-bs-theme="dark"] .cards-que-faltam {
   color: #90caf9;
 }
 
-th{
+.cabecalho-tabela{
   color: white;
+  background-color: #005a9e;
+}
+
+.container-botons{
+  margin-left: 5rem;
+ 
 }
\ No newline at end of file
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index cc0bebf7..5266b66a 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import API_KEY from '../components/utils/apiKeys.js';
-
+import AgendamentoCadastroManager from './AgendamentoCadastroManager.jsx';
 import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
@@ -16,115 +16,6 @@ import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
-  // Dados mocados para simular consultas com a API de Hugo
-  const Agendamentos = [
-  {
-    id: "",
-    order_number: "APT-2025-0001",
-    patient_id: "a8039e6d-7271-4187-a719-e27d9c6d15b3",
-    appointment_type: "presencial",
-    cancellation_reason: null,
-    cancelled_at: null,
-    checked_in_at: null,
-    chief_complaint: "Dor de cabeça há 3",
-    completed_at: null,
-    created_at: "2025-10-10T15:56:59.112231+00:00",
-    created_by: "87f2662c-9da7-45c0-9e05-521d9d92d105",
-    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
-    duration_minutes: 30,
-    insurance_provider: "Unimed",
-    notes: null,
-    patient_notes: "Prefiro horário pela manhã",
-    scheduled_at: "2025-10-10T15:56:58.937+00:00",
-    status: "requested",
-    updated_at: "2025-10-10T15:56:59.112231+00:00",
-    updated_by: null
-  },
-  // mesma data
-  {
-    id: "",
-    order_number: "APT-2025-0002",
-    patient_id: "becd4c18-042e-44ad-9bcb-cfef08f18046",
-    appointment_type: "presencial",
-    chief_complaint: "Retorno de consulta",
-    created_at: "2025-10-10T09:30:00.000+00:00",
-    scheduled_at: "2025-10-10T09:30:00.000+00:00",
-    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
-    duration_minutes: 45,
-    insurance_provider: "Amil",
-    status: "requested"
-  },
-  // dia anterior 1
-  {
-    id: "",
-    order_number: "APT-2025-0003",
-    patient_id: "e17e2bc6-6a90-4dc6-ae2d-b503e2835d36",
-    appointment_type: "teleconsulta",
-    chief_complaint: "Tosse persistente",
-    created_at: "2025-10-09T10:15:00.000+00:00",
-    scheduled_at: "2025-10-09T10:15:00.000+00:00",
-    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
-    duration_minutes: 20,
-    insurance_provider: "Bradesco Saúde",
-    status: "confirmed"
-  },
-  // dia anterior 2
-  {
-    id: "",
-    order_number: "APT-2025-0004",
-    patient_id: "d20e418f-6e45-495a-98be-16a9a163fab3",
-    appointment_type: "presencial",
-    chief_complaint: "Check-up anual",
-    created_at: "2025-10-09T14:00:00.000+00:00",
-    scheduled_at: "2025-10-09T14:00:00.000+00:00",
-    doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b",
-    duration_minutes: 60,
-    insurance_provider: "Unimed",
-    status: "requested"
-  },
-  // dia seguinte
-  {
-    id: "",
-    order_number: "APT-2025-0005",
-    patient_id: "8f27e87d-851a-484a-8450-6e3a5f29476c",
-    appointment_type: "presencial",
-    chief_complaint: "Dor lombar",
-    created_at: "2025-10-11T11:45:00.000+00:00",
-    scheduled_at: "2025-10-08T11:45:00.000+00:00",
-    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
-    duration_minutes: 30,
-    insurance_provider: "SulAmérica",
-    status: "requested"
-  },
-  // outro qualquer (para variedade)
-  {
-    id: "",
-    order_number: "APT-2025-0006",
-    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
-    appointment_type: "teleconsulta",
-    chief_complaint: "Acompanhamento pós-cirurgia",
-    created_at: "2025-10-10T18:00:00.000+00:00",
-    scheduled_at: "2025-10-10T18:00:00.000+00:00",
-    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
-    duration_minutes: 25,
-    insurance_provider: "Unimed",
-    status: "requested"
-  }, { id: "",
-    order_number: "APT-2025-0006",
-    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
-    appointment_type: "teleconsulta",
-    chief_complaint: "Acompanhamento pós-cirurgia",
-    created_at: "2025-10-10T18:00:00.000+00:00",
-    scheduled_at: "2025-10-24T18:00:00.000+00:00",
-    doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3",
-    duration_minutes: 25,
-    insurance_provider: "Unimed",
-    status: "requested"}
-
-];
-
-
-
     const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
   const [PageNovaConsulta, setPageConsulta] = useState(false);
@@ -133,19 +24,13 @@ const Agendamento = () => {
   const {getAuthorizationHeader} = useAuth()
    const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
 
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
 
 
   let authHeader = getAuthorizationHeader() 
 
-
-  // id do doutor
-  // dias
-
   const FiltrarAgendamentos = (listaTodosAgendamentos) => {
-   
-      
-  // cria um dicionário temporário
   let DictAgendamentosOrganizados = {};
 
   for (let i = 0; i < listaTodosAgendamentos.length; i++) {
@@ -168,38 +53,6 @@ const Agendamento = () => {
 
   }
 
-  const handleSave = (Dict) => {
-    let DataAtual = dayjs()
-    var myHeaders = new Headers();
-    myHeaders.append("apikey", API_KEY);
-    myHeaders.append("Authorization", authHeader);
-    myHeaders.append("Content-Type", "application/json");
-
-var raw = JSON.stringify({
-   "patient_id": Dict.patient_id,
-   "doctor_id": Dict.doctor_id,
-   "scheduled_at": DataAtual,
-   "duration_minutes": 30,
-   "appointment_type": "presencial",
-   "chief_complaint": "Dor de cabeça há 3 ",
-   "patient_notes": "Prefiro horário pela manhã",
-   "insurance_provider": "Unimed",
-   "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
-});
-
-var requestOptions = {
-   method: 'POST',
-   headers: myHeaders,
-   body: raw,
-   redirect: 'follow'
-};
-
-fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
-   .then(response => response.text())
-   .then(result => console.log(result))
-   .catch(error => console.log('error', error));
-
-  }
   // Requisição inicial para mostrar os agendamentos do banco de dados
   useEffect(() => {
     
@@ -215,7 +68,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
 
     fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
       .then(response => response.json())
-      .then(result => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos, "aqui")})
+      .then(result => {FiltrarAgendamentos(result); console.log(result, "aqui")})
       .catch(error => console.log('error', error));
   }, [])
 
@@ -371,7 +224,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
                       </div>
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados}  />}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} />}
                     {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes}/>}
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} />}
                   </div>
@@ -418,8 +271,65 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp
           </section>
         </div>
       ) : (
-        <FormNovaConsulta onCancel={handleClickCancel} onSave={handleSave} />
+        <AgendamentoCadastroManager />
       )}
+
+       {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 Exclusão
+                </h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  onClick={() => setShowDeleteModal(false)}
+                ></button>
+              </div>
+
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja excluir este paciente? 
+                </p>
+              </div>
+
+              <div className="modal-footer">
+              
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => setShowDeleteModal(false)}
+                >
+                  Cancelar
+                </button>
+
+              
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  //onClick={() => deletePatient(selectedPatientId)}
+                >
+                  <i className="bi bi-trash me-1"></i> Excluir
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>)}
+
+      
     </div>
   )
 }
diff --git a/src/pages/AgendamentoCadastroManager.jsx b/src/pages/AgendamentoCadastroManager.jsx
new file mode 100644
index 00000000..7c976402
--- /dev/null
+++ b/src/pages/AgendamentoCadastroManager.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
+import API_KEY from '../components/utils/apiKeys'
+import { useAuth } from '../components/utils/AuthProvider'
+import { useState } from 'react'
+import dayjs from 'dayjs'
+
+const AgendamentoCadastroManager = () => {
+
+    const {getAuthorizationHeader} = useAuth()
+    const [agendamento, setAgendamento] = useState({})
+
+
+  let authHeader = getAuthorizationHeader() 
+
+      const handleSave = (Dict) => {
+        let DataAtual = dayjs()
+        var myHeaders = new Headers();
+        myHeaders.append("apikey", API_KEY);
+        myHeaders.append("Authorization", authHeader);
+        myHeaders.append("Content-Type", "application/json");
+    
+    var raw = JSON.stringify({
+       "patient_id": Dict.patient_id,
+       "doctor_id": Dict.doctor_id,
+       "scheduled_at": DataAtual,
+       "duration_minutes": 30,
+       "appointment_type": "presencial",
+       "chief_complaint": "Dor de cabeça há 3 ",
+       "patient_notes": "Prefiro horário pela manhã",
+       "insurance_provider": "Unimed",
+       "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
+    });
+    
+    var requestOptions = {
+       method: 'POST',
+       headers: myHeaders,
+       body: raw,
+       redirect: 'follow'
+    };
+    
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
+       .then(response => response.text())
+       .then(result => console.log(result))
+       .catch(error => console.log('error', error));
+    
+      }
+
+  return (
+    <div>
+
+    <FormNovaConsulta onSave={handleSave} agendamento={agendamento} setAgendamento={setAgendamento}/>
+
+    </div>
+  )
+}
+
+export default AgendamentoCadastroManager
\ No newline at end of file
diff --git a/src/pages/AgendamentoEditPage.jsx b/src/pages/AgendamentoEditPage.jsx
new file mode 100644
index 00000000..46f37111
--- /dev/null
+++ b/src/pages/AgendamentoEditPage.jsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+import API_KEY from '../components/utils/apiKeys'
+import { useAuth } from '../components/utils/AuthProvider'
+import dayjs from 'dayjs'
+
+
+const AgendamentoEditPage = () => {
+
+    let DataAtual = dayjs()
+    const {getAuthorizationHeader} = useAuth()
+    const params = useParams()
+    const [PatientToPatch, setPatientToPatch] = useState({})
+
+    let id = params.id
+
+    console.log(id)
+
+    let authHeader = getAuthorizationHeader() 
+
+    const handleSave = (DictParaPatch) => {
+        var myHeaders = new Headers();
+        myHeaders.append("Content-Type", "application/json");
+        myHeaders.append('apikey', API_KEY)
+        myHeaders.append("authorization", authHeader)
+
+        console.log(DictParaPatch)
+
+        var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id,
+       "doctor_id": DictParaPatch.doctor_id,
+       "scheduled_at": DataAtual,
+       "duration_minutes": 30,
+       "appointment_type": "presencial",
+       "chief_complaint": "Dor de cabeça há 3 ",
+       "patient_notes": "Prefiro horário pela manhã",
+       "insurance_provider": "Unimed",
+       "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
+
+    
+        });
+
+        console.log(DictParaPatch)
+        console.log(id)
+
+        var requestOptions = {
+        method: 'PATCH',
+        headers: myHeaders,
+        body: raw,
+        redirect: 'follow'
+        };
+
+        fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions)
+        .then(response => response.text())
+        .then(result => console.log(result))
+        .catch(error => console.log('error', error));
+    }
+
+
+  return (
+    <div>
+        <FormNovaConsulta onSave={handleSave} agendamento={PatientToPatch} setAgendamento={setPatientToPatch}/>
+
+
+    </div>
+  )
+}
+
+export default AgendamentoEditPage
diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css
index 8df2e113..8d1e7eb4 100644
--- a/src/pages/style/Agendamento.css
+++ b/src/pages/style/Agendamento.css
@@ -118,7 +118,7 @@
   border-radius: 10px;
 }
 
-#status-card-consulta-confirmado, .legenda-item-confirmado {
+#status-card-consulta-confirmado, .legenda-item-confirmed {
   background-color: #eef8fb;
   border:3px solid #d8dfe7;
   padding: 5px;
@@ -288,4 +288,73 @@ html[data-bs-theme="dark"] {
     color: #fff;
     background-color: #005a9e;
   }
-}
\ No newline at end of file
+}
+
+/* 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;
+}
+
+.container-botons{
+  display: flex;
+  flex-direction: row;
+}
+
+#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;
+}
diff --git a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx
index baa72a69..b59d2d22 100644
--- a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx
+++ b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx
@@ -15,6 +15,7 @@ import Details from "../../pages/Details";
 import EditPage from "../../pages/EditPage";
 import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
+import AgendamentoEditPage from "../../pages/AgendamentoEditPage";
 
 function PerfilSecretaria({ onLogout }) {
   return (
@@ -33,7 +34,8 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="medicos/:id" element={<DoctorDetails />} />
             <Route path="medicos/:id/edit" element={<DoctorEditPage />} />
             <Route path="agendamento" element={<Agendamento />} />
-            <Route path="laudo" element={<LaudoManager />} />
+            <Route path="agendamento/:id/edit" element={<AgendamentoEditPage/>} />
+             <Route path="laudo" element={<LaudoManager />} />
             <Route path="*" element={<h2>Página não encontrada</h2>} />
           </Routes>
         </div>