Funcionalidade de editar e apagar e melhoria estilo

src/components/AgendarConsulta/CardConsulta.jsx

@@ -4,7 +4,7 @@ import { useAuth } from '../utils/AuthProvider';
 import { useNavigate } from 'react-router-dom';
 import { useMemo } from 'react';
 
-const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} ) => {
+const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId} ) => {
   const navigate = useNavigate();
 
   const {getAuthorizationHeader} = useAuth()
@@ -68,7 +68,12 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
       <div className='container-botons'>        
         <button className="btn btn-sm btn-edit-custom"
             
-            onClick={() => {navigate(`${DadosConsulta.id}/edit`)}}
+            onClick={() => {navigate(`2/edit`)
+                setDictInfo({agendamento:DadosConsulta, Infos:{paciente_cpf:Paciente.cpf, paciente_nome:Paciente.full_name}})
+                
+
+            }}
+
           >
             <i className="bi bi-pencil me-1"></i>
           </button>
@@ -79,7 +84,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
               className="btn btn-sm btn-delete-custom"
                             onClick={() => {
                 console.log(DadosConsulta.id)
-                              //setSelectedPatientId(DadosConsulta.id);
+                setSelectedId(DadosConsulta.id);
                setShowDeleteModal(true);
               }}
             >

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -9,23 +9,25 @@ import API_KEY from "../utils/apiKeys";
 const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const {getAuthorizationHeader} = useAuth()
 
+  console.log(agendamento, 'aqui2')
+
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
   const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
 
+
+const [todosProfissionais, setTodosProfissionais] = useState([])
+const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
+const [isDropdownOpen, setIsDropdownOpen] = useState(false); 
+
+
+  const [horarioInicio, setHorarioInicio] = useState('');
+  const [horarioTermino, setHorarioTermino] = useState('');
+
   const [horariosDisponiveis, sethorariosDisponiveis] = useState([])
 
   let authHeader = getAuthorizationHeader()
-  const handleclickAcessibilidade = (id) => {
-    let resultado = acessibilidade[id]
-
-    if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')}
-
-    else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
-    console.log(id)
-  }
-  
  
   const FormatCPF = (valor) => {
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@@ -39,15 +41,28 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
 
   const handleChange = (e) => {
     const {value, name} = e.target;
-    console.log(value, name)
+    console.log(value, name, agendamento)
     
     if(name === 'email'){
       setAgendamento({...agendamento, contato:{
         ...agendamento.contato,
         email:value
-      }})
+      }})}
+      else if(name === 'status'){
+        if(agendamento.status==='requested'){
+        setAgendamento((prev) => ({
+                      ...prev,
+                      status:'confirmed',
+                                          }));  
+        }else if(agendamento.status === 'confirmed'){
+        console.log(value)
+        setAgendamento((prev) => ({
+                      ...prev,
+                      status:'requested',
+                                          }));
+      }}
     
-    }else if(name === 'cpf'){
+    else if(name === 'paciente_cpf'){
 
       let cpfFormatted = FormatCPF(value)
        const fetchPatient = async () => {
@@ -55,7 +70,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
                   if (patientData) {
                     setAgendamento((prev) => ({
                       ...prev,
-                      nome: patientData.full_name,
+                      pacinte_nome: patientData.full_name,
                       patient_id: patientData.id
                     }));
                   }}
@@ -85,9 +100,9 @@ useEffect(() => {
   myHeaders.append("Authorization", `Bearer ${authHeader.split(' ')[1]}`);
 
 var raw = JSON.stringify({
-   "doctor_id": "58ea5330-5cfe-4433-a218-2749844aee89",
+   "doctor_id": agendamento.doctor_id,
-   "start_date": "2025-10-20",
+   "start_date": agendamento.dataAtendimento,
-   "end_date": "2025-10-20T23:59:59.999Z",
+   "end_date": `${agendamento.dataAtendimento}T23:59:59.999Z`,
   
 });
 
@@ -103,24 +118,19 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots
    .then(result => {console.log(result); sethorariosDisponiveis(result)})
    .catch(error => console.log('error', error));
 
-}, [])
+}, [agendamento.dataAtendimento, agendamento.doctor_id])
 
