FIla de espera

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,8 +1,60 @@
 import React from "react";
 import InputMask from "react-input-mask";
-import "./style/styleagendamentos.css";
+import "./style/formagendamentos.css";
+import { useState } from "react";
+
 
 const FormNovaConsulta = ({ onCancel }) => {
+  
+  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
+  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 BuscarCPFnoBancodeDados = (cpf) => {
+
+      var myHeaders = new Headers();
+  myHeaders.append("Authorization", "Bearer <token>");
+  myHeaders.append("Content-Type", "application/json");
+
+  var raw = JSON.stringify({
+    "cpf": cpf
+  });
+
+  var requestOptions = {
+    method: 'POST',
+    headers: myHeaders,
+    body: raw,
+    redirect: 'follow'
+  };
+
+fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
+   .then(response => response.text())
+   .then(result => console.log(result))
+   .catch(error => console.log('error', error));
+  }
+
+  const BuscarPacienteExistentePeloCPF = (value) => {
+   
+   if(isNaN(value[13]) === false){
+    BuscarCPFnoBancodeDados(value)
+   } 
+    //BuscarCPFnoBancodeDados(value)
+
+  
+  }
+
   const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
@@ -15,101 +67,169 @@ const FormNovaConsulta = ({ onCancel }) => {
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-      <div id="informacoes-paciente-primeiralinha">
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
-          <label>Nome *</label>
+          <div className="campo-de-input">
-          <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+            <label>Nome *</label>
+            <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+          </div>
 
-          <label>CPF do paciente</label>
+          <div className="campo-de-input">
-          <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
+            <label>CPF do paciente</label>
-            {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
+            <InputMask mask="999.999.999-99" placeholder="000.000.000-00" onChange={(e) => BuscarPacienteExistentePeloCPF(e.target.value)}>
-          </InputMask>
+              {(inputProps) => <input {...inputProps} type="text" name="cpf"  />}
+            </InputMask>
+          </div>
 
-          <label>RG</label>
+          <div className="campo-de-input">
-          <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+            <label>RG</label>
+            <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+          </div>
       </div>
 
-        <label>Data de nascimento *</label>
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
-        <input type="date" name="data_nascimento" required />
+          <div className="campo-de-input">
+            <label>Data de nascimento *</label>
+            <input type="date" name="data_nascimento" required />
+          </div>
 
-        <label>Telefone</label>
+          <div className="campo-de-input">
-        <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
+            <label>Telefone</label>
-          {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+            <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
-        </InputMask>
+              {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+            </InputMask>
+          </div>
 
-        <label>E-mail</label>
+          <div className="campo-de-input">
-        <input type="email" name="email" placeholder="Email" />
+            <label>E-mail</label>
+            <input type="email" name="email" placeholder="Email" />
+          </div>
+      </div>
 
-        <label>Convênio</label>
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
-        <select name="convenio">
-          <option value="particular">Particular</option>
-          <option value="publico">Público</option>
-        </select>
        
-        <label>Matrícula</label>
+        <div className="campo-de-input">
-        <input type="text" name="matricula" placeholder="000000000" />
+          <label>Convênio</label>
+          <select name="convenio">
+            <option value="particular">Particular</option>
+            <option value="publico">Público</option>
+          </select>
+        </div>
+        <div className="campo-de-input">
+          <label>Matrícula</label>
+          <input type="text" name="matricula" placeholder="000000000" />
+        </div>
     
+        <div className="campo-de-input">
         <label>Validade</label>
-        <InputMask mask="99/99/9999" placeholder="00/00/0000">
+          <input type="date" name="validade" />
-          {(inputProps) => <input {...inputProps} type="text" name="validade" />}
+        </div>
-        </InputMask>
+      </div>
 
         <h3 className="section-subtitle">Informações adicionais</h3>
         <button type="button" className="btn-secondary">Documentos e anexos</button>
 
         <h2 className="section-title">Informações do atendimento</h2>
        
-        <label>Nome do profissional *</label>
-        <input type="text" name="profissional" required />
       
-        <label>Tipo de atendimento *</label>
+          <div className="icons-container">
-        <input type="text" name="tipoAtendimento" required />
       
-        <label>Unidade *</label>
+        <div  className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-        <select name="unidade">
-          <option value="centro">Núcleo de Especialidades Integradas</option>
-          <option value="leste">Unidade Leste</option>
-        </select>
           
-        <label>Data *</label>
+          <span className="material-symbols-outlined icon">accessible</span>
-        <input type="date" name="dataAtendimento" required />
-
-        <label>Início *</label>
-        <input type="time" name="inicio" required />
-
-        <label>Término *</label>
-        <input type="time" name="termino" required />
-
-        <label>Profissional solicitante</label>
-        <select name="solicitante">
-          <option value="">Selecione o solicitante</option>
-          <option value="secretaria">Secretária</option>
-          <option value="medico">Médico</option>
-        </select>
-
-        <label>Observações</label>
-        <textarea name="observacoes"></textarea>
-
-        <label>
-          <input type="checkbox" name="reembolso" /> Pagamento via Reembolso
-        </label>
-
-        <label>
-          <input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
-        </label>
-
-        <h3 className="section-subtitle">Acessibilidade</h3>
-        <div className="btn-group">
-          <button type="button"></button>
-          <button type="button"></button>
-          <button type="button"></button>
-          <button type="button"></button>
         </div>
 
-        <div className="form-actions">
+         <div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-          <button type="submit" className="btn-primary">Salvar agendamento</button>
+          <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">
+              <label>Nome do profissional *</label>
+              <input type="text" name="profissional" required />
+            </div>
+          
+
+          <div className="campo-de-input">
+            <label>Tipo de atendimento *</label>
+            <input type="text" name="tipoAtendimento" required />
+          </div>
+        </div>
+
+        <section id="informacoes-atendimento-segunda-linha">
+          <section id="informacoes-atendimento-segunda-linha-esquerda">
+        
+          <div className="campo-informacoes-atendimento">
+            <div className='campo-de-input'>
+              <label>Unidade *</label>
+              <select name="unidade">
+                <option value="" disabled invisible>Selecione a unidade</option>
+                <option value="centro">Núcleo de Especialidades Integradas</option>
+                <option value="leste">Unidade Leste</option>
+              </select>
+            </div>
+          
+
+          
+            <div className="campo-de-input">
+              <label>Data *</label>
+              <input type="date" name="dataAtendimento" 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">
+              <label>Término *</label>
+              <input type="time" name="termino" required />
+            </div>
+          
+            <div className="campo-de-input">
+              <label>Profissional solicitante</label>
+              <select name="solicitante">
+                <option value="" disabled invisible>Selecione o solicitante</option>
+                <option value="secretaria">Secretária</option>
+                <option value="medico">Médico</option>
+              </select>
+            </div>
+          </div>
+      </section>
+
+      <section className="informacoes-atendimento-segunda-linha-direita"> 
+     
+
+        <div className="campo-de-input">
+          <label>Observações</label>
+          <textarea name="observacoes" rows="4" cols="1"></textarea>
+        </div>
+      </section>
+    </section>
+
+      <div className="form-actions">
+        <button type="submit" className="btn-primary">Salvar agendamento</button>
           <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
         </div>
       </form>
+      
     </div>
   );
 };

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -47,7 +47,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.segunda.length > 3 ? 
-                  <div><p>+ {dias.segunda.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -65,7 +65,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.terca.length > 3 ? 
-                  <div><p>+ {dias.terca.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -83,7 +83,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.quarta.length > 3 ? 
-                  <div><p>+ {dias.quarta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -101,7 +101,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.quinta.length > 3 ? 
-                  <div><p>+ {dias.quinta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -119,7 +119,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.sexta.length > 3 ? 
-                  <div><p>+ {dias.sexta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div> 
                 : null}
               </div>
             </td>

src/components/AgendarConsulta/style/formagendamentos.css

@@ -0,0 +1,210 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+.icons-container {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-bottom: -7px;
+}
+
+.acessibilidade-ativado{
+  background-color: #1e3a8a;
+  border: none;
+}
+.acessibilidade-ativado svg, .acessibilidade-ativado .icon{
+  color: white;
+}
+
+
+.icons-div{
+  border: 1px solid #607080;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.icons-div:hover{
+  background-color: #1e3a8a; 
+  }
+ .icons-div:hover svg, .icons-div:hover .icon{
+  color:white;
+ }
+
+svg{
+  color:black;
+ 
+}
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-size: 20px;
+  color:black  
+  
+  
+}
+
+.form-container {
+  /*max-width: 800px;*/
+  margin: 20px auto;
+  padding: 25px;
+  background: #f5f8ff;
+  border-radius: 12px;
+  font-family: Arial, sans-serif;
+}
+
+.form-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: #1e3a8a;
+  margin-bottom: 20px;
+}
+
+.form-agendamento label {
+  display: block;
+  margin-top: 12px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-agendamento input,
+.form-agendamento select,
+.form-agendamento textarea {
+  width: 100%;
+  padding: 8px;
+  margin-top: 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.section-title {
+  font-size: 20px;
+  margin-top: 25px;
+  color: #1e40af;
+}
+
+.section-subtitle {
+  font-size: 16px;
+  margin-top: 20px;
+  color: #374151;
+}
+
+.btn-group button {
+  margin-right: 8px;
+  padding: 8px 12px;
+  border: 1px solid #1e3a8a;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.btn-group button:hover {
+  background: #e0e7ff;
+}
+
+.form-actions {
+  margin-top: 25px;
+  display: flex;
+  gap: 12px;
+}
+
+.btn-primary {
+  background: #1e3a8a;
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #172554;
+}
+
+.btn-cancel {
+  background: #e5e7eb;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-cancel:hover {
+  background: #d1d5db;
+}
+
+.btn-secondary {
+  margin: 10px 0;
+  background: #f3f4f6;
+  padding: 8px 14px;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+
+.cardconsulta-infosecundaria{
+  font-size: small;
+}
+
+.campos-informacoes-paciente,.campo-informacoes-atendimento{
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+}
+
+.campo-de-input{
+  display: flex;
+  flex-direction: column;
+  
+}
+
+
+#informacoes-atendimento-segunda-linha{
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 4rem;
+}
+
+textarea{
+  width: 30px;
+  resize: both;
+}
+
+.campos-informacoes-paciente,
+.campo-informacoes-atendimento {
+  display: flex;
+  gap: 16px;              /* espaço entre campos */
+}
+
+.campo-de-input {
+  flex: 1;                /* todos os filhos ocupam mesmo espaço */
+  display: flex;
+  flex-direction: column; /* mantém label em cima do input */
+}
+
+#informacoes-atendimento-segunda-linha-esquerda select[name="unidade"]{
+  width: 300px;
+}
+
+input[type="time"]{
+  width: 150px;
+}
+
+select[name=solicitante]{
+  width: 190px;
+}
+
+.campo-de-input{
+  width:120%
+}

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

@@ -51,8 +51,9 @@ font-weight: 600;
   padding: 8px;
 }
 
-/* Ajuste para a classe .diadia, se for usada */
+/* Ajuste para a classe calendario, se for usada */
-.diadia {
+/*
+.calendario {
   margin-top: 20px;
   border-collapse: collapse;
   width: 100%;
@@ -61,7 +62,7 @@ font-weight: 600;
   box-shadow: 0 4px 12px rgb(255, 255, 255);
   border: 10px solid #ffffffc5;
   background-color: rgb(253, 253, 253);
-}
+}*/
 
 
 .mostrar-horario td, .mostrar-horario th {

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

@@ -148,3 +148,9 @@
   margin-bottom: 5px;
   border-radius: 4px;
 }
+
+.cards-que-faltam{
+  color: #005a9e;
+  font-weight: bold;
+  font-size: larger;
+}

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

@@ -56,17 +56,7 @@
   padding: 12px;
 }
 
-/* Ajuste para a classe .diadia, se for usada */
+/* Ajuste para a classe .calendario, se for usada */
-.diadia {
-  margin-top: 20px;
-  border-collapse: collapse;
-  width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgb(255, 255, 255);
-  border: 10px solid #ffffffc5;
-  background-color: rgb(253, 253, 253);
-}
 
 .tabelasemanal tr:nth-child(even) {
   background-color: #e7e7e7a6 !important;
@@ -80,3 +70,7 @@
 .tabelasemanal tr:hover {
   background-color: #f1f1f1 !important;
 }
+
+tr{
+  width: 1000px;
+}

src/components/AgendarConsulta/style/styleagendamentos.css

@@ -1,108 +0,0 @@
-.form-container {
-  max-width: 800px;
-  margin: 20px auto;
-  padding: 25px;
-  background: #f5f8ff;
-  border-radius: 12px;
-  font-family: Arial, sans-serif;
-}
-
-.form-title {
-  font-size: 26px;
-  font-weight: bold;
-  color: #1e3a8a;
-  margin-bottom: 20px;
-}
-
-.form-agendamento label {
-  display: block;
-  margin-top: 12px;
-  font-weight: bold;
-  color: #333;
-}
-
-.form-agendamento input,
-.form-agendamento select,
-.form-agendamento textarea {
-  width: 100%;
-  padding: 8px;
-  margin-top: 6px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.section-title {
-  font-size: 20px;
-  margin-top: 25px;
-  color: #1e40af;
-}
-
-.section-subtitle {
-  font-size: 16px;
-  margin-top: 20px;
-  color: #374151;
-}
-
-.btn-group button {
-  margin-right: 8px;
-  padding: 8px 12px;
-  border: 1px solid #1e3a8a;
-  border-radius: 6px;
-  background: #fff;
-  cursor: pointer;
-}
-
-.btn-group button:hover {
-  background: #e0e7ff;
-}
-
-.form-actions {
-  margin-top: 25px;
-  display: flex;
-  gap: 12px;
-}
-
-.btn-primary {
-  background: #1e3a8a;
-  color: white;
-  border: none;
-  padding: 10px 18px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-primary:hover {
-  background: #172554;
-}
-
-.btn-cancel {
-  background: #e5e7eb;
-  border: none;
-  padding: 10px 18px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-cancel:hover {
-  background: #d1d5db;
-}
-
-.btn-secondary {
-  margin: 10px 0;
-  background: #f3f4f6;
-  padding: 8px 14px;
-  border: 1px solid #9ca3af;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-secondary:hover {
-  background: #e5e7eb;
-}
-
-
-.cardconsulta-infosecundaria{
-  font-size: small;
-}
-

src/components/ProfileCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+/*import React from 'react';
 
 function ProfileCard() {
   return (
@@ -18,4 +18,4 @@ function ProfileCard() {
   );
 }
 
-export default ProfileCard;
+export default ProfileCard;*/

src/pages/Agendamento.jsx

@@ -7,9 +7,15 @@ import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
 import { useState} from 'react';
 import dayjs from 'dayjs'
 import "./style/Agendamento.css";
+import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
+  const [FiladeEspera, setFiladeEspera] = useState(false)
+  const [tabela, setTabela] = useState('diario')
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
+
+
   
     const ListarDiasdoMes = (ano, mes) => {
       let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
@@ -54,8 +60,6 @@ const Agendamento = () => {
       return ListaDiasDatas
       }
 
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
@@ -76,6 +80,7 @@ const Agendamento = () => {
   <div>
     <h1>Agendar nova consulta</h1>
 
+
   {!PageNovaConsulta? (
     
     <div className='atendimento-eprocura'>
@@ -106,27 +111,41 @@ const Agendamento = () => {
         </select>
 
         <input type="text" placeholder='Selecionar profissional' />
-
       </div>
 
-    <div className='diadia'>
+    <div className='container-btns-agenda-fila_esepera'>
+      <button className={`btn-agenda ${ FiladeEspera === false ? "opc-agenda-ativo": "" }`} onClick={ () => setFiladeEspera(false)}>Agenda</button>
+      <button className={`btn-fila-espera ${ FiladeEspera === true ? "opc-filaespera-ativo": "" }`} onClick={ () => setFiladeEspera(true)}>Fila de espera</button>
+    </div>
+
+    <section className='calendario-ou-filaespera'>
+    {FiladeEspera ===false ? 
+ 
+    <div className='calendario'>
+      
+      
+      
       <div>
-        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+        <section className='btns-e-legenda-container'>
        
-        onClick={() => setTabela("diario")}>
+        <div>
-          <i className="fa-solid fa-calendar-day"></i>
+          <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
-          Dia
-        </button>
-        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Semana
-        </button>
-        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Mês
-        </button>
           
-        <div className='legenda-tabela'>
+          onClick={() => setTabela("diario")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Dia
+          </button>
+          <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Semana
+          </button>
+          <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Mês
+          </button>
+        </div>
+
+         <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
      
             <span>Realizado</span>
@@ -143,6 +162,12 @@ const Agendamento = () => {
           </div>
         </div>
          
+        </section>
+
+       
+      
+
+
         {tabela === "diario" && (
           <TabelaAgendamentoDia
             handleClickAgendamento={handleClickAgendamento}
@@ -162,7 +187,89 @@ const Agendamento = () => {
         )}
 
       </div>
+       </div>: 
+       
+       <div> 
+        <div className='container-fila-espera'></div>
+        <div className="fila-container">
+  <h2 className="fila-titulo">Fila de Espera</h2>
+
+  <table className="fila-tabela">
+   <thead>
+    <tr>
+        <th>Nome</th>
+        <th>Email</th>
+        <th>CPF</th>
+        <th>Telefone</th>
+        <th>Entrou na fila de espera</th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td>Ricardo Pereira</td>
+        <td>ricardo.pereira@gmail.com</td>
+        <td>444.777.666-55</td>
+        <td>(79) 99123-4567</td>
+        <td>25/09/2025 às 08:00</td>
+    </tr>
+    <tr>
+        <td>Ana Costa</td>
+        <td>ana.costa@gmail.com</td>
+        <td>321.654.987-00</td>
+        <td>(79) 97777-3333</td>
+        <td>25/09/2025 às 08:30</td>
+    </tr>
+    <tr>
+        <td>Lucas Martins</td>
+        <td>lucas.martins@gmail.com</td>
+        <td>777.666.555-33</td>
+        <td>(79) 99654-3210</td>
+        <td>25/09/2025 às 09:00</td>
+    </tr>
+    <tr>
+        <td>João Souza</td>
+        <td>joao.souza@gmail.com</td>
+        <td>987.654.321-00</td>
+        <td>(79) 98888-2222</td>
+        <td>25/09/2025 às 14:00</td>
+    </tr>
+    <tr>
+        <td>Maria Silva</td>
+        <td>maria.silva@gmail.com</td>
+        <td>123.456.789-00</td>
+        <td>(79) 99999-1111</td>
+        <td>25/09/2025 às 14:30</td>
+    </tr>
+    <tr>
+        <td>Fernanda Lima</td>
+        <td>fernanda.lima@gmail.com</td>
+        <td>888.999.000-22</td>
+        <td>(79) 98877-6655</td>
+        <td>26/09/2025 às 09:30</td>
+    </tr>
+    <tr>
+        <td>Carlos Andrade</td>
+        <td>carlos.andrade@gmail.com</td>
+        <td>222.555.888-11</td>
+        <td>(79) 99876-5432</td>
+        <td>26/09/2025 às 10:00</td>
+    </tr>
+    <tr>
+        <td>Juliana Oliveira</td>
+        <td>juliana.o@gmail.com</td>
+        <td>111.222.333-44</td>
+        <td>(79) 98765-1234</td>
+        <td>26/09/2025 às 11:30</td>
+    </tr>
+</tbody>
+  </table>
+</div>
+
+
        </div>
+       
+       }
+    </section>
     </div>
   ) : (
 

src/pages/DoctorDetails.jsx

@@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Anexos do Médico:</label>
-          <p>{paciente.anexos || "-"}</p>
+          <p>{ "-"}</p>
         </div>
       </div>
       </div>

src/pages/Table.jsx

@@ -29,8 +29,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
  
   }
 
-
-
   const DeleteAnexo = async (patientID) => {
 
   
@@ -66,12 +64,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // Função para excluir paciente
   const deletePatient = async (id) => {
-
     DeleteAnexo(id)
 
-
-
-
     const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
 
     if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;

src/pages/style/Agendamento.css

@@ -89,10 +89,11 @@
 
 .legenda-tabela{
   display: flex;
-  justify-content: flex-end;
+  
-  margin-top: 10px;
+  margin-top: 30px;
   margin-bottom: 10px;
   gap: 15px;
+  justify-content: flex-end;
 }
 
 .legenda-item-realizado{
@@ -142,3 +143,54 @@
   font-weight: bold;
   border-radius: 10px;
 }
+
+.btns-e-legenda-container{
+  
+  display: flex;
+
+  justify-content: space-between;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+
+.calendario {
+  
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+
+
+
+.calendario-ou-filaespera{
+  margin-top: 0;
+}
+
+.container-btns-agenda-fila_esepera{
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left:20px ;
+  
+}
+
+.btn-fila-espera, .btn-agenda{
+  background-color: transparent;
+  border: 0px ;
+  border-bottom: 3px solid rgb(253, 253, 253);
+  padding: 8px;
+  border-radius: 10px 10px 0px 0px;
+  font-weight: bold;
+  
+}
+
+.opc-filaespera-ativo, .opc-agenda-ativo{
+  color: white;
+  background-color: #5980fd;
+}