From 4590d504bb2d73a2dc61642aaa12cc38963a7254 Mon Sep 17 00:00:00 2001 From: RafaelMTA13 Date: Thu, 25 Sep 2025 12:06:58 -0300 Subject: [PATCH] =?UTF-8?q?adi=C3=A7=C3=A3o=20da=20fila=20de=20espera?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Agendamento.jsx | 354 +++++++++++++++++++------------------- 1 file changed, 181 insertions(+), 173 deletions(-) diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index b008dc0..cbecf75 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -1,215 +1,223 @@ -import React from 'react' +import React, { useState } from 'react' import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia'; import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana'; import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes'; 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 [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' }, + ]; - - const ListarDiasdoMes = (ano, mes) => { - let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = [] + // 🔹 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 base = dayjs(`${ano}-${mes}-01`) - - const DiasnoMes= base.daysInMonth() - for(let d = 1; d <= DiasnoMes; d++){ - - const data = dayjs(`${ano}-${mes}-${d}`) - - const dia = data.format('dddd') - - switch(dia){ - case'Monday': - segundas.push(d) - break - - case'Tuesday': - tercas.push(d) - break - - case'Wednesday': - quartas.push(d) - break - - case'Thursday': - quintas.push(d) - break - - case'Friday': - sextas.push(d) - break - default: - break - }} + const ListarDiasdoMes = (ano, mes) => { + let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = [] - let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas] - console.log('dentro da função', ListaDiasDatas) - - return ListaDiasDatas + const base = dayjs(`${ano}-${mes}-01`) + const DiasnoMes = base.daysInMonth() + + for (let d = 1; d <= DiasnoMes; d++) { + const data = dayjs(`${ano}-${mes}-${d}`) + const dia = data.format('dddd') + + switch (dia) { + case 'Monday': segundas.push(d); break + case 'Tuesday': tercas.push(d); break + case 'Wednesday': quartas.push(d); break + case 'Thursday': quintas.push(d); break + case 'Friday': sextas.push(d); break + default: break } + } + let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas] + return ListaDiasDatas + } const handleClickAgendamento = (agendamento) => { - - if(agendamento.status !== 'vazio')return - - else{ - setPageConsulta(true) - } + if (agendamento.status !== 'vazio') return + else setPageConsulta(true) } - const handleClickCancel = () => { - setPageConsulta(false) - } + const handleClickCancel = () => setPageConsulta(false) + return ( +
+

Agendar nova consulta

+ {!PageNovaConsulta ? ( - return( -
-

Agendar nova consulta

+
+ {/* 🔍 Busca e filtro */} +
+
+ + +
- {!PageNovaConsulta? ( - -
- -
-
- - -
- -
- -
-
- - -
- - - -
- -
- - -
- -
- {FiladeEspera ===false ? - -
- - - -
-
- -
- - - -
- -
-
- - Realizado +
+ +
-
- Confirmado + + {/* 🏥 Unidade e profissional */} +
+ + +
-
- - Agendado + + {/* Botões para alternar Agenda / Fila de Espera */} +
+ + +
-
- Cancelado -
-
- -
- - +
+ {FiladeEspera === false ? + ( +
+
+
+
+ + - {tabela === "diario" && ( - - )} + +
- {tabela === 'semanal' && - - } +
+
Realizado
+
Confirmado
+
Agendado
+
Cancelado
+
- {tabela === 'mensal' && ( - - )} +
-
-
: - -
-
+ {tabela === "diario" && } + {tabela === 'semanal' && } + {tabela === 'mensal' && } +
+
+ ) + : + ( +
+
+ setSearchTerm(e.target.value)} + /> -
- - } -
-
- ) : ( - - - - - )} +

Fila de Espera

- - - - - + + + + + + + + + + + + + + + {filteredFila.map((item, index) => ( + + + + + + + + ))} + +
NomeEmailCPFTelefoneEntrou na fila de espera
{item.nome}{item.email}{item.cpf}{item.telefone}{item.entrada}
+
+ ) + } + +
+ + ) : ( + + )} +
) } - -export default Agendamento +export default Agendamento \ No newline at end of file