-const [todosProfissionais, setTodosProfissionais] = useState([])
-const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
-const [isDropdownOpen, setIsDropdownOpen] = useState(false); 
 
 // FUNÇÃO DE BUSCA E FILTRAGEM
 const handleSearchProfissional = (e) => {
     const term = e.target.value;    
     handleChange(e); 
-    
     // 2. Lógica de filtragem:
     if (term.trim() === '') {
         setProfissionaisFiltrados([]);
         setIsDropdownOpen(false);
         return;
     }
-
     // Adapte o nome da propriedade (ex: 'nome', 'full_name')
     const filtered = todosProfissionais.filter(p => 
         p.full_name.toLowerCase().includes(term.toLowerCase())
@@ -133,26 +143,18 @@ const handleSearchProfissional = (e) => {
 
 // FUNÇÃO PARA SELECIONAR UM ITEM DO DROPDOWN
 const handleSelectProfissional = async (profissional) => {
-  
-    
     setAgendamento(prev => ({
         ...prev,
         doctor_id: profissional.id,
-        nome_medico: profissional.full_name
+        medico_nome: profissional.full_name
     }));
-    
         // 2. Fecha o dropdown
     setProfissionaisFiltrados([]);
     setIsDropdownOpen(false);
-    
     };
 
   
 const formatarHora = (datetimeString) => {
-    // Para simplificar, vou extrair a hora e minuto do formato de string.
-    // Dependendo do seu ambiente, é melhor usar new Date() e toLocaleTimeString()
-    // como no exemplo anterior, mas aqui farei o "corte" na string.
-    // Ex: "2025-10-20T09:00:00.000Z" -> "09:00"
     return datetimeString.substring(11, 16);
   };
 
@@ -163,19 +165,12 @@ const formatarHora = (datetimeString) => {
     disabled: !item.available
   }));
 
-  // Adicionando um estado para controlar as seleções, o que é comum no React
-  const [horarioInicio, setHorarioInicio] = useState('');
-  const [horarioTermino, setHorarioTermino] = useState('');
-
-
 const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
     onSave({...agendamento, horarioInicio:horarioInicio})
   };
 
