Começo da fila de espera e icones de formulario

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -3,6 +3,40 @@ import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 
 const FormNovaConsulta = ({ onCancel }) => {
+
+  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!");
@@ -23,8 +57,8 @@ const FormNovaConsulta = ({ onCancel }) => {
 
           <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 mask="999.999.999-99" placeholder="000.000.000-00" onChange={(e) => BuscarPacienteExistentePeloCPF(e.target.value)}>
+              {(inputProps) => <input {...inputProps} type="text" name="cpf"  />}
             </InputMask>
           </div>
 
@@ -98,7 +132,7 @@ const FormNovaConsulta = ({ onCancel }) => {
             <div className='campo-de-input'>
               <label>Unidade *</label>
               <select name="unidade">
-                <option value="" disabled invisible>Selecione sua unidade</option>
+                <option value="" disabled invisible>Selecione a unidade</option>
                 <option value="centro">Núcleo de Especialidades Integradas</option>
                 <option value="leste">Unidade Leste</option>
               </select>
@@ -134,6 +168,14 @@ const FormNovaConsulta = ({ onCancel }) => {
           </div>
       </section>
        
+       <div className="icons-container">
+      <span className="material-symbols-outlined icon">accessible</span>
+      <span className="material-symbols-outlined icon">elderly</span>
+      <span className="material-symbols-outlined icon">pregnant_woman</span>
+      <span className="material-symbols-outlined icon">child_care</span>
+      <span className="material-symbols-outlined icon">accessibility_new</span>
+    </div>
+    
       <div className="campo-de-input">
         <label>Observações</label>
         <textarea name="observacoes" rows="4" cols="1"></textarea>
@@ -145,6 +187,7 @@ const FormNovaConsulta = ({ onCancel }) => {
           <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

@@ -1,3 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+.icons-container {
+  display: flex;
+  gap: 10px;
+}
+
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-size: 36px;
+  padding: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  cursor: default;
+}
+
+
+
 .form-container {
   /*max-width: 800px;*/
   margin: 20px auto;
@@ -124,13 +147,11 @@
   display: flex;
   flex-direction: row;
   gap: 4rem;
-
 }
 
 textarea{
   width: 30px;
   resize: both;
-  
 }
 
 .campos-informacoes-paciente,

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

@@ -51,8 +51,9 @@ font-weight: 600;
   padding: 8px;
 }
 
-/* Ajuste para a classe .diadia, se for usada */
-.diadia {
+/* Ajuste para a classe calendario, se for usada */
+/*
+.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 */
-.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);
-}
+/* Ajuste para a classe .calendario, se for usada */
 
 .tabelasemanal tr:nth-child(even) {
   background-color: #e7e7e7a6 !important;

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

@@ -112,13 +112,20 @@ const Agendamento = () => {
         <input type="text" placeholder='Selecionar profissional' />
       </div>
 
+    <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>
 
-    <div className='diadia'>
+    <section className='calendario-ou-filaespera'>
+    {FiladeEspera ===false ? 
+ 
+    <div className='calendario'>
       
       
       
       <div>
-        <section className='botões-container'>
+        <section className='btns-e-legenda-container'>
        
         <div>
           <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
@@ -136,12 +143,8 @@ const Agendamento = () => {
             Mês
           </button>
         </div>
-         <div className='botão-fila-espera'>
-         <button onClick={ () => setFiladeEspera(true)}>Abrir fila de espera</button>
-        </div>
-        </section>
 
-        <div className='legenda-tabela'>
+         <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
      
             <span>Realizado</span>
@@ -158,6 +161,10 @@ const Agendamento = () => {
           </div>
         </div>
          
+        </section>
+
+       
+      
 
 
         {tabela === "diario" && (
@@ -179,7 +186,15 @@ const Agendamento = () => {
         )}
 
       </div>
+       </div>: 
+       
+       <div> 
+        <div className='container-fila-espera'></div>
+
        </div>
+       
+       }
+    </section>
     </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

@@ -93,6 +93,7 @@
   margin-top: 30px;
   margin-bottom: 10px;
   gap: 15px;
+  justify-content: flex-end;
 }
 
 .legenda-item-realizado{
@@ -143,9 +144,53 @@
   border-radius: 10px;
 }
 
-.botões-container{
+.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;
 }