feat: add date range filters for employee time records in homologacao page

- Introduced date range filters for selecting start and end dates, defaulting to the last 30 days for improved user experience.
- Enhanced the UI layout to include form controls for selecting employees and date ranges, ensuring better accessibility and usability.
- Updated data handling logic to utilize the new date filters for querying employee time records.
This commit is contained in:
2025-11-23 14:58:04 -03:00
parent 1ad0ee91cb
commit 00e18e79ec

View File

@@ -18,6 +18,12 @@
let homologacaoParaExcluir = $state<Id<'homologacoesPonto'> | null>(null); let homologacaoParaExcluir = $state<Id<'homologacoesPonto'> | null>(null);
let mostrandoModalDetalhes = $state(false); let mostrandoModalDetalhes = $state(false);
let mostrandoModalExcluir = $state(false); let mostrandoModalExcluir = $state(false);
// Filtros de período
const hoje = new Date();
const trintaDiasAtras = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
let dataInicioFiltro = $state(trintaDiasAtras.toISOString().split('T')[0]!);
let dataFimFiltro = $state(hoje.toISOString().split('T')[0]!);
// Monitorar mudanças em funcionarioSelecionado // Monitorar mudanças em funcionarioSelecionado
$effect(() => { $effect(() => {
@@ -116,8 +122,8 @@
} }
return { return {
funcionarioId: funcionarioSelecionado as Id<'funcionarios'>, funcionarioId: funcionarioSelecionado as Id<'funcionarios'>,
dataInicio: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]!, dataInicio: dataInicioFiltro,
dataFim: new Date().toISOString().split('T')[0]!, dataFim: dataFimFiltro,
}; };
}); });
@@ -364,18 +370,49 @@
<div class="card bg-base-100 shadow-xl mb-6"> <div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body"> <div class="card-body">
<h2 class="card-title mb-4">Selecionar Funcionário</h2> <h2 class="card-title mb-4">Selecionar Funcionário</h2>
<select <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
class="select select-bordered w-full" <div class="form-control">
bind:value={funcionarioSelecionado} <label class="label">
disabled={modoEdicao} <span class="label-text font-medium">Funcionário</span>
> </label>
<option value="">Selecione um funcionário</option> <select
{#each funcionarios as funcionario} class="select select-bordered w-full"
<option value={funcionario._id as string}> bind:value={funcionarioSelecionado}
{funcionario.nome} {funcionario.matricula ? `(${funcionario.matricula})` : ''} disabled={modoEdicao}
</option> >
{/each} <option value="">Selecione um funcionário</option>
</select> {#each funcionarios as funcionario}
<option value={funcionario._id as string}>
{funcionario.nome} {funcionario.matricula ? `(${funcionario.matricula})` : ''}
</option>
{/each}
</select>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Data Início</span>
</label>
<input
type="date"
class="input input-bordered w-full"
bind:value={dataInicioFiltro}
disabled={modoEdicao}
max={dataFimFiltro}
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Data Fim</span>
</label>
<input
type="date"
class="input input-bordered w-full"
bind:value={dataFimFiltro}
disabled={modoEdicao}
min={dataInicioFiltro}
/>
</div>
</div>
</div> </div>
</div> </div>