RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alteração das coisas que falta

Browse Source
This commit is contained in:
GilenoNeto901 2025-09-25 12:27:39 -03:00
parent 04ed9b46b2
commit 445a0ffe46
3 changed files with 470 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Sidebar from './components/Sidebar';
//import Header from './components/Header';
import TablePaciente from "./pages/TablePaciente";
import TablePaciente from "./pages/Table";
import Inicio from './pages/Inicio';
import PatientCadastroManager from './pages/PatientCadastroManager';

354
src/pages/Agendamento.jsx
View File

@ -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 (
<div>
<h1>Agendar nova consulta</h1>
{!PageNovaConsulta ? (
return(
<div>
<h1>Agendar nova consulta</h1>
<div className='atendimento-eprocura'>
{/* 🔍 Busca e filtro */}
<div className='busca-atendimento'>
<div>
<i className="fa-solid fa-calendar-day"></i>
<input type="text" placeholder="Buscar atendimento" />
</div>
{!PageNovaConsulta? (
<div className='atendimento-eprocura'>
<div className='busca-atendimento'>
<div className="">
<i className="fa-solid fa-calendar-day"></i>
<input type="text" placeholder="Buscar atendimento" />
</div>
<div>
<select>
<option value="" disabled selected>Agendar</option>
<option value="">Atendimento</option>
<option value="">Sessões</option>
<option value="">Urgência</option>
</select>
</div>
</div>
<div className='unidade-selecionarprofissional'>
<select>
<option value="" disabled selected >Unidade</option>
<option value="">Unidade Central</option>
<option value="">Unidade Zona Norte</option>
<option value="">Unidade Zona Oeste</option>
</select>
<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>
<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" : ""}`}
onClick={() => setTabela("diario")}>
<i className="fa-solid fa-calendar-day"></i>
Dia
</button>
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
<i className="fa-solid fa-calendar-day"></i>
Semana
</button>
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
<i className="fa-solid fa-calendar-day"></i>
Mês
</button>
</div>
<div className='legenda-tabela'>
<div className='legenda-item-realizado'>
<span>Realizado</span>
<div>
<select>
<option value="" disabled selected>Agendar</option>
<option value="">Atendimento</option>
<option value="">Sessões</option>
<option value="">Urgência</option>
</select>
</div>
</div>
<div className='legenda-item-confirmado'>
<span>Confirmado</span>
{/* 🏥 Unidade e profissional */}
<div className='unidade-selecionarprofissional'>
<select>
<option value="" disabled selected >Unidade</option>
<option value="">Unidade Central</option>
<option value="">Unidade Zona Norte</option>
<option value="">Unidade Zona Oeste</option>
</select>
<input type="text" placeholder='Selecionar profissional' />
</div>
<div className='legenda-item-agendado'>
<span>Agendado</span>
{/* Botões para alternar Agenda / Fila de Espera */}
<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='legenda-item-cancelado'>
<span>Cancelado</span>
</div>
</div>
</section>
<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" : ""}`}
onClick={() => setTabela("diario")}
>
<i className="fa-solid fa-calendar-day"></i>
Dia
</button>
<button
className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
onClick={() => setTabela("semanal")}
>
<i className="fa-solid fa-calendar-day"></i>
Semana
</button>
{tabela === "diario" && (
<TabelaAgendamentoDia
handleClickAgendamento={handleClickAgendamento}
/>
)}
<button
className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
onClick={() => setTabela("mensal")}
>
<i className="fa-solid fa-calendar-day"></i>
Mês
</button>
</div>
{tabela === 'semanal' &&
<TabelaAgendamentoSemana/>
}
<div className='legenda-tabela'>
<div className='legenda-item-realizado'><span>Realizado</span></div>
<div className='legenda-item-confirmado'><span>Confirmado</span></div>
<div className='legenda-item-agendado'><span>Agendado</span></div>
<div className='legenda-item-cancelado'><span>Cancelado</span></div>
</div>
{tabela === 'mensal' && (
<TabelaAgendamentoMes
ListarDiasdoMes={ListarDiasdoMes}
aplicarCores={true} // 🔹 Ativa a lógica de cores só no mensal
/>
)}
</section>
</div>
</div>:
<div>
<div className='container-fila-espera'></div>
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
{tabela === 'semanal' && <TabelaAgendamentoSemana />}
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
</div>
</div>
)
:
(
<div className="fila-container">
<div className="fila-header">
<input
type="text"
placeholder="Pesquisar..."
className="busca-fila-espera"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
}
</section>
</div>
) : (
<FormNovaConsulta onCancel={handleClickCancel} />
)}
<h2 className="fila-titulo">Fila de Espera</h2>
</div>
<table className="fila-tabela">
<thead>
<tr>
<th>Nome</th>
<th>Email</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>
))}
</tbody>
</table>
</div>
)
}
</section>
</div>
) : (
<FormNovaConsulta onCancel={handleClickCancel} />
)}
</div>
)
}
export default Agendamento
export default Agendamento

288
src/pages/style/FilaEspera.css Normal file
View File

@ -0,0 +1,288 @@
/* 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;
background-color: #f1f1f1
}
/* --- 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;
}
}
.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;
}