Compare commits
2 Commits
b64b664621
...
23a912e1c0
| Author | SHA1 | Date | |
|---|---|---|---|
| 23a912e1c0 | |||
| 8879c43fa8 |
@ -2,38 +2,43 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import API_KEY from '../components/utils/apiKeys.js';
|
||||
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
|
||||
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
|
||||
import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||
// Removidos imports não utilizados no novo fluxo
|
||||
import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||
import { useAuth } from '../components/utils/AuthProvider.js';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/pt-br';
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import { Search, ChevronLeft, ChevronRight, Edit, Trash2, CheckCircle } from 'lucide-react';
|
||||
import { Search, ChevronLeft, ChevronRight, Edit, Trash2, CheckCircle } from 'lucide-react';
|
||||
import "../pages/style/Agendamento.css";
|
||||
import '../pages/style/FilaEspera.css';
|
||||
import Spinner from '../components/Spinner.jsx';
|
||||
import Spinner from '../components/Spinner.jsx';
|
||||
|
||||
|
||||
dayjs.locale('pt-br');
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
|
||||
const Agendamento = () => {
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
// ID do médico que você quer visualizar
|
||||
const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
|
||||
|
||||
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
|
||||
const [selectedID, setSelectedId] = useState('0');
|
||||
const [filaEsperaData, setFilaEsperaData] = useState([]);
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [ListaDeMedicos, setListaDeMedicos] = useState([]);
|
||||
const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([]);
|
||||
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
||||
const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" });
|
||||
const [cacheAgendamentos, setCacheAgendamentos] = useState([]);
|
||||
const [motivoCancelamento, setMotivoCancelamento] = useState("");
|
||||
const [showSpinner, setShowSpinner] = useState(true);
|
||||
const [waitlistSearch, setWaitlistSearch] = useState('');
|
||||
@ -41,38 +46,49 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
const [waitSortDir, setWaitSortDir] = useState('asc');
|
||||
const [waitPage, setWaitPage] = useState(1);
|
||||
const [waitPerPage, setWaitPerPage] = useState(10);
|
||||
const authHeader = getAuthorizationHeader();
|
||||
const cacheMedicos = useMemo(() => ({}), []);
|
||||
const cachePacientes = useMemo(() => ({}), []);
|
||||
const [cacheMedicos, setCacheMedicos] = useState({});
|
||||
const [cachePacientes, setCachePacientes] = useState({});
|
||||
const [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
const [agendamentoParaEdicao, setAgendamentoParaEdicao] = useState(null);
|
||||
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
// ✨ ALTERAÇÃO PRINCIPAL: A busca agora filtra pelo ID do médico direto na API
|
||||
const fetchAppointments = useCallback(async () => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY);
|
||||
if (!authHeader) return;
|
||||
setShowSpinner(true);
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||
|
||||
// A URL agora contém o filtro para o ID do médico específico
|
||||
const apiUrl = `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?doctor_id=eq.${ID_MEDICO_ESPECIFICO}&select=*`;
|
||||
|
||||
try {
|
||||
const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*", requestOptions);
|
||||
const res = await fetch(apiUrl, requestOptions);
|
||||
const data = await res.json();
|
||||
setListaTodosAgendamentos(data);
|
||||
setListaTodosAgendamentos(data || []);
|
||||
} catch (err) {
|
||||
console.error('Erro ao buscar agendamentos', err);
|
||||
setListaTodosAgendamentos([]);
|
||||
} finally {
|
||||
if (!listaTodosAgendamentos.length) {
|
||||
setShowSpinner(false);
|
||||
}
|
||||
setShowSpinner(false);
|
||||
}
|
||||
}, [authHeader, listaTodosAgendamentos.length]);
|
||||
}, [authHeader, ID_MEDICO_ESPECIFICO]);
|
||||
|
||||
|
||||
const updateAppointmentStatus = useCallback(async (id, updates) => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY); myHeaders.append("Content-Type", "application/json"); myHeaders.append("Prefer", "return=representation");
|
||||
setShowSpinner(true);
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("Prefer", "return=representation");
|
||||
const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
|
||||
if (response.ok) {
|
||||
@ -85,14 +101,14 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
} catch (error) {
|
||||
console.error('Erro de rede/servidor:', error);
|
||||
return false;
|
||||
} finally {
|
||||
setShowSpinner(false);
|
||||
}
|
||||
}, [authHeader, fetchAppointments]);
|
||||
|
||||
|
||||
const deleteConsulta = useCallback(async (id) => {
|
||||
setShowSpinner(true);
|
||||
|
||||
const success = await updateAppointmentStatus(id, { status: "cancelled", cancellation_reason: motivoCancelamento, updated_at: new Date().toISOString() });
|
||||
setShowSpinner(false);
|
||||
if (success) {
|
||||
setShowDeleteModal(false);
|
||||
setMotivoCancelamento("");
|
||||
@ -102,12 +118,9 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
}, [motivoCancelamento, updateAppointmentStatus]);
|
||||
|
||||
|
||||
|
||||
const confirmConsulta = useCallback(async (id) => {
|
||||
setShowSpinner(true);
|
||||
|
||||
const success = await updateAppointmentStatus(id, { status: "agendado", cancellation_reason: null, updated_at: new Date().toISOString() });
|
||||
setShowSpinner(false);
|
||||
if (success) {
|
||||
setSelectedId('0');
|
||||
} else {
|
||||
@ -115,87 +128,125 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
}, [updateAppointmentStatus]);
|
||||
|
||||
const handleEditConsulta = (agendamento) => {
|
||||
setAgendamentoParaEdicao(agendamento);
|
||||
setPageConsulta(true);
|
||||
};
|
||||
|
||||
const handleQuickJumpChange = (type, value) => {
|
||||
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
};
|
||||
|
||||
const applyQuickJump = () => {
|
||||
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
useEffect(() => {
|
||||
if(authHeader) {
|
||||
fetchAppointments();
|
||||
// A busca de todos os médicos pode continuar caso a secretária precise ver a lista
|
||||
if (user?.role !== 'doctor') {
|
||||
GetAllDoctors(authHeader).then(docs => {
|
||||
if (docs) {
|
||||
setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [authHeader, fetchAppointments, user?.role]);
|
||||
|
||||
useEffect(() => {
|
||||
setQuickJump({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
}, [currentDate]);
|
||||
const processData = async () => {
|
||||
// Como os dados já vêm filtrados da API, não precisamos mais da verificação de 'user' aqui
|
||||
if (!listaTodosAgendamentos.length) {
|
||||
setAgendamentosOrganizados({});
|
||||
setFilaEsperaData([]);
|
||||
return;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!listaTodosAgendamentos.length && !showSpinner) { return; }
|
||||
setShowSpinner(true);
|
||||
setShowSpinner(true);
|
||||
|
||||
// ✨ SIMPLIFICAÇÃO: Não é mais necessário filtrar por `user.role`,
|
||||
// pois a API já retornou apenas os agendamentos do médico desejado.
|
||||
const appointmentsToShow = listaTodosAgendamentos;
|
||||
|
||||
const patientIdsToFetch = new Set();
|
||||
const doctorIdsToFetch = new Set();
|
||||
|
||||
appointmentsToShow.forEach(ag => {
|
||||
if (ag.patient_id && !cachePacientes[ag.patient_id]) {
|
||||
patientIdsToFetch.add(ag.patient_id);
|
||||
}
|
||||
if (ag.doctor_id && !cacheMedicos[ag.doctor_id]) {
|
||||
doctorIdsToFetch.add(ag.doctor_id);
|
||||
}
|
||||
});
|
||||
|
||||
const fetchPromises = [];
|
||||
|
||||
if (patientIdsToFetch.size > 0) {
|
||||
const query = `id=in.(${Array.from(patientIdsToFetch).join(',')})`;
|
||||
fetchPromises.push(
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?${query}&select=*`, {
|
||||
headers: { apikey: API_KEY, Authorization: authHeader }
|
||||
}).then(res => res.json())
|
||||
);
|
||||
} else {
|
||||
fetchPromises.push(Promise.resolve(null)); // Mantém a ordem do Promise.all
|
||||
}
|
||||
|
||||
if (doctorIdsToFetch.size > 0) {
|
||||
const query = `id=in.(${Array.from(doctorIdsToFetch).join(',')})`;
|
||||
fetchPromises.push(
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?${query}&select=id,full_name`, {
|
||||
headers: { apikey: API_KEY, Authorization: authHeader }
|
||||
}).then(res => res.json())
|
||||
);
|
||||
} else {
|
||||
fetchPromises.push(Promise.resolve(null));
|
||||
}
|
||||
|
||||
const [newPatients, newDoctors] = await Promise.all(fetchPromises);
|
||||
|
||||
const updatedPatientCache = { ...cachePacientes };
|
||||
if (newPatients) newPatients.forEach(p => updatedPatientCache[p.id] = p);
|
||||
|
||||
const updatedDoctorCache = { ...cacheMedicos };
|
||||
if (newDoctors) newDoctors.forEach(d => updatedDoctorCache[d.id] = d);
|
||||
|
||||
setCachePacientes(updatedPatientCache);
|
||||
setCacheMedicos(updatedDoctorCache);
|
||||
|
||||
const fetchDados = async () => {
|
||||
const newDict = {};
|
||||
const newFila = [];
|
||||
|
||||
for (const agendamento of listaTodosAgendamentos) {
|
||||
if (!agendamento.doctor_id || !agendamento.patient_id) continue;
|
||||
for (const agendamento of appointmentsToShow) {
|
||||
const medico = updatedDoctorCache[agendamento.doctor_id];
|
||||
const paciente = updatedPatientCache[agendamento.patient_id];
|
||||
|
||||
if (!cacheMedicos[agendamento.doctor_id]) {
|
||||
const doctorData = await GetDoctorByID(agendamento.doctor_id, authHeader);
|
||||
cacheMedicos[agendamento.doctor_id] = doctorData[0];
|
||||
}
|
||||
if (!cachePacientes[agendamento.patient_id]) {
|
||||
const patientData = await GetPatientByID(agendamento.patient_id, authHeader);
|
||||
cachePacientes[agendamento.patient_id] = patientData[0];
|
||||
}
|
||||
if (!medico || !paciente) continue;
|
||||
|
||||
const medico = cacheMedicos[agendamento.doctor_id];
|
||||
const paciente = cachePacientes[agendamento.patient_id];
|
||||
const agendamentoMelhorado = {
|
||||
...agendamento,
|
||||
medico_nome: medico?.full_name,
|
||||
paciente_nome: paciente?.full_name,
|
||||
paciente_cpf: paciente?.cpf
|
||||
medico_nome: medico.full_name || 'N/A',
|
||||
paciente_nome: paciente.full_name || 'N/A',
|
||||
paciente_cpf: paciente.cpf || 'N/A'
|
||||
};
|
||||
|
||||
if (agendamento.status === "requested") {
|
||||
newFila.push({
|
||||
agendamento: agendamentoMelhorado,
|
||||
Infos: agendamentoMelhorado
|
||||
});
|
||||
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
|
||||
} else {
|
||||
const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
|
||||
if (newDict[DiaAgendamento]) {
|
||||
newDict[DiaAgendamento].push(agendamentoMelhorado);
|
||||
} else {
|
||||
newDict[DiaAgendamento] = [agendamentoMelhorado];
|
||||
}
|
||||
if (!newDict[DiaAgendamento]) newDict[DiaAgendamento] = [];
|
||||
newDict[DiaAgendamento].push(agendamentoMelhorado);
|
||||
}
|
||||
}
|
||||
|
||||
for (const key in newDict) {
|
||||
newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
|
||||
newDict[key].sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
|
||||
}
|
||||
|
||||
setAgendamentosOrganizados(newDict);
|
||||
setFilaEsperaData(newFila);
|
||||
setShowSpinner(false);
|
||||
};
|
||||
fetchDados();
|
||||
}, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes, showSpinner]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAppointments();
|
||||
GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
|
||||
}, [authHeader, fetchAppointments]);
|
||||
processData();
|
||||
}, [listaTodosAgendamentos, authHeader]); // Removido 'user' das dependências pois não é mais usado aqui
|
||||
|
||||
// O restante do código permanece o mesmo...
|
||||
|
||||
const handleEditConsulta = (agendamento) => {
|
||||
setAgendamentoParaEdicao(agendamento);
|
||||
setPageConsulta(true);
|
||||
};
|
||||
|
||||
const handleSearchMedicos = (term) => {
|
||||
setSearchTermDoctor(term);
|
||||
@ -209,54 +260,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
setMedicoFiltrado({ id: "vazio" });
|
||||
}
|
||||
};
|
||||
|
||||
const filaEsperaFiltrada = useMemo(() => {
|
||||
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||
const term = waitlistSearch.toLowerCase();
|
||||
return filaEsperaData.filter(item =>
|
||||
(item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
|
||||
(item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
|
||||
(item?.Infos?.medico_nome?.toLowerCase() || '').includes(term)
|
||||
);
|
||||
}, [waitlistSearch, filaEsperaData]);
|
||||
|
||||
const applySortingWaitlist = useCallback((arr) => {
|
||||
if (!Array.isArray(arr) || !waitSortKey) return arr;
|
||||
const copy = [...arr];
|
||||
if (waitSortKey === 'paciente') {
|
||||
copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || '')));
|
||||
} else if (waitSortKey === 'medico') {
|
||||
copy.sort((a, b) => (a?.Infos?.medico_nome || '').localeCompare((b?.Infos?.medico_nome || '')));
|
||||
} else if (waitSortKey === 'data') {
|
||||
copy.sort((a, b) => new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0));
|
||||
}
|
||||
if (waitSortDir === 'desc') copy.reverse();
|
||||
return copy;
|
||||
}, [waitSortKey, waitSortDir]);
|
||||
|
||||
const filaEsperaOrdenada = useMemo(() => applySortingWaitlist(filaEsperaFiltrada), [filaEsperaFiltrada, applySortingWaitlist]);
|
||||
|
||||
const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
|
||||
const waitIndiceInicial = (waitPage - 1) * waitPerPage;
|
||||
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
||||
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
||||
|
||||
const gerarNumerosWaitPages = () => {
|
||||
const paginas = [];
|
||||
const paginasParaMostrar = 5;
|
||||
let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
|
||||
let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
|
||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||
for (let i = inicio; i <= fim; i++) {
|
||||
paginas.push(i);
|
||||
}
|
||||
return paginas;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setWaitPage(1);
|
||||
}, [waitlistSearch, waitSortKey, waitSortDir]);
|
||||
|
||||
|
||||
const generateDateGrid = () => {
|
||||
const grid = [];
|
||||
const startOfMonth = currentDate.startOf('month');
|
||||
@ -271,26 +275,91 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
|
||||
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||
const handleDateClick = (day) => setSelectedDay(day);
|
||||
const DeleteModal = () => (
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
|
||||
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>Qual o motivo do cancelamento?</p>
|
||||
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
|
||||
</div>
|
||||
<div className="modal-footer justify-content-center">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Manter Agendamento</button>
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)} disabled={!motivoCancelamento.trim()}><Trash2 size={16} className="me-1" /> Confirmar Cancelamento</button>
|
||||
</div>
|
||||
const DeleteModal = () => (
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
|
||||
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>Qual o motivo do cancelamento? (Opcional)</p>
|
||||
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
|
||||
</div>
|
||||
<div className="modal-footer justify-content-center">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Manter Agendamento</button>
|
||||
{/* ✨ Botão sempre ativo ✨ */}
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>
|
||||
<Trash2 size={16} className="me-1" /> Confirmar Cancelamento
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setQuickJump({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
}, [currentDate]);
|
||||
|
||||
const filaEsperaFiltrada = useMemo(() => {
|
||||
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||
const term = waitlistSearch.toLowerCase();
|
||||
return filaEsperaData.filter(item =>
|
||||
(item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
|
||||
(item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
|
||||
(item?.Infos?.medico_nome?.toLowerCase() || '').includes(term)
|
||||
);
|
||||
}, [waitlistSearch, filaEsperaData]);
|
||||
|
||||
const applySortingWaitlist = useCallback((arr) => {
|
||||
if (!Array.isArray(arr) || !waitSortKey) return arr;
|
||||
const copy = [...arr];
|
||||
const key = waitSortKey;
|
||||
const dir = waitSortDir === 'asc' ? 1 : -1;
|
||||
copy.sort((a, b) => {
|
||||
const valA = key === 'data' ? new Date(a.agendamento.scheduled_at) : (a.Infos?.[`${key}_nome`] || '');
|
||||
const valB = key === 'data' ? new Date(b.agendamento.scheduled_at) : (b.Infos?.[`${key}_nome`] || '');
|
||||
if (valA < valB) return -1 * dir;
|
||||
if (valA > valB) return 1 * dir;
|
||||
return 0;
|
||||
});
|
||||
return copy;
|
||||
}, [waitSortKey, waitSortDir]);
|
||||
|
||||
const filaEsperaOrdenada = useMemo(() => applySortingWaitlist(filaEsperaFiltrada), [filaEsperaFiltrada, applySortingWaitlist]);
|
||||
const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
|
||||
const waitIndiceInicial = (waitPage - 1) * waitPerPage;
|
||||
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
||||
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
||||
|
||||
const gerarNumerosWaitPages = () => {
|
||||
const paginas = [];
|
||||
const paginasParaMostrar = 5;
|
||||
let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
|
||||
let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
|
||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||
return paginas;
|
||||
};
|
||||
|
||||
useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
|
||||
|
||||
const handleQuickJumpChange = (type, value) => {
|
||||
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
};
|
||||
|
||||
const applyQuickJump = () => {
|
||||
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
@ -309,47 +378,49 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
<div className='mb-5'>
|
||||
<input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
|
||||
{user?.role !== 'doctor' && (
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
<div className='mb-5'>
|
||||
<input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||
<div className='dropdown-medicos'>
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<div
|
||||
key={medico.idMedico}
|
||||
className='dropdown-item'
|
||||
onClick={() => {
|
||||
setSearchTermDoctor(medico.nomeMedico);
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado({ id: medico.idMedico });
|
||||
}}
|
||||
>
|
||||
<p>{medico.nomeMedico}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||
<div className='dropdown-medicos'>
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<div
|
||||
key={medico.idMedico}
|
||||
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 ? "opc-agenda-ativo" : ""}`} onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}>Agenda</button>
|
||||
<button className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`} onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}>Fila de espera</button>
|
||||
<button className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`} onClick={() => { setFiladeEspera(false); }}>Agenda</button>
|
||||
<button className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`} onClick={() => { setFiladeEspera(true); }}>Fila de espera</button>
|
||||
</div>
|
||||
<section className='calendario-ou-filaespera'>
|
||||
{FiladeEspera === false ? (
|
||||
{!FiladeEspera ? (
|
||||
<div className="calendar-wrapper">
|
||||
<div className="calendar-info-panel">
|
||||
<div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
|
||||
<div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
|
||||
<div className="appointments-list">
|
||||
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
|
||||
{showSpinner ? <Spinner /> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
|
||||
{showSpinner ? <Spinner /> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.filter(app => MedicoFiltrado.id === "vazio" || app.doctor_id === MedicoFiltrado.id).length > 0) ? (
|
||||
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]
|
||||
.filter(app => MedicoFiltrado.id === "vazio" || app.doctor_id === MedicoFiltrado.id)
|
||||
.map(app => (
|
||||
@ -377,7 +448,8 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
|
||||
))
|
||||
) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="calendar-main">
|
||||
@ -418,14 +490,12 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-buttons">
|
||||
<button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
|
||||
<button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
|
||||
<button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="calendar-grid">
|
||||
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
|
||||
{dateGrid.map((day, index) => {
|
||||
@ -445,10 +515,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="page-content table-paciente-container">
|
||||
{}
|
||||
|
||||
{}
|
||||
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card table-paciente-card">
|
||||
@ -460,30 +526,25 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span className="me-2 text-muted small">Ordenar por:</span>
|
||||
{(() => {
|
||||
const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : '';
|
||||
return (
|
||||
<select
|
||||
className="form-select compact-select sort-select w-auto"
|
||||
value={sortValue}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; }
|
||||
const [k, d] = v.split('-');
|
||||
setWaitSortKey(k);
|
||||
setWaitSortDir(d);
|
||||
}}
|
||||
>
|
||||
<option value="">Sem ordenação</option>
|
||||
<option value="paciente-asc">Paciente (A-Z)</option>
|
||||
<option value="paciente-desc">Paciente (Z-A)</option>
|
||||
<option value="medico-asc">Médico (A-Z)</option>
|
||||
<option value="medico-desc">Médico (Z-A)</option>
|
||||
<option value="data-asc">Data (mais antiga)</option>
|
||||
<option value="data-desc">Data (mais recente)</option>
|
||||
</select>
|
||||
);
|
||||
})()}
|
||||
<select
|
||||
className="form-select compact-select sort-select w-auto"
|
||||
value={waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; }
|
||||
const [k, d] = v.split('-');
|
||||
setWaitSortKey(k);
|
||||
setWaitSortDir(d);
|
||||
}}
|
||||
>
|
||||
<option value="">Sem ordenação</option>
|
||||
<option value="paciente-asc">Paciente (A-Z)</option>
|
||||
<option value="paciente-desc">Paciente (Z-A)</option>
|
||||
<option value="medico-asc">Médico (A-Z)</option>
|
||||
<option value="medico-desc">Médico (Z-A)</option>
|
||||
<option value="data-asc">Data (mais antiga)</option>
|
||||
<option value="data-desc">Data (mais recente)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
@ -571,7 +632,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
@ -580,12 +640,15 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<AgendamentoCadastroManager
|
||||
setPageConsulta={setPageConsulta}
|
||||
agendamentoInicial={agendamentoParaEdicao}
|
||||
onSuccess={() => {
|
||||
setPageConsulta(false);
|
||||
fetchAppointments();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showDeleteModal && <DeleteModal />}
|
||||
{}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Agendamento;
|
||||
export default Agendamento;
|
||||
|
||||
@ -2,8 +2,6 @@ import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import API_KEY from '../components/utils/apiKeys.js';
|
||||
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
|
||||
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';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/pt-br';
|
||||
@ -14,233 +12,289 @@ import "../pages/style/Agendamento.css";
|
||||
import '../pages/style/FilaEspera.css';
|
||||
import Spinner from '../components/Spinner.jsx';
|
||||
|
||||
|
||||
dayjs.locale('pt-br');
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
const navigate = useNavigate();
|
||||
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
|
||||
const [selectedID, setSelectedId] = useState('0');
|
||||
const [filaEsperaData, setFilaEsperaData] = useState([]);
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
|
||||
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
|
||||
|
||||
|
||||
const [filaEsperaData, setFilaDeEsperaData] = useState([]);
|
||||
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
|
||||
const [ListaDeMedicos, setListaDeMedicos] = useState([]);
|
||||
const [showSpinner, setShowSpinner] = useState(true);
|
||||
const [waitlistSearch, setWaitlistSearch] = useState('');
|
||||
const [waitSortKey, setWaitSortKey] = useState(null);
|
||||
const [waitSortDir, setWaitSortDir] = useState('asc');
|
||||
const [waitPage, setWaitPage] = useState(1);
|
||||
const [waitPerPage, setWaitPerPage] = useState(10);
|
||||
const authHeader = getAuthorizationHeader();
|
||||
const cacheMedicos = useMemo(() => ({}), []);
|
||||
const cachePacientes = useMemo(() => ({}), []);
|
||||
|
||||
|
||||
const [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY);
|
||||
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||
try {
|
||||
const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*", requestOptions);
|
||||
const data = await res.json();
|
||||
setListaTodosAgendamentos(data);
|
||||
} catch (err) {
|
||||
console.error('Erro ao buscar agendamentos', err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
||||
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
|
||||
const [cancellationReason, setCancellationReason] = useState('');
|
||||
|
||||
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const carregarDados = async () => {
|
||||
|
||||
const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
|
||||
|
||||
if (!authHeader) {
|
||||
console.warn("Header de autorização não disponível.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
|
||||
const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
|
||||
const requestOptions = { method: 'GET', headers: myHeaders };
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);
|
||||
|
||||
if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);
|
||||
|
||||
const consultasBrutas = await response.json() || [];
|
||||
|
||||
|
||||
|
||||
const newDict = {};
|
||||
const newFila = [];
|
||||
|
||||
|
||||
for (const agendamento of consultasBrutas) {
|
||||
const agendamentoMelhorado = {
|
||||
...agendamento,
|
||||
medico_nome: agendamento.doctors?.full_name || 'Médico não informado'
|
||||
};
|
||||
|
||||
if (agendamento.status === "requested") {
|
||||
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
|
||||
} else {
|
||||
const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
|
||||
if (newDict[diaAgendamento]) {
|
||||
newDict[diaAgendamento].push(agendamentoMelhorado);
|
||||
} else {
|
||||
newDict[diaAgendamento] = [agendamentoMelhorado];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const key in newDict) {
|
||||
newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
|
||||
}
|
||||
|
||||
setDictAgendamentosOrganizados(newDict);
|
||||
setFilaDeEsperaData(newFila);
|
||||
|
||||
|
||||
} catch (err) {
|
||||
console.error('Falha ao buscar ou processar agendamentos:', err);
|
||||
setDictAgendamentosOrganizados({});
|
||||
setFilaDeEsperaData([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
carregarDados();
|
||||
}, [authHeader, user]);
|
||||
|
||||
|
||||
const updateAppointmentStatus = async (id, updates) => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY); myHeaders.append("Content-Type", "application/json"); myHeaders.append("Prefer", "return=representation");
|
||||
const myHeaders = new Headers({
|
||||
"Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
|
||||
});
|
||||
const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
|
||||
if (response.ok) {
|
||||
await fetchAppointments();
|
||||
return true;
|
||||
} else {
|
||||
console.error('Erro ao atualizar agendamento:', await response.text());
|
||||
return false;
|
||||
}
|
||||
if (!response.ok) throw new Error('Falha ao atualizar o status.');
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Erro de rede/servidor:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const deleteConsulta = async (id) => {
|
||||
const confirmation = window.confirm("Tem certeza que deseja CANCELAR este agendamento? Esta ação é irreversível.");
|
||||
if (!confirmation) return;
|
||||
|
||||
setShowSpinner(true);
|
||||
const success = await updateAppointmentStatus(id, { status: "cancelled", cancellation_reason: "Cancelado pela Secretaria", updated_at: new Date().toISOString() });
|
||||
setShowSpinner(false);
|
||||
if (success) {
|
||||
alert("Consulta cancelada com sucesso!");
|
||||
} else {
|
||||
alert("Falha ao cancelar a consulta.");
|
||||
}
|
||||
};
|
||||
const confirmConsulta = async (id) => {
|
||||
const confirmation = window.confirm("Tem certeza que deseja CONFIRMAR/REVERTER o cancelamento deste agendamento para 'agendado'?");
|
||||
if (!confirmation) return;
|
||||
setShowSpinner(true);
|
||||
const success = await updateAppointmentStatus(id, { status: "agendado", cancellation_reason: null, updated_at: new Date().toISOString() });
|
||||
setShowSpinner(false);
|
||||
if (success) {
|
||||
alert("Agendamento confirmado/revertido para 'agendado' com sucesso!");
|
||||
} else {
|
||||
alert("Falha ao reverter o cancelamento.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuickJumpChange = (type, value) => {
|
||||
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setQuickJump({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
}, [currentDate]);
|
||||
|
||||
const applyQuickJump = () => {
|
||||
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!listaTodosAgendamentos.length) { setShowSpinner(false); return; }
|
||||
setShowSpinner(true);
|
||||
const fetchDados = async () => {
|
||||
const newDict = {}; const newFila = [];
|
||||
for (const agendamento of listaTodosAgendamentos) {
|
||||
if (!agendamento.doctor_id || !agendamento.patient_id) continue;
|
||||
if (!cacheMedicos[agendamento.doctor_id]) { cacheMedicos[agendamento.doctor_id] = (await GetDoctorByID(agendamento.doctor_id, authHeader))[0]; }
|
||||
if (!cachePacientes[agendamento.patient_id]) { cachePacientes[agendamento.patient_id] = (await GetPatientByID(agendamento.patient_id, authHeader))[0]; }
|
||||
const medico = cacheMedicos[agendamento.doctor_id];
|
||||
const paciente = cachePacientes[agendamento.patient_id];
|
||||
|
||||
const agendamentoMelhorado = { ...agendamento, medico_nome: medico?.full_name, paciente_nome: paciente?.full_name, paciente_cpf: paciente?.cpf };
|
||||
|
||||
if (agendamento.status === "requested") {
|
||||
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
|
||||
}
|
||||
else {
|
||||
const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
|
||||
if (newDict[DiaAgendamento]) {
|
||||
newDict[DiaAgendamento].push(agendamentoMelhorado);
|
||||
}
|
||||
else {
|
||||
newDict[DiaAgendamento] = [agendamentoMelhorado];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const key in newDict) { newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at)); }
|
||||
|
||||
setAgendamentosOrganizados(newDict);
|
||||
setFilaEsperaData(newFila);
|
||||
setShowSpinner(false);
|
||||
};
|
||||
fetchDados();
|
||||
}, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAppointments();
|
||||
GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
|
||||
}, [authHeader]);
|
||||
|
||||
const filaEsperaFiltrada = useMemo(() => {
|
||||
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||
const term = waitlistSearch.toLowerCase();
|
||||
return filaEsperaData.filter(item => (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) || (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) || (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term));
|
||||
}, [waitlistSearch, filaEsperaData]);
|
||||
|
||||
const applySortingWaitlist = (arr) => {
|
||||
if (!Array.isArray(arr) || !waitSortKey) return arr;
|
||||
const copy = [...arr];
|
||||
if (waitSortKey === 'paciente') { copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || ''))); }
|
||||
else if (waitSortKey === 'medico') { copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || ''))); }
|
||||
else if (waitSortKey === 'data') { copy.sort((a, b) => new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)); }
|
||||
if (waitSortDir === 'desc') copy.reverse();
|
||||
return copy;
|
||||
|
||||
const handleCancelClick = (appointmentId) => {
|
||||
setAppointmentToCancel(appointmentId);
|
||||
setCancellationReason('');
|
||||
setIsCancelModalOpen(true);
|
||||
};
|
||||
const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
|
||||
const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
|
||||
const waitIndiceInicial = (waitPage - 1) * waitPerPage;
|
||||
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
||||
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
||||
const gerarNumerosWaitPages = () => {
|
||||
const paginas = []; const paginasParaMostrar = 5;
|
||||
let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
|
||||
let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
|
||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||
for (let i = inicio; i <= fim; i++) { paginas.push(i); }
|
||||
return paginas;
|
||||
};
|
||||
useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
|
||||
|
||||
// Funções do Calendário
|
||||
const generateDateGrid = () => {
|
||||
const grid = []; const startOfMonth = currentDate.startOf('month');
|
||||
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
|
||||
for (let i = 0; i < 42; i++) { grid.push(currentDay); currentDay = currentDay.add(1, 'day'); }
|
||||
return grid;
|
||||
|
||||
|
||||
const executeCancellation = async () => {
|
||||
if (!appointmentToCancel) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
|
||||
const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
|
||||
|
||||
const success = await updateAppointmentStatus(appointmentToCancel, {
|
||||
status: "cancelled",
|
||||
cancellation_reason: motivo,
|
||||
updated_at: new Date().toISOString()
|
||||
});
|
||||
|
||||
|
||||
setIsCancelModalOpen(false);
|
||||
setAppointmentToCancel(null);
|
||||
setCancellationReason('');
|
||||
|
||||
|
||||
if (success) {
|
||||
alert("Solicitação cancelada com sucesso!");
|
||||
|
||||
setDictAgendamentosOrganizados(prev => {
|
||||
const newDict = { ...prev };
|
||||
for (const date in newDict) {
|
||||
newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
|
||||
}
|
||||
return newDict;
|
||||
});
|
||||
setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
|
||||
} else {
|
||||
alert("Falha ao cancelar a solicitação.");
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
|
||||
|
||||
|
||||
const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
const applyQuickJump = () => {
|
||||
const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
const dateGrid = useMemo(() => {
|
||||
const grid = [];
|
||||
const startOfMonth = currentDate.startOf('month');
|
||||
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
|
||||
for (let i = 0; i < 42; i++) {
|
||||
grid.push(currentDay);
|
||||
currentDay = currentDay.add(1, 'day');
|
||||
}
|
||||
return grid;
|
||||
}, [currentDate]);
|
||||
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||
const handleDateClick = (day) => setSelectedDay(day);
|
||||
|
||||
const activeButtonStyle = {
|
||||
backgroundColor: '#1B2A41',
|
||||
color: 'white',
|
||||
padding: '6px 12px',
|
||||
fontSize: '0.875rem',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
const inactiveButtonStyle = {
|
||||
backgroundColor: '#1B2A41',
|
||||
color: 'white',
|
||||
padding: '6px 12px',
|
||||
fontSize: '0.875rem',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #1B2A41',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Minhas consultas</h1>
|
||||
{}
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => { setPageConsulta(true); setFiladeEspera(false); }}
|
||||
style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||
onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setFiladeEspera(false);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Consulta
|
||||
<i className="bi bi-plus-circle"></i> Solicitar Agendamento
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${FiladeEspera ? "btn-primary" : "btn-secondary"}`}
|
||||
onClick={() => { setFiladeEspera(!FiladeEspera); setPageConsulta(false); }}
|
||||
style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||
onClick={() => {
|
||||
setFiladeEspera(!FiladeEspera);
|
||||
setPageConsulta(false);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
|
||||
</button>
|
||||
</div>
|
||||
{}
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
<section className='calendario-ou-filaespera'>
|
||||
{FiladeEspera === false ? (
|
||||
{!FiladeEspera ? (
|
||||
|
||||
<div className="calendar-wrapper">
|
||||
{}
|
||||
<div className="calendar-info-panel">
|
||||
<div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
|
||||
<div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
|
||||
<div className="appointments-list">
|
||||
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
|
||||
{showSpinner ? <Spinner/> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
|
||||
<div key={app.id} className="appointment-item" data-status={app.status}>
|
||||
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
|
||||
<div className="item-details"><span>{app.paciente_nome}</span><small>Dr(a). {app.medico_nome}</small></div>
|
||||
{}
|
||||
</div>
|
||||
))) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
|
||||
{(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
|
||||
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
|
||||
<div key={app.id} className="appointment-item" data-status={app.status}>
|
||||
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
|
||||
<div className="item-details">
|
||||
<span>Consulta com Dr(a). {app.medico_nome}</span>
|
||||
</div>
|
||||
<div className='item-actions'>
|
||||
{app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
|
||||
<button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
|
||||
</div>
|
||||
</div>
|
||||
{}
|
||||
<div className="calendar-main">
|
||||
<div className="calendar-legend">
|
||||
<div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
|
||||
@ -249,41 +303,21 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<div className="date-indicator">
|
||||
<h2>{currentDate.format('MMMM [de] YYYY')}</h2>
|
||||
<div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
|
||||
<select
|
||||
value={quickJump.month}
|
||||
onChange={(e) => handleQuickJumpChange('month', e.target.value)}
|
||||
className="form-select form-select-sm w-auto"
|
||||
>
|
||||
{dayjs.months().map((month, index) => (
|
||||
<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
|
||||
))}
|
||||
<select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
|
||||
{dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
|
||||
</select>
|
||||
<select
|
||||
value={quickJump.year}
|
||||
onChange={(e) => handleQuickJumpChange('year', e.target.value)}
|
||||
className="form-select form-select-sm w-auto"
|
||||
>
|
||||
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
|
||||
<option key={year} value={year}>{year}</option>
|
||||
))}
|
||||
<select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
|
||||
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
|
||||
</select>
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
onClick={applyQuickJump}
|
||||
disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
|
||||
>
|
||||
Ir
|
||||
</button>
|
||||
<button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-buttons">
|
||||
<button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
|
||||
<button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
|
||||
<button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
|
||||
<button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
|
||||
<button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
|
||||
<button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="calendar-grid">
|
||||
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
|
||||
{dateGrid.map((day, index) => {
|
||||
@ -292,11 +326,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
return (
|
||||
<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
|
||||
<span>{day.format('D')}</span>
|
||||
{appointmentsOnDay.length > 0 &&
|
||||
<div className="appointments-indicator">
|
||||
{appointmentsOnDay.length}
|
||||
</div>
|
||||
}
|
||||
{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -305,51 +335,45 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="page-content table-paciente-container">
|
||||
<section className="row">
|
||||
<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-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
|
||||
<div className="card-body">
|
||||
<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 paciente, CPF ou médico..." value={waitlistSearch} onChange={(e) => setWaitlistSearch(e.target.value)} /><small className="text-muted">Digite o nome do paciente, CPF ou nome do médico</small></div>
|
||||
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span className="me-2 text-muted small">Ordenar por:</span>
|
||||
{(() => { const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''; return (<select className="form-select compact-select sort-select w-auto" value={sortValue} onChange={(e) => { const v = e.target.value; if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; } const [k, d] = v.split('-'); setWaitSortKey(k); setWaitSortDir(d); }}>
|
||||
<option value="">Sem ordenação</option><option value="paciente-asc">Paciente (A-Z)</option><option value="paciente-desc">Paciente (Z-A)</option><option value="medico-asc">Médico (A-Z)</option><option value="medico-desc">Médico (Z-A)</option><option value="data-asc">Data (mais antiga)</option><option value="data-desc">Data (mais recente)</option>
|
||||
</select>);})()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3"><div className="contador-pacientes">{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS</div></div>
|
||||
</div>
|
||||
<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>
|
||||
<table className="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Médico Solicitado</th>
|
||||
<th>Data da Solicitação</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item, index) => (
|
||||
<tr key={index}><td>{item?.Infos?.paciente_nome}</td><td>{item?.Infos?.paciente_cpf}</td><td>{item?.Infos?.nome_medico}</td><td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td>
|
||||
<td>
|
||||
{}
|
||||
<button className="btn btn-sm btn-delete" onClick={() => { deleteConsulta(item.agendamento.id); }}><i className="bi bi-trash me-1"></i> Excluir</button>
|
||||
</td>
|
||||
{filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
|
||||
<tr key={item.agendamento.id}>
|
||||
<td>Dr(a). {item.Infos?.medico_nome}</td>
|
||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||
<td>
|
||||
<button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
|
||||
<i className="bi bi-trash me-1"></i> Cancelar
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))) : (<tr><td colSpan="5" className="text-center py-4"><div className="text-muted">{showSpinner ? <Spinner /> : (<><i className="bi bi-inbox display-4"></i><p className="mt-2">Nenhuma solicitação encontrada.</p></>)}</div></td></tr>)}
|
||||
))) : (
|
||||
<tr>
|
||||
<td colSpan="3" className="text-center py-4">
|
||||
<div className="text-muted">Nenhuma solicitação na fila de espera.</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{filaEsperaFiltrada.length > 0 && (<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={waitPerPage} onChange={(e) => { setWaitPerPage(Number(e.target.value)); setWaitPage(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 {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}</span><nav><ul className="pagination pagination-sm mb-0">
|
||||
<li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.max(1, p - 1))}><i className="bi bi-chevron-left"></i></button></li>
|
||||
{gerarNumerosWaitPages().map(pagina => (<li key={pagina} className={`page-item ${pagina === waitPage ? 'active' : ''}`}><button className="page-link" onClick={() => setWaitPage(pagina)}>{pagina}</button></li>))}
|
||||
<li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}><i className="bi bi-chevron-right"></i></button></li>
|
||||
</ul></nav></div>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
@ -357,8 +381,49 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
) : (
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
|
||||
{}
|
||||
{isCancelModalOpen && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content" style={{ maxWidth: '400px' }}>
|
||||
<div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
|
||||
<h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
|
||||
<button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ padding: '20px' }}>
|
||||
<p>Qual o motivo do cancelamento?</p>
|
||||
<textarea
|
||||
value={cancellationReason}
|
||||
onChange={(e) => setCancellationReason(e.target.value)}
|
||||
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
|
||||
rows="4"
|
||||
style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setIsCancelModalOpen(false)}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={executeCancellation}
|
||||
style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
||||
>
|
||||
<Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Agendamento;
|
||||
|
||||
export default Agendamento;
|
||||
|
||||
@ -12,16 +12,18 @@ import { useAuth } from '../components/utils/AuthProvider.js';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/pt-br';
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import { Search, ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
|
||||
import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import { Search, ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
|
||||
import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx';
|
||||
import "./style/Agendamento.css";
|
||||
import './style/FilaEspera.css';
|
||||
import Spinner from '../components/Spinner.jsx';
|
||||
|
||||
|
||||
dayjs.locale('pt-br');
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(localeData);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
const navigate = useNavigate();
|
||||
@ -39,7 +41,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
||||
const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" });
|
||||
const [cacheAgendamentos, setCacheAgendamentos] = useState([]);
|
||||
const [appointmentToEdit, setAppointmentToEdit] = useState(null);
|
||||
const [appointmentToEdit, setAppointmentToEdit] = useState(null);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
const [motivoCancelamento, setMotivoCancelamento] = useState("");
|
||||
const [showSpinner, setShowSpinner] = useState(true);
|
||||
@ -54,13 +56,14 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
const [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
|
||||
const [editingAppointmentId, setEditingAppointmentId] = useState(null);
|
||||
const [editingAppointmentId, setEditingAppointmentId] = useState(null);
|
||||
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY);
|
||||
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||
@ -73,6 +76,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const updateAppointmentStatus = async (id, updates) => {
|
||||
const myHeaders = new Headers(); myHeaders.append("Authorization", authHeader); myHeaders.append("apikey", API_KEY); myHeaders.append("Content-Type", "application/json"); myHeaders.append("Prefer", "return=representation");
|
||||
const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
|
||||
@ -80,7 +84,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
try {
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
|
||||
if (response.ok) {
|
||||
await fetchAppointments();
|
||||
await fetchAppointments();
|
||||
return true;
|
||||
} else {
|
||||
console.error('Erro ao atualizar agendamento:', await response.text());
|
||||
@ -92,6 +96,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const deleteConsulta = async (id) => {
|
||||
setShowSpinner(true);
|
||||
const success = await updateAppointmentStatus(id, { status: "cancelled", cancellation_reason: motivoCancelamento, updated_at: new Date().toISOString() });
|
||||
@ -117,10 +122,12 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleQuickJumpChange = (type, value) => {
|
||||
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setQuickJump({
|
||||
month: currentDate.month(),
|
||||
@ -128,12 +135,14 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
});
|
||||
}, [currentDate]);
|
||||
|
||||
|
||||
const applyQuickJump = () => {
|
||||
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!listaTodosAgendamentos.length) { setShowSpinner(false); return; }
|
||||
setShowSpinner(true);
|
||||
@ -145,12 +154,12 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
if (!cachePacientes[agendamento.patient_id]) { cachePacientes[agendamento.patient_id] = (await GetPatientByID(agendamento.patient_id, authHeader))[0]; }
|
||||
const medico = cacheMedicos[agendamento.doctor_id];
|
||||
const paciente = cachePacientes[agendamento.patient_id];
|
||||
|
||||
const agendamentoMelhorado = {
|
||||
...agendamento,
|
||||
medico_nome: medico?.full_name,
|
||||
paciente_nome: paciente?.full_name,
|
||||
paciente_cpf: paciente?.cpf
|
||||
|
||||
const agendamentoMelhorado = {
|
||||
...agendamento,
|
||||
medico_nome: medico?.full_name,
|
||||
paciente_nome: paciente?.full_name,
|
||||
paciente_cpf: paciente?.cpf
|
||||
};
|
||||
|
||||
if (agendamento.status === "requested") { newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado }); }
|
||||
@ -168,12 +177,15 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
fetchDados();
|
||||
}, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchAppointments();
|
||||
fetchAppointments();
|
||||
GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
|
||||
}, [authHeader]);
|
||||
|
||||
const handleSearchMedicos = (term) => { };
|
||||
|
||||
const handleSearchMedicos = (term) => { };
|
||||
|
||||
|
||||
const filaEsperaFiltrada = useMemo(() => {
|
||||
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||
@ -205,6 +217,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
};
|
||||
useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
|
||||
|
||||
|
||||
const generateDateGrid = () => {
|
||||
const grid = []; const startOfMonth = currentDate.startOf('month');
|
||||
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
|
||||
@ -215,6 +228,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||
const handleDateClick = (day) => setSelectedDay(day);
|
||||
|
||||
|
||||
const DeleteModal = () => (
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
@ -229,12 +243,13 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
<div className="modal-footer justify-content-center">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)} disabled={!motivoCancelamento.trim()}><Trash2 size={16} className="me-1" /> Excluir</button>
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}><Trash2 size={16} className="me-1" /> Excluir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
const ConfirmEditModal = () => (
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||
@ -255,7 +270,8 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
@ -263,10 +279,16 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<h1>Gerenciar consultas</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
{/* LIMPA O OBJETO DE EDIÇÃO AO CLICAR EM "ADICIONAR" */}
|
||||
<<<<<<< HEAD
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setEditingAppointmentId(null);
|
||||
=======
|
||||
{!PageNovaConsulta ?
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setEditingAppointmentId(null);
|
||||
>>>>>>> b64b664621626393863bd367709ca331df3ec00c
|
||||
setAppointmentToEdit(null); // <-- LIMPA O OBJETO AQUI PARA GARANTIR MODO CADASTRO
|
||||
}}><i className="bi bi-plus-circle"></i> Adicionar Consulta</button>
|
||||
:
|
||||
@ -318,12 +340,12 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
) : (
|
||||
<>
|
||||
{/* MUDANÇA: PASSA O OBJETO COMPLETO 'app' PARA O ESTADO DE EDIÇÃO */}
|
||||
<button
|
||||
className="btn-action btn-edit"
|
||||
onClick={() => {
|
||||
setAppointmentToEdit(app);
|
||||
setEditingAppointmentId(app.id);
|
||||
setPageConsulta(true);
|
||||
<button
|
||||
className="btn-action btn-edit"
|
||||
onClick={() => {
|
||||
setAppointmentToEdit(app);
|
||||
setEditingAppointmentId(app.id);
|
||||
setPageConsulta(true);
|
||||
}}
|
||||
>
|
||||
<Edit size={16} />
|
||||
@ -365,7 +387,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<option key={year} value={year}>{year}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
onClick={applyQuickJump}
|
||||
disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
|
||||
@ -440,10 +462,10 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
) : (
|
||||
|
||||
<AgendamentoCadastroManager
|
||||
setPageConsulta={setPageConsulta}
|
||||
<AgendamentoCadastroManager
|
||||
setPageConsulta={setPageConsulta}
|
||||
agendamentoInicial={appointmentToEdit}
|
||||
setEditingAppointmentId={setEditingAppointmentId}
|
||||
setEditingAppointmentId={setEditingAppointmentId}
|
||||
/>
|
||||
)}
|
||||
{showDeleteModal && <DeleteModal />}
|
||||
@ -451,5 +473,11 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
export default Agendamento;
|
||||
|
||||
=======
|
||||
|
||||
export default Agendamento;
|
||||
>>>>>>> b64b664621626393863bd367709ca331df3ec00c
|
||||
|
||||
@ -322,4 +322,4 @@ html[data-bs-theme="dark"] .busca-fila-espera {
|
||||
|
||||
html[data-bs-theme="dark"] .busca-fila-espera:focus {
|
||||
border-color: #5980fd !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user