SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Feat controle ponto #35

Merged
deyvisonwanderley merged 7 commits from feat-controle-ponto into master 2025-11-21 15:48:44 +00:00
Conversation 1 Commits 7 Files Changed 19 +3184 -3352
57 changed files with 3184 additions and 3352 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d50760f0db - Show all commits

314
apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte
View File

@@ -112,20 +112,21 @@
const registrosQueryParams = $derived.by(() => {
// Verificar se funcionarioSelecionado não é string vazia
if (!funcionarioSelecionado || funcionarioSelecionado === '') {
console.log('⏭️ [DEBUG] registrosQueryParams: skip (sem funcionário selecionado)');
return 'skip';
return undefined;
}
const params = {
return {
funcionarioId: funcionarioSelecionado as Id<'funcionarios'>,
dataInicio: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]!,
dataFim: new Date().toISOString().split('T')[0]!,
};
console.log('📤 [DEBUG] registrosQueryParams:', params);
return params;
});
const homologacoesQuery = useQuery(api.pontos.listarHomologacoes, homologacoesParams);
const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, registrosQueryParams);
const registrosQuery = $derived(
registrosQueryParams
? useQuery(api.pontos.listarRegistrosPeriodo, registrosQueryParams)
: null
);
const subordinados = $derived(subordinadosQuery?.data || []);
const motivos = $derived(motivosQuery?.data);
@@ -133,22 +134,15 @@
// Registros já filtrados pela query no backend
const registros = $derived.by(() => {
if (!funcionarioSelecionado || funcionarioSelecionado === '') {
if (!funcionarioSelecionado || funcionarioSelecionado === '' || !registrosQuery) {
return [];
}
const dados = registrosQuery?.data;
console.log('🔍 [DEBUG] funcionarioSelecionado:', funcionarioSelecionado);
console.log('🔍 [DEBUG] registrosQuery?.data:', dados);
console.log('🔍 [DEBUG] registrosQuery?.status:', registrosQuery?.status);
const dados = registrosQuery.data;
if (!dados || !Array.isArray(dados)) {
console.log('⚠️ [DEBUG] Dados não são array ou estão vazios');
return [];
}
// A query do backend já filtra pelo funcionário, mas adicionamos verificação extra
// Converter ambos para string para garantir comparação correta
const filtrados = dados.filter((r) => String(r.funcionarioId) === String(funcionarioSelecionado));
console.log('✅ [DEBUG] Registros filtrados:', filtrados.length, filtrados);
return filtrados;
return dados.filter((r) => String(r.funcionarioId) === String(funcionarioSelecionado));
});
// Verificar se é gestor (tem subordinados)
@@ -388,33 +382,40 @@
<!-- Formulário Unificado de Edição e Ajuste -->
{#if modoEdicao && registroSelecionado}
<div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
<div class="card-body">
<!-- Título com data -->
<div class="flex items-center justify-between mb-6 pb-4 border-b border-base-300">
<div>
<h2 class="card-title text-2xl text-primary mb-1">
<Edit class="h-6 w-6" strokeWidth={2} />
<div class="card-body p-8">
<!-- Cabeçalho Elegante -->
<div class="mb-8 pb-6 border-b border-base-300">
<div class="flex items-start gap-4">
<div class="p-3 bg-primary/10 rounded-xl">
<Edit class="h-7 w-7 text-primary" strokeWidth={2} />
</div>
<div class="flex-1">
<h2 class="text-3xl font-bold text-base-content mb-2">
Homologar Registro de Ponto
</h2>
{#if dataRegistroFormatada}
<p class="text-base-content/70 text-sm mt-1">
<div class="flex items-center gap-2 text-base-content/70">
<Clock class="h-4 w-4" />
<span class="text-sm">
Registro do dia <span class="font-semibold text-primary">{dataRegistroFormatada}</span>
</p>
</span>
</div>
{/if}
</div>
</div>
</div>
<!-- Abas -->
<div class="tabs tabs-boxed mb-6 bg-base-200">
<!-- Abas Modernas -->
<div class="tabs tabs-boxed mb-8 bg-base-200/50 p-1 rounded-lg">
<button
class="tab tab-lg {abaAtiva === 'editar' ? 'tab-active' : ''}"
class="tab tab-lg flex-1 transition-all {abaAtiva === 'editar' ? 'tab-active bg-primary text-primary-content shadow-md' : 'hover:bg-base-300'}"
onclick={() => (abaAtiva = 'editar')}
>
<Edit class="h-4 w-4 mr-2" />
Editar Horário
</button>
<button
class="tab tab-lg {abaAtiva === 'ajustar' ? 'tab-active' : ''}"
class="tab tab-lg flex-1 transition-all {abaAtiva === 'ajustar' ? 'tab-active bg-primary text-primary-content shadow-md' : 'hover:bg-base-300'}"
onclick={() => (abaAtiva = 'ajustar')}
>
<TrendingUp class="h-4 w-4 mr-2" />
@@ -424,30 +425,43 @@
<!-- Conteúdo da Aba: Editar Horário -->
{#if abaAtiva === 'editar'}
<div class="space-y-6">
<!-- Hora Unificada -->
<div class="space-y-8">
<!-- Card: Nova Hora -->
<div class="card bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 shadow-sm">
<div class="card-body p-6">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-primary/20 rounded-lg">
<Clock class="h-5 w-5 text-primary" />
</div>
<div>
<h3 class="text-lg font-semibold text-base-content">Nova Hora</h3>
<p class="text-sm text-base-content/60">Defina o novo horário para este registro</p>
</div>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base">
<Clock class="h-4 w-4 inline-block mr-2" />
Nova Hora
</span>
</label>
<input
type="time"
class="input input-bordered input-primary w-full max-w-xs"
class="input input-bordered input-primary w-full max-w-xs text-lg font-semibold"
bind:value={novaHoraFormatada}
/>
</div>
</div>
</div>
<!-- Grid de Motivos -->
<!-- Card: Motivo e Justificativa -->
<div class="card bg-base-50 border border-base-300 shadow-sm">
<div class="card-body p-6">
<h3 class="text-lg font-semibold text-base-content mb-6 flex items-center gap-2">
<div class="w-1 h-6 bg-primary rounded-full"></div>
Motivo e Justificativa
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Motivo (Tipo)</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Tipo de Motivo</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<select class="select select-bordered select-primary" bind:value={motivoTipo}>
<select class="select select-bordered select-primary w-full" bind:value={motivoTipo}>
<option value="">Selecione um tipo</option>
{#if motivos?.opcoesPadrao}
{#each motivos.opcoesPadrao as opcao}
@@ -463,34 +477,41 @@
</label>
<input
type="text"
class="input input-bordered input-primary"
class="input input-bordered input-primary w-full"
bind:value={motivoDescricao}
placeholder="Informe detalhes adicionais sobre o motivo"
/>
</div>
</div>
</div>
</div>
<!-- Observações -->
<!-- Card: Observações -->
<div class="card bg-base-50 border border-base-300 shadow-sm">
<div class="card-body p-6">
<h3 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
<div class="w-1 h-6 bg-primary rounded-full"></div>
Observações Adicionais
</h3>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Observações</span>
</label>
<textarea
class="textarea textarea-bordered textarea-primary"
class="textarea textarea-bordered textarea-primary w-full"
bind:value={observacoes}
rows="4"
placeholder="Adicione observações relevantes sobre esta edição..."
></textarea>
</div>
</div>
</div>
<!-- Botões de ação -->
<div class="flex gap-3 justify-end mt-8 pt-6 border-t border-base-300">
<button class="btn btn-ghost gap-2" onclick={cancelar}>
<X class="h-4 w-4" />
<div class="flex gap-3 justify-end pt-6 border-t border-base-300">
<button class="btn btn-ghost gap-2 btn-lg" onclick={cancelar}>
<X class="h-5 w-5" />
Cancelar
</button>
<button class="btn btn-primary gap-2" onclick={salvarEdicao}>
<Save class="h-4 w-4" />
<button class="btn btn-primary gap-2 btn-lg shadow-lg" onclick={salvarEdicao}>
<Save class="h-5 w-5" />
Salvar Alterações
</button>
</div>
@@ -499,57 +520,72 @@
<!-- Conteúdo da Aba: Ajustar Banco de Horas -->
{#if abaAtiva === 'ajustar'}
<div class="space-y-6">
<!-- Tipo de Ajuste -->
<div class="space-y-8">
<!-- Card: Tipo de Ajuste -->
<div class="card bg-gradient-to-br from-warning/5 to-warning/10 border border-warning/20 shadow-sm">
<div class="card-body p-6">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-warning/20 rounded-lg">
<TrendingUp class="h-5 w-5 text-warning" />
</div>
<div>
<h3 class="text-lg font-semibold text-base-content">Tipo de Ajuste</h3>
<p class="text-sm text-base-content/60">Selecione o tipo de ajuste a ser aplicado</p>
</div>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold text-base">Tipo de Ajuste</span>
<span class="label-text-alt text-error">*</span>
</label>
<select class="select select-bordered select-primary w-full max-w-md" bind:value={tipoAjuste}>
<option value="compensar">Compensar</option>
<option value="abonar">Abonar</option>
<option value="descontar">Descontar em Folha</option>
<select class="select select-bordered select-warning w-full max-w-md text-base font-medium" bind:value={tipoAjuste}>
<option value="compensar">🕐 Compensar</option>
<option value="abonar">✅ Abonar</option>
<option value="descontar">❌ Descontar em Folha</option>
</select>
</div>
</div>
</div>
<!-- Período com Data e Hora -->
<div class="bg-base-200/50 p-6 rounded-xl border border-base-300">
<label class="label mb-4">
<span class="label-text font-semibold text-base">
<Clock class="h-4 w-4 inline-block mr-2" />
Período do Ajuste
</span>
<span class="label-text-alt text-error">*</span>
</label>
<!-- Card: Período com Data e Hora -->
<div class="card bg-base-50 border border-base-300 shadow-sm">
<div class="card-body p-6">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="p-2 bg-primary/20 rounded-lg">
<Clock class="h-5 w-5 text-primary" />
</div>
<div>
<h3 class="text-lg font-semibold text-base-content">Período do Ajuste</h3>
<p class="text-sm text-base-content/60">Defina o período de início e fim do ajuste</p>
</div>
</div>
<span class="badge badge-error badge-lg">Obrigatório</span>
</div>
<!-- Data e Hora Início -->
<div class="mb-6">
<h4 class="text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-primary"></div>
<div class="mb-6 p-4 bg-primary/5 rounded-lg border border-primary/10">
<h4 class="text-base font-semibold text-base-content mb-4 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-primary shadow-sm"></div>
Início do Período
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Data Início</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Data Início</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<input
type="date"
class="input input-bordered input-primary"
class="input input-bordered input-primary w-full"
bind:value={dataInicioAjuste}
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Hora Início</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Hora Início</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<input
type="time"
class="input input-bordered input-primary"
class="input input-bordered input-primary w-full"
bind:value={horaInicioAjuste}
/>
</div>
@@ -557,25 +593,25 @@
</div>
<!-- Separador Visual -->
<div class="divider my-4">
<Clock class="h-4 w-4 text-base-content/40" />
<div class="divider my-6">
<Clock class="h-5 w-5 text-base-content/40" />
</div>
<!-- Data e Hora Fim -->
<div>
<h4 class="text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<div class="p-4 bg-secondary/5 rounded-lg border border-secondary/10">
<h4 class="text-base font-semibold text-base-content mb-4 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-secondary shadow-sm"></div>
Fim do Período
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Data Fim</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Data Fim</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<input
type="date"
class="input input-bordered input-primary"
class="input input-bordered input-secondary w-full"
bind:value={dataFimAjuste}
min={dataInicioAjuste}
/>
@@ -583,12 +619,12 @@
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Hora Fim</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Hora Fim</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<input
type="time"
class="input input-bordered input-primary"
class="input input-bordered input-secondary w-full"
bind:value={horaFimAjuste}
/>
</div>
@@ -599,29 +635,36 @@
{#if dataInicioAjuste && horaInicioAjuste && dataFimAjuste && horaFimAjuste}
{@const periodoCalculado = calcularPeriodo(dataInicioAjuste, horaInicioAjuste, dataFimAjuste, horaFimAjuste)}
{#if periodoCalculado.dias > 0 || periodoCalculado.horas > 0 || periodoCalculado.minutos > 0}
<div class="mt-4 p-3 bg-primary/10 rounded-lg border border-primary/20">
<div class="text-xs font-semibold text-primary mb-1">Período Calculado:</div>
<div class="text-sm text-base-content">
<div class="mt-6 p-4 bg-info/10 rounded-lg border border-info/30 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<Clock class="h-4 w-4 text-info" />
<div class="text-sm font-semibold text-info">Período Calculado</div>
</div>
<div class="text-base font-bold text-base-content">
{periodoCalculado.dias > 0 ? `${periodoCalculado.dias} dia${periodoCalculado.dias > 1 ? 's' : ''} ` : ''}
{periodoCalculado.horas > 0 ? `${periodoCalculado.horas} hora${periodoCalculado.horas > 1 ? 's' : ''} ` : ''}
{periodoCalculado.minutos > 0 ? `${periodoCalculado.minutos} minuto${periodoCalculado.minutos > 1 ? 's' : ''}` : ''}
{#if periodoCalculado.dias === 0 && periodoCalculado.horas === 0 && periodoCalculado.minutos === 0}
<span class="text-base-content/60">Período inválido</span>
{/if}
</div>
</div>
{/if}
{/if}
</div>
</div>
<!-- Grid de Motivos -->
<!-- Card: Motivo e Justificativa -->
<div class="card bg-base-50 border border-base-300 shadow-sm">
<div class="card-body p-6">
<h3 class="text-lg font-semibold text-base-content mb-6 flex items-center gap-2">
<div class="w-1 h-6 bg-warning rounded-full"></div>
Motivo e Justificativa
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Motivo (Tipo)</span>
<span class="label-text-alt text-error">*</span>
<span class="label-text font-semibold">Tipo de Motivo</span>
<span class="label-text-alt text-error font-bold">*</span>
</label>
<select class="select select-bordered select-primary" bind:value={motivoTipo}>
<select class="select select-bordered select-warning w-full" bind:value={motivoTipo}>
<option value="">Selecione um tipo</option>
{#if motivos?.opcoesPadrao}
{#each motivos.opcoesPadrao as opcao}
@@ -637,34 +680,41 @@
</label>
<input
type="text"
class="input input-bordered input-primary"
class="input input-bordered input-warning w-full"
bind:value={motivoDescricao}
placeholder="Informe detalhes adicionais sobre o motivo"
/>
</div>
</div>
</div>
</div>
<!-- Observações -->
<!-- Card: Observações -->
<div class="card bg-base-50 border border-base-300 shadow-sm">
<div class="card-body p-6">
<h3 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
<div class="w-1 h-6 bg-warning rounded-full"></div>
Observações Adicionais
</h3>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Observações</span>
</label>
<textarea
class="textarea textarea-bordered textarea-primary"
class="textarea textarea-bordered textarea-warning w-full"
bind:value={observacoes}
rows="4"
placeholder="Adicione observações relevantes sobre este ajuste..."
></textarea>
</div>
</div>
</div>
<!-- Botões de ação -->
<div class="flex gap-3 justify-end mt-8 pt-6 border-t border-base-300">
<button class="btn btn-ghost gap-2" onclick={cancelar}>
<X class="h-4 w-4" />
<div class="flex gap-3 justify-end pt-6 border-t border-base-300">
<button class="btn btn-ghost gap-2 btn-lg" onclick={cancelar}>
<X class="h-5 w-5" />
Cancelar
</button>
<button class="btn btn-primary gap-2" onclick={salvarAjuste}>
<Save class="h-4 w-4" />
<button class="btn btn-warning gap-2 btn-lg shadow-lg" onclick={salvarAjuste}>
<Save class="h-5 w-5" />
Salvar Ajuste
</button>
</div>
@@ -675,43 +725,48 @@
{/if}
<!-- Lista de Registros -->
{#if funcionarioSelecionado && !modoEdicao}
{#if funcionarioSelecionado}
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title mb-4">Registros do Funcionário</h2>
{#if registros.length === 0}
{#if registrosQuery?.status === 'Loading'}
<div class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
</div>
{:else if registros.length === 0}
<div class="alert alert-info">
<span>Nenhum registro encontrado</span>
</div>
{:else}
<div class="overflow-x-auto">
<div class="max-h-[600px] overflow-y-auto border border-base-300 rounded-lg">
<table class="table table-zebra">
<thead>
<thead class="sticky top-0 bg-base-200 z-10 shadow-sm">
<tr>
<th>Data</th>
<th>Tipo</th>
<th>Horário</th>
<th>Status</th>
<th>Ações</th>
<th class="bg-base-200 whitespace-nowrap">Data</th>
<th class="bg-base-200 whitespace-nowrap">Tipo</th>
<th class="bg-base-200 whitespace-nowrap">Horário</th>
<th class="bg-base-200 whitespace-nowrap">Status</th>
<th class="bg-base-200 whitespace-nowrap">Ações</th>
</tr>
</thead>
<tbody>
{#each registros as registro}
<tr>
<td>{registro.data}</td>
<td>
<td class="whitespace-nowrap">{registro.data}</td>
<td class="whitespace-nowrap">
{getTipoRegistroLabel(registro.tipo)}
</td>
<td>{formatarHoraPonto(registro.hora, registro.minuto)}</td>
<td>
<td class="whitespace-nowrap">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
<td class="whitespace-nowrap">
<span
class="badge {registro.dentroDoPrazo ? 'badge-success' : 'badge-error'}"
>
{registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}
</span>
</td>
<td>
<td class="whitespace-nowrap">
<button
class="btn btn-sm btn-outline btn-primary gap-2"
onclick={() => abrirEdicaoComAjuste(registro._id)}
@@ -725,13 +780,13 @@
</tbody>
</table>
</div>
</div>
{/if}
</div>
</div>
{/if}
<!-- Histórico de Homologações -->
{#if !modoEdicao}
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title mb-4">
@@ -747,7 +802,11 @@
{/if}
</h2>
{#if homologacoes.length === 0}
{#if homologacoesQuery?.status === 'Loading'}
<div class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
</div>
{:else if homologacoes.length === 0}
<div class="alert alert-info">
<span>Nenhuma homologação encontrada</span>
</div>
@@ -860,7 +919,6 @@
{/if}
</div>
</div>
{/if}
<!-- Modal de Detalhes da Homologação -->
{#if mostrandoModalDetalhes && homologacaoSelecionada}