Finalizar o merge com as mudanças do agendamento

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,11 +1,17 @@
-import React, { useState, useEffect } from "react";
+
 import InputMask from "react-input-mask";
-import "./style/styleagendamentos.css";
+import "./style/formagendamentos.css";
+import { useState, useEffect } from "react";
+
 
 const FormNovaConsulta = ({ onCancel, patientID }) => {
+  
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
+  const [paciente, setPaciente] = useState({})
+  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
+
     useEffect(() => {
     if (!patientID) return;
 
@@ -48,6 +54,102 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     }
   }; 
 
+
+  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) => {
+    console.log(valor)
+
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    BuscarPacienteExistentePeloCPF(valor)
+    
+    return digits
+      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+  }
+
+
+  const BuscarCPFnoBancodeDados = async (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'
+  };
+
+   const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions);
+  const result = await response.json();
+  return result
+
+  
+  }
+
+  const BuscarPacienteExistentePeloCPF = async (value) => {
+   
+   if(isNaN(value[13]) === false && value.length === 14)try {
+      const result = await BuscarCPFnoBancodeDados(value);
+      console.log("Resultado:", result);
+      
+      if (result.data.existe === true){
+
+      var myHeaders = new Headers();
+    myHeaders.append("Authorization", "Bearer <token>");
+
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
+      .then(response => response.json())
+      .then(result => setPaciente(result.data))
+      .catch(error => console.log('error', error));
+    }
+      
+
+
+    } catch (error) {
+      console.log("error", error);
+    }
+    //BuscarCPFnoBancodeDados(value)
+  }
+
+  const handleChange = (e) => {
+
+    const {value, name} = e.target;
+
+    console.log(value, name)
+
+    if(name === 'email'){
+      setPaciente({...paciente, contato:{
+        ...paciente.contato,
+        email:value
+      }})
+
+    }else{
+    setPaciente({...paciente,[name]:value})
+    }
+  }
+
   const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
@@ -60,43 +162,63 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
       <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">
+          <div className="campo-de-input">
             <label>Nome *</label>
-          <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+            <input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
+          </div>
 
+          <div className="campo-de-input">
             <label>CPF do paciente</label>
-          <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
-            {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
-          </InputMask>
             
+               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
+           
+          </div>
+
+          <div className="campo-de-input">
             <label>RG</label>
             <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
           </div>
+      </div>
 
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
+          <div className="campo-de-input">
             <label>Data de nascimento *</label>
-        <input type="date" name="data_nascimento" required />
+            <input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
+          </div>
 
+          <div className="campo-de-input">
             <label>Telefone</label>
             <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
               {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
             </InputMask>
+          </div>
 
+          <div className="campo-de-input">
             <label>E-mail</label>
-        <input type="email" name="email" placeholder="Email" />
+            <input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
+          </div>
+      </div>
 
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
+       
+        <div className="campo-de-input">
           <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>
@@ -125,58 +247,106 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
         </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">
               <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 selected>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="">Selecione o solicitante</option>
+                <option value="" disabled invisible selected>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>
+      </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

@@ -10,6 +10,11 @@ import "./style/Agendamento.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 +59,6 @@ const Agendamento = () => {
       return ListaDiasDatas
       }
 
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
@@ -76,6 +79,7 @@ const Agendamento = () => {
   <div>
     <h1>Agendar nova consulta</h1>
 
+
   {!PageNovaConsulta? (
     
     <div className='atendimento-eprocura'>
@@ -106,10 +110,23 @@ 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>
+        <section className='btns-e-legenda-container'>
+       
         <div>
           <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
           
@@ -125,6 +142,7 @@ const Agendamento = () => {
             <i className="fa-solid fa-calendar-day"></i>
             Mês
           </button>
+        </div>
 
          <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
@@ -143,6 +161,12 @@ const Agendamento = () => {
           </div>
         </div>
          
+        </section>
+
+       
+      
+
+
         {tabela === "diario" && (
           <TabelaAgendamentoDia
             handleClickAgendamento={handleClickAgendamento}
@@ -162,7 +186,15 @@ const Agendamento = () => {
         )}
 
       </div>
+       </div>: 
+       
+       <div> 
+        <div className='container-fila-espera'></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/PatientCadastroManager.jsx

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-// Importamos os dois novos componentes que criamos
 
 import PatientForm from '../components/patients/PatientForm';
 
 function PatientCadastroManager( {setCurrentPage} ) {
-  // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
+ 
  
 
   const [formData, setFormData] = useState({})

src/pages/Table.jsx

@@ -29,8 +29,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
  
   }
 
-
-
   const DeleteAnexo = async (patientID) => {
 
   
@@ -61,17 +59,10 @@ 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;
@@ -85,45 +76,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
       .catch((error) => console.log("Deu problema", error));
   };
 
-  // Função para marcar/desmarcar VIP
-  const toggleVIP = async (id, atual) => {
-    const novoStatus = atual === true ? false : true;
  
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ vip: novoStatus }),
-      }
-    )
-      .then((response) => response.json())
-      .then(() => {
-        setPacientes((prev) =>
-          prev.map((p) => (p.id === id ? { ...p, vip: novoStatus } : p))
-        );
-      })
-      .catch((error) => console.log("Erro ao atualizar VIP:", error));
-  };
-
-  // Função para atualizar convênio/particular
-  const updateConvenio = async (id, convenio) => {
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ convenio }),
-      }
-    )
-      .then((response) => response.json())
-      .then(() => {
-        setPacientes((prev) =>
-          prev.map((p) => (p.id === id ? { ...p, convenio } : p))
-        );
-      })
-      .catch((error) => console.log("Erro ao atualizar convênio:", error));
-  };
 
   // Requisição inicial para buscar pacientes
   useEffect(() => {

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