479 lines
20 KiB
JavaScript
479 lines
20 KiB
JavaScript
//ExcecoesDisponibilidade.jsx
|
|
|
|
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../_assets/utils/AuthProvider';
|
|
import { GetAllDoctors } from '../../_assets/utils/Functions-Endpoints/Doctor';
|
|
import API_KEY from '../../_assets/utils/apiKeys';
|
|
|
|
import FormCriarExcecao from '../../components/medico/FormExcecaoDisponibilidade';
|
|
import '../../_assets/css/components/agendamento/FormAgendamento.css';
|
|
import '../../_assets/css/pages/agendamento/Agendamento.css';
|
|
import '../../_assets/css/pages/agendamento/FilaEspera.css';
|
|
|
|
import 'dayjs/locale/pt-br';
|
|
import weekday from 'dayjs/plugin/weekday';
|
|
import dayjs from 'dayjs';
|
|
dayjs.extend(weekday);
|
|
dayjs.locale('pt-br');
|
|
|
|
const ENDPOINT_BASE = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_exceptions";
|
|
|
|
const getDateRange = (date, view) => {
|
|
const startDayjs = dayjs(date);
|
|
let fromDate, toDate, titleRange;
|
|
|
|
if (view === 'diario') {
|
|
fromDate = startDayjs.format('YYYY-MM-DD');
|
|
toDate = startDayjs.format('YYYY-MM-DD');
|
|
titleRange = startDayjs.format('DD/MM/YYYY');
|
|
} else if (view === 'semanal') {
|
|
|
|
let weekStart = startDayjs.startOf('week');
|
|
if (weekStart.day() !== 1) {
|
|
weekStart = startDayjs.weekday(1);
|
|
}
|
|
|
|
const weekEnd = weekStart.add(6, 'day');
|
|
|
|
fromDate = weekStart.format('YYYY-MM-DD');
|
|
toDate = weekEnd.format('YYYY-MM-DD');
|
|
titleRange = `Semana de ${weekStart.format('DD/MM')} a ${weekEnd.format('DD/MM')}`;
|
|
|
|
} else if (view === 'mensal') {
|
|
const monthStart = startDayjs.startOf('month');
|
|
const monthEnd = startDayjs.endOf('month');
|
|
|
|
fromDate = monthStart.format('YYYY-MM-DD');
|
|
toDate = monthEnd.format('YYYY-MM-DD');
|
|
titleRange = startDayjs.format('MMMM/YYYY').toUpperCase();
|
|
}
|
|
|
|
return { fromDate, toDate, titleRange };
|
|
};
|
|
|
|
const ExcecoesDisponibilidade = () => {
|
|
|
|
const { getAuthorizationHeader } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
|
|
const [excecoes, setExcecoes] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [selectedExceptionId, setSelectedExceptionId] = useState(null);
|
|
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
|
const [successMessage, setSuccessMessage] = useState('');
|
|
|
|
const [filtroMedicoId, setFiltroMedicoId] = useState('');
|
|
const [filtroData, setFiltroData] = useState(dayjs().format('YYYY-MM-DD'));
|
|
const [listaDeMedicos, setListaDeMedicos] = useState([]);
|
|
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
|
const [filteredDoctors, setFilteredDoctors] = useState([]);
|
|
const [selectedDoctor, setSelectedDoctor] = useState(null);
|
|
|
|
const [visualizacao, setVisualizacao] = useState('diario');
|
|
|
|
const resolveAuthHeader = () => {
|
|
try {
|
|
const h = getAuthorizationHeader();
|
|
return h || '';
|
|
} catch {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
const fetchExcecoes = useCallback(async (fromDate, toDate, doctorId) => {
|
|
|
|
setLoading(true);
|
|
|
|
let url = `${ENDPOINT_BASE}?select=*`;
|
|
|
|
if (doctorId) {
|
|
url += `&doctor_id=eq.${doctorId}`;
|
|
}
|
|
|
|
url += `&date=gte.${fromDate}&date=lte.${toDate}`;
|
|
|
|
const myHeaders = new Headers();
|
|
const authHeader = resolveAuthHeader();
|
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
|
myHeaders.append("Content-Type", "application/json");
|
|
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
|
|
|
try {
|
|
const requestOptions = {
|
|
method: 'GET',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
const response = await fetch(url, requestOptions);
|
|
const result = await response.json();
|
|
|
|
if (response.ok && Array.isArray(result)) {
|
|
setExcecoes(result);
|
|
} else {
|
|
setExcecoes([]);
|
|
console.error("Erro ao listar exceções (Status:", response.status, "):", result);
|
|
alert(`Erro ao carregar lista de exceções. Status: ${response.status}. Detalhes: ${result.message || JSON.stringify(result)}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro na requisição de listagem de exceções:', error);
|
|
setExcecoes([]);
|
|
alert("Erro de comunicação com o servidor ao listar exceções.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [getAuthorizationHeader]);
|
|
|
|
const { fromDate, toDate, titleRange } = useMemo(() =>
|
|
getDateRange(filtroData, visualizacao),
|
|
[filtroData, visualizacao]
|
|
);
|
|
|
|
useEffect(() => {
|
|
fetchExcecoes(fromDate, toDate, filtroMedicoId);
|
|
}, [fetchExcecoes, filtroMedicoId, fromDate, toDate]);
|
|
|
|
useEffect(() => {
|
|
const fetchDoctors = async () => {
|
|
const myHeaders = new Headers();
|
|
const authHeader = resolveAuthHeader();
|
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
|
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
|
|
|
try {
|
|
const response = await fetch('https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?select=id,full_name', {
|
|
method: 'GET',
|
|
headers: myHeaders
|
|
});
|
|
if (response.ok) {
|
|
const doctors = await response.json();
|
|
setListaDeMedicos(doctors);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao buscar médicos:', error);
|
|
}
|
|
};
|
|
fetchDoctors();
|
|
}, []);
|
|
|
|
const handleSearchDoctors = (term) => {
|
|
setSearchTermDoctor(term);
|
|
if (term.trim() === '') {
|
|
setFilteredDoctors([]);
|
|
return;
|
|
}
|
|
const filtered = listaDeMedicos.filter(doc =>
|
|
doc.full_name.toLowerCase().includes(term.toLowerCase())
|
|
);
|
|
setFilteredDoctors(filtered);
|
|
};
|
|
|
|
const limparFiltros = () => {
|
|
setSearchTermDoctor('');
|
|
setFilteredDoctors([]);
|
|
setSelectedDoctor(null);
|
|
setFiltroMedicoId('');
|
|
setFiltroData(dayjs().format('YYYY-MM-DD'));
|
|
setVisualizacao('diario');
|
|
};
|
|
|
|
const deleteExcecao = async (id) => {
|
|
const myHeaders = new Headers();
|
|
const authHeader = resolveAuthHeader();
|
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
|
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
|
myHeaders.append("Content-Type", "application/json");
|
|
|
|
try {
|
|
const res = await fetch(`${ENDPOINT_BASE}?id=eq.${id}`, {
|
|
method: 'DELETE',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
});
|
|
if (res.ok) {
|
|
setExcecoes(prev => prev.filter(x => x.id !== id));
|
|
setShowDeleteModal(false);
|
|
setSuccessMessage('Exceção excluída com sucesso!');
|
|
setShowSuccessModal(true);
|
|
} else {
|
|
const text = await res.text();
|
|
console.error('Erro ao deletar exceção', res.status, text);
|
|
alert(`Erro ao excluir exceção. Status: ${res.status}. ${text}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Erro na requisição de exclusão:', err);
|
|
alert('Erro ao excluir exceção.');
|
|
}
|
|
}
|
|
|
|
const handleCancelForm = (recarregar = false) => {
|
|
setPageNovaExcecao(false);
|
|
if (recarregar) {
|
|
fetchExcecoes(fromDate, toDate, filtroMedicoId);
|
|
}
|
|
}
|
|
|
|
if (pageNovaExcecao) {
|
|
return <FormCriarExcecao onCancel={handleCancelForm} doctorID={filtroMedicoId} />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
|
|
<h1>Gerenciar Exceções de Disponibilidade</h1>
|
|
<button
|
|
className="btn-primary"
|
|
onClick={() => setPageNovaExcecao(true)}
|
|
style={{ padding: '10px 20px', fontSize: '14px', whiteSpace: 'nowrap' }}
|
|
>
|
|
+ Criar Nova Exceção
|
|
</button>
|
|
</div>
|
|
|
|
<div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
|
|
<h5 className="mb-3">
|
|
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
|
Filtros
|
|
</h5>
|
|
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Buscar Médico</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Digite o nome do médico..."
|
|
value={searchTermDoctor}
|
|
onChange={(e) => handleSearchDoctors(e.target.value)}
|
|
/>
|
|
<small className="text-muted">Filtre as exceções por médico</small>
|
|
{searchTermDoctor && filteredDoctors.length > 0 && (
|
|
<div className="list-group mt-2" style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
|
{filteredDoctors.map((doc) => (
|
|
<button
|
|
key={doc.id}
|
|
className="list-group-item list-group-item-action"
|
|
onClick={() => {
|
|
setSearchTermDoctor(doc.full_name);
|
|
setFilteredDoctors([]);
|
|
setSelectedDoctor(doc);
|
|
setFiltroMedicoId(doc.id);
|
|
}}
|
|
>
|
|
{doc.full_name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Data de Referência</label>
|
|
<input
|
|
type="date"
|
|
className="form-control"
|
|
value={filtroData}
|
|
onChange={(e) => setFiltroData(e.target.value)}
|
|
/>
|
|
<small className="text-muted">Selecione a data base para visualização</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
{selectedDoctor && (
|
|
<span className="badge bg-primary me-2">
|
|
<i className="bi bi-person-fill me-1"></i>
|
|
{selectedDoctor.full_name}
|
|
</span>
|
|
)}
|
|
<div className="contador-pacientes" style={{ display: 'inline-block' }}>
|
|
{excecoes.length} DE {excecoes.length} EXCEÇÕES ENCONTRADAS
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="btn btn-outline-secondary btn-sm"
|
|
onClick={limparFiltros}
|
|
>
|
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='atendimento-eprocura'>
|
|
|
|
|
|
<div className='container-btns-agenda-fila_esepera'>
|
|
<button
|
|
className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
|
|
onClick={() => setVisualizacao('diario')}
|
|
>
|
|
Dia
|
|
</button>
|
|
<button
|
|
className={`btn-fila-espera ${visualizacao === "semanal" ? "opc-filaespera-ativo" : ""}`}
|
|
onClick={() => setVisualizacao('semanal')}
|
|
>
|
|
Semana
|
|
</button>
|
|
<button
|
|
className={`btn-fila-espera ${visualizacao === "mensal" ? "opc-filaespera-ativo" : ""}`}
|
|
onClick={() => setVisualizacao('mensal')}
|
|
>
|
|
Mês
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<section className='calendario-ou-filaespera'>
|
|
<div className="fila-container">
|
|
<h2 className="fila-titulo">Exceções em {titleRange} ({excecoes.length})</h2>
|
|
{loading ? (
|
|
<p>Carregando exceções...</p>
|
|
) : excecoes.length === 0 ? (
|
|
<p>Nenhuma exceção encontrada para os filtros aplicados.</p>
|
|
) : (
|
|
<table className="fila-tabela">
|
|
<thead>
|
|
<tr>
|
|
<th>Médico (ID)</th>
|
|
<th>Data</th>
|
|
<th>Início</th>
|
|
<th>Término</th>
|
|
<th>Motivo</th>
|
|
<th>Criado por</th>
|
|
<th>Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{excecoes.map((exc) => (
|
|
<tr key={exc.id}>
|
|
<td><p>{exc.doctor_id}</p></td>
|
|
<td>{dayjs(exc.date).format('DD/MM/YYYY')}</td>
|
|
<td>{exc.start_time ? dayjs(exc.start_time, 'HH:mm:ss').format('HH:mm') : '—'}</td>
|
|
<td>{exc.end_time ? dayjs(exc.end_time, 'HH:mm:ss').format('HH:mm') : '—'}</td>
|
|
<td><p>{exc.reason}</p></td>
|
|
<td>{exc.created_by || '—'}</td>
|
|
<td>
|
|
<div className="d-flex gap-2">
|
|
<button
|
|
className="btn btn-sm btn-edit"
|
|
onClick={() => {
|
|
setFiltroMedicoId(exc.doctor_id || '');
|
|
setPageNovaExcecao(true);
|
|
}}
|
|
>
|
|
<i className="bi bi-pencil me-1"></i> Editar
|
|
</button>
|
|
|
|
<button
|
|
className="btn btn-sm btn-delete"
|
|
onClick={() => {
|
|
setSelectedExceptionId(exc.id);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{showDeleteModal && (
|
|
<div
|
|
className="modal fade show delete-modal"
|
|
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: '#dc3545', color: 'white' }}>
|
|
<h5 className="modal-title">
|
|
Confirmação de Exclusão
|
|
</h5>
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
Tem certeza que deseja excluir esta exceção?
|
|
</p>
|
|
</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={() => deleteExcecao(selectedExceptionId)}
|
|
>
|
|
Excluir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{showSuccessModal && (
|
|
<div
|
|
className="modal fade show delete-modal"
|
|
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: '#1e3a8a', color: 'white' }}>
|
|
<h5 className="modal-title">
|
|
Sucesso
|
|
</h5>
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
{successMessage}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => setShowSuccessModal(false)}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ExcecoesDisponibilidade; |