Melhorias no estilo

2025-10-15 16:47:52 -03:00 · 2025-10-15 16:47:52 -03:00 · 13e4064989
commit 13e4064989
parent cc37ea60da
12 changed files with 369 additions and 205 deletions
--- 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
--- 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,
--- 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>
--- 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'}}/>
--- 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>
--- 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;
-}
+}
+/*
+.container-botons{
+  margin-left: 10rem;
+  background-color: pink;
+}*/
--- 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;
+ 
 }
--- 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>
  )
 }
--- a/src/pages/AgendamentoCadastroManager.jsx
+++ 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
--- a/src/pages/AgendamentoEditPage.jsx
+++ 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
--- 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;
  }
-}
+}
+
+/* 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;
+}
--- 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>