126 lines
3.8 KiB
Svelte
126 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
import { resolve } from '$app/paths';
|
|
import WidgetGestaoPontos from '$lib/components/ponto/WidgetGestaoPontos.svelte';
|
|
import { Clock, ChevronRight, Info } from 'lucide-svelte';
|
|
|
|
const menuItems = [
|
|
{
|
|
categoria: 'Gestão de Ausências',
|
|
descricao: 'Gerencie solicitações de ausências e aprovações',
|
|
iconComponent: Clock,
|
|
gradient: 'from-orange-500/10 to-orange-600/20',
|
|
accentColor: 'text-orange-600',
|
|
bgIcon: 'bg-orange-500/20',
|
|
opcoes: [
|
|
{
|
|
nome: 'Gestão de Ausências',
|
|
descricao: 'Visualizar e gerenciar solicitações de ausências',
|
|
href: '/secretaria-executiva/gestao-ausencias',
|
|
iconComponent: Clock
|
|
}
|
|
]
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<main class="container mx-auto px-4 py-4">
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumbs mb-4 text-sm">
|
|
<ul>
|
|
<li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
|
|
<li>Secretaria Executiva</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Cabeçalho -->
|
|
<div class="mb-8">
|
|
<h1 class="text-primary mb-2 text-4xl font-bold">Secretaria Executiva</h1>
|
|
<p class="text-base-content/70 text-lg">Gerencie processos executivos e administrativos</p>
|
|
</div>
|
|
|
|
<!-- Menu de Opções -->
|
|
<div class="space-y-8">
|
|
{#each menuItems as categoria}
|
|
<div class="card bg-base-100 shadow-xl transition-all duration-300 hover:shadow-2xl">
|
|
<div class="card-body">
|
|
<!-- Cabeçalho da Categoria -->
|
|
<div class="mb-6 flex items-start gap-6">
|
|
<div class="p-4 {categoria.bgIcon} rounded-2xl">
|
|
<svelte:component this={categoria.iconComponent} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
|
|
</div>
|
|
<div class="flex-1">
|
|
<h2 class="card-title mb-2 text-2xl {categoria.accentColor}">
|
|
{categoria.categoria}
|
|
</h2>
|
|
<p class="text-base-content/70">{categoria.descricao}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid de Opções -->
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{#each categoria.opcoes as opcao}
|
|
<a
|
|
href={opcao.href}
|
|
class="group border-base-300 relative overflow-hidden rounded-xl border-2 bg-linear-to-br {categoria.gradient} hover:border-primary transform p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
|
>
|
|
<div class="flex h-full flex-col">
|
|
<div class="mb-4 flex items-start justify-between">
|
|
<div
|
|
class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
|
|
>
|
|
<svelte:component this={opcao.iconComponent} class="h-5 w-5 {categoria.accentColor} group-hover:text-white" strokeWidth={2} />
|
|
</div>
|
|
<ChevronRight class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300" strokeWidth={2} />
|
|
</div>
|
|
<h3
|
|
class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
|
|
>
|
|
{opcao.nome}
|
|
</h3>
|
|
<p class="text-base-content/70 flex-1 text-sm">
|
|
{opcao.descricao}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Widget Gestão de Pontos -->
|
|
<div class="mt-8">
|
|
<WidgetGestaoPontos />
|
|
</div>
|
|
|
|
<!-- Card de Ajuda -->
|
|
<div class="alert alert-info mt-8 shadow-lg">
|
|
<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
|
|
<div>
|
|
<h3 class="font-bold">Precisa de ajuda?</h3>
|
|
<div class="text-sm">
|
|
Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais
|
|
informações sobre as funcionalidades da Secretaria Executiva.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
animation: fadeInUp 0.5s ease-out;
|
|
}
|
|
</style>
|