Melhorias no agendamento

src/components/AgendarConsulta/CardConsulta.jsx

@@ -45,6 +45,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
 
   let nameArrayMedico = Medico?.full_name.split(' ')
 
+  console.log(DadosConsulta.status)
 
   return (
     <div className={`container-cardconsulta-${TabelaAgendamento}`}>
@@ -69,7 +70,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
             
             onClick={() => {navigate(`${DadosConsulta.id}/edit`)}}
           >
-            <i className="bi bi-pencil me-1"></i> Editar
+            <i className="bi bi-pencil me-1"></i>
           </button>
         
 
@@ -82,7 +83,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
                setShowDeleteModal(true);
               }}
             >
-              <i className="bi bi-trash me-1"></i> Excluir
+              <i className="bi bi-trash me-1"></i>
             </button>
         </div>
 

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -2,8 +2,9 @@ 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 { GetDoctorByName, GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../utils/AuthProvider";
+import API_KEY from "../utils/apiKeys";
 
 const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const {getAuthorizationHeader} = useAuth()
@@ -11,13 +12,11 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
   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 [horariosDisponiveis, sethorariosDisponiveis] = useState([])
+
   let authHeader = getAuthorizationHeader()
-
-
   const handleclickAcessibilidade = (id) => {
     let resultado = acessibilidade[id]
 
@@ -39,8 +38,9 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
      
 
   const handleChange = (e) => {
-
     const {value, name} = e.target;
+    console.log(value, name)
+    
     if(name === 'email'){
       setAgendamento({...agendamento, contato:{
         ...agendamento.contato,
@@ -63,30 +63,119 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
       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{
     setAgendamento({...agendamento,[name]:value})
     }
   }
 
-  const handleSubmit = (e) => {
+  
+
+
+useEffect(() => {
+  const ChamarMedicos = async () => {
+    const Medicos = await GetAllDoctors(authHeader)
+    setTodosProfissionais(Medicos)
+  }
+  ChamarMedicos();
+
+  var myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
+  myHeaders.append("apikey", API_KEY)
+  myHeaders.append("Authorization", `Bearer ${authHeader.split(' ')[1]}`);
+
+var raw = JSON.stringify({
+   "doctor_id": "58ea5330-5cfe-4433-a218-2749844aee89",
+   "start_date": "2025-10-20",
+   "end_date": "2025-10-20T23:59:59.999Z",
+  
+});
+
+var requestOptions = {
+   method: 'POST',
+   headers: myHeaders,
+   body: raw,
+   redirect: 'follow'
+};
+
+fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots", requestOptions)
+   .then(response => response.json())
+   .then(result => {console.log(result); sethorariosDisponiveis(result)})
+   .catch(error => console.log('error', error));
+
+}, [])
+
+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())
+    );
+    
+    setProfissionaisFiltrados(filtered);
+    setIsDropdownOpen(filtered.length > 0); // Abre se houver resultados
+};
+
+
+// FUNÇÃO PARA SELECIONAR UM ITEM DO DROPDOWN
+const handleSelectProfissional = async (profissional) => {
+  
+    
+    setAgendamento(prev => ({
+        ...prev,
+        doctor_id: profissional.id,
+        nome_medico: 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);
+  };
+
+  const opcoesDeHorario = horariosDisponiveis?.slots?.map(item => ({
+    
+    value: formatarHora(item.datetime),
+    label: formatarHora(item.datetime),
+    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)
+    onSave({...agendamento, horarioInicio:horarioInicio})
   };
 
+
+
   return (
     <div className="form-container">
       
@@ -95,26 +184,21 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
         <h2 className="section-title">Informações do paciente</h2>
 
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
+          
           <div className="campo-de-input">
-            <label>Nome *</label>
+            <label>CPF do paciente</label> 
-            <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={handleChange}  value={agendamento.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} />
+          </div>        
       </div>
-
-     
-
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
        
-        <div className="campo-de-input">
+        <div >
           <label>Convênio</label>
           <select name="convenio" onChange={handleChange}>
             <option value="publico">Público</option>
@@ -125,72 +209,49 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
         </div>
         
       </div>
-
-        <h3 className="section-subtitle">Informações adicionais</h3>
       
-          <label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
-          <input
-            type="file"
-            id="anexo-input"
-            className="d-none"
-            onChange={(e) => setSelectedFile(e.target.files[0])}
-          />
-          {selectedFile && (
-            <button type="button" className="btn btn-primary ms-2" >
-              Enviar
-            </button>
-          )}
-        <div className="anexos-list">
-          {loadingAnexos ? (
-            <p>Carregando anexos...</p>
-          ) : (
-            anexos.map((anexo, index) => (
-              <div key={index} className="anexo-item">
-                <span>{anexo.nome || anexo.fileName}</span>
-              </div>
-            ))
-          )}
-        </div>
         <h2 className="section-title">Informações do atendimento</h2>
        
-      
-          <div className="icons-container">
-        
-            <div  className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-              
-              <span className="material-symbols-outlined icon">accessible</span>
-            </div>
-
-            <div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-              <span className="material-symbols-outlined icon">elderly</span> 
-            </div>
-          
-            <div className={`icons-div ${acessibilidade.gravida === true ? 'acessibilidade-ativado' : ''}`} id="gravida" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-              <span className="material-symbols-outlined icon">pregnant_woman</span> 
-            </div>
-            
-            <div className={`icons-div ${acessibilidade.bebe === true ? 'acessibilidade-ativado' : ''}`} id="bebe" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-baby-icon lucide-baby"><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M15 12h.01"/><path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/><path d="M9 12h.01"/></svg>
-
-            </div>
-
-            <div className={`icons-div ${acessibilidade.autista === true ? 'acessibilidade-ativado' : ''}`} id="autista" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
-            </div>
-        
-          </div>
 
         <div className="campo-informacoes-atendimento">
             
-            <div className="campo-de-input">
+            <div className="campo-de-input-container"> {/* NOVO CONTAINER PAI */}
-              <label>Nome do profissional *</label>
+    <div className="campo-de-input">
-              <input type="text" name="profissional" onChange={handleChange} value={agendamento.nome_medico}required />
+        <label>Nome do profissional *</label>
-            </div>
+        <input 
-          
+            type="text" 
+            name="nome_medico" // Use o nome correto da propriedade no estado `agendamento`
+            onChange={handleSearchProfissional} 
+            value={agendamento.nome_medico} 
+            autoComplete="off" // Ajuda a evitar o autocomplete nativo do navegador
+            required 
+        />
+    </div>
 
-          <div className="campo-de-input">
+    {/* DROPDOWN - RENDERIZAÇÃO CONDICIONAL */}
+    {isDropdownOpen && profissionaisFiltrados.length > 0 && (
+        <div className='dropdown-profissionais'>
+            {profissionaisFiltrados.map((profissional) => (
+                <div 
+                    key={profissional.id} // Use o ID do profissional
+                    className='dropdown-item'
+                    onClick={() => handleSelectProfissional(profissional)}
+                >
+                    {profissional.full_name}
+                </div>
+            ))}
+        </div>
+    )}
+</div>
+        
+          <div  className="tipo_atendimento">
             <label>Tipo de atendimento *</label>
-            <input type="text" name="tipoAtendimento" required />
+            <select onChange={handleChange} name="tipo_atendimento" >
+              <option value="presencial" selected>Presencial</option>
+              <option value="teleconsulta">Teleconsulta</option>
+              
+
+            </select>
           </div>
         </div>
 
@@ -211,30 +272,62 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
           
             <div className="campo-de-input">
               <label>Data *</label>
-              <input type="date" name="dataAtendimento" required />
+              <input type="date" name="dataAtendimento" onChange={handleChange} required />
             </div>
           </div>
 
-          <div className="campo-informacoes-atendimento">
-            <div className="campo-de-input">
-              <label>Início *</label>
-              <input type="time" name="inicio" required />
-            </div>
 
-            <div className="campo-de-input">
+        <div className="row">
-              <label>Término *</label>
+       <div className="campo-de-input">
-              <input type="time" name="termino" required />
+          <label htmlFor="inicio">Início *</label>
-            </div>
+          <select 
-          
+            id="inicio"
-            <div className="campo-de-input">
+            name="inicio" 
-              <label>Profissional solicitante</label>
+            required
-              <select name="solicitante">
+            value={horarioInicio}
-                <option value="" disabled invisible selected>Selecione o solicitante</option>
+            onChange={(e) => setHorarioInicio(e.target.value)}
-                <option value="secretaria">Secretária</option>
+          >
-                <option value="medico">Médico</option>
+            <option value="" disabled>Selecione a hora de início</option>
-              </select>
+            {opcoesDeHorario?.map((opcao, index) => (
-            </div>
+              <option 
-          </div>
+                key={index} 
+                value={opcao.value} 
+                disabled={opcao.disabled}
+              >
+                {opcao.label}
+                {opcao.disabled && " (Indisponível)"} 
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Dropdown de Término */}
+        <div className="campo-de-input">
+          <label htmlFor="termino">Término *</label>
+          <select 
+            id="termino"
+            name="termino" 
+            required
+            value={horarioTermino}
+            onChange={(e) => setHorarioTermino(e.target.value)}
+          >
+            <option value="" disabled>Selecione a hora de término</option>
+            {opcoesDeHorario?.map((opcao, index) => (
+              <option 
+                key={index} 
+                value={opcao.value} 
+                disabled={opcao.disabled}
+              >
+                {opcao.label}
+                {opcao.disabled && " (Indisponível)"} 
+              </option>
+            ))}
+          </select>
+        </div>
+        </div>
+      
+      
+    
       </section>
 
       <section className="informacoes-atendimento-segunda-linha-direita"> 

src/components/AgendarConsulta/style/formagendamentos.css

@@ -303,4 +303,41 @@ html[data-bs-theme="dark"] .icons-div:hover .icon {
 html[data-bs-theme="dark"] .icon,
 html[data-bs-theme="dark"] svg {
   color: #e0e0e0 !important;
+}
+
+/* CONTAINER PAI - ESSENCIAL PARA POSICIONAMENTO */
+.campo-de-input-container {
+    position: relative; /* Define o contexto para o dropdown */
+    /* ... outros estilos de layout (display, margin, etc.) ... */
+}
+
+/* ESTILO DA LISTA DROPDOWN */
+.dropdown-profissionais {
+    position: absolute; /* Flutua em relação ao pai (.campo-de-input-container) */
+    top: 100%; /* Começa logo abaixo do input */
+    left: 0;
+    width: 100%; /* Ocupa toda a largura do container pai */
+    
+    /* Estilos visuais */
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 100; /* Alto z-index para garantir que fique acima de outros elementos */
+    max-height: 200px;
+    overflow-y: auto; 
+}
+
+/* ESTILO DE CADA ITEM DO DROPDOWN */
+.dropdown-item {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.dropdown-item:hover {
+    background-color: #f0f0f0; 
+}
+
+.tipo_atendimento{
+  margin-left: 3rem;
+  
 }

src/pages/Agendamento.jsx

@@ -6,8 +6,8 @@ import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendament
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
-
+import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
-import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
+import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
 
 import { useAuth } from '../components/utils/AuthProvider.js';
 // ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
@@ -24,6 +24,7 @@ import { Search } from 'lucide-react';
 const Agendamento = () => {
   const navigate = useNavigate();
 
+  const [filaEsperaData, setfilaEsperaData] = useState([])
     const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
   const [PageNovaConsulta, setPageConsulta] = useState(false);
@@ -42,11 +43,37 @@ const Agendamento = () => {
 
   let authHeader = getAuthorizationHeader() 
 
-  const FiltrarAgendamentos = (listaTodosAgendamentos) => {
+  const FiltrarAgendamentos = async (listaTodosAgendamentos) => {
+
+    const ConfigurarFiladeEspera = async (patient_id, doctor_id, agendamento) => {
+  
+      
+      let medico = await GetDoctorByID(doctor_id, authHeader)
+      let paciente = await GetPatientByID(patient_id, authHeader)
+
+      let dicionario = {patientInfo:paciente, doctorInfo:medico, agendamentoInfo:agendamento}
+      
+
+      return dicionario
+
+    }
+
   let DictAgendamentosOrganizados = {};
+  let ListaFilaDeEspera = []
 
   for (let i = 0; i < listaTodosAgendamentos.length; i++) {
     const agendamento = listaTodosAgendamentos[i];
+    if(agendamento.status === 'requested'){
+      
+      let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento)
+      
+    ListaFilaDeEspera.push(v)
+
+      console.log(ListaFilaDeEspera)
+
+    }
+
+    else{
     const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
 
     //console.log(DictAgendamentosOrganizados)
@@ -57,11 +84,12 @@ const Agendamento = () => {
     } else {
       // não existe → cria nova key com uma lista
       DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
-    }
+    }}
   }
 
   
   setAgendamentosOrganizados(DictAgendamentosOrganizados);
+  setfilaEsperaData(ListaFilaDeEspera)
 
   }
 
@@ -86,7 +114,6 @@ const Agendamento = () => {
       let lista = []
       const TodosOsMedicos = await GetAllDoctors(authHeader)
 
-      //console.log(TodosOsMedicos, "tentativa")
       for(let d = 0; TodosOsMedicos.length > d; d++){
         lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
       setListaDeMedicos(lista)
@@ -96,42 +123,22 @@ const Agendamento = () => {
   }, [])
 
  useEffect(() => {
-
+      console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
-    console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
+   if (FiltredTodosMedicos.length === 1) {  
-
-    if (FiltredTodosMedicos.length === 1) {
-      
       const unicoMedico = FiltredTodosMedicos[0]; 
       console.log(unicoMedico)
-    
       const idMedicoFiltrado = unicoMedico.idMedico;    
-
       console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);
       
-   
-      
       const agendamentosDoMedico = filtrarAgendamentosPorMedico(
           DictAgendamentosOrganizados, 
           idMedicoFiltrado
-      );
+      );      
-
-      // =========================================================================
-      
       console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
       console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);
       FiltrarAgendamentos(agendamentosDoMedico)
       
-      
+    } 
-      // AQUI VOCÊ PODE APLICAR SUA LÓGICA FINAL:
-      // Ex: setar um novo estado com os agendamentos filtrados, se for necessário:
-      // setAgendamentosFiltrados(agendamentosDoMedico); 
-
-      
-    } else {
-        // Opcional: Limpar a lista filtrada se a busca não for mais única
-        // setAgendamentosFiltrados([]);
-    }
-
   }, [FiltredTodosMedicos]); 
 
 
@@ -158,28 +165,7 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     return agendamentosFiltrados;
 };
 
-
+ 
-
-
-  // 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' },
-    { nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
-    { nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
-    { nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' },
-    { nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' },
-    { nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
-    { nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
-    { nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
-  ];
-
-  // Filtro da fila de espera (sem alteração)
-  const filteredFila = filaEsperaData.filter(item =>
-    item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    item.cpf.includes(searchTerm) ||
-    item.telefone.includes(searchTerm)
-  );
 
   // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
   const filteredAgendamentos = useMemo(() => {
@@ -248,10 +234,14 @@ const handleSearchMedicos = (term) => {
     <div>
       <h1>Agendar nova consulta</h1>
 
-      <button onClick={() => navigate('/secretaria/form-disponibilidade')}>
+      <button >
         Ir para Formulário de Disponibilidade
       </button>
 
+      <button onClick={() => setPageConsulta(true)}>
+        Adcionar consulta
+      </button>
+
       {!PageNovaConsulta ? (
         <div className='atendimento-eprocura'>
           
@@ -380,13 +370,13 @@ const handleSearchMedicos = (term) => {
                       </tr>
                     </thead>
                     <tbody>
-                      {filteredFila.map((item, index) => (
+                      {filaEsperaData.map((item, index) => (
                         <tr key={index}>
-                          <td>{item.nome}</td>
+                          <td> <p>{item.patientInfo[0].full_name} </p>  </td>
-                          <td>{item.email}</td>
+                          <td>{}</td>
-                          <td>{item.cpf}</td>
+                          <td>{}</td>
-                          <td>{item.telefone}</td>
+                          <td>{}</td>
-                          <td>{item.entrada}</td>
+                          <td>{}</td>
                         </tr>
                       ))}
                     </tbody>

src/pages/AgendamentoCadastroManager.jsx

@@ -23,9 +23,9 @@ const AgendamentoCadastroManager = () => {
     var raw = JSON.stringify({
        "patient_id": Dict.patient_id,
        "doctor_id": Dict.doctor_id,
-       "scheduled_at": DataAtual,
+       "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
        "duration_minutes": 30,
-       "appointment_type": "presencial",
+       "appointment_type": Dict.tipo_consulta,
        "chief_complaint": "Dor de cabeça há 3 ",
        "patient_notes": "Prefiro horário pela manhã",
        "insurance_provider": "Unimed",

src/pages/DoctorTable.jsx

@@ -104,7 +104,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));
   }, [isAuthenticated, getAuthorizationHeader]);
 

src/pages/style/Agendamento.css

@@ -91,7 +91,7 @@
   background-color: #2c5e37;
 }
 
-.legenda-item-confirmado{
+.legenda-item-confirmed{
   background-color: #1e90ff;
 }
 .legenda-item-cancelado{
@@ -102,7 +102,7 @@
   background-color: #f0ad4e;
 }
 
-#status-card-consulta-realizado, .legenda-item-realizado {
+#status-card-consulta-completed, .legenda-item-realizado {
   background-color: #b7ffbd;
   border:3px solid #91d392;
   padding: 5px;
@@ -110,7 +110,7 @@
   border-radius: 10px;
 }
 
-#status-card-consulta-cancelado, .legenda-item-cancelado {
+#status-card-consulta-cancelled, .legenda-item-cancelado {
   background-color: #ffb7cc;
   border:3px solid #ff6c84;
   padding: 5px;
@@ -118,7 +118,7 @@
   border-radius: 10px;
 }
 
-#status-card-consulta-confirmado, .legenda-item-confirmed {
+#status-card-consulta-confirmed, .legenda-item-confirmed {
   background-color: #eef8fb;
   border:3px solid #d8dfe7;
   padding: 5px;
@@ -358,26 +358,18 @@ html[data-bs-theme="dark"] {
 #tabela-seletor-container i {
   pointer-events: none;
 }
-/* 1. Contêiner de Limitação de Largura e Posicionamento */
+
-/* Este é o elemento mais importante. Ele deve envolver o input e o dropdown. */
+
 .input-e-dropdown-wrapper {
     position: relative; 
     
-    /* IMPORTANTE: Defina aqui a largura EXATA que você deseja para o input 
+   
-       e para o dropdown. Na sua imagem, o input parece ter cerca de 300px ou mais.
+    width: 350px;
-    */
+    margin-left: auto; 
-    width: 350px; /* Ajuste este valor conforme a largura desejada do seu input */
-    
-    /* Se o input original estava alinhado à direita (como na imagem), 
-       você pode precisar de um float ou margin para posicionar este wrapper.
-    */
-    margin-left: auto; /* Exemplo para alinhar o wrapper à direita se for o caso */
 }
 
-/* 2. Estilização da Área de Busca (Input) */
-/* Garante que o input utilize toda a largura do wrapper */
 .busca-atendimento {
-    /* ... seus estilos de layout (flex, margin, etc.) para o busca-atendimento, se houver ... */
+
 }
 
 .busca-atendimento > div {