Melhorias no estilo

src/components/AgendarConsulta/CardConsulta.jsx

@@ -1,32 +1,55 @@
 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 ids = useMemo(() => {
-    const Doctor = await GetDoctorByID(DadosConsulta.doctor_id, authHeader)
+    return {
-    const Patient = await GetPatientByID(DadosConsulta.patient_id, authHeader)
+      doctor_id: DadosConsulta?.doctor_id,
-    setMedico(Doctor[0])
+      patient_id: DadosConsulta?.patient_id,
-    setPaciente(Patient[0])
+      status: DadosConsulta?.status
-    console.log(Doctor, Patient)
+    };
-  }
+  }, [DadosConsulta]);
+   
   
-  // Status (agendado, confirmado, realizado, cancelado)
    useEffect(() => {
-    if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()}
+    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.id?
       
-      {DadosConsulta.status !== 'vazio'?
       <div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}> 
+
+      <div>
         <section className='cardconsulta-infosecundaria'>
           <p>{DadosConsulta.horario} {Medico?.full_name}</p>
         </section>
@@ -35,6 +58,30 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
           <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
       

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,

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,9 +23,11 @@ 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>
@@ -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>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -174,17 +174,18 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
   return (
     <div>
-      <div>
+      <div >
-        <button onClick={() => VoltarMes()}>voltar</button>
+          <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()}>Avançar</button>
+          <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>
@@ -197,15 +198,12 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
               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'}}/>

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>
-
+          <p>{tituloSemana}</p>
-        <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;
+        <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>

src/components/AgendarConsulta/style/styleTabelas/tabeladia.css

@@ -115,3 +115,8 @@ html[data-bs-theme="dark"] .mostrar-horario th {
   color: #e0e0e0;
   background-color: #232323;
 }
+/*
+.container-botons{
+  margin-left: 10rem;
+  background-color: pink;
+}*/

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;
+ 
 }

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>
   )
 }

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

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

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;
@@ -289,3 +289,72 @@ html[data-bs-theme="dark"] {
     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;
+}
+
+.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;
+}

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,6 +34,7 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="medicos/:id" element={<DoctorDetails />} />
             <Route path="medicos/:id/edit" element={<DoctorEditPage />} />
             <Route path="agendamento" element={<Agendamento />} />
+            <Route path="agendamento/:id/edit" element={<AgendamentoEditPage/>} />
              <Route path="laudo" element={<LaudoManager />} />
             <Route path="*" element={<h2>Página não encontrada</h2>} />
           </Routes>