diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index 66349fd..6c49336 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -1,183 +1,262 @@ -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 ListarDiasdoMes = (ano, mes) => { - let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = [] - - - 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] - console.log('dentro da função', ListaDiasDatas) - - return ListaDiasDatas - } - + const [FiladeEspera, setFiladeEspera] = useState(false) const [tabela, setTabela] = useState('diario') const [PageNovaConsulta, setPageConsulta] = useState(false) - const handleClickAgendamento = (agendamento) => { - - if(agendamento.status !== 'vazio')return + const ListarDiasdoMes = (ano, mes) => { + let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = [] - else{ - setPageConsulta(true) + 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] + console.log('dentro da função', ListaDiasDatas) + return ListaDiasDatas } - const handleClickCancel = () => { - setPageConsulta(false) + const handleClickAgendamento = (agendamento) => { + if (agendamento.status !== 'vazio') return + else setPageConsulta(true) } + const handleClickCancel = () => setPageConsulta(false) + return ( +
+

Agendar nova consulta

- return( -
-

Agendar nova consulta

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

Fila de Espera

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeEmailCPFTelefoneEntrou na fila de espera
Ricardo Pereiraricardo.pereira@gmail.com444.777.666-55(79) 99123-456725/09/2025 às 08:00
Ana Costaana.costa@gmail.com321.654.987-00(79) 97777-333325/09/2025 às 08:30
Lucas Martinslucas.martins@gmail.com777.666.555-33(79) 99654-321025/09/2025 às 09:00
João Souzajoao.souza@gmail.com987.654.321-00(79) 98888-222225/09/2025 às 14:00
Maria Silvamaria.silva@gmail.com123.456.789-00(79) 99999-111125/09/2025 às 14:30
Fernanda Limafernanda.lima@gmail.com888.999.000-22(79) 98877-665526/09/2025 às 09:30
Carlos Andradecarlos.andrade@gmail.com222.555.888-11(79) 99876-543226/09/2025 às 10:00
Juliana Oliveirajuliana.o@gmail.com111.222.333-44(79) 98765-123426/09/2025 às 11:30
+
+
+ ) + } +
-
- -
-
- - -
- - - - -
- -
-
- - - - -
-
- - Realizado -
-
- Confirmado -
-
- - Agendado -
-
- Cancelado -
-
- - {tabela === "diario" && ( - - )} - - {tabela === 'semanal' && - - } - - {tabela === 'mensal' && ( - - )} - -
-
+ ) : ( + + )}
- ) : ( - - - - - )} -
- - - - - ) } - export default Agendamento diff --git a/src/pages/style/FilaEspera.css b/src/pages/style/FilaEspera.css new file mode 100644 index 0000000..4dac43c --- /dev/null +++ b/src/pages/style/FilaEspera.css @@ -0,0 +1,257 @@ +/* Zera margens padrão da página */ +html, body { + margin: 0; + padding: 0; +} + +/* ----- filtros e botões ----- */ +.filtros-container select, +.filtros-container input { + padding: 0.5rem; + border-radius: 5px; + border: 1px solid #ccc; +} + +.btn-buscar { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + border: none; + border-radius: 5px; + background-color: #f0f0f0; + cursor: pointer; +} + +/* ----- unidade/profissional ----- */ +.unidade-selecionarprofissional { + background-color: #fdfdfdde; + padding: 20px 10px; + display: flex; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.unidade-selecionarprofissional input, +.unidade-selecionarprofissional select { + margin-left: 8px; + border-radius: 8px; + padding: 5px; + width: 20%; +} + +.unidade-selecionarprofissional select { + width: 7%; +} + +/* ----- busca atendimento ----- */ +.busca-atendimento { + display: flex; + flex-direction: row; + margin: 10px; + justify-content: flex-end; +} + +.busca-atendimento select { + padding: 5px; + border-radius: 8px; + margin-left: 15px; + background-color: #0078d7; + color: white; + font-weight: bold; +} + +.busca-atendimento input { + margin-left: 8px; + border-radius: 8px; + padding: 5px; + width: 100%; +} + +/* ----- botões de seleção ----- */ +.btn-selecionar-tabeladia, +.btn-selecionar-tabelasemana, +.btn-selecionar-tabelames { + background-color: rgba(231, 231, 231, 0.808); + padding: 8px 10px; + font-size: larger; + font-weight: bold; + border-style: hidden; +} + +.btn-selecionar-tabeladia { + border-radius: 10px 0 0 10px; +} + +.btn-selecionar-tabelames { + border-radius: 0 10px 10px 0; +} + +.btn-selecionar-tabeladia.ativo, +.btn-selecionar-tabelasemana.ativo, +.btn-selecionar-tabelames.ativo { + background-color: lightcyan; + border-color: darkcyan; + font-weight: bolder; +} + +.btns-e-legenda-container { + display: flex; + justify-content: space-between; + flex-direction: row; + margin-top: 10px; +} + +/* ----- legenda ----- */ +.legenda-tabela { + display: flex; + justify-content: flex-end; + margin-top: 10px; + margin-bottom: 10px; + gap: 15px; +} + +.legenda-item-realizado { background-color: #2c5e37; } +.legenda-item-confirmado { background-color: #1e90ff; } +.legenda-item-cancelado { background-color: #d9534f; } +.legenda-item-agendado { background-color: #f0ad4e; } + +#status-card-consulta-realizado, +.legenda-item-realizado { + background-color: #b7ffbd; + border: 3px solid #91d392; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-cancelado, +.legenda-item-cancelado { + background-color: #ffb7cc; + border: 3px solid #ff6c84; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-confirmado, +.legenda-item-confirmado { + background-color: #eef8fb; + border: 3px solid #d8dfe7; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-agendado, +.legenda-item-agendado { + background-color: #f7f7c4; + border: 3px solid #f3ce67; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +/* ----- calendário ----- */ +.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: 0; + border-bottom: 3px solid rgb(253, 253, 253); + padding: 8px; + border-radius: 10px 10px 0 0; + font-weight: bold; +} + +.opc-filaespera-ativo, +.opc-agenda-ativo { + color: white; + background-color: #5980fd; +} + +/* ===== Fila de Espera ===== */ +.fila-container { + width: 100%; + max-width: none; + margin: 0; /* >>> sem espaço para encostar no topo <<< */ + background: #ffffff; + border-radius: 12px; + padding: 24px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); + border: 10px solid #ffffff; + box-sizing: border-box; +} + +.fila-titulo { + text-align: center; + font-size: 1.8rem; + font-weight: bold; + margin-bottom: 20px; + color: #333; + border-bottom: 2px solid #e0e0e0; + padding-bottom: 10px; +} + +.fila-tabela { + width: 100%; + border-collapse: collapse; + font-size: 1rem; +} + +.fila-tabela thead { + background-color: #f7fbff; +} + +.fila-tabela th, +.fila-tabela td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid #e0e0e0; +} + +.fila-tabela th { + font-weight: bold; + color: #444; +} + +/* --- Linhas alternadas cinza/branco --- */ +.fila-tabela tbody tr:nth-child(even) { + background-color: #f9f9f9; /* cinza clarinho */ +} +.fila-tabela tbody tr:nth-child(odd) { + background-color: #ffffff; /* branco */ +} + +.fila-tabela tbody tr:hover { + background-color: #f1f6fa; /* hover sutil */ +} + +@media (max-width: 768px) { + .fila-tabela th, .fila-tabela td { + padding: 8px; + font-size: 0.9rem; + } + .fila-titulo { + font-size: 1.5rem; + } +}