forked from RiseUP/riseup-squad23
891 lines
38 KiB
JavaScript
891 lines
38 KiB
JavaScript
import React, { useState, useMemo, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import API_KEY from '../components/utils/apiKeys.js';
|
|
import AgendamentoCadastroManager from './AgendamentoCadastroManager.jsx';
|
|
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
|
|
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
|
|
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
|
|
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
|
// Importação de endpoints para lógica da Fila de Espera e Médicos (versão main)
|
|
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
|
|
import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
|
|
|
|
import { useAuth } from '../components/utils/AuthProvider.js';
|
|
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
|
|
import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
|
|
|
|
import dayjs from 'dayjs';
|
|
import "./style/Agendamento.css";
|
|
import './style/FilaEspera.css';
|
|
import { Search } from 'lucide-react';
|
|
|
|
import Spinner from '../components/Spinner.jsx';
|
|
|
|
|
|
|
|
|
|
|
|
const Agendamento = ({ setDictInfo }) => {
|
|
const navigate = useNavigate();
|
|
|
|
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([])
|
|
|
|
const [selectedID, setSelectedId] = useState('0')
|
|
const [filaEsperaData, setFilaEsperaData] = useState([])
|
|
const [FiladeEspera, setFiladeEspera] = useState(false);
|
|
const [tabela, setTabela] = useState('diario');
|
|
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [agendamentos, setAgendamentos] = useState()
|
|
const { getAuthorizationHeader } = useAuth()
|
|
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({})
|
|
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
|
const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
|
|
|
|
const [ListaDeMedicos, setListaDeMedicos] = useState([])
|
|
const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
|
|
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
|
|
|
const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" })
|
|
|
|
|
|
const [cacheAgendamentos, setCacheAgendamentos] = useState([])
|
|
|
|
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
|
|
|
const [motivoCancelamento, setMotivoCancelamento] = useState("")
|
|
|
|
const [corModal, setCorModal] = useState("")
|
|
|
|
const [listaConsultasID, setListaConsultaID] = useState([])
|
|
const [coresConsultas, setCoresConsultas] = useState([])
|
|
|
|
// Estados para a tabela da fila de espera
|
|
const [searchTermFila, setSearchTermFila] = useState('');
|
|
const [filtroMedicoFila, setFiltroMedicoFila] = useState('Todos');
|
|
const [paginaAtualFila, setPaginaAtualFila] = useState(1);
|
|
const [itensPorPaginaFila, setItensPorPaginaFila] = useState(10);
|
|
|
|
let authHeader = getAuthorizationHeader()
|
|
|
|
const cacheMedicos = {};
|
|
const cachePacientes = {};
|
|
|
|
useMemo(() => {
|
|
if (!listaTodosAgendamentos.length) return { agendamentosOrganizados: {}, filaEsperaData: [] };
|
|
console.log("recarregando")
|
|
const DictAgendamentosOrganizados = {};
|
|
const ListaFilaDeEspera = [];
|
|
|
|
const fetchDados = async () => {
|
|
for (const agendamento of listaTodosAgendamentos) {
|
|
if (agendamento.status === "requested") {
|
|
// Cache de médico e paciente
|
|
if (!cacheMedicos[agendamento.doctor_id]) {
|
|
cacheMedicos[agendamento.doctor_id] = await GetDoctorByID(agendamento.doctor_id, authHeader);
|
|
}
|
|
if (!cachePacientes[agendamento.patient_id]) {
|
|
cachePacientes[agendamento.patient_id] = await GetPatientByID(agendamento.patient_id, authHeader);
|
|
}
|
|
|
|
const medico = cacheMedicos[agendamento.doctor_id];
|
|
const paciente = cachePacientes[agendamento.patient_id];
|
|
|
|
ListaFilaDeEspera.push({
|
|
agendamento,
|
|
Infos: {
|
|
nome_medico: medico[0]?.full_name,
|
|
doctor_id: medico[0]?.id,
|
|
patient_id: paciente[0]?.id,
|
|
paciente_nome: paciente[0]?.full_name,
|
|
paciente_cpf: paciente[0]?.cpf,
|
|
},
|
|
});
|
|
} else {
|
|
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
|
|
|
if (DiaAgendamento in DictAgendamentosOrganizados) {
|
|
DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
|
|
} else {
|
|
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ordenar por data
|
|
for (const DiaAgendamento in DictAgendamentosOrganizados) {
|
|
DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
|
|
}
|
|
|
|
const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort();
|
|
|
|
const DictAgendamentosFinal = {};
|
|
for (const data of chavesOrdenadas) {
|
|
DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
|
|
}
|
|
|
|
setAgendamentosOrganizados(DictAgendamentosFinal);
|
|
setFilaEsperaData(ListaFilaDeEspera);
|
|
};
|
|
|
|
fetchDados();
|
|
|
|
return { agendamentosOrganizados: DictAgendamentosOrganizados, filaEsperaData: ListaFilaDeEspera };
|
|
}, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda
|
|
|
|
|
|
useEffect(() => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Authorization", authHeader);
|
|
myHeaders.append("apikey", API_KEY)
|
|
|
|
var requestOptions = {
|
|
method: 'GET',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
|
|
.then(response => response.json())
|
|
.then(result => { setListaTodosAgendamentos(result); console.log(result) })
|
|
.catch(error => console.log('error', error));
|
|
|
|
const PegarTodosOsMedicos = async () => {
|
|
let lista = []
|
|
const TodosOsMedicos = await GetAllDoctors(authHeader)
|
|
|
|
for (let d = 0; TodosOsMedicos.length > d; d++) {
|
|
lista.push({ nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })
|
|
}
|
|
setListaDeMedicos(lista)
|
|
}
|
|
PegarTodosOsMedicos()
|
|
|
|
}, [])
|
|
|
|
|
|
const deleteConsulta = (selectedPatientId) => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append('apikey', API_KEY)
|
|
myHeaders.append("authorization", authHeader)
|
|
|
|
|
|
var raw = JSON.stringify({
|
|
"status": "cancelled",
|
|
"cancellation_reason": motivoCancelamento
|
|
});
|
|
|
|
|
|
var requestOptions = {
|
|
method: 'PATCH',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
|
.then(response => { if (response.status !== 200) (console.log(response)) })
|
|
.then(result => console.log(result))
|
|
.catch(error => console.log('error', error));
|
|
}
|
|
|
|
const confirmConsulta = (selectedPatientId) => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append('apikey', API_KEY)
|
|
myHeaders.append("authorization", authHeader)
|
|
|
|
|
|
var raw = JSON.stringify({
|
|
"status": "confirmed"
|
|
});
|
|
|
|
|
|
var requestOptions = {
|
|
method: 'PATCH',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
|
.then(response => { if (response.status !== 200) (console.log(response)) })
|
|
.then(result => console.log(result))
|
|
.catch(error => console.log('error', error));
|
|
|
|
}
|
|
|
|
|
|
|
|
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: segundas, tercas: tercas, quartas: quartas, quintas: quintas, sextas: sextas }
|
|
return ListaDiasDatas
|
|
}
|
|
|
|
|
|
const handleClickAgendamento = (agendamento) => {
|
|
if (agendamento.status !== 'vazio') return
|
|
else setPageConsulta(true)
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
|
|
if (MedicoFiltrado.id != "vazio") {
|
|
const unicoMedico = MedicoFiltrado;
|
|
console.log(unicoMedico)
|
|
const idMedicoFiltrado = unicoMedico.idMedico;
|
|
console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);
|
|
|
|
const agendamentosDoMedico = filtrarAgendamentosPorMedico(
|
|
DictAgendamentosOrganizados,
|
|
idMedicoFiltrado
|
|
);
|
|
console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
|
|
console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);
|
|
|
|
//FiltrarAgendamentos(agendamentosDoMedico)
|
|
|
|
setListaTodosAgendamentos(agendamentosDoMedico)
|
|
|
|
}
|
|
}, [FiltredTodosMedicos, MedicoFiltrado]);
|
|
|
|
const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
|
|
setCacheAgendamentos(DictAgendamentosOrganizados);
|
|
|
|
const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
|
|
const todosOsAgendamentos = todasAsListasDeAgendamentos.flat();
|
|
|
|
const agendamentosFiltrados = todosOsAgendamentos.filter(agendamento =>
|
|
agendamento.doctor_id === idMedicoFiltrado
|
|
);
|
|
|
|
return agendamentosFiltrados;
|
|
};
|
|
|
|
const handleSearchMedicos = (term) => {
|
|
setSearchTermDoctor(term);
|
|
if (term.trim() === '') {
|
|
if (MedicoFiltrado.id !== "vazio") {
|
|
console.log("Medico escolhido, mas vai ser apagado")
|
|
console.log(cacheAgendamentos, "cache ")
|
|
|
|
}
|
|
|
|
|
|
setFiltredTodosMedicos([]);
|
|
setMedicoFiltrado({ id: "vazio" })
|
|
|
|
//2 FiltrarAgendamentos()
|
|
return;
|
|
}
|
|
if (FiltredTodosMedicos.length === 1) {
|
|
setMedicoFiltrado({ ...FiltredTodosMedicos[0] })
|
|
}
|
|
|
|
const filtered = ListaDeMedicos.filter(medico =>
|
|
medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
|
|
);
|
|
setFiltredTodosMedicos(filtered);
|
|
};
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div className='spinner'></div>
|
|
<h1>Agendar nova consulta</h1>
|
|
|
|
|
|
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
|
<button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
|
|
<i className="bi bi-plus-circle"></i> Adicionar Consulta
|
|
</button>
|
|
|
|
<button
|
|
className="manage-button btn"
|
|
onClick={() => navigate("/secretaria/excecoes-disponibilidade")}
|
|
>
|
|
<i className="bi bi-gear-fill me-1"></i>
|
|
Gerenciar Exceções
|
|
</button>
|
|
|
|
<button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}>
|
|
<i className="bi bi-gear-fill me-1"></i>
|
|
Mudar Disponibilidade
|
|
</button>
|
|
</div>
|
|
|
|
{!PageNovaConsulta ? (
|
|
<div className='atendimento-eprocura'>
|
|
<div className='unidade-selecionarprofissional'>
|
|
|
|
{/* Bloco de busca por médico */}
|
|
<div className='busca-atendimento-container'>
|
|
<div className='input-e-dropdown-wrapper'>
|
|
<div className='busca-atendimento'>
|
|
<div>
|
|
<i className="fa-solid fa-calendar-day"></i>
|
|
<input
|
|
type="text"
|
|
placeholder="Filtrar atendimento por médico..."
|
|
value={searchTermDoctor}
|
|
onChange={(e) => handleSearchMedicos(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* DROPDOWN (RENDERIZAÇÃO CONDICIONAL) */}
|
|
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
|
<div className='dropdown-medicos'>
|
|
{FiltredTodosMedicos.map((medico) => (
|
|
<div
|
|
key={medico.id}
|
|
className='dropdown-item'
|
|
onClick={() => {
|
|
setSearchTermDoctor(medico.nomeMedico);
|
|
setFiltredTodosMedicos([]);
|
|
setMedicoFiltrado(medico)
|
|
|
|
}}
|
|
>
|
|
<p>{medico.nomeMedico} </p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
</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>
|
|
|
|
{/* Componentes de Tabela - Adicionado props de delete da main */}
|
|
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
|
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
|
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
|
</div>
|
|
</div>
|
|
)
|
|
:
|
|
(
|
|
<div className="page-content table-paciente-container">
|
|
<section className="row">
|
|
<div className="col-12">
|
|
<div className="card table-paciente-card">
|
|
<div className="card-header">
|
|
<h4 className="card-title mb-0">Fila de Espera</h4>
|
|
</div>
|
|
|
|
<div className="card-body">
|
|
{/* Filtros */}
|
|
<div className="card p-3 mb-3 table-paciente-filters">
|
|
<h5 className="mb-3">
|
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
|
</h5>
|
|
|
|
<div className="mb-3">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Buscar por nome do paciente ou CPF..."
|
|
value={searchTermFila}
|
|
onChange={(e) => setSearchTermFila(e.target.value)}
|
|
/>
|
|
<small className="text-muted">
|
|
Digite o nome completo ou número do CPF
|
|
</small>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Filtrar por nome do médico..."
|
|
value={filtroMedicoFila === 'Todos' ? '' : filtroMedicoFila}
|
|
onChange={(e) => setFiltroMedicoFila(e.target.value || 'Todos')}
|
|
/>
|
|
<small className="text-muted">
|
|
Digite o nome do médico para filtrar
|
|
</small>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-end">
|
|
<button
|
|
className="btn btn-outline-secondary btn-sm"
|
|
onClick={() => {
|
|
setSearchTermFila('');
|
|
setFiltroMedicoFila('Todos');
|
|
setPaginaAtualFila(1);
|
|
}}
|
|
>
|
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-3">
|
|
<div className="contador-pacientes">
|
|
{(() => {
|
|
const filtrados = filaEsperaData.filter((item) => {
|
|
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
|
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
|
return passaBusca && passaMedico;
|
|
});
|
|
return filtrados.length;
|
|
})()} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filtros Ativos */}
|
|
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
|
<div className="alert alert-info mb-3 filters-active">
|
|
<strong>Filtros ativos:</strong>
|
|
<div className="mt-1">
|
|
{searchTermFila && <span className="badge bg-primary me-2">Busca: "{searchTermFila}"</span>}
|
|
{filtroMedicoFila !== "Todos" && <span className="badge bg-primary me-2">Médico: {filtroMedicoFila}</span>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabela */}
|
|
<div className="table-responsive">
|
|
<table className="table table-striped table-hover table-paciente-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nome do Paciente</th>
|
|
<th>CPF</th>
|
|
<th>Médico Solicitado</th>
|
|
<th>Data da Solicitação</th>
|
|
<th>Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(() => {
|
|
// Filtrar dados
|
|
const filaFiltrada = filaEsperaData.filter((item) => {
|
|
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
|
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
|
return passaBusca && passaMedico;
|
|
});
|
|
|
|
// Paginação
|
|
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
|
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
|
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
|
const filaPaginada = filaFiltrada.slice(indiceInicial, indiceFinal);
|
|
|
|
if (filaPaginada.length > 0) {
|
|
return filaPaginada.map((item, index) => (
|
|
<tr key={index}>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
{item.Infos?.paciente_nome}
|
|
</div>
|
|
</td>
|
|
<td>{item.Infos?.paciente_cpf}</td>
|
|
<td>
|
|
<span className="badge insurance-badge">
|
|
{item.Infos?.nome_medico || 'Não informado'}
|
|
</span>
|
|
</td>
|
|
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
|
<td>
|
|
<div className="d-flex gap-2">
|
|
<button
|
|
className="btn btn-sm btn-edit"
|
|
onClick={() => {
|
|
console.log(item, 'item');
|
|
navigate(`${2}/edit`);
|
|
setDictInfo(item);
|
|
}}
|
|
>
|
|
<i className="bi bi-pencil me-1"></i> Editar
|
|
</button>
|
|
|
|
<button
|
|
className="btn btn-sm btn-delete"
|
|
onClick={() => {
|
|
setSelectedId(item.agendamento.id);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
));
|
|
} else {
|
|
return (
|
|
<tr>
|
|
<td colSpan="5" className="text-center py-4">
|
|
<div className="text-muted">
|
|
<i className="bi bi-search display-4"></i>
|
|
<p className="mt-2">Nenhuma solicitação encontrada com os filtros aplicados.</p>
|
|
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
|
<button
|
|
className="btn btn-outline-primary btn-sm mt-2"
|
|
onClick={() => {
|
|
setSearchTermFila('');
|
|
setFiltroMedicoFila('Todos');
|
|
setPaginaAtualFila(1);
|
|
}}
|
|
>
|
|
Limpar filtros
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
})()}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Paginação */}
|
|
{(() => {
|
|
const filaFiltrada = filaEsperaData.filter((item) => {
|
|
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
|
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
|
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
|
return passaBusca && passaMedico;
|
|
});
|
|
|
|
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
|
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
|
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
|
|
|
if (filaFiltrada.length > 0) {
|
|
return (
|
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
|
<div className="d-flex align-items-center">
|
|
<span className="me-2 text-muted">Itens por página:</span>
|
|
<select
|
|
className="form-select form-select-sm w-auto"
|
|
value={itensPorPaginaFila}
|
|
onChange={(e) => {
|
|
setItensPorPaginaFila(Number(e.target.value));
|
|
setPaginaAtualFila(1);
|
|
}}
|
|
>
|
|
<option value={5}>5</option>
|
|
<option value={10}>10</option>
|
|
<option value={25}>25</option>
|
|
<option value={50}>50</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="d-flex align-items-center">
|
|
<span className="me-3 text-muted">
|
|
Página {paginaAtualFila} de {totalPaginasFila} •
|
|
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, filaFiltrada.length)} de {filaFiltrada.length} solicitações
|
|
</span>
|
|
|
|
<nav>
|
|
<ul className="pagination pagination-sm mb-0">
|
|
<li className={`page-item ${paginaAtualFila === 1 ? 'disabled' : ''}`}>
|
|
<button
|
|
className="page-link"
|
|
onClick={() => setPaginaAtualFila(paginaAtualFila - 1)}
|
|
>
|
|
<i className="bi bi-chevron-left"></i>
|
|
</button>
|
|
</li>
|
|
|
|
{Array.from({ length: Math.min(5, totalPaginasFila) }, (_, i) => {
|
|
const startPage = Math.max(1, paginaAtualFila - 2);
|
|
const pageNum = startPage + i;
|
|
if (pageNum <= totalPaginasFila) {
|
|
return (
|
|
<li key={pageNum} className={`page-item ${pageNum === paginaAtualFila ? 'active' : ''}`}>
|
|
<button
|
|
className="page-link"
|
|
onClick={() => setPaginaAtualFila(pageNum)}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
</li>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
|
|
<li className={`page-item ${paginaAtualFila === totalPaginasFila ? 'disabled' : ''}`}>
|
|
<button
|
|
className="page-link"
|
|
onClick={() => setPaginaAtualFila(paginaAtualFila + 1)}
|
|
>
|
|
<i className="bi bi-chevron-right"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
</section>
|
|
</div>
|
|
) : (
|
|
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
|
)}
|
|
|
|
{/* Modal de Confirmação de Exclusão */}
|
|
{showDeleteModal && (
|
|
<div
|
|
className="modal fade show"
|
|
style={{
|
|
display: "block",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
}}
|
|
tabIndex="-1"
|
|
onClick={(e) =>
|
|
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
}
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
|
|
<div className="modal-header bg-danger bg-opacity-25">
|
|
<h5 className="modal-title text-danger">
|
|
Confirmação de Cancelamento
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
onClick={() => setShowDeleteModal(false)}
|
|
></button>
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
Qual o motivo do cancelamento?
|
|
</p>
|
|
<div className='campo-de-input'>
|
|
|
|
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => {
|
|
setShowDeleteModal(false);
|
|
|
|
}}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger"
|
|
onClick={() => {
|
|
deleteConsulta(selectedID);
|
|
setShowDeleteModal(false)
|
|
let lista_cores = coresConsultas
|
|
|
|
let lista = listaConsultasID
|
|
|
|
lista.push(selectedID)
|
|
lista_cores.push("cancelled")
|
|
|
|
setCoresConsultas(lista_cores)
|
|
|
|
setListaConsultaID(lista)
|
|
|
|
console.log("lista", lista)
|
|
|
|
}}
|
|
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)}
|
|
|
|
|
|
|
|
|
|
|
|
{showConfirmModal && (
|
|
<div
|
|
className="modal fade show"
|
|
style={{
|
|
display: "block",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
}}
|
|
tabIndex="-1"
|
|
onClick={(e) =>
|
|
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
}
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
|
|
<div className="modal-header bg-success">
|
|
<h5 className="modal-title">
|
|
Confirmação de edição
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
Tem certeza que deseja retirar o cancelamento ?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => { setShowConfirmModal(false); setSelectedId("") }}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-success"
|
|
onClick={() => {
|
|
confirmConsulta(selectedID); setShowConfirmModal(false)
|
|
let lista_cores = coresConsultas
|
|
|
|
let lista = listaConsultasID
|
|
|
|
lista.push(selectedID)
|
|
lista_cores.push("confirmed")
|
|
|
|
setCoresConsultas(lista_cores)
|
|
|
|
setListaConsultaID(lista)
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Confirmar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Agendamento; |