feat: enhance Banco de Horas management with new reporting features, including adjustments and inconsistencies tracking, advanced filters, and Excel export functionality
This commit is contained in:
@@ -18,7 +18,8 @@
|
||||
Info,
|
||||
ArrowRight,
|
||||
Clock,
|
||||
XCircle
|
||||
XCircle,
|
||||
TrendingUp
|
||||
} from 'lucide-svelte';
|
||||
import type { Component } from 'svelte';
|
||||
|
||||
@@ -102,6 +103,12 @@
|
||||
descricao: 'Gerencie períodos de dispensa de registro de ponto',
|
||||
href: '/recursos-humanos/controle-ponto/dispensa',
|
||||
Icon: XCircle
|
||||
},
|
||||
{
|
||||
nome: 'Banco de Horas',
|
||||
descricao: 'Visão gerencial do banco de horas dos funcionários, com filtros, estatísticas e relatórios',
|
||||
href: '/recursos-humanos/controle-ponto/banco-horas',
|
||||
Icon: TrendingUp
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Clock, CheckCircle2, XCircle, ChevronRight } from 'lucide-svelte';
|
||||
import { Clock, CheckCircle2, XCircle, ChevronRight, TrendingUp } from 'lucide-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
</script>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Grid de Cards -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Card 1: Gestão de Pontos -->
|
||||
<a
|
||||
href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
|
||||
@@ -75,7 +75,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 4: Dashboard Banco de Horas -->
|
||||
<!-- Card 4: Banco de Horas -->
|
||||
<a
|
||||
href={resolve('/(dashboard)/recursos-humanos/controle-ponto/banco-horas')}
|
||||
class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
||||
@@ -83,13 +83,13 @@
|
||||
<div class="card-body">
|
||||
<div class="mb-4 flex items-start justify-between">
|
||||
<div class="rounded-2xl bg-purple-500/20 p-4">
|
||||
<Clock class="h-8 w-8 text-purple-600" strokeWidth={2} />
|
||||
<TrendingUp class="h-8 w-8 text-purple-600" strokeWidth={2} />
|
||||
</div>
|
||||
<ChevronRight class="text-base-content/30 h-5 w-5" strokeWidth={2} />
|
||||
</div>
|
||||
<h2 class="card-title mb-2 text-xl">Dashboard Banco de Horas</h2>
|
||||
<h2 class="card-title mb-2 text-xl">Banco de Horas</h2>
|
||||
<p class="text-base-content/70">
|
||||
Visão gerencial do banco de horas, estatísticas e relatórios mensais
|
||||
Visão gerencial do banco de horas dos funcionários, com filtros, estatísticas e relatórios
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -12,18 +12,31 @@
|
||||
FileText,
|
||||
Calendar,
|
||||
Search,
|
||||
Filter
|
||||
Filter,
|
||||
Plus,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Eye,
|
||||
Edit,
|
||||
AlertCircle
|
||||
} from 'lucide-svelte';
|
||||
import { useConvexClient } from 'convex-svelte';
|
||||
import LineChart from '$lib/components/ti/charts/LineChart.svelte';
|
||||
import jsPDF from 'jspdf';
|
||||
import logoGovPE from '$lib/assets/logo_governo_PE.png';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estados
|
||||
let mesSelecionado = $state(
|
||||
`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`
|
||||
);
|
||||
let funcionarioFiltro = $state<string>('');
|
||||
let apenasNegativos = $state(false);
|
||||
let tipoDiaFiltro = $state<string>('');
|
||||
let statusInconsistenciaFiltro = $state<string>('');
|
||||
let mostrarModalAjuste = $state(false);
|
||||
let funcionarioSelecionado = $state<Id<'funcionarios'> | null>(null);
|
||||
|
||||
// Queries
|
||||
const funcionariosQuery = useQuery(api.funcionarios.listar, {});
|
||||
@@ -35,7 +48,15 @@
|
||||
funcionarioId: funcionarioFiltro ? (funcionarioFiltro as Id<'funcionarios'>) : undefined
|
||||
});
|
||||
|
||||
// Query para inconsistências gerais
|
||||
const inconsistenciasGeraisQuery = useQuery(api.pontos.listarInconsistenciasBancoHoras, {
|
||||
status: statusInconsistenciaFiltro
|
||||
? (statusInconsistenciaFiltro as 'pendente' | 'resolvida' | 'ignorada')
|
||||
: undefined
|
||||
});
|
||||
|
||||
const estatisticas = $derived(estatisticasQuery?.data);
|
||||
const inconsistenciasGerais = $derived(inconsistenciasGeraisQuery?.data || []);
|
||||
|
||||
// Função para formatar mês
|
||||
function formatarMes(mes: string): string {
|
||||
@@ -226,10 +247,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros Avançados -->
|
||||
<div class="card bg-base-100 mb-6 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
|
||||
<Filter class="h-5 w-5" strokeWidth={2} />
|
||||
Filtros Avançados
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<!-- Filtro por Tipo de Dia -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Tipo de Dia</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full" bind:value={tipoDiaFiltro}>
|
||||
<option value="">Todos os tipos</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="atestado">Atestado</option>
|
||||
<option value="licenca">Licença</option>
|
||||
<option value="ausencia">Ausência</option>
|
||||
<option value="abonado">Abonado</option>
|
||||
<option value="descontado">Descontado</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por Status de Inconsistência -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Status de Inconsistência</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full" bind:value={statusInconsistenciaFiltro}>
|
||||
<option value="">Todas</option>
|
||||
<option value="pendente">Pendente</option>
|
||||
<option value="resolvida">Resolvida</option>
|
||||
<option value="ignorada">Ignorada</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if estatisticasQuery?.isLoading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if estatisticasQuery?.error}
|
||||
<div class="alert alert-error mb-6">
|
||||
<AlertTriangle class="h-5 w-5" />
|
||||
<span>Erro ao carregar estatísticas: {estatisticasQuery.error.message || 'Erro desconhecido'}</span>
|
||||
</div>
|
||||
{:else if estatisticas}
|
||||
<!-- Cards de Estatísticas -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-4 mb-6">
|
||||
@@ -308,11 +374,16 @@
|
||||
<th class="text-right">Dias Trabalhados</th>
|
||||
<th class="text-right">Horas Extras</th>
|
||||
<th class="text-right">Déficit</th>
|
||||
<th class="text-center">Inconsistências</th>
|
||||
<th class="text-center">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each estatisticas.funcionarios as item}
|
||||
{#if !apenasNegativos || item.saldoFinalMinutos < 0}
|
||||
{@const inconsistenciasFunc = inconsistenciasGerais.filter(
|
||||
(i) => i.funcionarioId === item.funcionario._id
|
||||
)}
|
||||
<tr
|
||||
class={item.saldoFinalMinutos < 0
|
||||
? 'bg-error/5 hover:bg-error/10'
|
||||
@@ -367,6 +438,41 @@
|
||||
<td class="text-right text-error">
|
||||
{Math.floor(item.horasDeficit / 60)}h {item.horasDeficit % 60}min
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if inconsistenciasFunc.length > 0}
|
||||
<span class="badge badge-warning badge-sm">
|
||||
<AlertTriangle class="h-3 w-3" />
|
||||
{inconsistenciasFunc.length}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="badge badge-success badge-sm">
|
||||
<CheckCircle2 class="h-3 w-3" />
|
||||
OK
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary"
|
||||
onclick={() => {
|
||||
funcionarioSelecionado = item.funcionario._id;
|
||||
mostrarModalAjuste = true;
|
||||
}}
|
||||
title="Criar ajuste"
|
||||
>
|
||||
<Plus class="h-4 w-4" />
|
||||
</button>
|
||||
<a
|
||||
href={`/recursos-humanos/funcionarios/${item.funcionario._id}`}
|
||||
class="btn btn-sm btn-ghost"
|
||||
title="Ver detalhes"
|
||||
>
|
||||
<Eye class="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
@@ -375,6 +481,105 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inconsistências Gerais -->
|
||||
{#if inconsistenciasGerais && inconsistenciasGerais.length > 0}
|
||||
<div class="card bg-warning/10 border-warning/30 shadow-lg mt-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-warning">
|
||||
<AlertTriangle class="h-5 w-5" strokeWidth={2} />
|
||||
Inconsistências Detectadas
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Funcionário</th>
|
||||
<th>Tipo</th>
|
||||
<th>Descrição</th>
|
||||
<th>Data Detectada</th>
|
||||
<th>Status</th>
|
||||
<th class="text-center">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each inconsistenciasGerais as inconsistencia}
|
||||
<tr
|
||||
class={inconsistencia.status === 'pendente'
|
||||
? 'bg-warning/10'
|
||||
: inconsistencia.status === 'resolvida'
|
||||
? 'bg-success/10'
|
||||
: ''}
|
||||
>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="font-medium">
|
||||
{inconsistencia.funcionario?.nome || 'N/A'}
|
||||
</div>
|
||||
{#if inconsistencia.funcionario?.matricula}
|
||||
<span class="text-xs text-base-content/60">
|
||||
({inconsistencia.funcionario.matricula})
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-warning badge-sm">
|
||||
{inconsistencia.tipo === 'ponto_com_atestado'
|
||||
? 'Ponto + Atestado'
|
||||
: inconsistencia.tipo === 'ponto_com_licenca'
|
||||
? 'Ponto + Licença'
|
||||
: inconsistencia.tipo === 'ponto_com_ausencia'
|
||||
? 'Ponto + Ausência'
|
||||
: inconsistencia.tipo === 'registro_duplicado'
|
||||
? 'Duplicado'
|
||||
: inconsistencia.tipo === 'sequencia_invalida'
|
||||
? 'Sequência Inválida'
|
||||
: 'Saldo Inconsistente'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="max-w-xs truncate">{inconsistencia.descricao}</td>
|
||||
<td>
|
||||
{new Date(inconsistencia.dataDetectada).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class={`badge ${
|
||||
inconsistencia.status === 'resolvida'
|
||||
? 'badge-success'
|
||||
: inconsistencia.status === 'ignorada'
|
||||
? 'badge-base-300'
|
||||
: 'badge-warning'
|
||||
}`}
|
||||
>
|
||||
{inconsistencia.status === 'resolvida'
|
||||
? 'Resolvida'
|
||||
: inconsistencia.status === 'ignorada'
|
||||
? 'Ignorada'
|
||||
: 'Pendente'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a
|
||||
href={`/recursos-humanos/funcionarios/${inconsistencia.funcionarioId}`}
|
||||
class="btn btn-sm btn-ghost"
|
||||
title="Ver detalhes"
|
||||
>
|
||||
<Eye class="h-4 w-4" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
@@ -388,6 +593,40 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Modal para Criar Ajuste -->
|
||||
{#if mostrarModalAjuste && funcionarioSelecionado}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Criar Ajuste de Banco de Horas</h3>
|
||||
<p class="text-sm text-base-content/60 mb-4">
|
||||
Funcionário: {funcionarios.find((f) => f._id === funcionarioSelecionado)?.nome || 'N/A'}
|
||||
</p>
|
||||
<p class="text-sm text-warning mb-4">
|
||||
⚠️ Esta funcionalidade requer integração com o formulário de ajuste. Use a página de
|
||||
Homologação para criar ajustes.
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick={() => {
|
||||
mostrarModalAjuste = false;
|
||||
funcionarioSelecionado = null;
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
<a
|
||||
href={`/recursos-humanos/controle-ponto/homologacao?funcionarioId=${funcionarioSelecionado}`}
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Ir para Homologação
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -307,6 +307,19 @@
|
||||
{ label: 'Direitos', variant: 'outline' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configurações de Banco de Horas',
|
||||
description:
|
||||
'Configure limites, regras e alertas do sistema de banco de horas. Gerencie configurações gerais e alertas configuráveis.',
|
||||
ctaLabel: 'Configurar Banco de Horas',
|
||||
href: '/(dashboard)/ti/configuracoes-banco-horas',
|
||||
palette: 'primary',
|
||||
icon: 'clock',
|
||||
highlightBadges: [
|
||||
{ label: 'Alertas', variant: 'solid' },
|
||||
{ label: 'Configurações', variant: 'outline' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configuração de Email',
|
||||
description:
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user