refactor: update components to use lucide icons and improve structure
- Replaced SVG icons with lucide-svelte components across various files for consistency and improved performance. - Refactored ActionGuard, ErrorModal, FileUpload, and other components to enhance readability and maintainability. - Updated the dashboard pages to include new icons and improved layout for better user experience. - Enhanced StatsCard component to support dynamic icon rendering, allowing for more flexible usage. - Improved overall styling and structure in multiple components to align with design standards.
This commit is contained in:
@@ -1,281 +1,253 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
|
||||
// Buscar estatísticas para exibir nos cards
|
||||
const statsQuery = useQuery(api.dashboard.getStats, {});
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
categoria: "Gestão de Funcionários",
|
||||
descricao: "Gerencie o cadastro e informações dos funcionários",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>`,
|
||||
gradient: "from-blue-500/10 to-blue-600/20",
|
||||
accentColor: "text-blue-600",
|
||||
bgIcon: "bg-blue-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Cadastrar Funcionário",
|
||||
descricao: "Adicionar novo funcionário ao sistema",
|
||||
href: "/recursos-humanos/funcionarios/cadastro",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
nome: "Listar Funcionários",
|
||||
descricao: "Visualizar e editar cadastros",
|
||||
href: "/recursos-humanos/funcionarios",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
nome: "Excluir Cadastro",
|
||||
descricao: "Remover funcionário do sistema",
|
||||
href: "/recursos-humanos/funcionarios/excluir",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
nome: "Relatórios",
|
||||
descricao: "Visualizar estatísticas e gráficos",
|
||||
href: "/recursos-humanos/funcionarios/relatorios",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
categoria: "Gestão de Férias e Licenças",
|
||||
descricao: "Controle de férias, atestados e licenças",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>`,
|
||||
gradient: "from-purple-500/10 to-purple-600/20",
|
||||
accentColor: "text-purple-600",
|
||||
bgIcon: "bg-purple-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Gestão de Férias",
|
||||
descricao: "Controlar períodos de férias",
|
||||
href: "/recursos-humanos/ferias",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
nome: "Atestados & Licenças",
|
||||
descricao: "Registrar atestados e licenças",
|
||||
href: "/recursos-humanos/atestados-licencas",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
categoria: "Gestão de Símbolos",
|
||||
descricao: "Gerencie cargos comissionados e funções gratificadas",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>`,
|
||||
gradient: "from-green-500/10 to-green-600/20",
|
||||
accentColor: "text-green-600",
|
||||
bgIcon: "bg-green-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Cadastrar Símbolo",
|
||||
descricao: "Adicionar novo cargo ou função",
|
||||
href: "/recursos-humanos/simbolos/cadastro",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
nome: "Listar Símbolos",
|
||||
descricao: "Visualizar e editar símbolos",
|
||||
href: "/recursos-humanos/simbolos",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>`,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-primary mb-2">Recursos Humanos</h1>
|
||||
<p class="text-lg text-base-content/70">
|
||||
Gerencie funcionários, símbolos e visualize relatórios do departamento
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Estatísticas Rápidas -->
|
||||
{#if statsQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-primary/10 to-primary/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">Total</div>
|
||||
<div class="stat-value text-primary">{statsQuery.data.totalFuncionarios}</div>
|
||||
<div class="stat-desc">Funcionários cadastrados</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-success/10 to-success/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">Ativos</div>
|
||||
<div class="stat-value text-success">{statsQuery.data.funcionariosAtivos}</div>
|
||||
<div class="stat-desc">Funcionários ativos</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-secondary/10 to-secondary/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">Símbolos</div>
|
||||
<div class="stat-value text-secondary">{statsQuery.data.totalSimbolos}</div>
|
||||
<div class="stat-desc">Cargos e funções</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-accent/10 to-accent/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">CC / FG</div>
|
||||
<div class="stat-value text-accent">{statsQuery.data.cargoComissionado} / {statsQuery.data.funcaoGratificada}</div>
|
||||
<div class="stat-desc">Distribuição</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Menu de Opções -->
|
||||
<div class="space-y-8">
|
||||
{#each menuItems as categoria}
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
|
||||
<div class="card-body">
|
||||
<!-- Cabeçalho da Categoria -->
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="p-4 {categoria.bgIcon} rounded-2xl">
|
||||
<div class="{categoria.accentColor}">
|
||||
{@html categoria.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="card-title text-2xl mb-2 {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 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each categoria.opcoes as opcao}
|
||||
<a
|
||||
href={opcao.href}
|
||||
class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
|
||||
<div class="{categoria.accentColor} group-hover:text-white">
|
||||
{@html opcao.icon}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
|
||||
{opcao.nome}
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70 flex-1">
|
||||
{opcao.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Card de Ajuda -->
|
||||
<div class="alert alert-info shadow-lg mt-8">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="stroke-current shrink-0 w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<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 de Recursos Humanos.
|
||||
</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;
|
||||
}
|
||||
|
||||
.stats {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { Users, UserPlus, ClipboardList, Trash2, BarChart3, Calendar, FileText, BadgeCheck, Plus, List, ChevronRight, CheckCircle2, Info, ArrowRight } from "lucide-svelte";
|
||||
import type { Component } from "svelte";
|
||||
|
||||
// Buscar estatísticas para exibir nos cards
|
||||
const statsQuery = useQuery(api.dashboard.getStats, {});
|
||||
|
||||
interface MenuOpcao {
|
||||
nome: string;
|
||||
descricao: string;
|
||||
href: string;
|
||||
Icon: Component;
|
||||
}
|
||||
|
||||
interface MenuCategoria {
|
||||
categoria: string;
|
||||
descricao: string;
|
||||
Icon: Component;
|
||||
gradient: string;
|
||||
accentColor: string;
|
||||
bgIcon: string;
|
||||
opcoes: MenuOpcao[];
|
||||
}
|
||||
|
||||
const menuItems: MenuCategoria[] = [
|
||||
{
|
||||
categoria: "Gestão de Funcionários",
|
||||
descricao: "Gerencie o cadastro e informações dos funcionários",
|
||||
Icon: Users,
|
||||
gradient: "from-blue-500/10 to-blue-600/20",
|
||||
accentColor: "text-blue-600",
|
||||
bgIcon: "bg-blue-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Cadastrar Funcionário",
|
||||
descricao: "Adicionar novo funcionário ao sistema",
|
||||
href: "/recursos-humanos/funcionarios/cadastro",
|
||||
Icon: UserPlus,
|
||||
},
|
||||
{
|
||||
nome: "Listar Funcionários",
|
||||
descricao: "Visualizar e editar cadastros",
|
||||
href: "/recursos-humanos/funcionarios",
|
||||
Icon: ClipboardList,
|
||||
},
|
||||
{
|
||||
nome: "Excluir Cadastro",
|
||||
descricao: "Remover funcionário do sistema",
|
||||
href: "/recursos-humanos/funcionarios/excluir",
|
||||
Icon: Trash2,
|
||||
},
|
||||
{
|
||||
nome: "Relatórios",
|
||||
descricao: "Visualizar estatísticas e gráficos",
|
||||
href: "/recursos-humanos/funcionarios/relatorios",
|
||||
Icon: BarChart3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
categoria: "Gestão de Férias e Licenças",
|
||||
descricao: "Controle de férias, atestados e licenças",
|
||||
Icon: Calendar,
|
||||
gradient: "from-purple-500/10 to-purple-600/20",
|
||||
accentColor: "text-purple-600",
|
||||
bgIcon: "bg-purple-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Gestão de Férias",
|
||||
descricao: "Controlar períodos de férias",
|
||||
href: "/recursos-humanos/ferias",
|
||||
Icon: Calendar,
|
||||
},
|
||||
{
|
||||
nome: "Atestados & Licenças",
|
||||
descricao: "Registrar atestados e licenças",
|
||||
href: "/recursos-humanos/atestados-licencas",
|
||||
Icon: FileText,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
categoria: "Gestão de Símbolos",
|
||||
descricao: "Gerencie cargos comissionados e funções gratificadas",
|
||||
Icon: BadgeCheck,
|
||||
gradient: "from-green-500/10 to-green-600/20",
|
||||
accentColor: "text-green-600",
|
||||
bgIcon: "bg-green-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Cadastrar Símbolo",
|
||||
descricao: "Adicionar novo cargo ou função",
|
||||
href: "/recursos-humanos/simbolos/cadastro",
|
||||
Icon: Plus,
|
||||
},
|
||||
{
|
||||
nome: "Listar Símbolos",
|
||||
descricao: "Visualizar e editar símbolos",
|
||||
href: "/recursos-humanos/simbolos",
|
||||
Icon: List,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-primary mb-2">Recursos Humanos</h1>
|
||||
<p class="text-lg text-base-content/70">
|
||||
Gerencie funcionários, símbolos e visualize relatórios do departamento
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Estatísticas Rápidas -->
|
||||
{#if statsQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-primary/10 to-primary/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<Users class="h-8 w-8" strokeWidth={2} />
|
||||
</div>
|
||||
<div class="stat-title">Total</div>
|
||||
<div class="stat-value text-primary">{statsQuery.data.totalFuncionarios}</div>
|
||||
<div class="stat-desc">Funcionários cadastrados</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-success/10 to-success/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-success">
|
||||
<CheckCircle2 class="h-8 w-8" strokeWidth={2} />
|
||||
</div>
|
||||
<div class="stat-title">Ativos</div>
|
||||
<div class="stat-value text-success">{statsQuery.data.funcionariosAtivos}</div>
|
||||
<div class="stat-desc">Funcionários ativos</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-secondary/10 to-secondary/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<BadgeCheck class="h-8 w-8" strokeWidth={2} />
|
||||
</div>
|
||||
<div class="stat-title">Símbolos</div>
|
||||
<div class="stat-value text-secondary">{statsQuery.data.totalSimbolos}</div>
|
||||
<div class="stat-desc">Cargos e funções</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow-lg bg-gradient-to-br from-accent/10 to-accent/20">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<BarChart3 class="h-8 w-8" strokeWidth={2} />
|
||||
</div>
|
||||
<div class="stat-title">CC / FG</div>
|
||||
<div class="stat-value text-accent">{statsQuery.data.cargoComissionado} / {statsQuery.data.funcaoGratificada}</div>
|
||||
<div class="stat-desc">Distribuição</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Menu de Opções -->
|
||||
<div class="space-y-8">
|
||||
{#each menuItems as categoria}
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
|
||||
<div class="card-body">
|
||||
<!-- Cabeçalho da Categoria -->
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="p-4 {categoria.bgIcon} rounded-2xl">
|
||||
<svelte:component this={categoria.Icon} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="card-title text-2xl mb-2 {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 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each categoria.opcoes as opcao}
|
||||
<a
|
||||
href={opcao.href}
|
||||
class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
|
||||
<svelte:component
|
||||
this={opcao.Icon}
|
||||
class="h-5 w-5 {categoria.accentColor} group-hover:text-white transition-colors duration-300"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</div>
|
||||
<ChevronRight
|
||||
class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
|
||||
{opcao.nome}
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70 flex-1">
|
||||
{opcao.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Card de Ajuda -->
|
||||
<div class="alert alert-info shadow-lg mt-8">
|
||||
<Info class="stroke-current shrink-0 w-6 h-6" 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 de Recursos Humanos.
|
||||
</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;
|
||||
}
|
||||
|
||||
.stats {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user