642 lines
27 KiB
JavaScript
642 lines
27 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import API_KEY from "../components/utils/apiKeys";
|
|
import { useAuth } from "../components/utils/AuthProvider";
|
|
import "./style/TablePaciente.css";
|
|
import ModalErro from "../components/utils/fetchErros/ModalErro";
|
|
import manager from "../components/utils/fetchErros/ManagerFunction";
|
|
|
|
function TablePaciente({ setCurrentPage, setPatientID, setDictInfo }) {
|
|
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const [pacientes, setPacientes] = useState([]);
|
|
const [search, setSearch] = useState("");
|
|
const [filtroConvenio, setFiltroConvenio] = useState("Todos");
|
|
const [filtroVIP, setFiltroVIP] = useState(false);
|
|
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
|
|
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
|
const [filtroCidade, setFiltroCidade] = useState("");
|
|
const [filtroEstado, setFiltroEstado] = useState("");
|
|
const [idadeMinima, setIdadeMinima] = useState("");
|
|
const [idadeMaxima, setIdadeMaxima] = useState("");
|
|
const [dataInicial, setDataInicial] = useState("");
|
|
const [dataFinal, setDataFinal] = useState("");
|
|
|
|
const [sortKey, setSortKey] = useState(null);
|
|
const [sortDir, setSortDir] = useState('asc');
|
|
|
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
|
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
|
|
|
const [showModalError, setShowModalError] = useState("");
|
|
const [ErrorInfo, setErrorInfo] = useState({});
|
|
|
|
// Funções auxiliares
|
|
const ehAniversariante = (dataNascimento) => {
|
|
if (!dataNascimento) return false;
|
|
const hoje = new Date();
|
|
const nascimento = new Date(dataNascimento);
|
|
return (
|
|
hoje.getDate() === nascimento.getDate() &&
|
|
hoje.getMonth() === nascimento.getMonth()
|
|
);
|
|
};
|
|
|
|
const calcularIdade = (dataNascimento) => {
|
|
if (!dataNascimento) return 0;
|
|
const hoje = new Date();
|
|
const nascimento = new Date(dataNascimento);
|
|
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
|
const mes = hoje.getMonth() - nascimento.getMonth();
|
|
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
|
idade--;
|
|
}
|
|
return idade;
|
|
};
|
|
|
|
const formatarData = (dataString) => {
|
|
if (!dataString) return 'Nunca';
|
|
const data = new Date(dataString);
|
|
return data.toLocaleDateString('pt-BR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
// Funções de API (mantidas do seu código original)
|
|
const GetAnexos = async (id) => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Authorization", "Bearer <token>");
|
|
var requestOptions = { method: "GET", headers: myHeaders, redirect: "follow" };
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`,
|
|
requestOptions
|
|
);
|
|
const result = await response.json();
|
|
return result.data;
|
|
} catch (error) {
|
|
console.log("error", error);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const DeleteAnexo = async (patientID) => {
|
|
const RespostaGetAnexos = await GetAnexos(patientID);
|
|
for (let i = 0; i < RespostaGetAnexos.length; i++) {
|
|
const idAnexo = RespostaGetAnexos[i].id;
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Authorization", "Bearer <token>");
|
|
var requestOptions = { method: "DELETE", headers: myHeaders, redirect: "follow" };
|
|
|
|
fetch(
|
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`,
|
|
requestOptions
|
|
)
|
|
.then((response) => response.text())
|
|
.then((result) => console.log("anexo excluido com sucesso", result))
|
|
.catch((error) => console.log("error", error));
|
|
}
|
|
};
|
|
|
|
const deletePatient = async (id) => {
|
|
const authHeader = getAuthorizationHeader();
|
|
var myHeaders = new Headers();
|
|
myHeaders.append('apikey', API_KEY);
|
|
myHeaders.append("Authorization", authHeader);
|
|
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
|
|
|
try {
|
|
const result = await fetch(
|
|
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${id}`,
|
|
requestOptions
|
|
);
|
|
setPacientes((prev) => prev.filter((p) => p.id !== id));
|
|
} catch (error) {
|
|
console.log("Deu problema", error);
|
|
} finally {
|
|
setShowDeleteModal(false);
|
|
}
|
|
};
|
|
|
|
const RefreshingToken = () => {
|
|
console.log("Refreshing token...");
|
|
};
|
|
|
|
useEffect(() => {
|
|
const authHeader = getAuthorizationHeader();
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("apikey", API_KEY);
|
|
myHeaders.append("Authorization", `${authHeader}`);
|
|
var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
|
|
|
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(errorData => {
|
|
const errorObject = {
|
|
httpStatus: response.status,
|
|
apiCode: errorData.code,
|
|
message: errorData.message || response.statusText,
|
|
details: errorData.details,
|
|
hint: errorData.hint
|
|
};
|
|
throw errorObject;
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(result => {
|
|
setPacientes(result);
|
|
setShowModalError(false);
|
|
})
|
|
.catch(error => {
|
|
manager(setShowModalError, RefreshingToken, setErrorInfo, error);
|
|
});
|
|
}, [isAuthenticated, getAuthorizationHeader]);
|
|
|
|
// Filtragem
|
|
const limparFiltros = () => {
|
|
setSearch("");
|
|
setFiltroConvenio("Todos");
|
|
setFiltroVIP(false);
|
|
setFiltroAniversariante(false);
|
|
setFiltroCidade("");
|
|
setFiltroEstado("");
|
|
setIdadeMinima("");
|
|
setIdadeMaxima("");
|
|
setDataInicial("");
|
|
setDataFinal("");
|
|
setPaginaAtual(1);
|
|
};
|
|
|
|
const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
|
|
const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
|
|
const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
|
|
const buscaEmail = paciente.email?.toLowerCase().includes(search.toLowerCase());
|
|
const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
|
|
|
|
const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
|
|
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
|
const passaAniversario = filtroAniversariante ? ehAniversariante(paciente.birth_date) : true;
|
|
const passaCidade = filtroCidade ? paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
|
const passaEstado = filtroEstado ? paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
|
|
|
const idade = calcularIdade(paciente.birth_date);
|
|
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
|
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
|
|
|
const passaDataInicial = dataInicial ? paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
|
|
const passaDataFinal = dataFinal ? paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
|
|
|
|
return passaBusca && passaConvenio && passaVIP && passaAniversario &&
|
|
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
|
passaDataInicial && passaDataFinal;
|
|
}) : [];
|
|
|
|
// Ordenação
|
|
const aplicarOrdenacao = (arr) => {
|
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
|
const copy = [...arr];
|
|
if (sortKey === 'nome') {
|
|
copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
|
|
} else if (sortKey === 'idade') {
|
|
copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
|
|
}
|
|
if (sortDir === 'desc') copy.reverse();
|
|
return copy;
|
|
};
|
|
|
|
const pacientesOrdenados = aplicarOrdenacao(pacientesFiltrados);
|
|
|
|
// Paginação
|
|
const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
|
|
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
|
const indiceFinal = indiceInicial + itensPorPagina;
|
|
const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);
|
|
|
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
|
const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
|
|
const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 1);
|
|
|
|
const gerarNumerosPaginas = () => {
|
|
const paginas = [];
|
|
const paginasParaMostrar = 5;
|
|
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
|
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
|
return paginas;
|
|
};
|
|
|
|
useEffect(() => {
|
|
setPaginaAtual(1);
|
|
}, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
|
|
|
|
return (
|
|
<>
|
|
<div className="page-heading">
|
|
<h3>Lista de Pacientes</h3>
|
|
</div>
|
|
|
|
<div className="page-content table-paciente-container">
|
|
<div className="table-paciente-card">
|
|
<div className="card-header d-flex justify-content-between align-items-center">
|
|
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
|
|
<Link to={'cadastro'}>
|
|
<button className="btn btn-primary">
|
|
<i className="bi bi-plus-circle"></i> Adicionar Paciente
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="card-body">
|
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
|
<div className="table-paciente-filters">
|
|
<h5 className="mb-3">
|
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
|
</h5>
|
|
|
|
{/* Busca */}
|
|
<div className="mb-3">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Buscar por nome, CPF ou email..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Linha de Filtros Básicos - TUDO EM UMA LINHA SÓ */}
|
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
|
{/* Convênio */}
|
|
<div className="d-flex align-items-center gap-2">
|
|
<label className="form-label mb-0 text-muted small">Convênio:</label>
|
|
<select
|
|
className="form-select form-select-sm compact-select"
|
|
value={filtroConvenio}
|
|
onChange={(e) => setFiltroConvenio(e.target.value)}
|
|
style={{ minWidth: "160px" }}
|
|
>
|
|
<option value="Todos">Todos os Convênios</option>
|
|
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
|
<option value="Hapvida">Hapvida</option>
|
|
<option value="Unimed">Unimed</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Status VIP */}
|
|
<div className="d-flex align-items-center gap-2">
|
|
<label className="form-label mb-0 text-muted small">VIP:</label>
|
|
<select
|
|
className="form-select form-select-sm compact-select"
|
|
value={filtroVIP ? "vip" : "todos"}
|
|
onChange={(e) => setFiltroVIP(e.target.value === "vip")}
|
|
style={{ minWidth: "120px" }}
|
|
>
|
|
<option value="todos">Todos</option>
|
|
<option value="vip">Apenas VIP</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Aniversariantes */}
|
|
<div className="d-flex align-items-center gap-2">
|
|
<label className="form-label mb-0 text-muted small">Aniversário:</label>
|
|
<select
|
|
className="form-select form-select-sm compact-select"
|
|
value={filtroAniversariante ? "hoje" : "todos"}
|
|
onChange={(e) => setFiltroAniversariante(e.target.value === "hoje")}
|
|
style={{ minWidth: "140px" }}
|
|
>
|
|
<option value="todos">Todos</option>
|
|
<option value="hoje">Aniversariantes</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Separador */}
|
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
|
|
|
{/* Ordenação */}
|
|
<div className="d-flex align-items-center gap-2">
|
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
|
<select
|
|
className="form-select form-select-sm compact-select sort-select"
|
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
|
const [k, d] = v.split('-');
|
|
setSortKey(k);
|
|
setSortDir(d);
|
|
}}
|
|
style={{ minWidth: "180px" }}
|
|
>
|
|
<option value="">Sem ordenação</option>
|
|
<option value="nome-asc">Nome (A-Z)</option>
|
|
<option value="nome-desc">Nome (Z-A)</option>
|
|
<option value="idade-asc">Idade (crescente)</option>
|
|
<option value="idade-desc">Idade (decrescente)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Linha de Ações */}
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<button
|
|
className="btn btn-link p-0 text-decoration-none d-flex align-items-center"
|
|
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
|
style={{ fontSize: "0.9rem" }}
|
|
>
|
|
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
|
Filtros Avançados
|
|
</button>
|
|
|
|
<button
|
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
|
onClick={limparFiltros}
|
|
>
|
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
|
</button>
|
|
</div>
|
|
|
|
{/* Filtros Avançados */}
|
|
{showFiltrosAvancados && (
|
|
<div className="mt-3 p-3 border rounded advanced-filters">
|
|
<h6 className="mb-3">Filtros Avançados</h6>
|
|
<div className="row g-3">
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Cidade</label>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Digite a cidade..."
|
|
value={filtroCidade}
|
|
onChange={(e) => setFiltroCidade(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Estado</label>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Ex: Minas Gerais"
|
|
value={filtroEstado}
|
|
onChange={(e) => setFiltroEstado(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Idade mínima</label>
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm"
|
|
placeholder="Ex: 18"
|
|
value={idadeMinima}
|
|
onChange={(e) => setIdadeMinima(e.target.value)}
|
|
min="0"
|
|
max="150"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Idade máxima</label>
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm"
|
|
placeholder="Ex: 65"
|
|
value={idadeMaxima}
|
|
onChange={(e) => setIdadeMaxima(e.target.value)}
|
|
min="0"
|
|
max="150"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Data inicial</label>
|
|
<input
|
|
type="date"
|
|
className="form-control form-control-sm"
|
|
value={dataInicial}
|
|
onChange={(e) => setDataInicial(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label fw-bold">Data final</label>
|
|
<input
|
|
type="date"
|
|
className="form-control form-control-sm"
|
|
value={dataFinal}
|
|
onChange={(e) => setDataFinal(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Contador */}
|
|
<div className="mt-3">
|
|
<div className="contador-pacientes">
|
|
{pacientesFiltrados.length} DE {pacientes.length} PACIENTES ENCONTRADOS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
|
<div className="table-responsive mt-4">
|
|
<table className="table table-striped table-hover table-paciente-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nome</th>
|
|
<th>CPF</th>
|
|
<th>Convênio</th>
|
|
<th>Email</th>
|
|
<th>Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{pacientesPaginados.length > 0 ? (
|
|
pacientesPaginados.map((paciente) => (
|
|
<tr key={paciente.id}>
|
|
<td>
|
|
<div className="d-flex align-items-center patient-name-container">
|
|
{paciente.full_name}
|
|
<div className="d-flex patient-badges ms-2">
|
|
{ehAniversariante(paciente.birth_date) && (
|
|
<span className="badge anniversary-badge ms-1" title="Aniversariante do dia">
|
|
<i className="bi bi-gift me-1"></i>
|
|
</span>
|
|
)}
|
|
{paciente.vip && (
|
|
<span className="badge vip-badge ms-1" title="Paciente VIP">
|
|
VIP
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{paciente.cpf}</td>
|
|
<td>
|
|
<span className="badge insurance-badge">
|
|
{paciente.insurance_plan || '-'}
|
|
</span>
|
|
</td>
|
|
<td>{paciente.email || 'Não informado'}</td>
|
|
<td>
|
|
<div className="d-flex gap-2">
|
|
<Link to={"details"}>
|
|
<button
|
|
className="btn btn-sm btn-view"
|
|
onClick={() => setDictInfo(paciente)}
|
|
>
|
|
<i className="bi bi-eye me-1"></i> Ver
|
|
</button>
|
|
</Link>
|
|
<button
|
|
className="btn btn-sm btn-edit"
|
|
onClick={() => {
|
|
setDictInfo(paciente);
|
|
navigate('edit');
|
|
}}
|
|
>
|
|
<i className="bi bi-pencil me-1"></i> Editar
|
|
</button>
|
|
<button
|
|
className="btn btn-sm btn-delete"
|
|
onClick={() => {
|
|
setSelectedPatientId(paciente.id);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="5" className="text-center py-4">
|
|
<div className="text-muted">
|
|
<i className="bi bi-search display-4"></i>
|
|
<p className="mt-2">Nenhum paciente encontrado com os filtros aplicados.</p>
|
|
{(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
|
|
filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
|
|
<button className="btn btn-outline-primary btn-sm mt-2" onClick={limparFiltros}>
|
|
Limpar filtros
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* ===== PAGINAÇÃO ===== */}
|
|
{pacientesFiltrados.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={itensPorPagina}
|
|
onChange={(e) => {
|
|
setItensPorPagina(Number(e.target.value));
|
|
setPaginaAtual(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 {paginaAtual} de {totalPaginas} •
|
|
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, pacientesFiltrados.length)} de {pacientesFiltrados.length} pacientes
|
|
</span>
|
|
|
|
<nav>
|
|
<ul className="pagination pagination-sm mb-0">
|
|
<li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
|
|
<button className="page-link" onClick={voltarPagina}>
|
|
<i className="bi bi-chevron-left"></i>
|
|
</button>
|
|
</li>
|
|
|
|
{gerarNumerosPaginas().map(pagina => (
|
|
<li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
|
|
<button className="page-link" onClick={() => irParaPagina(pagina)}>
|
|
{pagina}
|
|
</button>
|
|
</li>
|
|
))}
|
|
|
|
<li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
|
|
<button className="page-link" onClick={avancarPagina}>
|
|
<i className="bi bi-chevron-right"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== MODAL DE EXCLUSÃO ===== */}
|
|
{showDeleteModal && (
|
|
<div
|
|
className="modal fade show delete-modal"
|
|
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" 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 este paciente?</p>
|
|
<p className="text-muted mt-2">Esta ação não pode ser desfeita.</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={() => deletePatient(selectedPatientId)}
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default TablePaciente; |