Adiciona barra de pesquisa na fila de espera e centraliza título

src/pages/Agendamento.jsx

@@ -14,6 +14,27 @@ const Agendamento = () => {
   const [FiladeEspera, setFiladeEspera] = useState(false)
   const [tabela, setTabela] = useState('diario')
   const [PageNovaConsulta, setPageConsulta] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('') // 🔹 Estado da busca
+
+  // 🔹 Dados da fila de espera
+  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' },
+  ];
+
+  // 🔹 Filtra a fila de espera com base no searchTerm
+  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)
+  );
 
   const ListarDiasdoMes = (ano, mes) => {
     let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
@@ -36,7 +57,6 @@ const Agendamento = () => {
     }
 
     let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
-    console.log('dentro da função', ListaDiasDatas)
     return ListaDiasDatas
   }
 
@@ -107,7 +127,6 @@ const Agendamento = () => {
                 <div className='calendario'>
                   <div>
                     <section className='btns-e-legenda-container'>
-
                       <div>
                         <button
                           className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
@@ -135,117 +154,59 @@ const Agendamento = () => {
                       </div>
 
                       <div className='legenda-tabela'>
-                        <div className='legenda-item-realizado'>
+                        <div className='legenda-item-realizado'><span>Realizado</span></div>
-                          <span>Realizado</span>
+                        <div className='legenda-item-confirmado'><span>Confirmado</span></div>
-                        </div>
+                        <div className='legenda-item-agendado'><span>Agendado</span></div>
-                        <div className='legenda-item-confirmado'>
+                        <div className='legenda-item-cancelado'><span>Cancelado</span></div>
-                          <span>Confirmado</span>
-                        </div>
-                        <div className='legenda-item-agendado'>
-                          <span>Agendado</span>
-                        </div>
-                        <div className='legenda-item-cancelado'>
-                          <span>Cancelado</span>
-                        </div>
                       </div>
 
                     </section>
 
-                    {tabela === "diario" && (
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
-                      <TabelaAgendamentoDia
-                        handleClickAgendamento={handleClickAgendamento}
-                      />
-                    )}
-
                     {tabela === 'semanal' && <TabelaAgendamentoSemana />}
-
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
-                    {tabela === 'mensal' && (
-                      <TabelaAgendamentoMes
-                        ListarDiasdoMes={ListarDiasdoMes}
-                        aplicarCores={true} // 🔹 Ativa a lógica de cores só no mensal
-                      />
-                    )}
                   </div>
                 </div>
               )
               :
               (
-                <div>
+                <div className="fila-container">
-                  <div className='container-fila-espera'></div>
+                <div className="fila-header">
+  <input
+    type="text"
+    placeholder="Pesquisar..."
+    className="busca-fila-espera"
+    value={searchTerm}
+    onChange={(e) => setSearchTerm(e.target.value)}
+  />
 
-                  <div className="fila-container">
+  <h2 className="fila-titulo">Fila de Espera</h2>
-                    <h2 className="fila-titulo">Fila de Espera</h2>
+</div>
 
-                    <table className="fila-tabela">
+
-                      <thead>
+
-                        <tr>
+                  <table className="fila-tabela">
-                          <th>Nome</th>
+                    <thead>
-                          <th>Email</th>
+                      <tr>
-                          <th>CPF</th>
+                        <th>Nome</th>
-                          <th>Telefone</th>
+                        <th>Email</th>
-                          <th>Entrou na fila de espera</th>
+                        <th>CPF</th>
+                        <th>Telefone</th>
+                        <th>Entrou na fila de espera</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredFila.map((item, index) => (
+                        <tr key={index}>
+                          <td>{item.nome}</td>
+                          <td>{item.email}</td>
+                          <td>{item.cpf}</td>
+                          <td>{item.telefone}</td>
+                          <td>{item.entrada}</td>
                         </tr>
-                      </thead>
+                      ))}
-                      <tbody>
+                    </tbody>
-                        <tr>
+                  </table>
-                          <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>
               )
             }

src/pages/style/Agendamento.css

@@ -141,4 +141,34 @@
   padding: 5px;
   font-weight: bold;
   border-radius: 10px;
-}
+}
+.fila-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* centraliza o título */
+  margin-bottom: 16px;
+  height: 40px; /* altura da linha */
+}
+
+.busca-fila-espera {
+  position: absolute;
+  left: 0; /* barra na esquerda */
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+  width: 350px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.busca-fila-espera:focus {
+  border-color: #888;
+}
+
+.fila-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  text-align: center;
+}