riseup-squad23/src/pages/Agendamento.jsx
2025-10-29 10:45:34 -03:00

630 lines
23 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';
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 [corModal, setCorModal] = useState("")
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"
});
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>
<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} corModal={corModal}/>}
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
</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 do Paciente</th> {/* Ajustado o cabeçalho */}
<th>CPF</th> {/* Ajustado o cabeçalho */}
<th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
<th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
<th>Ações</th>
</tr>
</thead>
<tbody>
{filaEsperaData.map((item, index) => (
<tr key={index}>
<td> <p>{item.Infos?.paciente_nome} </p> </td>
<td><p>{item.Infos?.paciente_cpf} </p></td>
<td><p>{item.Infos?.nome_medico} </p></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>
))}
</tbody>
</table>
</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 Exclusão
</h5>
<button
type="button"
className="btn-close"
onClick={() => setShowDeleteModal(false)}
></button>
</div>
<div className="modal-body">
<p className="mb-0 fs-5">
Tem certeza que deseja excluir este agendamento?
</p>
<div className='campo-de-input'>
<label htmlFor="">Qual o motivo do cancelamento</label>
<input type="text" />
</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)}}
>
<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)
setCorModal("card-verde")
}}
>
<i className="bi bi-trash me-1"></i> Confirmar
</button>
</div>
</div>
</div>
</div>)
}
</div>
)
}
export default Agendamento;