Files
sgse-app/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/+page.svelte

98 lines
3.6 KiB
Svelte

<script lang="ts">
import { Clock, CheckCircle2, XCircle, ChevronRight, TrendingUp } from 'lucide-svelte';
import { resolve } from '$app/paths';
</script>
<div class="container mx-auto px-4 py-6">
<!-- Header -->
<div class="mb-6 flex items-center gap-4">
<div class="bg-primary/10 rounded-xl p-3">
<Clock class="text-primary h-8 w-8" strokeWidth={2} />
</div>
<div>
<h1 class="text-base-content text-3xl font-bold">Controle de Ponto</h1>
<p class="text-base-content/60 mt-1">Gerencie registros, homologações e dispensas de ponto</p>
</div>
</div>
<!-- Grid de Cards -->
<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')}
class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
>
<div class="card-body">
<div class="mb-4 flex items-start justify-between">
<div class="rounded-2xl bg-blue-500/20 p-4">
<Clock class="h-8 w-8 text-blue-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">Gestão de Pontos</h2>
<p class="text-base-content/70">
Visualizar e gerenciar registros de ponto dos funcionários, relatórios e histórico
</p>
</div>
</a>
<!-- Card 2: Homologação de Registro -->
<a
href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
>
<div class="card-body">
<div class="mb-4 flex items-start justify-between">
<div class="rounded-2xl bg-green-500/20 p-4">
<CheckCircle2 class="h-8 w-8 text-green-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">Homologação de Registro</h2>
<p class="text-base-content/70">
Edite registros de ponto do seu time, ajuste banco de horas (compensar, abonar ou
descontar)
</p>
</div>
</a>
<!-- Card 3: Dispensa de Registro -->
<a
href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
class="card bg-base-100 transform shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
>
<div class="card-body">
<div class="mb-4 flex items-start justify-between">
<div class="rounded-2xl bg-orange-500/20 p-4">
<XCircle class="h-8 w-8 text-orange-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">Dispensa de Registro</h2>
<p class="text-base-content/70">
Gerencie períodos onde funcionários estão dispensados de registrar ponto
</p>
</div>
</a>
<!-- 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"
>
<div class="card-body">
<div class="mb-4 flex items-start justify-between">
<div class="rounded-2xl bg-purple-500/20 p-4">
<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">Banco de Horas</h2>
<p class="text-base-content/70">
Visão gerencial do banco de horas dos funcionários, com filtros, estatísticas e relatórios
</p>
</div>
</a>
</div>
</div>