-
-
   return (
     <div className="form-container">
       
@@ -187,13 +182,13 @@ const handleSubmit = (e) => {
           
           <div className="campo-de-input">
             <label>CPF do paciente</label> 
-               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={handleChange}  value={agendamento.cpf}/>
+               <input  type="text" name="paciente_cpf"  placeholder="000.000.000-00" onChange={handleChange}  value={agendamento.paciente_cpf}/>
            
           </div>
           
           <div className="campo-de-input">
             <label>Nome *</label>
-            <input type="text" name="nome" value={agendamento.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
+            <input type="text" name="paciente_nome" value={agendamento.paciente_nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
           </div>        
       </div>
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
@@ -220,9 +215,9 @@ const handleSubmit = (e) => {
         <label>Nome do profissional *</label>
         <input 
             type="text" 
-            name="nome_medico" // Use o nome correto da propriedade no estado `agendamento`
+            name="medico_nome" // Use o nome correto da propriedade no estado `agendamento`
             onChange={handleSearchProfissional} 
-            value={agendamento.nome_medico} 
+            value={agendamento.medico_nome} 
             autoComplete="off" // Ajuda a evitar o autocomplete nativo do navegador
             required 
         />
@@ -249,10 +244,15 @@ const handleSubmit = (e) => {
             <select onChange={handleChange} name="tipo_atendimento" >
               <option value="presencial" selected>Presencial</option>
               <option value="teleconsulta">Teleconsulta</option>
-              
-
             </select>
           </div>
+
+            <div className="form-check ">
+                <input className="form-check-input checkbox-cstom" type="checkbox" name="status" onChange={handleChange} />
+                <label className="form-check-label checkbox-label" htmlFor="vip">
+                  Fila de espera
+                </label>
+              </div>
         </div>
 
         <section id="informacoes-atendimento-segunda-linha">
@@ -301,6 +301,12 @@ const handleSubmit = (e) => {
           </select>
         </div>
 
+        <div>
+
+        </div>
+
+       
+
         {/* Dropdown de Término */}
         <div className="campo-de-input">
           <label htmlFor="termino">Término *</label>

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, setShowDeleteModal }) => {
+const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo, setSelectedId }) => {
   const [indiceAcesso, setIndiceAcesso] = useState(0)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@@ -24,7 +24,9 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
         <div>
           <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>
+                
+                  
+                  <p>{Dia ? `${Dia?.split('-')[2]}/${Dia?.split('-')[1]}/${Dia?.split('-')[0]}`: ''}</p>
                 <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>  <i className="bi bi-chevron-compact-right"></i></button>
               </div>
             </div>
@@ -37,16 +39,21 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
         </thead>
 
         <tbody>
-          {agendamentos[Dia]?.map((agendamento, index) => (
+          {agendamentos[Dia]?.map((agendamento, index) => {
+            
+            let Data =agendamento.scheduled_at.split("T")
+            let horario = Data[1].split(':')
+            return(
             <tr key={index}>
-              <td><p>{agendamento.horario}</p></td>
+              
+              <td><p>{`${horario[0]}:${horario[1]}`}</p></td>
               <td className='mostrar-horario'>
                 <div onClick={() => handleClickAgendamento(agendamento)}>
-                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} />
+                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId}/>
                 </div>
               </td>
             </tr>
-          ))}
+          )})}
         </tbody>
       </table>
     </div>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -6,7 +6,7 @@ import "./style/styleTabelas/tabelames.css";
 import { useEffect, useState } from 'react';
 import { useMemo } from 'react';
 
-const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
+const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModal, setSelectedId ,setDictInfo }) => {
 
   const dataHoje = dayjs();
   const AnoAtual = dataHoje.year();
@@ -88,8 +88,6 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
       useEffect(() => {
         console.log(OrganizarAgendamentosMensais)
-        
-
       }, [])
 
       useEffect(() => {
@@ -185,11 +183,11 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
       <table className='tabelamensal'>
        <thead>
           <tr>
-            <td className='cabecalho-tabela'>Seg</td>
+            <th className='cabecalho-tabela'>Segunda</th>
-            <th>Ter</th>
+            <th>Terça</th>
-            <th>Qua</th>
+            <th>Quarta</th>
-            <th>Qui</th>
+            <th>Quinta</th>
-            <th>Sex</th>
+            <th>Sexta</th>
           </tr>
         </thead>
         <tbody>
@@ -204,9 +202,9 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
       {
         semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
           <td key={dia} >
-            <CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
-            <CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
-            <CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
+            <CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
             {semana[dia].length > 3 ? (
               <div>
                 <p>{` +${semana[dia].length - 2}`}</p>

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -6,7 +6,7 @@ import { useEffect, useState, useMemo } from 'react';
 import weekOfYear from 'dayjs/plugin/weekOfYear'
 dayjs.extend(weekOfYear)
 
-const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
+const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo}) => {
 
   // Armazena o objeto COMPLETO das semanas organizadas
   const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
@@ -164,31 +164,31 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
               {/* Mapeamento de COLUNAS (dias) */}
               <td>
                 {semanaParaRenderizar.segunda[indiceLinha] 
-                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.segunda[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.segunda[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
                   : null
                 }
               </td>
               <td>
                 {semanaParaRenderizar.terça[indiceLinha]
-                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
                   : null
                 }
               </td>
               <td>
                 {semanaParaRenderizar.quarta[indiceLinha]
-                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
                   : null
                 }
               </td>
               <td>
                 {semanaParaRenderizar.quinta[indiceLinha]
-                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
                   : null
                 }
               </td>
               <td>
                 {semanaParaRenderizar.sexta[indiceLinha]
-                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} />
+                  ? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]}  setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
                   : null
                 }
               </td>

src/components/AgendarConsulta/style/formagendamentos.css

@@ -341,3 +341,52 @@ html[data-bs-theme="dark"] svg {
   margin-left: 3rem;
   
 }
+
+
+
+/* 1. Estilização Básica e Tamanho (Estado Padrão - Antes de Clicar) */
+.checkbox-customs {
+  /* Remove a aparência padrão do navegador/Bootstrap */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  /* Define o tamanho desejado */
+  width: 1.2rem;   /* Ajuste conforme o seu gosto (ex: 1.2rem = 19.2px) */
+  height: 1.2rem;
+
+  /* Define o visual "branco com borda preta" */
+  background-color: #fff; /* Fundo branco */
+  border: 1px solid #000; /* Borda preta de 1px */
+  border-radius: 0.25rem; /* Borda levemente arredondada (opcional, imita Bootstrap) */
+
+  /* Centraliza o 'check' (quando aparecer) */
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer; /* Indica que é clicável */
+
+  /* Adiciona a transição suave */
+  transition: all 0.5s ease; /* Transição em 0.5 segundos para todas as propriedades */
+}
+
+/* 2. Estilização no Estado Clicado (:checked) */
+.checkbox-customs:checked {
+  /* Quando clicado, mantém o fundo branco (se quiser mudar, altere aqui) */
+  background-color: #fff;
+
+  /* Se você quiser que a borda mude de cor ao clicar, altere aqui. */
+  /* border-color: #007bff; */ /* Exemplo: borda azul */
+}
+
+/* 3. Ocultar o 'Check' Padrão e Criar um Check Customizado */
+/* O Bootstrap/Navegador insere um ícone de 'check'. Vamos controlá-lo com background-image. */
+.checkbox-customs:checked {
+  /* Este código do Bootstrap usa um SVG para o ícone de 'check' */
+  /* Aqui, estamos forçando o ícone de 'check' a ser preto para combinar com a borda preta. */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+
+  /* Garante que o ícone fique centralizado e preencha o espaço */
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}

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

@@ -18,7 +18,7 @@
 /* Cabeçalho */
 .tabelamensal thead th {
   background-color: #0078d7;
-  color: #0078d7;
+  color: white;
   font-weight: 600;
   border-bottom: 2px solid #0078d7; /* borda inferior mais forte no cabeçalho */
 }

src/pages/Agendamento.jsx

@@ -21,9 +21,10 @@ import { Search } from 'lucide-react';
 
 
 
-const Agendamento = () => {
+const Agendamento = ({setDictInfo}) => {
   const navigate = useNavigate();
 
+  const [selectedID, setSelectedId] = useState('0')
   const [filaEsperaData, setfilaEsperaData] = useState([])
     const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
@@ -44,55 +45,78 @@ const Agendamento = () => {
   let authHeader = getAuthorizationHeader() 
 
  const FiltrarAgendamentos = async (listaTodosAgendamentos) => {
-
     const ConfigurarFiladeEspera = async (patient_id, doctor_id, agendamento) => {
+      // Assumindo que GetDoctorByID e GetPatientByID estão definidos no seu escopo
+      let medico = await GetDoctorByID(doctor_id, authHeader);
+      let paciente = await GetPatientByID(patient_id, authHeader);
 
-      
+      let dicionario = {
-      let medico = await GetDoctorByID(doctor_id, authHeader)
+          agendamento: agendamento,
-      let paciente = await GetPatientByID(patient_id, authHeader)
+          Infos: {
-
+              nome_nedico: medico.full_name,
-      let dicionario = {patientInfo:paciente, doctorInfo:medico, agendamentoInfo:agendamento}
+              doctor_id: medico.id,
-      
+              patient_id: paciente[0].id,
-
+              paciente_nome: paciente[0].full_name,
-      return dicionario
+              paciente_cpf: paciente[0].cpf
-
           }
+      };
+      return dicionario;
+    };
 
     let DictAgendamentosOrganizados = {};
-  let ListaFilaDeEspera = []
+    let ListaFilaDeEspera = [];
 
-  for (let i = 0; i < listaTodosAgendamentos.length; i++) {
+    // 1. Agrupamento (igual ao seu código original)
-    const agendamento = listaTodosAgendamentos[i];
+    for (const agendamento of listaTodosAgendamentos) {
         if (agendamento.status === 'requested') {
-      
+            // Recomenda-se usar Promise.all para melhorar a performance
-      let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento)
+            // mas, para manter a estrutura, mantemos o await no loop.
-      
+            let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento);
-    ListaFilaDeEspera.push(v)
+            ListaFilaDeEspera.push(v);
-
+        } else {
-      console.log(ListaFilaDeEspera)
-
-    }
-
-    else{
             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];
-    }}
+            }
+        }
     }
 
-  
+// ----------------------------------------------------------------------
-  setAgendamentosOrganizados(DictAgendamentosOrganizados);
+    // 2. Ordenação Interna: Ordenar os agendamentos por HORÁRIO (do menor para o maior)
-  setfilaEsperaData(ListaFilaDeEspera)
+    for (const DiaAgendamento in DictAgendamentosOrganizados) {
-
+        DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => {
+            // Compara as strings de data/hora (ISO 8601) diretamente,
+            // que funcionam para ordenação cronológica.
+            if (a.scheduled_at < b.scheduled_at) return -1;
+            if (a.scheduled_at > b.scheduled_at) return 1;
+            return 0;
+        });
     }
 
+// ----------------------------------------------------------------------
+    // 3. Ordenação Externa: Ordenar os DIAS (as chaves do objeto)
+    // Para garantir que as chaves fiquem na sequência cronológica correta.
+
+    // Pega as chaves (datas)
+    const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort((a, b) => {
+        // Compara as chaves de data (strings 'YYYY-MM-DD')
+        if (a < b) return -1;
+        if (a > b) return 1;
+        return 0;
+    });
+
+    // Cria um novo objeto no formato desejado, garantindo a ordem das chaves
+    let DictAgendamentosFinal = {};
+    for (const data of chavesOrdenadas) {
+        DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
+    }
+    setAgendamentosOrganizados(DictAgendamentosFinal); // Use o objeto final ordenado
+    setfilaEsperaData(ListaFilaDeEspera);
+};
+
   // Requisição inicial para mostrar os agendamentos do banco de dados
   useEffect(() => {
         var myHeaders = new Headers();
@@ -141,6 +165,24 @@ const Agendamento = () => {
     } 
   }, [FiltredTodosMedicos]); 
 
+const deleteConsulta = (selectedPatientId) => {
+  console.log("tentando apagar")
+     var myHeaders = new Headers();
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("apikey", API_KEY)
+
+var requestOptions = {
+   method: 'DELETE',
+   redirect: 'follow',
+   headers: myHeaders
+};
+
+fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
+   .then(response => response.json())
+   .then(result => console.log(result))
+   .catch(error => console.log('error', error));
+  
+}
   
 
 /**
@@ -340,9 +382,9 @@ const handleSearchMedicos = (term) => {
                       </div>
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
-                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes}/>}
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>}
-                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} />}
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
                   </div>
                 </div>
               )
@@ -363,20 +405,43 @@ const handleSearchMedicos = (term) => {
                     <thead>
                       <tr>
                         <th>Nome</th>
-                        <th>Email</th>
+                        <th>Telefone</th>
-                        <th>CPF</th>
+                      
                         <th>Telefone</th>
                         <th>Entrou na fila de espera</th>
+                        <th>Ações</th>
                       </tr>
                     </thead>
                     <tbody>
                       {filaEsperaData.map((item, index) => (
                         <tr key={index}>
-                          <td> <p>{item.patientInfo[0].full_name} </p>  </td>
+                          <td> <p>{item.Infos?.paciente_nome} </p>  </td>
-                          <td>{}</td>
+                          <td><p>{} </p></td>
-                          <td>{}</td>
                           <td>{}</td>
                           <td>{}</td>
+                          <td> <div className="d-flex gap-2">
+                            
+                              <button className="btn btn-sm btn-edit"
+                              onClick={() => {
+                                console.log(item, 'item')
+                                navigate(`${2}/edit`)
+                                setDictInfo(item)
+                              }}
+                              >
+                                <i className="bi bi-pencil me-1"></i> Editar
+                              </button>
+                            
+
+                            <button
+                              className="btn btn-sm btn-delete"
+                              onClick={() => {
+                                setSelectedId(item.agendamento.id)
+                                setShowDeleteModal(true);
+                              }}
+                            >
+                              <i className="bi bi-trash me-1"></i> Excluir
+                            </button>
+                          </div></td>
                         </tr>
                       ))}
                     </tbody>
@@ -418,7 +483,7 @@ const handleSearchMedicos = (term) => {
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja excluir este paciente? 
+                  Tem certeza que deseja excluir este agendamento? 
                 </p>
               </div>
 
@@ -436,7 +501,8 @@ const handleSearchMedicos = (term) => {
                 <button
                   type="button"
                   className="btn btn-danger"
-                  //onClick={() => deletePatient(selectedPatientId)}
+                  onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}  
+                  
                 >
                   <i className="bi bi-trash me-1"></i> Excluir
                 </button>

src/pages/AgendamentoCadastroManager.jsx

@@ -2,17 +2,33 @@ 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 { useEffect,useState } from 'react'
 import dayjs from 'dayjs'
-
+import { UserInfos } from '../components/utils/Functions-Endpoints/General'
 const AgendamentoCadastroManager = () => {
 
     const {getAuthorizationHeader} = useAuth()
-    const [agendamento, setAgendamento] = useState({})
+    const [agendamento, setAgendamento] = useState({status:'confirmed'})
-
+    const [idUsuario, setIDusuario] = useState('0')
 
   let authHeader = getAuthorizationHeader() 
 
+
+  useEffect(() => {
+
+    const ColherInfoUsuario =async () => {
+      const result = await UserInfos(authHeader)
+    
+      setIDusuario(result?.profile?.id)
+    
+    }
+    ColherInfoUsuario()
+    
+
+  }, [])
+
+
+
       const handleSave = (Dict) => {
         let DataAtual = dayjs()
         var myHeaders = new Headers();
@@ -26,10 +42,11 @@ const AgendamentoCadastroManager = () => {
        "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
        "duration_minutes": 30,
        "appointment_type": Dict.tipo_consulta,
-       "chief_complaint": "Dor de cabeça há 3 ",
+       
        "patient_notes": "Prefiro horário pela manhã",
-       "insurance_provider": "Unimed",
+       "insurance_provider": Dict.convenio,
-       "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
+       "status": Dict.status,
+       "created_by": idUsuario
     });
     
     var requestOptions = {

src/pages/AgendamentoEditPage.jsx

@@ -1,22 +1,41 @@
 import React from 'react'
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
-import { useState } from 'react'
+import { useState, useEffect } 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'
+import { UserInfos } from '../components/utils/Functions-Endpoints/General'
 
+const AgendamentoEditPage = ({setDictInfo, DictInfo}) => {
 
-const AgendamentoEditPage = () => {
+    const [idUsuario, setIDusuario] = useState('0')
-
+    //let DataAtual = dayjs()
-    let DataAtual = dayjs()
     const {getAuthorizationHeader} = useAuth()
     const params = useParams()
     const [PatientToPatch, setPatientToPatch] = useState({})
 
     let id = params.id
 
-    console.log(id)
+    //console.log(DictInfo, 'aqui')    
+
+    useEffect(() => {
+      setDictInfo({...DictInfo?.Infos,...DictInfo?.agendamento})
+
+
+        const ColherInfoUsuario =async () => {
+          const result = await UserInfos(authHeader)
+        
+          setIDusuario(result?.profile?.id)
+        
+        }
+        ColherInfoUsuario()
+        
+
+
+    }, [])
+
+
     
     let authHeader = getAuthorizationHeader() 
 
@@ -30,13 +49,21 @@ const AgendamentoEditPage = () => {
 
         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 ",
+       
+       "created_by": idUsuario,
+
+        "scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,
+       
+       "appointment_type": DictParaPatch.tipo_consulta,
+       
        "patient_notes": "Prefiro horário pela manhã",
-       "insurance_provider": "Unimed",
+       "insurance_provider": DictParaPatch.convenio,
-       "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
+       "status": DictParaPatch.status,
+       "created_by": idUsuario
 
     
         });
@@ -51,7 +78,7 @@ const AgendamentoEditPage = () => {
         redirect: 'follow'
         };
 
-        fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions)
+        fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${DictInfo.id}`, requestOptions)
         .then(response => response.text())
         .then(result => console.log(result))
         .catch(error => console.log('error', error));
@@ -60,7 +87,7 @@ const AgendamentoEditPage = () => {
 
   return (
     <div>
-        <FormNovaConsulta onSave={handleSave} agendamento={PatientToPatch} setAgendamento={setPatientToPatch}/>
+        <FormNovaConsulta onSave={handleSave} agendamento={DictInfo} setAgendamento={setDictInfo}/>
 
 
     </div>

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -1,6 +1,6 @@
 //import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Routes, Route } from "react-router-dom";
-
+import { useState } from "react";
 import Sidebar from "../../components/Sidebar";
 import FinanceiroDashboard from "../../pages/FinanceiroDashboard";
 import SecretariaItems from "../../data/sidebar-items-secretaria.json";
@@ -19,6 +19,7 @@ import FormDisponibilidade from "../../components/AgendarConsulta/FormDisponibil
 import AgendamentoEditPage from "../../pages/AgendamentoEditPage";
 
 function PerfilSecretaria({ onLogout }) {
+  const [DictInfo, setDictInfo] = useState({})
   return (
     // <Router>
       <div id="app" className="active">
@@ -34,8 +35,8 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="pacientes/:id/edit" element={<EditPage />} />
             <Route path="medicos/:id" element={<DoctorDetails />} />
             <Route path="medicos/:id/edit" element={<DoctorEditPage />} />
-            <Route path="agendamento" element={<Agendamento />} />
+            <Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
-            <Route path="agendamento/:id/edit" element={<AgendamentoEditPage/>} />
+            <Route path="agendamento/:id/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
              <Route path="laudo" element={<LaudoManager />} />
             <Route path="*" element={<h2>Página não encontrada</h2>} />
             <Route path="form-disponibilidade" element={<FormDisponibilidade />} />