67 lines
2.3 KiB
Svelte
67 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { Clock } from 'lucide-svelte';
|
|
|
|
interface Estatisticas {
|
|
totalRegistros: number;
|
|
totalFuncionarios: number;
|
|
dentroDoPrazo: number;
|
|
}
|
|
|
|
interface Props {
|
|
estatisticas?: Estatisticas;
|
|
}
|
|
|
|
let { estatisticas = undefined }: Props = $props();
|
|
</script>
|
|
|
|
<section
|
|
class="border-base-300 from-primary/10 via-base-100 to-secondary/10 relative mb-8 overflow-hidden rounded-2xl border bg-gradient-to-br p-8 shadow-lg"
|
|
>
|
|
<div class="bg-primary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
|
<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
|
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="bg-primary/20 border-primary/30 rounded-2xl border p-4 shadow-lg backdrop-blur-sm"
|
|
>
|
|
<Clock class="text-primary h-10 w-10" strokeWidth={2.5} />
|
|
</div>
|
|
<div class="max-w-3xl space-y-2">
|
|
<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
|
|
Registro de Pontos
|
|
</h1>
|
|
<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
|
|
Gerencie e visualize os registros de ponto dos funcionários com informações detalhadas e
|
|
relatórios
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{#if estatisticas}
|
|
<div
|
|
class="border-base-200/60 bg-base-100/70 grid grid-cols-2 gap-4 rounded-2xl border p-6 shadow-lg backdrop-blur sm:max-w-sm"
|
|
>
|
|
<div>
|
|
<p class="text-base-content/60 text-sm font-semibold">Total de Registros</p>
|
|
<p class="text-base-content mt-2 text-2xl font-bold">{estatisticas.totalRegistros}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-base-content/60 text-sm font-semibold">Funcionários</p>
|
|
<p class="text-base-content mt-2 text-xl font-bold">{estatisticas.totalFuncionarios}</p>
|
|
</div>
|
|
<div
|
|
class="via-base-300 col-span-2 h-px bg-gradient-to-r from-transparent to-transparent"
|
|
></div>
|
|
<div class="text-base-content/70 col-span-2 flex items-center justify-between text-sm">
|
|
<span>
|
|
{estatisticas.totalRegistros > 0
|
|
? ((estatisticas.dentroDoPrazo / estatisticas.totalRegistros) * 100).toFixed(1)
|
|
: 0}% dentro do prazo
|
|
</span>
|
|
<span class="badge badge-primary badge-sm">Ativo</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
|