forked from RiseUP/riseup-squad23
Pequenas melhorias
This commit is contained in:
joao_pedro
parent
8f7fef3b8d
commit
96505d081a
@ -1,226 +0,0 @@
|
||||
import React, { useState, useMemo } 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';
|
||||
|
||||
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
|
||||
import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
// Importe os estilos
|
||||
import "./styleMedico/Agendamento.css";
|
||||
import "./styleMedico/FilaEspera.css";
|
||||
|
||||
const Agendamento = () => {
|
||||
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// Dados da fila de espera (sem alteração)
|
||||
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' },
|
||||
];
|
||||
|
||||
// Filtro da fila de espera (sem alteração)
|
||||
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)
|
||||
);
|
||||
|
||||
// Lógica para filtrar os dados da AGENDA (AgendamentosMes)
|
||||
const filteredAgendamentos = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
return AgendamentosMes;
|
||||
}
|
||||
|
||||
const lowerCaseSearchTerm = searchTerm.toLowerCase();
|
||||
const filteredData = {};
|
||||
|
||||
for (const semana in AgendamentosMes) {
|
||||
filteredData[semana] = {};
|
||||
for (const dia in AgendamentosMes[semana]) {
|
||||
filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
|
||||
agendamento.status === 'vazio' ||
|
||||
(agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
|
||||
);
|
||||
}
|
||||
}
|
||||
return filteredData;
|
||||
}, [searchTerm]);
|
||||
|
||||
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]
|
||||
return ListaDiasDatas
|
||||
}
|
||||
|
||||
const handleClickAgendamento = (agendamento) => {
|
||||
if (agendamento.status !== 'vazio') return
|
||||
else setPageConsulta(true)
|
||||
}
|
||||
|
||||
const handleClickCancel = () => setPageConsulta(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar atendimento por paciente..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</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);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
Agenda
|
||||
</button>
|
||||
<button
|
||||
className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
|
||||
onClick={() => {
|
||||
setFiladeEspera(true);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="fila-container">
|
||||
<div className="fila-header">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar na fila de espera..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<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;
|
||||
@ -33,7 +33,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
<table className='tabeladiaria'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Horário</th>
|
||||
<th className='cabecalho-horario'>Horário</th>
|
||||
<th>{}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -46,7 +46,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
return(
|
||||
<tr key={index}>
|
||||
|
||||
<td><p>{`${horario[0]}:${horario[1]}`}</p></td>
|
||||
<td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
<div onClick={() => handleClickAgendamento(agendamento)}>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId}/>
|
||||
|
||||
@ -7,6 +7,47 @@
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
||||
}
|
||||
/* 1. Estilização do TD (Container) */
|
||||
.coluna-horario {
|
||||
/* Garante que o TD tenha um preenchimento generoso para parecer maior */
|
||||
padding: 20px 10px; /* Ajuste estes valores conforme a necessidade */
|
||||
|
||||
/* Centraliza o conteúdo (o <p>) vertical e horizontalmente */
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/* Cor de fundo clara para contrastar levemente, se desejar */
|
||||
/* background-color: #f9f9f9; */
|
||||
|
||||
/* Garante que a coluna não fique muito estreita */
|
||||
width: 15%; /* Exemplo, ajuste se necessário */
|
||||
}
|
||||
|
||||
/* 2. Estilização do P (O texto do horário) */
|
||||
.horario-texto {
|
||||
/* Remove a margem padrão do <p> para alinhamento preciso */
|
||||
margin: 0;
|
||||
|
||||
/* Aplica a cor azul condizente com o "10:30" da imagem */
|
||||
color: #007bff; /* Tonalidade de azul Bootstrap/padrão */
|
||||
|
||||
/* Aumenta a fonte para dar mais destaque */
|
||||
font-size: 1.3em; /* 1.3 vezes o tamanho normal */
|
||||
|
||||
/* Deixa a fonte mais pesada para ser mais visível */
|
||||
font-weight: bold;
|
||||
|
||||
/* Se você quiser garantir que a fonte seja a mesma do resto do site */
|
||||
/* font-family: 'Arial', sans-serif; */
|
||||
}
|
||||
|
||||
/* 3. Estilização do cabeçalho (opcional, para consistência) */
|
||||
.cabecalho-horario {
|
||||
background-color: #007bff; /* Cor de fundo azul como na imagem */
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Células da tabela */
|
||||
.tabeladiaria th, .tabeladiaria td {
|
||||
|
||||
@ -14,6 +14,17 @@
|
||||
"icon": "hospital-fill",
|
||||
"url": "/admin/medicos"
|
||||
},
|
||||
{
|
||||
"name": "Agendamentos",
|
||||
"icon": "calendar-plus-fill",
|
||||
"url": "/admin/agendamento"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Relaototios",
|
||||
"icon": "table",
|
||||
"url": "/admin/laudo"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Gestão de Usuários",
|
||||
@ -25,12 +36,5 @@
|
||||
"name": "Painel Administrativo",
|
||||
"icon": "file-bar-graph-fill",
|
||||
"url": "/admin/painel"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Laudo do Paciente",
|
||||
"icon": "table",
|
||||
"url": "/admin/laudo"
|
||||
}
|
||||
|
||||
]
|
||||
@ -281,12 +281,12 @@ const handleSearchMedicos = (term) => {
|
||||
Mudar Disponibilidade
|
||||
</button>
|
||||
|
||||
<button onClick={() => setPageConsulta(true)}>
|
||||
Adcionar consulta
|
||||
<button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Consulta
|
||||
</button>
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
|
||||
<div className='busca-atendimento-container'>
|
||||
|
||||
@ -326,15 +326,6 @@ const handleSearchMedicos = (term) => {
|
||||
</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'>
|
||||
@ -453,7 +444,7 @@ const handleSearchMedicos = (term) => {
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<AgendamentoCadastroManager />
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
{showDeleteModal && (
|
||||
|
||||
@ -5,7 +5,7 @@ import { useAuth } from '../components/utils/AuthProvider'
|
||||
import { useEffect,useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
|
||||
const AgendamentoCadastroManager = () => {
|
||||
const AgendamentoCadastroManager = ({setPageConsulta}) => {
|
||||
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
const [agendamento, setAgendamento] = useState({status:'confirmed'})
|
||||
@ -66,7 +66,7 @@ const AgendamentoCadastroManager = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<FormNovaConsulta onSave={handleSave} agendamento={agendamento} setAgendamento={setAgendamento}/>
|
||||
<FormNovaConsulta onSave={handleSave} agendamento={agendamento} setAgendamento={setAgendamento} onCancel={() => setPageConsulta(false)}/>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -14,6 +14,8 @@ import DoctorEditPage from "../../pages/DoctorEditPage";
|
||||
import UserDashboard from '../../PagesAdm/gestao.jsx';
|
||||
import PainelAdministrativo from '../../PagesAdm/painel.jsx';
|
||||
import admItems from "../../data/sidebar-items-adm.json";
|
||||
|
||||
|
||||
// ...restante do código...
|
||||
function Perfiladm() {
|
||||
return (
|
||||
|
||||
@ -4,7 +4,7 @@ import Sidebar from "../../components/Sidebar";
|
||||
import DoctorRelatorioManager from "../../PagesMedico/DoctorRelatorioManager";
|
||||
import Prontuario from "../../PagesMedico/prontuario";
|
||||
import Relatorio from "../../PagesMedico/relatorio";
|
||||
import Agendamento from "../../PagesMedico/Agendamento";
|
||||
import DoctorAgendamentoManager from "../../PagesMedico/DoctorAgendamentoManager";
|
||||
import Chat from "../../PagesMedico/Chat";
|
||||
import DoctorItems from "../../data/sidebar-items-medico.json";
|
||||
import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio";
|
||||
@ -23,7 +23,7 @@ function PerfilMedico() {
|
||||
<Route path="/relatorios/:id/edit" element={<EditPageRelatorio />} />
|
||||
<Route path="/prontuario" element={<Prontuario />} />
|
||||
<Route path="/relatorios" element={<DoctorRelatorioManager />} />
|
||||
<Route path="/agendamentoMedico" element={<Agendamento />} />
|
||||
<Route path="/agendamentoMedico" element={<DoctorAgendamentoManager />} />
|
||||
<Route path="/chat" element={<Chat />} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user