forked from RiseUP/riseup-squad23
Adicionado-novas-tabelas
This commit is contained in:
parent
d8e63f8abe
commit
e007c167e7
@ -59,7 +59,11 @@ const Agendamento = ({setDictInfo}) => {
|
||||
const [listaConsultasID, setListaConsultaID] = useState([])
|
||||
const [coresConsultas, setCoresConsultas] = useState([])
|
||||
|
||||
|
||||
// Estados para a tabela da fila de espera
|
||||
const [searchTermFila, setSearchTermFila] = useState('');
|
||||
const [filtroMedicoFila, setFiltroMedicoFila] = useState('Todos');
|
||||
const [paginaAtualFila, setPaginaAtualFila] = useState(1);
|
||||
const [itensPorPaginaFila, setItensPorPaginaFila] = useState(10);
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
@ -152,7 +156,8 @@ console.log("recarregando")
|
||||
const TodosOsMedicos = await GetAllDoctors(authHeader)
|
||||
|
||||
for (let d = 0; TodosOsMedicos.length > d; d++) {
|
||||
lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
|
||||
lista.push({ nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })
|
||||
}
|
||||
setListaDeMedicos(lista)
|
||||
}
|
||||
PegarTodosOsMedicos()
|
||||
@ -167,7 +172,8 @@ const deleteConsulta = (selectedPatientId) => {
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"cancelled",
|
||||
var raw = JSON.stringify({
|
||||
"status": "cancelled",
|
||||
"cancellation_reason": motivoCancelamento
|
||||
});
|
||||
|
||||
@ -192,7 +198,8 @@ const confirmConsulta = (selectedPatientId) => {
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"confirmed"
|
||||
var raw = JSON.stringify({
|
||||
"status": "confirmed"
|
||||
});
|
||||
|
||||
|
||||
@ -444,61 +451,275 @@ const handleSearchMedicos = (term) => {
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="fila-container">
|
||||
<div className="fila-header">
|
||||
<div className="page-content table-paciente-container">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card table-paciente-card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title mb-0">Fila de Espera</h4>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
{/* Filtros */}
|
||||
<div className="card p-3 mb-3 table-paciente-filters">
|
||||
<h5 className="mb-3">
|
||||
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||
</h5>
|
||||
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar na fila de espera..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="form-control"
|
||||
placeholder="Buscar por nome do paciente ou CPF..."
|
||||
value={searchTermFila}
|
||||
onChange={(e) => setSearchTermFila(e.target.value)}
|
||||
/>
|
||||
<h2 className="fila-titulo">Fila de Espera</h2>
|
||||
<small className="text-muted">
|
||||
Digite o nome completo ou número do CPF
|
||||
</small>
|
||||
</div>
|
||||
<table className="fila-tabela">
|
||||
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Filtrar por nome do médico..."
|
||||
value={filtroMedicoFila === 'Todos' ? '' : filtroMedicoFila}
|
||||
onChange={(e) => setFiltroMedicoFila(e.target.value || 'Todos')}
|
||||
/>
|
||||
<small className="text-muted">
|
||||
Digite o nome do médico para filtrar
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={() => {
|
||||
setSearchTermFila('');
|
||||
setFiltroMedicoFila('Todos');
|
||||
setPaginaAtualFila(1);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<div className="contador-pacientes">
|
||||
{(() => {
|
||||
const filtrados = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
return filtrados.length;
|
||||
})()} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtros Ativos */}
|
||||
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
||||
<div className="alert alert-info mb-3 filters-active">
|
||||
<strong>Filtros ativos:</strong>
|
||||
<div className="mt-1">
|
||||
{searchTermFila && <span className="badge bg-primary me-2">Busca: "{searchTermFila}"</span>}
|
||||
{filtroMedicoFila !== "Todos" && <span className="badge bg-primary me-2">Médico: {filtroMedicoFila}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabela */}
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover table-paciente-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
|
||||
<th>CPF</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Nome do Paciente</th>
|
||||
<th>CPF</th>
|
||||
<th>Médico Solicitado</th>
|
||||
<th>Data da Solicitação</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filaEsperaData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td> <p>{item.Infos?.paciente_nome} </p> </td>
|
||||
<td><p>{item.Infos?.paciente_cpf} </p></td>
|
||||
<td><p>{item.Infos?.nome_medico} </p></td>
|
||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||
<td> <div className="d-flex gap-2">
|
||||
{(() => {
|
||||
// Filtrar dados
|
||||
const filaFiltrada = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
|
||||
<button className="btn btn-sm btn-edit"
|
||||
// Paginação
|
||||
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
||||
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
||||
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
||||
const filaPaginada = filaFiltrada.slice(indiceInicial, indiceFinal);
|
||||
|
||||
if (filaPaginada.length > 0) {
|
||||
return filaPaginada.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
{item.Infos?.paciente_nome}
|
||||
</div>
|
||||
</td>
|
||||
<td>{item.Infos?.paciente_cpf}</td>
|
||||
<td>
|
||||
<span className="badge insurance-badge">
|
||||
{item.Infos?.nome_medico || 'Não informado'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<button
|
||||
className="btn btn-sm btn-edit"
|
||||
onClick={() => {
|
||||
console.log(item, 'item')
|
||||
navigate(`${2}/edit`)
|
||||
setDictInfo(item)
|
||||
console.log(item, 'item');
|
||||
navigate(`${2}/edit`);
|
||||
setDictInfo(item);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedId(item.agendamento.id)
|
||||
setSelectedId(item.agendamento.id);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div></td>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
));
|
||||
} else {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan="5" className="text-center py-4">
|
||||
<div className="text-muted">
|
||||
<i className="bi bi-search display-4"></i>
|
||||
<p className="mt-2">Nenhuma solicitação encontrada com os filtros aplicados.</p>
|
||||
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm mt-2"
|
||||
onClick={() => {
|
||||
setSearchTermFila('');
|
||||
setFiltroMedicoFila('Todos');
|
||||
setPaginaAtualFila(1);
|
||||
}}
|
||||
>
|
||||
Limpar filtros
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Paginação */}
|
||||
{(() => {
|
||||
const filaFiltrada = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
|
||||
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
||||
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
||||
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
||||
|
||||
if (filaFiltrada.length > 0) {
|
||||
return (
|
||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-2 text-muted">Itens por página:</span>
|
||||
<select
|
||||
className="form-select form-select-sm w-auto"
|
||||
value={itensPorPaginaFila}
|
||||
onChange={(e) => {
|
||||
setItensPorPaginaFila(Number(e.target.value));
|
||||
setPaginaAtualFila(1);
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-3 text-muted">
|
||||
Página {paginaAtualFila} de {totalPaginasFila} •
|
||||
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, filaFiltrada.length)} de {filaFiltrada.length} solicitações
|
||||
</span>
|
||||
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm mb-0">
|
||||
<li className={`page-item ${paginaAtualFila === 1 ? 'disabled' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(paginaAtualFila - 1)}
|
||||
>
|
||||
<i className="bi bi-chevron-left"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{Array.from({ length: Math.min(5, totalPaginasFila) }, (_, i) => {
|
||||
const startPage = Math.max(1, paginaAtualFila - 2);
|
||||
const pageNum = startPage + i;
|
||||
if (pageNum <= totalPaginasFila) {
|
||||
return (
|
||||
<li key={pageNum} className={`page-item ${pageNum === paginaAtualFila ? 'active' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
||||
<li className={`page-item ${paginaAtualFila === totalPaginasFila ? 'disabled' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(paginaAtualFila + 1)}
|
||||
>
|
||||
<i className="bi bi-chevron-right"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -550,7 +771,8 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {setShowDeleteModal(false);
|
||||
onClick={() => {
|
||||
setShowDeleteModal(false);
|
||||
|
||||
}}
|
||||
>
|
||||
@ -561,7 +783,8 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => {deleteConsulta(selectedID);
|
||||
onClick={() => {
|
||||
deleteConsulta(selectedID);
|
||||
setShowDeleteModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
@ -632,7 +855,8 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success"
|
||||
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
|
||||
onClick={() => {
|
||||
confirmConsulta(selectedID); setShowConfirmModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
let lista = listaConsultasID
|
||||
|
||||
@ -433,3 +433,21 @@ html[data-bs-theme="dark"] {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Estilo para o botão Excluir nos modais de Agendamento - vermelho escuro */
|
||||
.modal-footer .btn-danger,
|
||||
button.btn.btn-danger {
|
||||
background-color: #c82333 !important;
|
||||
border-color: #bd2130 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.modal-footer .btn-danger:hover,
|
||||
.modal-footer .btn-danger:focus,
|
||||
.modal-footer .btn-danger:active,
|
||||
button.btn.btn-danger:hover,
|
||||
button.btn.btn-danger:focus,
|
||||
button.btn.btn-danger:active {
|
||||
background-color: #a71d2a !important;
|
||||
border-color: #9c1c28 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user