feat: enhance employee and symbol management with new features, improved UI components, and backend schema updates
This commit is contained in:
@@ -1,12 +1,88 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { page } from "$app/state";
|
||||
import MenuProtection from "$lib/components/MenuProtection.svelte";
|
||||
|
||||
const { children } = $props();
|
||||
|
||||
// Mapa de rotas para verificação de permissões
|
||||
const ROUTE_PERMISSIONS: Record<string, { path: string; requireGravar?: boolean }> = {
|
||||
// Recursos Humanos
|
||||
"/recursos-humanos": { path: "/recursos-humanos" },
|
||||
"/recursos-humanos/funcionarios": { path: "/recursos-humanos/funcionarios" },
|
||||
"/recursos-humanos/funcionarios/cadastro": { path: "/recursos-humanos/funcionarios", requireGravar: true },
|
||||
"/recursos-humanos/funcionarios/excluir": { path: "/recursos-humanos/funcionarios", requireGravar: true },
|
||||
"/recursos-humanos/funcionarios/relatorios": { path: "/recursos-humanos/funcionarios" },
|
||||
"/recursos-humanos/simbolos": { path: "/recursos-humanos/simbolos" },
|
||||
"/recursos-humanos/simbolos/cadastro": { path: "/recursos-humanos/simbolos", requireGravar: true },
|
||||
// Outros menus
|
||||
"/financeiro": { path: "/financeiro" },
|
||||
"/controladoria": { path: "/controladoria" },
|
||||
"/licitacoes": { path: "/licitacoes" },
|
||||
"/compras": { path: "/compras" },
|
||||
"/juridico": { path: "/juridico" },
|
||||
"/comunicacao": { path: "/comunicacao" },
|
||||
"/programas-esportivos": { path: "/programas-esportivos" },
|
||||
"/secretaria-executiva": { path: "/secretaria-executiva" },
|
||||
"/gestao-pessoas": { path: "/gestao-pessoas" },
|
||||
"/ti": { path: "/ti" },
|
||||
};
|
||||
|
||||
// Obter configuração para a rota atual
|
||||
const getCurrentRouteConfig = $derived.by(() => {
|
||||
const currentPath = page.url.pathname;
|
||||
|
||||
// Verificar correspondência exata
|
||||
if (ROUTE_PERMISSIONS[currentPath]) {
|
||||
return ROUTE_PERMISSIONS[currentPath];
|
||||
}
|
||||
|
||||
// Verificar rotas dinâmicas (com [id])
|
||||
if (currentPath.includes("/editar") || currentPath.includes("/funcionarioId") || currentPath.includes("/simboloId")) {
|
||||
// Extrair o caminho base
|
||||
if (currentPath.includes("/funcionarios/")) {
|
||||
return { path: "/recursos-humanos/funcionarios", requireGravar: true };
|
||||
}
|
||||
if (currentPath.includes("/simbolos/")) {
|
||||
return { path: "/recursos-humanos/simbolos", requireGravar: true };
|
||||
}
|
||||
}
|
||||
|
||||
// Rotas públicas (Dashboard, Solicitar Acesso, etc)
|
||||
if (currentPath === "/" || currentPath === "/solicitar-acesso") {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Para qualquer outra rota dentro do dashboard, verificar o primeiro segmento
|
||||
const segments = currentPath.split("/").filter(Boolean);
|
||||
if (segments.length > 0) {
|
||||
const firstSegment = "/" + segments[0];
|
||||
if (ROUTE_PERMISSIONS[firstSegment]) {
|
||||
return ROUTE_PERMISSIONS[firstSegment];
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full overflow-y-auto">
|
||||
<main
|
||||
id="container-central"
|
||||
class="w-full max-w-none px-3 lg:px-4 py-4"
|
||||
>
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
{#if getCurrentRouteConfig}
|
||||
<MenuProtection menuPath={getCurrentRouteConfig.path} requireGravar={getCurrentRouteConfig.requireGravar || false}>
|
||||
<div class="w-full h-full overflow-y-auto">
|
||||
<main
|
||||
id="container-central"
|
||||
class="w-full max-w-none px-3 lg:px-4 py-4"
|
||||
>
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
</MenuProtection>
|
||||
{:else}
|
||||
<div class="w-full h-full overflow-y-auto">
|
||||
<main
|
||||
id="container-central"
|
||||
class="w-full max-w-none px-3 lg:px-4 py-4"
|
||||
>
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,8 +1,582 @@
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-2xl font-bold text-brand-dark">Dashboard</h2>
|
||||
<div class="grid md:grid-cols-3 gap-4">
|
||||
<div class="p-4 rounded-xl border">Bem-vindo ao SGSE.</div>
|
||||
<div class="p-4 rounded-xl border">Selecione um setor no menu lateral.</div>
|
||||
<div class="p-4 rounded-xl border">KPIs e gráficos virão aqui.</div>
|
||||
<script lang="ts">
|
||||
import { useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { onMount } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
// Queries para dados do dashboard
|
||||
const statsQuery = useQuery(api.dashboard.getStats, {});
|
||||
const activityQuery = useQuery(api.dashboard.getRecentActivity, {});
|
||||
|
||||
// Queries para monitoramento em tempo real
|
||||
const statusSistemaQuery = useQuery(api.monitoramento.getStatusSistema, {});
|
||||
const atividadeBDQuery = useQuery(api.monitoramento.getAtividadeBancoDados, {});
|
||||
const distribuicaoQuery = useQuery(api.monitoramento.getDistribuicaoRequisicoes, {});
|
||||
|
||||
// Estado para animações
|
||||
let mounted = $state(false);
|
||||
let currentTime = $state(new Date());
|
||||
let showAlert = $state(false);
|
||||
let alertType = $state<"auth_required" | "access_denied" | "invalid_token" | null>(null);
|
||||
let redirectRoute = $state("");
|
||||
|
||||
// Forçar atualização das queries de monitoramento a cada 1 segundo
|
||||
let refreshKey = $state(0);
|
||||
|
||||
onMount(() => {
|
||||
mounted = true;
|
||||
|
||||
// Verificar se há mensagem de erro na URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get("error");
|
||||
const route = urlParams.get("route") || urlParams.get("redirect") || "";
|
||||
|
||||
if (error) {
|
||||
alertType = error as any;
|
||||
redirectRoute = route;
|
||||
showAlert = true;
|
||||
|
||||
// Limpar URL
|
||||
const newUrl = window.location.pathname;
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
|
||||
// Auto-fechar após 10 segundos
|
||||
setTimeout(() => {
|
||||
showAlert = false;
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// Atualizar relógio e forçar refresh das queries a cada segundo
|
||||
const interval = setInterval(() => {
|
||||
currentTime = new Date();
|
||||
refreshKey = (refreshKey + 1) % 1000; // Incrementar para forçar re-render
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
function closeAlert() {
|
||||
showAlert = false;
|
||||
}
|
||||
|
||||
function getAlertMessage(): { title: string; message: string; icon: string } {
|
||||
switch (alertType) {
|
||||
case "auth_required":
|
||||
return {
|
||||
title: "Autenticação Necessária",
|
||||
message: `Para acessar "${redirectRoute}", você precisa fazer login no sistema.`,
|
||||
icon: "🔐"
|
||||
};
|
||||
case "access_denied":
|
||||
return {
|
||||
title: "Acesso Negado",
|
||||
message: `Você não tem permissão para acessar "${redirectRoute}". Entre em contato com a equipe de TI para solicitar acesso.`,
|
||||
icon: "⛔"
|
||||
};
|
||||
case "invalid_token":
|
||||
return {
|
||||
title: "Sessão Expirada",
|
||||
message: "Sua sessão expirou. Por favor, faça login novamente.",
|
||||
icon: "⏰"
|
||||
};
|
||||
default:
|
||||
return {
|
||||
title: "Aviso",
|
||||
message: "Ocorreu um erro. Tente novamente.",
|
||||
icon: "⚠️"
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Função para formatar números
|
||||
function formatNumber(num: number): string {
|
||||
return new Intl.NumberFormat("pt-BR").format(num);
|
||||
}
|
||||
|
||||
// Função para calcular porcentagem
|
||||
function calcPercentage(value: number, total: number): number {
|
||||
if (total === 0) return 0;
|
||||
return Math.round((value / total) * 100);
|
||||
}
|
||||
|
||||
// Obter saudação baseada na hora
|
||||
function getSaudacao(): string {
|
||||
const hora = currentTime.getHours();
|
||||
if (hora < 12) return "Bom dia";
|
||||
if (hora < 18) return "Boa tarde";
|
||||
return "Boa noite";
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Alerta de Acesso Negado / Autenticação -->
|
||||
{#if showAlert}
|
||||
{@const alertData = getAlertMessage()}
|
||||
<div class="alert {alertType === 'access_denied' ? 'alert-error' : alertType === 'auth_required' ? 'alert-warning' : 'alert-info'} mb-6 shadow-xl animate-pulse">
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="text-4xl">{alertData.icon}</span>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg mb-1">{alertData.title}</h3>
|
||||
<p class="text-sm">{alertData.message}</p>
|
||||
{#if alertType === "access_denied"}
|
||||
<div class="mt-3 flex gap-2">
|
||||
<a href="/solicitar-acesso" class="btn btn-sm btn-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
Solicitar Acesso
|
||||
</a>
|
||||
<a href="/ti" class="btn btn-sm btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Contatar TI
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeAlert}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Cabeçalho com Boas-vindas -->
|
||||
<div class="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl p-8 mb-6 shadow-lg">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-primary mb-2">
|
||||
{getSaudacao()}! 👋
|
||||
</h1>
|
||||
<p class="text-xl text-base-content/80">
|
||||
Bem-vindo ao Sistema de Gerenciamento da Secretaria de Esportes
|
||||
</p>
|
||||
<p class="text-sm text-base-content/60 mt-2">
|
||||
{currentTime.toLocaleDateString("pt-BR", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
{" - "}
|
||||
{currentTime.toLocaleTimeString("pt-BR")}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="badge badge-primary badge-lg">Sistema Online</div>
|
||||
<div class="badge badge-success badge-lg">Atualizado</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards de Estatísticas Principais -->
|
||||
{#if statsQuery.isLoading}
|
||||
<div class="flex justify-center items-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if statsQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
||||
<!-- Total de Funcionários -->
|
||||
<div class="card bg-gradient-to-br from-blue-500/10 to-blue-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70 font-semibold">Total de Funcionários</p>
|
||||
<h2 class="text-4xl font-bold text-primary mt-2">
|
||||
{formatNumber(statsQuery.data.totalFuncionarios)}
|
||||
</h2>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
{statsQuery.data.funcionariosAtivos} ativos
|
||||
</p>
|
||||
</div>
|
||||
<div class="radial-progress text-primary" style="--value:{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}; --size:4rem;">
|
||||
<span class="text-xs font-bold">{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solicitações Pendentes -->
|
||||
<div class="card bg-gradient-to-br from-yellow-500/10 to-yellow-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70 font-semibold">Solicitações Pendentes</p>
|
||||
<h2 class="text-4xl font-bold text-warning mt-2">
|
||||
{formatNumber(statsQuery.data.solicitacoesPendentes)}
|
||||
</h2>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
de {statsQuery.data.totalSolicitacoesAcesso} total
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-warning/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Símbolos Cadastrados -->
|
||||
<div class="card bg-gradient-to-br from-green-500/10 to-green-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70 font-semibold">Símbolos Cadastrados</p>
|
||||
<h2 class="text-4xl font-bold text-success mt-2">
|
||||
{formatNumber(statsQuery.data.totalSimbolos)}
|
||||
</h2>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
{statsQuery.data.cargoComissionado} CC / {statsQuery.data.funcaoGratificada} FG
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-success/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-success" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Atividade 24h -->
|
||||
{#if activityQuery.data}
|
||||
<div class="card bg-gradient-to-br from-purple-500/10 to-purple-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70 font-semibold">Atividade (24h)</p>
|
||||
<h2 class="text-4xl font-bold text-secondary mt-2">
|
||||
{formatNumber(activityQuery.data.funcionariosCadastrados24h + activityQuery.data.solicitacoesAcesso24h)}
|
||||
</h2>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
{activityQuery.data.funcionariosCadastrados24h} cadastros
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-secondary/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Monitoramento em Tempo Real -->
|
||||
{#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data}
|
||||
{@const status = statusSistemaQuery.data}
|
||||
{@const atividade = atividadeBDQuery.data}
|
||||
{@const distribuicao = distribuicaoQuery.data}
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 bg-error/10 rounded-lg animate-pulse">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-base-content">Monitoramento em Tempo Real</h2>
|
||||
<p class="text-sm text-base-content/60">
|
||||
Atualizado a cada segundo • {new Date(status.ultimaAtualizacao).toLocaleTimeString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto badge badge-error badge-lg gap-2">
|
||||
<span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-error opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-error"></span>
|
||||
LIVE
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards de Status do Sistema -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<!-- Usuários Online -->
|
||||
<div class="card bg-gradient-to-br from-primary/10 to-primary/5 border-2 border-primary/20 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs text-base-content/70 font-semibold uppercase">Usuários Online</p>
|
||||
<h3 class="text-3xl font-bold text-primary mt-1">{status.usuariosOnline}</h3>
|
||||
<p class="text-xs text-base-content/60 mt-1">sessões ativas</p>
|
||||
</div>
|
||||
<div class="p-3 bg-primary/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total de Registros -->
|
||||
<div class="card bg-gradient-to-br from-success/10 to-success/5 border-2 border-success/20 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs text-base-content/70 font-semibold uppercase">Total Registros</p>
|
||||
<h3 class="text-3xl font-bold text-success mt-1">{status.totalRegistros.toLocaleString('pt-BR')}</h3>
|
||||
<p class="text-xs text-base-content/60 mt-1">no banco de dados</p>
|
||||
</div>
|
||||
<div class="p-3 bg-success/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tempo Médio de Resposta -->
|
||||
<div class="card bg-gradient-to-br from-info/10 to-info/5 border-2 border-info/20 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs text-base-content/70 font-semibold uppercase">Tempo Resposta</p>
|
||||
<h3 class="text-3xl font-bold text-info mt-1">{status.tempoMedioResposta}ms</h3>
|
||||
<p class="text-xs text-base-content/60 mt-1">média atual</p>
|
||||
</div>
|
||||
<div class="p-3 bg-info/20 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uso de Sistema -->
|
||||
<div class="card bg-gradient-to-br from-warning/10 to-warning/5 border-2 border-warning/20 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div>
|
||||
<p class="text-xs text-base-content/70 font-semibold uppercase mb-2">Uso do Sistema</p>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<div class="flex justify-between text-xs mb-1">
|
||||
<span class="text-base-content/70">CPU</span>
|
||||
<span class="font-bold text-warning">{status.cpuUsada}%</span>
|
||||
</div>
|
||||
<progress class="progress progress-warning w-full" value={status.cpuUsada} max="100"></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs mb-1">
|
||||
<span class="text-base-content/70">Memória</span>
|
||||
<span class="font-bold text-warning">{status.memoriaUsada}%</span>
|
||||
</div>
|
||||
<progress class="progress progress-warning w-full" value={status.memoriaUsada} max="100"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gráfico de Atividade do Banco de Dados em Tempo Real -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-base-content">Atividade do Banco de Dados</h3>
|
||||
<p class="text-sm text-base-content/60">Entradas e saídas em tempo real (último minuto)</p>
|
||||
</div>
|
||||
<div class="badge badge-success gap-2">
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
Atualizando
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative h-64">
|
||||
<!-- Eixo Y -->
|
||||
<div class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-right pr-2">
|
||||
{#each [10, 8, 6, 4, 2, 0] as val}
|
||||
<span class="text-xs text-base-content/60">{val}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Grid e Barras -->
|
||||
<div class="absolute left-12 right-4 top-0 bottom-8">
|
||||
<!-- Grid horizontal -->
|
||||
{#each Array.from({length: 6}) as _, i}
|
||||
<div class="absolute left-0 right-0 border-t border-base-content/10" style="top: {(i / 5) * 100}%;"></div>
|
||||
{/each}
|
||||
|
||||
<!-- Barras de atividade -->
|
||||
<div class="flex items-end justify-around h-full gap-1">
|
||||
{#each atividade.historico as ponto, idx}
|
||||
{@const maxAtividade = Math.max(...atividade.historico.map(p => Math.max(p.entradas, p.saidas)))}
|
||||
<div class="flex-1 flex items-end gap-0.5 h-full group">
|
||||
<!-- Entradas (verde) -->
|
||||
<div
|
||||
class="flex-1 bg-gradient-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110"
|
||||
style="height: {ponto.entradas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
|
||||
title="Entradas: {ponto.entradas}"
|
||||
></div>
|
||||
<!-- Saídas (vermelho) -->
|
||||
<div
|
||||
class="flex-1 bg-gradient-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110"
|
||||
style="height: {ponto.saidas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
|
||||
title="Saídas: {ponto.saidas}"
|
||||
></div>
|
||||
|
||||
<!-- Tooltip no hover -->
|
||||
<div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-base-300 text-base-content px-2 py-1 rounded text-xs whitespace-nowrap shadow-lg z-10">
|
||||
<div>↑ {ponto.entradas} entradas</div>
|
||||
<div>↓ {ponto.saidas} saídas</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Linha do eixo X -->
|
||||
<div class="absolute left-12 right-4 bottom-8 border-t-2 border-base-content/30"></div>
|
||||
|
||||
<!-- Labels do eixo X -->
|
||||
<div class="absolute left-12 right-4 bottom-0 flex justify-between text-xs text-base-content/60">
|
||||
<span>-60s</span>
|
||||
<span>-30s</span>
|
||||
<span>agora</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legenda -->
|
||||
<div class="flex justify-center gap-6 mt-4 pt-4 border-t border-base-300">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 bg-gradient-to-t from-success to-success/70 rounded"></div>
|
||||
<span class="text-sm text-base-content/70">Entradas no BD</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 bg-gradient-to-t from-error to-error/70 rounded"></div>
|
||||
<span class="text-sm text-base-content/70">Saídas do BD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Distribuição de Requisições -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="text-lg font-bold text-base-content mb-4">Tipos de Operações</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span>Queries (Leituras)</span>
|
||||
<span class="font-bold text-primary">{distribuicao.queries}</span>
|
||||
</div>
|
||||
<progress class="progress progress-primary w-full" value={distribuicao.queries} max={distribuicao.queries + distribuicao.mutations}></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span>Mutations (Escritas)</span>
|
||||
<span class="font-bold text-secondary">{distribuicao.mutations}</span>
|
||||
</div>
|
||||
<progress class="progress progress-secondary w-full" value={distribuicao.mutations} max={distribuicao.queries + distribuicao.mutations}></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="text-lg font-bold text-base-content mb-4">Operações no Banco</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span>Leituras</span>
|
||||
<span class="font-bold text-info">{distribuicao.leituras}</span>
|
||||
</div>
|
||||
<progress class="progress progress-info w-full" value={distribuicao.leituras} max={distribuicao.leituras + distribuicao.escritas}></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span>Escritas</span>
|
||||
<span class="font-bold text-warning">{distribuicao.escritas}</span>
|
||||
</div>
|
||||
<progress class="progress progress-warning w-full" value={distribuicao.escritas} max={distribuicao.leituras + distribuicao.escritas}></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<!-- Cards de Status -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Status do Sistema</h3>
|
||||
<div class="space-y-2 mt-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm">Banco de Dados</span>
|
||||
<span class="badge badge-success">Online</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm">API</span>
|
||||
<span class="badge badge-success">Operacional</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm">Backup</span>
|
||||
<span class="badge badge-success">Atualizado</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Acesso Rápido</h3>
|
||||
<div class="space-y-2 mt-4">
|
||||
<a href="/recursos-humanos/funcionarios/cadastro" class="btn btn-sm btn-primary w-full">
|
||||
Novo Funcionário
|
||||
</a>
|
||||
<a href="/recursos-humanos/simbolos/cadastro" class="btn btn-sm btn-primary w-full">
|
||||
Novo Símbolo
|
||||
</a>
|
||||
<a href="/ti/painel-administrativo" class="btn btn-sm btn-primary w-full">
|
||||
Painel Admin
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Informações</h3>
|
||||
<div class="space-y-2 mt-4 text-sm">
|
||||
<p class="text-base-content/70">
|
||||
<strong>Versão:</strong> 1.0.0
|
||||
</p>
|
||||
<p class="text-base-content/70">
|
||||
<strong>Última Atualização:</strong> {new Date().toLocaleDateString("pt-BR")}
|
||||
</p>
|
||||
<p class="text-base-content/70">
|
||||
<strong>Suporte:</strong> TI SGSE
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
371
apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
Normal file
371
apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
Normal file
@@ -0,0 +1,371 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { authStore } from "$lib/stores/auth.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const convex = useConvexClient();
|
||||
|
||||
let senhaAtual = $state("");
|
||||
let novaSenha = $state("");
|
||||
let confirmarSenha = $state("");
|
||||
let carregando = $state(false);
|
||||
let notice = $state<{ type: "success" | "error"; message: string } | null>(null);
|
||||
let mostrarSenhaAtual = $state(false);
|
||||
let mostrarNovaSenha = $state(false);
|
||||
let mostrarConfirmarSenha = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
if (!authStore.autenticado) {
|
||||
goto("/");
|
||||
}
|
||||
});
|
||||
|
||||
function validarSenha(senha: string): { valido: boolean; erros: string[] } {
|
||||
const erros: string[] = [];
|
||||
|
||||
if (senha.length < 8) {
|
||||
erros.push("A senha deve ter no mínimo 8 caracteres");
|
||||
}
|
||||
if (!/[A-Z]/.test(senha)) {
|
||||
erros.push("A senha deve conter pelo menos uma letra maiúscula");
|
||||
}
|
||||
if (!/[a-z]/.test(senha)) {
|
||||
erros.push("A senha deve conter pelo menos uma letra minúscula");
|
||||
}
|
||||
if (!/[0-9]/.test(senha)) {
|
||||
erros.push("A senha deve conter pelo menos um número");
|
||||
}
|
||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(senha)) {
|
||||
erros.push("A senha deve conter pelo menos um caractere especial");
|
||||
}
|
||||
|
||||
return {
|
||||
valido: erros.length === 0,
|
||||
erros,
|
||||
};
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
notice = null;
|
||||
|
||||
// Validações
|
||||
if (!senhaAtual || !novaSenha || !confirmarSenha) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: "Todos os campos são obrigatórios",
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (novaSenha !== confirmarSenha) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: "A nova senha e a confirmação não coincidem",
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (senhaAtual === novaSenha) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: "A nova senha deve ser diferente da senha atual",
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const validacao = validarSenha(novaSenha);
|
||||
if (!validacao.valido) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: validacao.erros.join(". "),
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
carregando = true;
|
||||
|
||||
try {
|
||||
if (!authStore.token) {
|
||||
throw new Error("Token não encontrado");
|
||||
}
|
||||
|
||||
const resultado = await convex.mutation(api.autenticacao.alterarSenha, {
|
||||
token: authStore.token,
|
||||
senhaAntiga: senhaAtual,
|
||||
novaSenha: novaSenha,
|
||||
});
|
||||
|
||||
if (resultado.sucesso) {
|
||||
notice = {
|
||||
type: "success",
|
||||
message: "Senha alterada com sucesso! Redirecionando...",
|
||||
};
|
||||
|
||||
// Limpar campos
|
||||
senhaAtual = "";
|
||||
novaSenha = "";
|
||||
confirmarSenha = "";
|
||||
|
||||
// Redirecionar após 2 segundos
|
||||
setTimeout(() => {
|
||||
goto("/");
|
||||
}, 2000);
|
||||
} else {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: resultado.erro || "Erro ao alterar senha",
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: error.message || "Erro ao conectar com o servidor",
|
||||
};
|
||||
} finally {
|
||||
carregando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelar() {
|
||||
goto("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
<h1 class="text-4xl font-bold text-primary">Alterar Senha</h1>
|
||||
</div>
|
||||
<p class="text-base-content/70 text-lg">
|
||||
Atualize sua senha de acesso ao sistema
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-6">
|
||||
<ul>
|
||||
<li><a href="/">Dashboard</a></li>
|
||||
<li>Alterar Senha</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} mb-6 shadow-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{#if notice.type === "success"}
|
||||
<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"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.message}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Formulário -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<form onsubmit={handleSubmit} class="space-y-6">
|
||||
<!-- Senha Atual -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="senha-atual">
|
||||
<span class="label-text font-semibold">Senha Atual</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="senha-atual"
|
||||
type={mostrarSenhaAtual ? "text" : "password"}
|
||||
placeholder="Digite sua senha atual"
|
||||
class="input input-bordered input-primary w-full pr-12"
|
||||
bind:value={senhaAtual}
|
||||
required
|
||||
disabled={carregando}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
|
||||
onclick={() => (mostrarSenhaAtual = !mostrarSenhaAtual)}
|
||||
>
|
||||
{#if mostrarSenhaAtual}
|
||||
<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
{:else}
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nova Senha -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="nova-senha">
|
||||
<span class="label-text font-semibold">Nova Senha</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="nova-senha"
|
||||
type={mostrarNovaSenha ? "text" : "password"}
|
||||
placeholder="Digite sua nova senha"
|
||||
class="input input-bordered input-primary w-full pr-12"
|
||||
bind:value={novaSenha}
|
||||
required
|
||||
disabled={carregando}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
|
||||
onclick={() => (mostrarNovaSenha = !mostrarNovaSenha)}
|
||||
>
|
||||
{#if mostrarNovaSenha}
|
||||
<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
{:else}
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Mínimo 8 caracteres, com letras maiúsculas, minúsculas, números e caracteres especiais
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Confirmar Senha -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="confirmar-senha">
|
||||
<span class="label-text font-semibold">Confirmar Nova Senha</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="confirmar-senha"
|
||||
type={mostrarConfirmarSenha ? "text" : "password"}
|
||||
placeholder="Digite novamente sua nova senha"
|
||||
class="input input-bordered input-primary w-full pr-12"
|
||||
bind:value={confirmarSenha}
|
||||
required
|
||||
disabled={carregando}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
|
||||
onclick={() => (mostrarConfirmarSenha = !mostrarConfirmarSenha)}
|
||||
>
|
||||
{#if mostrarConfirmarSenha}
|
||||
<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
{:else}
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Requisitos de Senha -->
|
||||
<div class="alert alert-info">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Requisitos de Senha:</h3>
|
||||
<ul class="text-sm list-disc list-inside mt-2 space-y-1">
|
||||
<li>Mínimo de 8 caracteres</li>
|
||||
<li>Pelo menos uma letra maiúscula (A-Z)</li>
|
||||
<li>Pelo menos uma letra minúscula (a-z)</li>
|
||||
<li>Pelo menos um número (0-9)</li>
|
||||
<li>Pelo menos um caractere especial (!@#$%^&*...)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botões -->
|
||||
<div class="flex gap-4 justify-end mt-8">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost"
|
||||
onclick={cancelar}
|
||||
disabled={carregando}
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
disabled={carregando}
|
||||
>
|
||||
{#if carregando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Alterando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Alterar Senha
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dicas de Segurança -->
|
||||
<div class="mt-6 card bg-base-200 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Dicas de Segurança
|
||||
</h3>
|
||||
<ul class="text-sm space-y-2 text-base-content/70">
|
||||
<li>✅ Nunca compartilhe sua senha com ninguém</li>
|
||||
<li>✅ Use uma senha única para cada sistema</li>
|
||||
<li>✅ Altere sua senha regularmente</li>
|
||||
<li>✅ Não use informações pessoais óbvias (nome, data de nascimento, etc.)</li>
|
||||
<li>✅ Considere usar um gerenciador de senhas</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
48
apps/web/src/routes/(dashboard)/compras/+page.svelte
Normal file
48
apps/web/src/routes/(dashboard)/compras/+page.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Compras</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-cyan-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Compras</h1>
|
||||
<p class="text-base-content/70">Gestão de compras e aquisições</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo de Compras está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de compras e aquisições.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
48
apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
Normal file
48
apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Comunicação</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-pink-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Comunicação</h1>
|
||||
<p class="text-base-content/70">Gestão de comunicação institucional</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo de Comunicação está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão de comunicação institucional.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
99
apps/web/src/routes/(dashboard)/controladoria/+page.svelte
Normal file
99
apps/web/src/routes/(dashboard)/controladoria/+page.svelte
Normal file
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Controladoria</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-purple-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" 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>
|
||||
<h1 class="text-3xl font-bold text-primary">Controladoria</h1>
|
||||
<p class="text-base-content/70">Controle e auditoria interna da secretaria</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card de Aviso -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo de Controladoria está sendo desenvolvido e em breve estará disponível com funcionalidades completas de controle e auditoria.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Funcionalidades Previstas -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
|
||||
<h4 class="font-semibold">Auditoria Interna</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Controle e verificação de processos internos</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold">Compliance</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Conformidade com normas e regulamentos</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold">Indicadores de Gestão</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Monitoramento de KPIs e métricas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
264
apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
Normal file
264
apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
Normal file
@@ -0,0 +1,264 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
|
||||
const convex = useConvexClient();
|
||||
|
||||
let matricula = $state("");
|
||||
let email = $state("");
|
||||
let carregando = $state(false);
|
||||
let notice = $state<{ type: "success" | "error" | "info"; message: string } | null>(null);
|
||||
let solicitacaoEnviada = $state(false);
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
notice = null;
|
||||
|
||||
if (!matricula || !email) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: "Por favor, preencha todos os campos",
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
carregando = true;
|
||||
|
||||
try {
|
||||
// Verificar se o usuário existe
|
||||
const usuarios = await convex.query(api.usuarios.listar, {
|
||||
matricula: matricula,
|
||||
});
|
||||
|
||||
const usuario = usuarios.find(u => u.matricula === matricula && u.email === email);
|
||||
|
||||
if (!usuario) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: "Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.",
|
||||
};
|
||||
carregando = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Simular envio de solicitação
|
||||
solicitacaoEnviada = true;
|
||||
notice = {
|
||||
type: "success",
|
||||
message: "Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.",
|
||||
};
|
||||
|
||||
// Limpar campos
|
||||
matricula = "";
|
||||
email = "";
|
||||
} catch (error: any) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: error.message || "Erro ao processar solicitação",
|
||||
};
|
||||
} finally {
|
||||
carregando = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h1 class="text-4xl font-bold text-primary">Esqueci Minha Senha</h1>
|
||||
</div>
|
||||
<p class="text-base-content/70 text-lg">
|
||||
Solicite a recuperação da sua senha de acesso
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-6">
|
||||
<ul>
|
||||
<li><a href="/">Dashboard</a></li>
|
||||
<li>Esqueci Minha Senha</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div class="alert {notice.type === 'success' ? 'alert-success' : notice.type === 'error' ? 'alert-error' : 'alert-info'} mb-6 shadow-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{#if notice.type === "success"}
|
||||
<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"
|
||||
/>
|
||||
{:else if notice.type === "error"}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{:else}
|
||||
<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"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.message}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !solicitacaoEnviada}
|
||||
<!-- Formulário -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Como funciona?</h3>
|
||||
<p class="text-sm">
|
||||
Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e entrará em contato para resetar sua senha.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-6">
|
||||
<!-- Matrícula -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="matricula">
|
||||
<span class="label-text font-semibold">Matrícula</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="matricula"
|
||||
type="text"
|
||||
placeholder="Digite sua matrícula"
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={matricula}
|
||||
required
|
||||
disabled={carregando}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- E-mail -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text font-semibold">E-mail</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Digite seu e-mail cadastrado"
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={email}
|
||||
required
|
||||
disabled={carregando}
|
||||
/>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Use o e-mail cadastrado no sistema
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Botões -->
|
||||
<div class="flex gap-4 justify-end mt-8">
|
||||
<a href="/" class="btn btn-ghost" class:btn-disabled={carregando}>
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Voltar
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
disabled={carregando}
|
||||
>
|
||||
{#if carregando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Enviando...
|
||||
{:else}
|
||||
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Enviar Solicitação
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Mensagem de Sucesso -->
|
||||
<div class="card bg-success/10 shadow-xl border border-success/30">
|
||||
<div class="card-body text-center">
|
||||
<div class="flex justify-center mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-success" 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>
|
||||
<h2 class="text-2xl font-bold text-success mb-4">Solicitação Enviada!</h2>
|
||||
<p class="text-base-content/70 mb-6">
|
||||
Sua solicitação de recuperação de senha foi enviada para a equipe de TI.
|
||||
Você receberá um contato em breve com as instruções para resetar sua senha.
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<a href="/" class="btn btn-primary">
|
||||
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Voltar ao Dashboard
|
||||
</a>
|
||||
<button type="button" class="btn btn-ghost" onclick={() => solicitacaoEnviada = false}>
|
||||
Enviar Nova Solicitação
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Card de Contato -->
|
||||
<div class="mt-6 card bg-base-200 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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" />
|
||||
</svg>
|
||||
Precisa de Ajuda?
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato diretamente com a equipe de TI:
|
||||
</p>
|
||||
<div class="mt-4 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="text-sm">ti@sgse.pe.gov.br</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span class="text-sm">(81) 3183-8000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
99
apps/web/src/routes/(dashboard)/financeiro/+page.svelte
Normal file
99
apps/web/src/routes/(dashboard)/financeiro/+page.svelte
Normal file
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Financeiro</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-green-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Financeiro</h1>
|
||||
<p class="text-base-content/70">Gestão financeira e orçamentária da secretaria</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card de Aviso -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo Financeiro está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão financeira e orçamentária.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Funcionalidades Previstas -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold">Controle Orçamentário</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Gestão e acompanhamento do orçamento anual</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold">Fluxo de Caixa</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Controle de entradas e saídas financeiras</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
|
||||
</div>
|
||||
<h4 class="font-semibold">Relatórios Financeiros</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Geração de relatórios e demonstrativos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
48
apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
Normal file
48
apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Secretaria de Gestão de Pessoas</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-teal-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Secretaria de Gestão de Pessoas</h1>
|
||||
<p class="text-base-content/70">Gestão estratégica de pessoas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo da Secretaria de Gestão de Pessoas está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão estratégica de pessoas.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
48
apps/web/src/routes/(dashboard)/juridico/+page.svelte
Normal file
48
apps/web/src/routes/(dashboard)/juridico/+page.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Jurídico</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-red-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Jurídico</h1>
|
||||
<p class="text-base-content/70">Assessoria jurídica e gestão de processos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo Jurídico está sendo desenvolvido e em breve estará disponível com funcionalidades completas de assessoria jurídica e gestão de processos.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
99
apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
Normal file
99
apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
Normal file
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Licitações</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-orange-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-orange-600" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Licitações</h1>
|
||||
<p class="text-base-content/70">Gestão de processos licitatórios</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card de Aviso -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo de Licitações está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de processos licitatórios.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Funcionalidades Previstas -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold">Processos Licitatórios</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Cadastro e acompanhamento de licitações</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
|
||||
<h4 class="font-semibold">Fornecedores</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Cadastro e gestão de fornecedores</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
|
||||
</div>
|
||||
<h4 class="font-semibold">Documentação</h4>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">Gestão de documentos e editais</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
174
apps/web/src/routes/(dashboard)/perfil/+page.svelte
Normal file
174
apps/web/src/routes/(dashboard)/perfil/+page.svelte
Normal file
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import { authStore } from "$lib/stores/auth.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
if (!authStore.autenticado) {
|
||||
goto("/");
|
||||
}
|
||||
});
|
||||
|
||||
function formatarData(timestamp?: number): string {
|
||||
if (!timestamp) return "Nunca";
|
||||
return new Date(timestamp).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function getRoleBadgeClass(nivel: number): string {
|
||||
if (nivel === 0) return "badge-error";
|
||||
if (nivel === 1) return "badge-warning";
|
||||
if (nivel === 2) return "badge-info";
|
||||
return "badge-success";
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<h1 class="text-4xl font-bold text-primary">Meu Perfil</h1>
|
||||
</div>
|
||||
<p class="text-base-content/70 text-lg">
|
||||
Informações da sua conta no sistema
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-6">
|
||||
<ul>
|
||||
<li><a href="/">Dashboard</a></li>
|
||||
<li>Perfil</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{#if authStore.usuario}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Card Principal -->
|
||||
<div class="md:col-span-2 card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-full w-24">
|
||||
<span class="text-3xl">{authStore.usuario.nome.charAt(0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">{authStore.usuario.nome}</h2>
|
||||
<p class="text-base-content/60">{authStore.usuario.email}</p>
|
||||
<div class="mt-2">
|
||||
<span class="badge {getRoleBadgeClass(authStore.usuario.role.nivel)} badge-lg">
|
||||
{authStore.usuario.role.nome}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/60 mb-1">Matrícula</p>
|
||||
<p class="font-semibold text-lg">
|
||||
<code class="bg-base-200 px-3 py-1 rounded">{authStore.usuario.matricula}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-base-content/60 mb-1">Nível de Acesso</p>
|
||||
<p class="font-semibold text-lg">Nível {authStore.usuario.role.nivel}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-base-content/60 mb-1">E-mail</p>
|
||||
<p class="font-semibold">{authStore.usuario.email}</p>
|
||||
</div>
|
||||
|
||||
{#if authStore.usuario.role.setor}
|
||||
<div>
|
||||
<p class="text-sm text-base-content/60 mb-1">Setor</p>
|
||||
<p class="font-semibold">{authStore.usuario.role.setor}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Ações Rápidas -->
|
||||
<div class="space-y-6">
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg mb-4">Ações Rápidas</h3>
|
||||
<div class="space-y-2">
|
||||
<a href="/alterar-senha" class="btn btn-primary btn-block justify-start">
|
||||
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
Alterar Senha
|
||||
</a>
|
||||
<a href="/" class="btn btn-ghost btn-block justify-start">
|
||||
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Voltar ao Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-info/10 shadow-xl border border-info/30">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm">
|
||||
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Informação
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Para alterar outras informações do seu perfil, entre em contato com a equipe de TI.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Segurança -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300 mt-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
Segurança da Conta
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="stat bg-base-200 rounded-lg">
|
||||
<div class="stat-title">Status da Conta</div>
|
||||
<div class="stat-value text-success text-2xl">Ativa</div>
|
||||
<div class="stat-desc">Sua conta está ativa e segura</div>
|
||||
</div>
|
||||
<div class="stat bg-base-200 rounded-lg">
|
||||
<div class="stat-title">Primeiro Acesso</div>
|
||||
<div class="stat-value text-2xl">{authStore.usuario.primeiroAcesso ? "Sim" : "Não"}</div>
|
||||
<div class="stat-desc">
|
||||
{#if authStore.usuario.primeiroAcesso}
|
||||
Altere sua senha após o primeiro login
|
||||
{:else}
|
||||
Senha já foi alterada
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Programas Esportivos</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-yellow-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Programas Esportivos</h1>
|
||||
<p class="text-base-content/70">Gestão de programas e projetos esportivos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo de Programas Esportivos está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de programas e projetos esportivos.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,39 +1,253 @@
|
||||
<script>
|
||||
import { resolve } from "$app/paths";
|
||||
<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 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>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-3xl font-bold text-brand-dark">Recursos Humanos</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<h3 class="text-lg font-bold text-brand-dark col-span-4">Funcionários</h3>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/funcionarios/cadastro")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100"
|
||||
>Cadastrar Funcionários</a
|
||||
>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/funcionarios")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100">Editar Cadastro</a
|
||||
>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/funcionarios/excluir")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100">Excluir Cadastro</a
|
||||
>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/funcionarios/relatorios")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100">Relatórios</a
|
||||
>
|
||||
|
||||
<h3 class="text-lg font-bold text-brand-dark col-span-4">Simbolos</h3>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/simbolos/cadastro")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100"
|
||||
>Cadastrar Simbolos</a
|
||||
>
|
||||
<a
|
||||
href={resolve("/recursos-humanos/simbolos")}
|
||||
class="p-4 rounded-xl border hover:shadow bgbase-100">Listar Simbolos</a
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -70,51 +70,135 @@
|
||||
$: needsScroll = filtered.length > 8;
|
||||
</script>
|
||||
|
||||
<div class="space-y-6 pb-32">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-3xl font-bold text-brand-dark">Funcionários</h2>
|
||||
<div class="space-x-2 flex items-center">
|
||||
<button class="btn btn-primary" onclick={navCadastro}>Novo Funcionário</button>
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
|
||||
<li>Funcionários</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-blue-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" 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>
|
||||
<h1 class="text-3xl font-bold text-primary">Funcionários Cadastrados</h1>
|
||||
<p class="text-base-content/70">Gerencie os funcionários da secretaria</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-lg gap-2" onclick={navCadastro}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Novo Funcionário
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-3 items-end">
|
||||
<div class="form-control">
|
||||
<label class="label" for="func_nome"><span class="label-text">Nome</span></label>
|
||||
<input id="func_nome" class="input input-bordered" bind:value={filtroNome} oninput={applyFilters} />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="func_cpf"><span class="label-text">CPF</span></label>
|
||||
<input id="func_cpf" class="input input-bordered" bind:value={filtroCPF} oninput={applyFilters} />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="func_matricula"><span class="label-text">Matrícula</span></label>
|
||||
<input id="func_matricula" class="input input-bordered" bind:value={filtroMatricula} oninput={applyFilters} />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="func_tipo"><span class="label-text">Símbolo Tipo</span></label>
|
||||
<select id="func_tipo" class="select select-bordered" bind:value={filtroTipo} oninput={applyFilters}>
|
||||
<option value="">Todos</option>
|
||||
<option value="cargo_comissionado">Cargo comissionado</option>
|
||||
<option value="funcao_gratificada">Função gratificada</option>
|
||||
</select>
|
||||
<!-- Filtros -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg mb-4">
|
||||
<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros de Pesquisa
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="func_nome">
|
||||
<span class="label-text font-semibold">Nome</span>
|
||||
</label>
|
||||
<input
|
||||
id="func_nome"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
placeholder="Buscar por nome..."
|
||||
bind:value={filtroNome}
|
||||
oninput={applyFilters}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="func_cpf">
|
||||
<span class="label-text font-semibold">CPF</span>
|
||||
</label>
|
||||
<input
|
||||
id="func_cpf"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
placeholder="000.000.000-00"
|
||||
bind:value={filtroCPF}
|
||||
oninput={applyFilters}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="func_matricula">
|
||||
<span class="label-text font-semibold">Matrícula</span>
|
||||
</label>
|
||||
<input
|
||||
id="func_matricula"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
placeholder="Buscar por matrícula..."
|
||||
bind:value={filtroMatricula}
|
||||
oninput={applyFilters}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="func_tipo">
|
||||
<span class="label-text font-semibold">Símbolo Tipo</span>
|
||||
</label>
|
||||
<select id="func_tipo" class="select select-bordered focus:select-primary w-full" bind:value={filtroTipo} oninput={applyFilters}>
|
||||
<option value="">Todos os tipos</option>
|
||||
<option value="cargo_comissionado">Cargo Comissionado</option>
|
||||
<option value="funcao_gratificada">Função Gratificada</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{#if filtroNome || filtroCPF || filtroMatricula || filtroTipo}
|
||||
<div class="mt-4">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm gap-2"
|
||||
onclick={() => {
|
||||
filtroNome = "";
|
||||
filtroCPF = "";
|
||||
filtroMatricula = "";
|
||||
filtroTipo = "";
|
||||
applyFilters();
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto bg-base-100 rounded-lg shadow-sm mb-2" class:overflow-y-auto={needsScroll} style={needsScroll ? "max-height: calc(100vh - 180px);" : "overflow-y: visible;"}>
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Matrícula</th>
|
||||
<th>Tipo</th>
|
||||
<th>Cidade</th>
|
||||
<th>UF</th>
|
||||
<th class="text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Tabela de Funcionários -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="sticky top-0 bg-base-200 z-10">
|
||||
<tr>
|
||||
<th class="font-bold">Nome</th>
|
||||
<th class="font-bold">CPF</th>
|
||||
<th class="font-bold">Matrícula</th>
|
||||
<th class="font-bold">Tipo</th>
|
||||
<th class="font-bold">Cidade</th>
|
||||
<th class="font-bold">UF</th>
|
||||
<th class="text-right font-bold">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filtered as f}
|
||||
<tr class="hover">
|
||||
<td class="font-medium">{f.nome}</td>
|
||||
@@ -136,10 +220,19 @@
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informação sobre resultados -->
|
||||
<div class="mt-4 text-sm text-base-content/70 text-center">
|
||||
Exibindo {filtered.length} de {list.length} funcionário(s)
|
||||
</div>
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
<dialog id="delete_modal_func" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Confirmar Exclusão</h3>
|
||||
@@ -168,5 +261,5 @@
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -190,19 +190,59 @@
|
||||
load();
|
||||
</script>
|
||||
|
||||
<form class="max-w-3xl mx-auto p-4" onsubmit={(e) => { e.preventDefault(); e.stopPropagation(); form.handleSubmit(); }}>
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-6">
|
||||
{#if notice}
|
||||
<div class="alert" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<main class="container mx-auto px-4 py-4 max-w-5xl">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
|
||||
<li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
|
||||
<li>Editar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="card-title text-3xl">Editar Funcionários</h2>
|
||||
<p class="opacity-70">Atualize os dados do funcionário.</p>
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-yellow-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Editar Funcionário</h1>
|
||||
<p class="text-base-content/70">Atualize os dados do funcionário</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
{#if notice.kind === "success"}
|
||||
<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" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Formulário -->
|
||||
<form
|
||||
class="space-y-6"
|
||||
onsubmit={(e) => { e.preventDefault(); e.stopPropagation(); form.handleSubmit(); }}
|
||||
>
|
||||
<!-- Card: Informações Pessoais -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Informações Pessoais
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
|
||||
@@ -222,6 +262,19 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Endereço -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Endereço
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<form.Field name="cep" validators={{ onChange: schema.shape.cep }}>
|
||||
@@ -258,6 +311,18 @@
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Documentos -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
||||
</svg>
|
||||
Documentos
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="cpf" validators={{ onChange: schema.shape.cpf }}>
|
||||
@@ -277,6 +342,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Datas -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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>
|
||||
Datas
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="nascimento" validators={{ onChange: schema.shape.nascimento }}>
|
||||
@@ -296,6 +373,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Contato -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Contato
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="email" validators={{ onChange: schema.shape.email }}>
|
||||
@@ -315,7 +404,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Cargo/Função -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Cargo/Função
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="simboloTipo" validators={{ onChange: schema.shape.simboloTipo }}>
|
||||
@@ -344,21 +444,47 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
|
||||
<form.Subscribe selector={(s) => ({ canSubmit: s.canSubmit, isSubmitting: s.isSubmitting })}>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="card-actions justify-end pt-2">
|
||||
<button type="button" class="btn btn-ghost" disabled={isSubmitting} onclick={() => goto("/recursos-humanos/funcionarios")}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" class:loading={isSubmitting} disabled={isSubmitting || !canSubmit}>
|
||||
Salvar Alterações
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Card: Ações -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<form.Subscribe selector={(s) => ({ canSubmit: s.canSubmit, isSubmitting: s.isSubmitting })}>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-lg"
|
||||
disabled={isSubmitting}
|
||||
onclick={() => goto("/recursos-humanos/funcionarios")}
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg"
|
||||
disabled={isSubmitting || !canSubmit}
|
||||
>
|
||||
{#if isSubmitting}
|
||||
<span class="loading loading-spinner"></span>
|
||||
Salvando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Salvar Alterações
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
@@ -233,22 +233,59 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<form
|
||||
class="max-w-3xl mx-auto p-4"
|
||||
onsubmit={(e) => { e.preventDefault(); e.stopPropagation(); form.handleSubmit(); }}
|
||||
>
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-6">
|
||||
{#if notice}
|
||||
<div class="alert" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<main class="container mx-auto px-4 py-4 max-w-5xl">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
|
||||
<li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
|
||||
<li>Cadastrar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="card-title text-3xl">Cadastro de Funcionários</h2>
|
||||
<p class="opacity-70">Preencha os campos abaixo para cadastrar um novo funcionário.</p>
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-blue-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Cadastro de Funcionário</h1>
|
||||
<p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo funcionário</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
{#if notice.kind === "success"}
|
||||
<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" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Formulário -->
|
||||
<form
|
||||
class="space-y-6"
|
||||
onsubmit={(e) => { e.preventDefault(); e.stopPropagation(); form.handleSubmit(); }}
|
||||
>
|
||||
<!-- Card: Informações Pessoais -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Informações Pessoais
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
|
||||
@@ -268,6 +305,19 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Endereço -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Endereço
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<form.Field name="cep" validators={{ onChange: schema.shape.cep }}>
|
||||
@@ -304,6 +354,18 @@
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Documentos -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
||||
</svg>
|
||||
Documentos
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="cpf" validators={{ onChange: schema.shape.cpf }}>
|
||||
@@ -323,6 +385,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Datas -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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>
|
||||
Datas
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="nascimento" validators={{ onChange: schema.shape.nascimento }}>
|
||||
@@ -342,6 +416,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Contato -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Contato
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="email" validators={{ onChange: schema.shape.email }}>
|
||||
@@ -361,7 +447,18 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Cargo/Função -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-4">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Cargo/Função
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field name="simboloTipo" validators={{ onChange: schema.shape.simboloTipo }}>
|
||||
@@ -390,21 +487,47 @@
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
|
||||
<form.Subscribe selector={(s) => ({ canSubmit: s.canSubmit, isSubmitting: s.isSubmitting })}>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="card-actions justify-end pt-2">
|
||||
<button type="button" class="btn btn-ghost" disabled={isSubmitting} onclick={() => goto("/recursos-humanos/funcionarios")}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" class:loading={isSubmitting} disabled={isSubmitting || !canSubmit}>
|
||||
Cadastrar Funcionário
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Card: Ações -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<form.Subscribe selector={(s) => ({ canSubmit: s.canSubmit, isSubmitting: s.isSubmitting })}>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-lg"
|
||||
disabled={isSubmitting}
|
||||
onclick={() => goto("/recursos-humanos/funcionarios")}
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg"
|
||||
disabled={isSubmitting || !canSubmit}
|
||||
>
|
||||
{#if isSubmitting}
|
||||
<span class="loading loading-spinner"></span>
|
||||
Cadastrando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Cadastrar Funcionário
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
let list: Array<any> = [];
|
||||
let filtro = "";
|
||||
let notice: { kind: "success" | "error"; text: string } | null = null;
|
||||
let toDelete: { id: string; nome: string } | null = null;
|
||||
let deletingId: string | null = null;
|
||||
let list: Array<any> = $state([]);
|
||||
let filtro = $state("");
|
||||
let notice: { kind: "success" | "error"; text: string } | null = $state(null);
|
||||
let toDelete: { id: string; nome: string; cpf: string; matricula: string } | null = $state(null);
|
||||
let deletingId: string | null = $state(null);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
@@ -20,8 +20,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
function openDeleteModal(id: string, nome: string) {
|
||||
toDelete = { id, nome };
|
||||
function openDeleteModal(id: string, nome: string, cpf: string, matricula: string) {
|
||||
toDelete = { id, nome, cpf, matricula };
|
||||
(document.getElementById("delete_modal_func_excluir") as HTMLDialogElement)?.showModal();
|
||||
}
|
||||
|
||||
@@ -36,92 +36,295 @@
|
||||
deletingId = toDelete.id;
|
||||
await client.mutation(api.funcionarios.remove, { id: toDelete.id } as any);
|
||||
closeDeleteModal();
|
||||
notice = { kind: "success", text: "Funcionário excluído com sucesso." };
|
||||
notice = { kind: "success", text: `Funcionário "${toDelete.nome}" excluído com sucesso!` };
|
||||
await load();
|
||||
|
||||
// Auto-fechar mensagem de sucesso após 5 segundos
|
||||
setTimeout(() => {
|
||||
notice = null;
|
||||
}, 5000);
|
||||
} catch (e) {
|
||||
notice = { kind: "error", text: "Erro ao excluir cadastro." };
|
||||
notice = { kind: "error", text: "Erro ao excluir cadastro. Tente novamente." };
|
||||
} finally {
|
||||
deletingId = null;
|
||||
}
|
||||
}
|
||||
|
||||
function back() { goto("/recursos-humanos/funcionarios"); }
|
||||
function limparFiltro() {
|
||||
filtro = "";
|
||||
}
|
||||
|
||||
onMount(() => { void load(); });
|
||||
function back() {
|
||||
goto("/recursos-humanos/funcionarios");
|
||||
}
|
||||
|
||||
// Computed para lista filtrada
|
||||
const filtered = $derived(
|
||||
list.filter((f) => {
|
||||
const q = (filtro || "").toLowerCase();
|
||||
return !q ||
|
||||
(f.nome || "").toLowerCase().includes(q) ||
|
||||
(f.cpf || "").includes(q) ||
|
||||
(f.matricula || "").toLowerCase().includes(q);
|
||||
})
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#if notice}
|
||||
<div class="alert" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold">Excluir Funcionários</h2>
|
||||
<button class="btn" onclick={back}>Voltar</button>
|
||||
</div>
|
||||
|
||||
<div class="form-control max-w-sm">
|
||||
<label class="label" for="func_excluir_busca"><span class="label-text">Buscar por nome/CPF/matrícula</span></label>
|
||||
<input id="func_excluir_busca" class="input input-bordered" bind:value={filtro} />
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Matrícula</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each list.filter((f) => {
|
||||
const q = (filtro || "").toLowerCase();
|
||||
return !q || (f.nome || "").toLowerCase().includes(q) || (f.cpf || "").includes(q) || (f.matricula || "").toLowerCase().includes(q);
|
||||
}) as f}
|
||||
<tr>
|
||||
<td>{f.nome}</td>
|
||||
<td>{f.cpf}</td>
|
||||
<td>{f.matricula}</td>
|
||||
<td>
|
||||
<button class="btn btn-error btn-sm" onclick={() => openDeleteModal(f._id, f.nome)}>Excluir</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<dialog id="delete_modal_func_excluir" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Confirmar Exclusão</h3>
|
||||
<div class="alert alert-warning mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||
<span>Esta ação não pode ser desfeita!</span>
|
||||
</div>
|
||||
{#if toDelete}
|
||||
<p class="py-2">Tem certeza que deseja excluir o funcionário <strong class="text-error">{toDelete.nome}</strong>?</p>
|
||||
{/if}
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-2">
|
||||
<button class="btn btn-ghost" onclick={closeDeleteModal} type="button">Cancelar</button>
|
||||
<button class="btn btn-error" onclick={confirmDelete} disabled={deletingId !== null} type="button">
|
||||
{#if deletingId}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Excluindo...
|
||||
{:else}
|
||||
Confirmar Exclusão
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" class="text-primary hover:text-primary-focus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/recursos-humanos" class="text-primary hover:text-primary-focus">Recursos Humanos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/recursos-humanos/funcionarios" class="text-primary hover:text-primary-focus">Funcionários</a>
|
||||
</li>
|
||||
<li class="font-semibold">Excluir Funcionários</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header com ícone e descrição -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-3 bg-error/10 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-error" 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>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-base-content">Excluir Funcionários</h1>
|
||||
<p class="text-base-content/60 mt-1">Selecione o funcionário que deseja remover do sistema</p>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-ghost gap-2"
|
||||
onclick={back}
|
||||
>
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Voltar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerta de sucesso/erro -->
|
||||
{#if notice}
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
{#if notice.kind === "success"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{notice.text}</span>
|
||||
<button class="btn btn-sm btn-ghost" onclick={() => notice = null} aria-label="Fechar alerta">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Card de Filtros -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="card-title text-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros de Busca
|
||||
</h2>
|
||||
{#if filtro}
|
||||
<button class="btn btn-sm btn-ghost gap-2" onclick={limparFiltro}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Limpar Filtros
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="func_excluir_busca">
|
||||
<span class="label-text font-semibold">Buscar por Nome, CPF ou Matrícula</span>
|
||||
</label>
|
||||
<input
|
||||
id="func_excluir_busca"
|
||||
type="text"
|
||||
placeholder="Digite para filtrar..."
|
||||
class="input input-bordered input-primary w-full focus:input-primary"
|
||||
bind:value={filtro}
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
{filtered.length} funcionário{filtered.length !== 1 ? 's' : ''} encontrado{filtered.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela de Funcionários -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Lista de Funcionários
|
||||
</h2>
|
||||
|
||||
{#if list.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="p-4 bg-base-200 rounded-full mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-base-content/70">Nenhum funcionário cadastrado</p>
|
||||
<p class="text-sm text-base-content/50 mt-2">Cadastre funcionários para gerenciá-los aqui</p>
|
||||
</div>
|
||||
{:else if filtered.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="p-4 bg-base-200 rounded-full mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-base-content/70">Nenhum resultado encontrado</p>
|
||||
<p class="text-sm text-base-content/50 mt-2">Tente ajustar os filtros de busca</p>
|
||||
<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltro}>Limpar Filtros</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead class="bg-base-200 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="text-base">Nome</th>
|
||||
<th class="text-base">CPF</th>
|
||||
<th class="text-base">Matrícula</th>
|
||||
<th class="text-base text-center">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filtered as f}
|
||||
<tr class="hover">
|
||||
<td class="font-semibold">{f.nome}</td>
|
||||
<td>{f.cpf}</td>
|
||||
<td><span class="badge badge-ghost">{f.matricula}</span></td>
|
||||
<td class="text-center">
|
||||
<button
|
||||
class="btn btn-error btn-sm gap-2"
|
||||
onclick={() => openDeleteModal(f._id, f.nome, f.cpf, f.matricula)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
Excluir
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
<dialog id="delete_modal_func_excluir" class="modal">
|
||||
<div class="modal-box max-w-md">
|
||||
<h3 class="font-bold text-2xl mb-4 flex items-center gap-2 text-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Confirmar Exclusão
|
||||
</h3>
|
||||
|
||||
<div class="alert alert-warning mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold">Atenção!</span>
|
||||
<p class="text-sm">Esta ação não pode ser desfeita!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if toDelete}
|
||||
<div class="bg-base-200 rounded-lg p-4 mb-4">
|
||||
<p class="text-sm text-base-content/70 mb-3">Você está prestes a excluir o seguinte funcionário:</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<strong class="text-error text-lg">{toDelete.nome}</strong>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="text-base-content/60">CPF:</span>
|
||||
<span class="font-semibold">{toDelete.cpf}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="text-base-content/60">Matrícula:</span>
|
||||
<span class="badge badge-ghost">{toDelete.matricula}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-sm text-base-content/70 mb-6">
|
||||
Tem certeza que deseja continuar?
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="modal-action justify-between">
|
||||
<button
|
||||
class="btn btn-ghost gap-2"
|
||||
onclick={closeDeleteModal}
|
||||
disabled={deletingId !== null}
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error gap-2"
|
||||
onclick={confirmDelete}
|
||||
disabled={deletingId !== null}
|
||||
>
|
||||
{#if deletingId}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Excluindo...
|
||||
{:else}
|
||||
<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>
|
||||
Confirmar Exclusão
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
|
||||
|
||||
@@ -29,130 +29,248 @@
|
||||
}
|
||||
});
|
||||
|
||||
let chartWidth = 800;
|
||||
let chartHeight = 320;
|
||||
const padding = { top: 20, right: 20, bottom: 80, left: 70 };
|
||||
let chartWidth = 900;
|
||||
let chartHeight = 400;
|
||||
const padding = { top: 40, right: 30, bottom: 100, left: 80 };
|
||||
|
||||
function getMax<T>(arr: Array<T>, sel: (t: T) => number): number {
|
||||
let m = 0;
|
||||
for (const a of arr) m = Math.max(m, sel(a));
|
||||
return m;
|
||||
}
|
||||
|
||||
function scaleY(v: number, max: number): number {
|
||||
if (max <= 0) return 0;
|
||||
const innerH = chartHeight - padding.top - padding.bottom;
|
||||
return (v / max) * innerH;
|
||||
}
|
||||
function barX(i: number, n: number): number {
|
||||
|
||||
function getX(i: number, n: number): number {
|
||||
const innerW = chartWidth - padding.left - padding.right;
|
||||
return padding.left + (innerW / n) * i + 10;
|
||||
}
|
||||
function barW(n: number): number {
|
||||
const innerW = chartWidth - padding.left - padding.right;
|
||||
return Math.max(8, innerW / n - 20);
|
||||
return padding.left + (innerW / (n - 1)) * i;
|
||||
}
|
||||
|
||||
// Sem tooltip flutuante; valores serão exibidos de forma fixa no gráfico
|
||||
function createAreaPath(data: Array<Row>, getValue: (r: Row) => number, max: number): string {
|
||||
if (data.length === 0) return "";
|
||||
const n = data.length;
|
||||
let path = `M ${getX(0, n)} ${chartHeight - padding.bottom}`;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const x = getX(i, n);
|
||||
const y = chartHeight - padding.bottom - scaleY(getValue(data[i]), max);
|
||||
path += ` L ${x} ${y}`;
|
||||
}
|
||||
|
||||
path += ` L ${getX(n - 1, n)} ${chartHeight - padding.bottom}`;
|
||||
path += " Z";
|
||||
return path;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6 pb-4">
|
||||
<div class="container mx-auto px-4 py-6 space-y-6">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/">Dashboard</a></li>
|
||||
<li><a href="/recursos-humanos">Recursos Humanos</a></li>
|
||||
<li><a href="/recursos-humanos/funcionarios">Funcionários</a></li>
|
||||
<li class="font-semibold">Relatórios</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="p-3 bg-primary/10 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" 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>
|
||||
<h1 class="text-3xl font-bold text-base-content">Relatórios de Funcionários</h1>
|
||||
<p class="text-base-content/60">Análise de distribuição de salários e funcionários por símbolo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if notice}
|
||||
<div class="alert" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-3xl font-bold text-brand-dark">Relatórios</h2>
|
||||
</div>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="flex justify-center items-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid gap-6">
|
||||
<!-- Gráfico 1: Símbolo x Salário (Valor) -->
|
||||
<div class="card bg-base-100 shadow overflow-hidden">
|
||||
<!-- Gráfico 1: Símbolo x Salário (Valor) - Layer Chart -->
|
||||
<div class="card bg-gradient-to-br from-base-100 to-base-200 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Símbolo x Salário (Valor total)</h3>
|
||||
<div class="w-full overflow-x-auto">
|
||||
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: salário por símbolo">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-base-content">Distribuição de Salários por Símbolo</h3>
|
||||
<p class="text-sm text-base-content/60">Valores dos símbolos cadastrados no sistema</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full overflow-x-auto bg-base-100 rounded-lg p-4">
|
||||
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: salário por símbolo">
|
||||
{#if rows.length === 0}
|
||||
<text x="16" y="32" class="opacity-60">Sem dados</text>
|
||||
{:else}
|
||||
{@const max = getMax(rows, (r) => r.valor)}
|
||||
<!-- Eixos -->
|
||||
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
|
||||
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
|
||||
|
||||
<!-- Grid lines -->
|
||||
{#each [0,1,2,3,4,5] as t}
|
||||
{@const val = Math.round((max/5) * t)}
|
||||
{@const y = chartHeight - padding.bottom - scaleY(val, max)}
|
||||
<line x1={padding.left - 4} y1={y} x2={padding.left} y2={y} stroke="currentColor" stroke-opacity="0.3" />
|
||||
<line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
|
||||
<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{`R$ ${val.toLocaleString('pt-BR')}`}</text>
|
||||
{/each}
|
||||
<!-- Eixo X (nomes) -->
|
||||
|
||||
<!-- Eixos -->
|
||||
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
|
||||
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
|
||||
|
||||
<!-- Area fill (camada) -->
|
||||
<path
|
||||
d={createAreaPath(rows, (r) => r.valor, max)}
|
||||
fill="url(#gradient-salary)"
|
||||
opacity="0.7"
|
||||
/>
|
||||
|
||||
<!-- Line -->
|
||||
<polyline
|
||||
points={rows.map((r, i) => {
|
||||
const x = getX(i, rows.length);
|
||||
const y = chartHeight - padding.bottom - scaleY(r.valor, max);
|
||||
return `${x},${y}`;
|
||||
}).join(' ')}
|
||||
fill="none"
|
||||
stroke="rgb(59, 130, 246)"
|
||||
stroke-width="3"
|
||||
/>
|
||||
|
||||
<!-- Data points -->
|
||||
{#each rows as r, i}
|
||||
<text x={barX(i, rows.length) + barW(rows.length) / 2} y={chartHeight - padding.bottom + 28} text-anchor="middle" class="text-xs">
|
||||
{r.nome}
|
||||
</text>
|
||||
{/each}
|
||||
<!-- Barras -->
|
||||
{#each rows as r, i}
|
||||
<rect
|
||||
x={barX(i, rows.length)}
|
||||
y={chartHeight - padding.bottom - scaleY(r.valor, max)}
|
||||
width={barW(rows.length)}
|
||||
height={scaleY(r.valor, max)}
|
||||
class="fill-primary/80"
|
||||
/>
|
||||
<!-- Valor fixo acima da barra -->
|
||||
<text x={barX(i, rows.length) + barW(rows.length)/2} y={chartHeight - padding.bottom - scaleY(r.valor, max) - 6} text-anchor="middle" class="text-[10px] font-semibold">
|
||||
{@const x = getX(i, rows.length)}
|
||||
{@const y = chartHeight - padding.bottom - scaleY(r.valor, max)}
|
||||
<circle cx={x} cy={y} r="5" fill="rgb(59, 130, 246)" stroke="white" stroke-width="2" />
|
||||
<text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-primary">
|
||||
{`R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`}
|
||||
</text>
|
||||
{/each}
|
||||
|
||||
<!-- Eixo X labels -->
|
||||
{#each rows as r, i}
|
||||
{@const x = getX(i, rows.length)}
|
||||
<foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
|
||||
<div class="flex items-center justify-center text-center">
|
||||
<span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
|
||||
{r.nome}
|
||||
</span>
|
||||
</div>
|
||||
</foreignObject>
|
||||
{/each}
|
||||
|
||||
<!-- Gradient definition -->
|
||||
<defs>
|
||||
<linearGradient id="gradient-salary" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:rgb(59, 130, 246);stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:rgb(59, 130, 246);stop-opacity:0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gráfico 2: Quantidade de Funcionários por Símbolo -->
|
||||
<div class="card bg-base-100 shadow overflow-hidden">
|
||||
<!-- Gráfico 2: Quantidade de Funcionários por Símbolo - Layer Chart -->
|
||||
<div class="card bg-gradient-to-br from-base-100 to-base-200 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Quantidade de Funcionários por Símbolo</h3>
|
||||
<div class="w-full overflow-x-auto">
|
||||
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: quantidade por símbolo">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 bg-secondary/10 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" 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>
|
||||
<h3 class="text-xl font-bold text-base-content">Distribuição de Funcionários por Símbolo</h3>
|
||||
<p class="text-sm text-base-content/60">Quantidade de funcionários alocados em cada símbolo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full overflow-x-auto bg-base-100 rounded-lg p-4">
|
||||
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: quantidade por símbolo">
|
||||
{#if rows.length === 0}
|
||||
<text x="16" y="32" class="opacity-60">Sem dados</text>
|
||||
{:else}
|
||||
{@const maxC = getMax(rows, (r) => r.count)}
|
||||
<!-- Eixos -->
|
||||
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
|
||||
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
|
||||
|
||||
<!-- Grid lines -->
|
||||
{#each [0,1,2,3,4,5] as t}
|
||||
{@const val = Math.round((maxC/5) * t)}
|
||||
{@const y = chartHeight - padding.bottom - scaleY(val, Math.max(1, maxC))}
|
||||
<line x1={padding.left - 4} y1={y} x2={padding.left} y2={y} stroke="currentColor" stroke-opacity="0.3" />
|
||||
<line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
|
||||
<text x={padding.left - 6} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{val}</text>
|
||||
{/each}
|
||||
|
||||
<!-- Eixos -->
|
||||
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
|
||||
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
|
||||
|
||||
<!-- Area fill (camada) -->
|
||||
<path
|
||||
d={createAreaPath(rows, (r) => r.count, Math.max(1, maxC))}
|
||||
fill="url(#gradient-count)"
|
||||
opacity="0.7"
|
||||
/>
|
||||
|
||||
<!-- Line -->
|
||||
<polyline
|
||||
points={rows.map((r, i) => {
|
||||
const x = getX(i, rows.length);
|
||||
const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC));
|
||||
return `${x},${y}`;
|
||||
}).join(' ')}
|
||||
fill="none"
|
||||
stroke="rgb(236, 72, 153)"
|
||||
stroke-width="3"
|
||||
/>
|
||||
|
||||
<!-- Data points -->
|
||||
{#each rows as r, i}
|
||||
<text x={barX(i, rows.length) + barW(rows.length) / 2} y={chartHeight - padding.bottom + 28} text-anchor="middle" class="text-xs">
|
||||
{r.nome}
|
||||
</text>
|
||||
{/each}
|
||||
{#each rows as r, i}
|
||||
<rect
|
||||
x={barX(i, rows.length)}
|
||||
y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
|
||||
width={barW(rows.length)}
|
||||
height={scaleY(r.count, Math.max(1, maxC))}
|
||||
class="fill-secondary/80"
|
||||
/>
|
||||
<text x={barX(i, rows.length) + barW(rows.length)/2} y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC)) - 6} text-anchor="middle" class="text-[10px] font-semibold">
|
||||
{@const x = getX(i, rows.length)}
|
||||
{@const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
|
||||
<circle cx={x} cy={y} r="5" fill="rgb(236, 72, 153)" stroke="white" stroke-width="2" />
|
||||
<text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-secondary">
|
||||
{r.count}
|
||||
</text>
|
||||
{/each}
|
||||
|
||||
<!-- Eixo X labels -->
|
||||
{#each rows as r, i}
|
||||
{@const x = getX(i, rows.length)}
|
||||
<foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
|
||||
<div class="flex items-center justify-center text-center">
|
||||
<span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
|
||||
{r.nome}
|
||||
</span>
|
||||
</div>
|
||||
</foreignObject>
|
||||
{/each}
|
||||
|
||||
<!-- Gradient definition -->
|
||||
<defs>
|
||||
<linearGradient id="gradient-count" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:rgb(236, 72, 153);stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:rgb(236, 72, 153);stop-opacity:0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@@ -73,47 +73,112 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6 pb-32">
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
|
||||
<li>Símbolos</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-green-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" 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>
|
||||
<h1 class="text-3xl font-bold text-primary">Símbolos Cadastrados</h1>
|
||||
<p class="text-base-content/70">Gerencie cargos comissionados e funções gratificadas</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary btn-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Novo Símbolo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div class="alert" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
{#if notice.kind === "success"}
|
||||
<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" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-3xl font-bold text-brand-dark">Símbolos</h2>
|
||||
<a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Novo Símbolo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-3 items-end">
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_nome"><span class="label-text">Nome</span></label>
|
||||
<input id="symbol_nome" class="input input-bordered" bind:value={filtroNome} />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_tipo"><span class="label-text">Tipo</span></label>
|
||||
<select id="symbol_tipo" class="select select-bordered" bind:value={filtroTipo}>
|
||||
<option value="">Todos</option>
|
||||
<option value="cargo_comissionado">Cargo comissionado</option>
|
||||
<option value="funcao_gratificada">Função gratificada</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_desc"><span class="label-text">Descrição</span></label>
|
||||
<input id="symbol_desc" class="input input-bordered" bind:value={filtroDescricao} />
|
||||
<!-- Filtros -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg mb-4">
|
||||
<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros de Pesquisa
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_nome">
|
||||
<span class="label-text font-semibold">Nome do Símbolo</span>
|
||||
</label>
|
||||
<input
|
||||
id="symbol_nome"
|
||||
class="input input-bordered focus:input-primary"
|
||||
placeholder="Buscar por nome..."
|
||||
bind:value={filtroNome}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_tipo">
|
||||
<span class="label-text font-semibold">Tipo</span>
|
||||
</label>
|
||||
<select id="symbol_tipo" class="select select-bordered focus:select-primary" bind:value={filtroTipo}>
|
||||
<option value="">Todos os tipos</option>
|
||||
<option value="cargo_comissionado">Cargo Comissionado</option>
|
||||
<option value="funcao_gratificada">Função Gratificada</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="symbol_desc">
|
||||
<span class="label-text font-semibold">Descrição</span>
|
||||
</label>
|
||||
<input
|
||||
id="symbol_desc"
|
||||
class="input input-bordered focus:input-primary"
|
||||
placeholder="Buscar na descrição..."
|
||||
bind:value={filtroDescricao}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if filtroNome || filtroTipo || filtroDescricao}
|
||||
<div class="mt-4">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm gap-2"
|
||||
onclick={() => {
|
||||
filtroNome = "";
|
||||
filtroTipo = "";
|
||||
filtroDescricao = "";
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -122,38 +187,42 @@
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto bg-base-100 rounded-lg shadow-sm mb-2" class:overflow-y-auto={needsScroll} style={needsScroll ? "max-height: calc(100vh - 180px);" : "overflow-y: visible;"}>
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Tipo</th>
|
||||
<th>Valor Referência</th>
|
||||
<th>Valor Vencimento</th>
|
||||
<th>Valor Total</th>
|
||||
<th>Descrição</th>
|
||||
<th class="text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#if filtered.length > 0}
|
||||
{#each filtered as simbolo}
|
||||
<tr class="hover">
|
||||
<td class="font-medium">{simbolo.nome}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge"
|
||||
class:badge-primary={simbolo.tipo === "cargo_comissionado"}
|
||||
class:badge-secondary={simbolo.tipo === "funcao_gratificada"}
|
||||
>
|
||||
{getTipoLabel(simbolo.tipo)}
|
||||
</span>
|
||||
</td>
|
||||
<td>{simbolo.repValor ? formatMoney(simbolo.repValor) : "—"}</td>
|
||||
<td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : "—"}</td>
|
||||
<td class="font-semibold">{formatMoney(simbolo.valor)}</td>
|
||||
<td class="max-w-xs truncate">{simbolo.descricao}</td>
|
||||
<td class="text-right">
|
||||
<!-- Tabela de Símbolos -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="sticky top-0 bg-base-200 z-10">
|
||||
<tr>
|
||||
<th class="font-bold">Nome</th>
|
||||
<th class="font-bold">Tipo</th>
|
||||
<th class="font-bold">Valor Referência</th>
|
||||
<th class="font-bold">Valor Vencimento</th>
|
||||
<th class="font-bold">Valor Total</th>
|
||||
<th class="font-bold">Descrição</th>
|
||||
<th class="text-right font-bold">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#if filtered.length > 0}
|
||||
{#each filtered as simbolo}
|
||||
<tr class="hover">
|
||||
<td class="font-medium">{simbolo.nome}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge"
|
||||
class:badge-primary={simbolo.tipo === "cargo_comissionado"}
|
||||
class:badge-secondary={simbolo.tipo === "funcao_gratificada"}
|
||||
>
|
||||
{getTipoLabel(simbolo.tipo)}
|
||||
</span>
|
||||
</td>
|
||||
<td>{simbolo.repValor ? formatMoney(simbolo.repValor) : "—"}</td>
|
||||
<td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : "—"}</td>
|
||||
<td class="font-semibold">{formatMoney(simbolo.valor)}</td>
|
||||
<td class="max-w-xs truncate">{simbolo.descricao}</td>
|
||||
<td class="text-right">
|
||||
<div class="dropdown dropdown-end" class:dropdown-open={openMenuId === simbolo._id}>
|
||||
<button type="button" class="btn btn-ghost btn-sm" onclick={() => toggleMenu(simbolo._id)}>
|
||||
<svg
|
||||
@@ -201,20 +270,28 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="7" class="text-center opacity-70">Nenhum símbolo encontrado com os filtros atuais.</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="7" class="text-center opacity-70 py-8">Nenhum símbolo encontrado com os filtros atuais.</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informação sobre resultados -->
|
||||
<div class="mt-4 text-sm text-base-content/70 text-center">
|
||||
Exibindo {filtered.length} de {list.length} símbolo(s)
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
<dialog id="delete_modal" class="modal">
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
}
|
||||
|
||||
let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
function getTotalPreview(): string {
|
||||
if (tipo !== "cargo_comissionado") return "";
|
||||
const r = unmaskCurrencyToDotDecimal(form.getFieldValue("refValor"));
|
||||
@@ -77,303 +78,400 @@
|
||||
valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined,
|
||||
};
|
||||
|
||||
const res = await client.mutation(api.simbolos.create, payload);
|
||||
|
||||
if (res) {
|
||||
formApi.reset();
|
||||
notice = { kind: "success", text: "Símbolo cadastrado com sucesso." };
|
||||
setTimeout(() => goto("/recursos-humanos/simbolos"), 600);
|
||||
} else {
|
||||
console.log("erro ao registrar cliente");
|
||||
notice = { kind: "error", text: "Erro ao cadastrar símbolo." };
|
||||
try {
|
||||
const res = await client.mutation(api.simbolos.create, payload);
|
||||
if (res) {
|
||||
formApi.reset();
|
||||
notice = { kind: "success", text: "Símbolo cadastrado com sucesso!" };
|
||||
setTimeout(() => goto("/recursos-humanos/simbolos"), 1500);
|
||||
}
|
||||
} catch (error: any) {
|
||||
notice = { kind: "error", text: error.message || "Erro ao cadastrar símbolo." };
|
||||
}
|
||||
},
|
||||
defaultValues,
|
||||
}));
|
||||
</script>
|
||||
|
||||
<form
|
||||
class="max-w-3xl mx-auto p-4"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-6">
|
||||
{#if notice}
|
||||
<div
|
||||
class="alert"
|
||||
class:alert-success={notice.kind === "success"}
|
||||
class:alert-error={notice.kind === "error"}
|
||||
>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<h2 class="card-title text-3xl">Cadastro de Símbolos</h2>
|
||||
<p class="opacity-70">
|
||||
Preencha os campos abaixo para cadastrar um novo símbolo.
|
||||
</p>
|
||||
<main class="container mx-auto px-4 py-4 max-w-4xl">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
|
||||
<li><a href="/recursos-humanos/simbolos" class="text-primary hover:underline">Símbolos</a></li>
|
||||
<li>Cadastrar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-green-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" 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>
|
||||
<h1 class="text-3xl font-bold text-primary">Cadastro de Símbolo</h1>
|
||||
<p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo cargo ou função</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="nome">
|
||||
<span class="label-text font-medium"
|
||||
>Símbolo <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
{name}
|
||||
value={state.value}
|
||||
placeholder="Ex.: DAS-1"
|
||||
class="input input-bordered w-full"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const value = target.value;
|
||||
handleChange(value);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt opacity-60"
|
||||
>Informe o nome identificador do símbolo.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field
|
||||
name="descricao"
|
||||
validators={{ onChange: schema.shape.descricao }}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="descricao">
|
||||
<span class="label-text font-medium"
|
||||
>Descrição <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
{name}
|
||||
value={state.value}
|
||||
placeholder="Ex.: Cargo de Apoio 1"
|
||||
class="input input-bordered w-full"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const value = target.value;
|
||||
handleChange(value);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt opacity-60"
|
||||
>Descreva brevemente o símbolo.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field
|
||||
name="tipo"
|
||||
validators={{
|
||||
onChange: ({ value }) => (value ? undefined : "Obrigatório"),
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="tipo">
|
||||
<span class="label-text font-medium"
|
||||
>Tipo <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<select
|
||||
{name}
|
||||
class="select select-bordered w-full"
|
||||
bind:value={tipo}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
const value = target.value;
|
||||
handleChange(value);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
>
|
||||
<option value="cargo_comissionado">Cargo comissionado</option>
|
||||
<option value="funcao_gratificada">Função gratificada</option>
|
||||
</select>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
{#if tipo === "cargo_comissionado"}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<form.Field
|
||||
name="vencValor"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "cargo_comissionado" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="vencValor">
|
||||
<span class="label-text font-medium"
|
||||
>Valor de Vencimento <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
{name}
|
||||
value={state.value}
|
||||
placeholder="Ex.: 1200,00"
|
||||
class="input input-bordered w-full"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt opacity-60"
|
||||
>Valor efetivo de vencimento.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field
|
||||
name="refValor"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "cargo_comissionado" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="refValor">
|
||||
<span class="label-text font-medium"
|
||||
>Valor de Referência <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
{name}
|
||||
value={state.value}
|
||||
placeholder="Ex.: 1000,00"
|
||||
class="input input-bordered w-full"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt opacity-60"
|
||||
>Valor base de referência.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
{#if getTotalPreview()}
|
||||
<div class="alert bg-base-200">
|
||||
<span>Total previsto: R$ {getTotalPreview()}</span>
|
||||
</div>
|
||||
<!-- Alertas -->
|
||||
{#if notice}
|
||||
<div
|
||||
class="alert mb-6 shadow-lg"
|
||||
class:alert-success={notice.kind === "success"}
|
||||
class:alert-error={notice.kind === "error"}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
{#if notice.kind === "success"}
|
||||
<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" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
{/if}
|
||||
{:else}
|
||||
</svg>
|
||||
<span>{notice.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Formulário -->
|
||||
<form
|
||||
class="space-y-6"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-6">
|
||||
<h2 class="card-title text-xl border-b pb-3">Informações Básicas</h2>
|
||||
|
||||
<!-- Nome do Símbolo -->
|
||||
<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="nome">
|
||||
<span class="label-text font-semibold">
|
||||
Nome do Símbolo <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
{name}
|
||||
id="nome"
|
||||
value={state.value}
|
||||
placeholder="Ex.: DAS-1, CAA-2, FDA-3"
|
||||
class="input input-bordered w-full focus:input-primary"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
handleChange(target.value);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Informe o código identificador do símbolo
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- Descrição -->
|
||||
<form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="descricao">
|
||||
<span class="label-text font-semibold">
|
||||
Descrição <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
{name}
|
||||
id="descricao"
|
||||
value={state.value}
|
||||
placeholder="Ex.: Cargo de Direção e Assessoramento Superior - Nível 1"
|
||||
class="textarea textarea-bordered w-full h-24 focus:textarea-primary"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
handleChange(target.value);
|
||||
}}
|
||||
required
|
||||
></textarea>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Descreva detalhadamente o símbolo
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- Tipo -->
|
||||
<form.Field
|
||||
name="valor"
|
||||
name="tipo"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "funcao_gratificada" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
onChange: ({ value }) => (value ? undefined : "Obrigatório"),
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="valor">
|
||||
<span class="label-text font-medium"
|
||||
>Valor <span class="text-error">*</span></span
|
||||
>
|
||||
<label class="label" for="tipo">
|
||||
<span class="label-text font-semibold">
|
||||
Tipo <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
<select
|
||||
{name}
|
||||
value={state.value}
|
||||
placeholder="Ex.: 1.500,00"
|
||||
class="input input-bordered w-full"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
id="tipo"
|
||||
class="select select-bordered w-full focus:select-primary"
|
||||
bind:value={tipo}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
const target = e.target as HTMLSelectElement;
|
||||
handleChange(target.value);
|
||||
}}
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt opacity-60"
|
||||
>Informe o valor da função gratificada.</span
|
||||
>
|
||||
</div>
|
||||
>
|
||||
<option value="cargo_comissionado">Cargo Comissionado (CC)</option>
|
||||
<option value="funcao_gratificada">Função Gratificada (FG)</option>
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Selecione se é um cargo comissionado ou função gratificada
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
{/if}
|
||||
|
||||
<form.Subscribe
|
||||
selector={(state) => ({
|
||||
canSubmit: state.canSubmit,
|
||||
isSubmitting: state.isSubmitting,
|
||||
})}
|
||||
>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="card-actions justify-end pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost"
|
||||
disabled={isSubmitting}
|
||||
onclick={() => goto("/recursos-humanos/simbolos")}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
class:loading={isSubmitting}
|
||||
disabled={isSubmitting || !canSubmit}
|
||||
>
|
||||
<span>Cadastrar Símbolo</span>
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Card de Valores -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body space-y-6">
|
||||
<h2 class="card-title text-xl border-b pb-3">
|
||||
Valores Financeiros
|
||||
<span class="badge badge-primary badge-lg ml-2">
|
||||
{tipo === "cargo_comissionado" ? "Cargo Comissionado" : "Função Gratificada"}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{#if tipo === "cargo_comissionado"}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Valor de Vencimento -->
|
||||
<form.Field
|
||||
name="vencValor"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "cargo_comissionado" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="vencValor">
|
||||
<span class="label-text font-semibold">
|
||||
Valor de Vencimento <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="input-group">
|
||||
<span>R$</span>
|
||||
<input
|
||||
{name}
|
||||
id="vencValor"
|
||||
value={state.value}
|
||||
placeholder="0,00"
|
||||
class="input input-bordered w-full focus:input-primary"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Valor base de vencimento
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- Valor de Referência -->
|
||||
<form.Field
|
||||
name="refValor"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "cargo_comissionado" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="refValor">
|
||||
<span class="label-text font-semibold">
|
||||
Valor de Referência <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="input-group">
|
||||
<span>R$</span>
|
||||
<input
|
||||
{name}
|
||||
id="refValor"
|
||||
value={state.value}
|
||||
placeholder="0,00"
|
||||
class="input input-bordered w-full focus:input-primary"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Valor de referência do cargo
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
|
||||
<!-- Preview do Total -->
|
||||
{#if getTotalPreview()}
|
||||
<div class="alert alert-info shadow-lg">
|
||||
<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">Valor Total Calculado</h3>
|
||||
<div class="text-2xl font-bold mt-1">R$ {getTotalPreview()}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- Valor da Função Gratificada -->
|
||||
<form.Field
|
||||
name="valor"
|
||||
validators={{
|
||||
onChange: ({ value }) =>
|
||||
form.getFieldValue("tipo") === "funcao_gratificada" && !value
|
||||
? "Obrigatório"
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{#snippet children({ name, state, handleChange })}
|
||||
<div class="form-control">
|
||||
<label class="label" for="valor">
|
||||
<span class="label-text font-semibold">
|
||||
Valor da Função Gratificada <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="input-group">
|
||||
<span>R$</span>
|
||||
<input
|
||||
{name}
|
||||
id="valor"
|
||||
value={state.value}
|
||||
placeholder="0,00"
|
||||
class="input input-bordered w-full focus:input-primary"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const formatted = formatCurrencyBR(target.value);
|
||||
target.value = formatted;
|
||||
handleChange(formatted);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Valor mensal da função gratificada
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botões de Ação -->
|
||||
<form.Subscribe
|
||||
selector={(state) => ({
|
||||
canSubmit: state.canSubmit,
|
||||
isSubmitting: state.isSubmitting,
|
||||
})}
|
||||
>
|
||||
{#snippet children({ canSubmit, isSubmitting })}
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-lg"
|
||||
disabled={isSubmitting}
|
||||
onclick={() => goto("/recursos-humanos/simbolos")}
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg"
|
||||
disabled={isSubmitting || !canSubmit}
|
||||
>
|
||||
{#if isSubmitting}
|
||||
<span class="loading loading-spinner"></span>
|
||||
Cadastrando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Cadastrar Símbolo
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Secretaria Executiva</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-indigo-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Secretaria Executiva</h1>
|
||||
<p class="text-base-content/70">Gestão executiva e administrativa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
|
||||
<p class="text-base-content/70 max-w-md mb-6">
|
||||
O módulo da Secretaria Executiva está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão executiva e administrativa.
|
||||
</p>
|
||||
<div class="badge badge-warning badge-lg gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Em Desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
259
apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
Normal file
259
apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
Normal file
@@ -0,0 +1,259 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { createForm } from "@tanstack/svelte-form";
|
||||
import z from "zod";
|
||||
|
||||
const convex = useConvexClient();
|
||||
|
||||
// Estado para mensagens
|
||||
let notice = $state<{ type: "success" | "error"; message: string } | null>(null);
|
||||
|
||||
// Schema de validação
|
||||
const formSchema = z.object({
|
||||
nome: z.string().min(3, "Nome deve ter no mínimo 3 caracteres"),
|
||||
matricula: z.string().min(1, "Matrícula é obrigatória"),
|
||||
email: z.string().email("E-mail inválido"),
|
||||
telefone: z.string().min(14, "Telefone inválido"),
|
||||
});
|
||||
|
||||
// Criar o formulário
|
||||
const form = createForm(() => ({
|
||||
defaultValues: {
|
||||
nome: "",
|
||||
matricula: "",
|
||||
email: "",
|
||||
telefone: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
try {
|
||||
notice = null;
|
||||
await convex.mutation(api.solicitacoesAcesso.create, {
|
||||
nome: value.nome,
|
||||
matricula: value.matricula,
|
||||
email: value.email,
|
||||
telefone: value.telefone,
|
||||
});
|
||||
notice = {
|
||||
type: "success",
|
||||
message: "Solicitação de acesso enviada com sucesso! Aguarde a análise da equipe de TI.",
|
||||
};
|
||||
// Limpar o formulário
|
||||
form.reset();
|
||||
// Redirecionar após 3 segundos
|
||||
setTimeout(() => {
|
||||
goto("/");
|
||||
}, 3000);
|
||||
} catch (error: any) {
|
||||
notice = {
|
||||
type: "error",
|
||||
message: error.message || "Erro ao enviar solicitação. Tente novamente.",
|
||||
};
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
// Máscaras
|
||||
function maskTelefone(value: string): string {
|
||||
const cleaned = value.replace(/\D/g, "");
|
||||
if (cleaned.length <= 10) {
|
||||
return cleaned
|
||||
.replace(/^(\d{2})(\d)/, "($1) $2")
|
||||
.replace(/(\d{4})(\d)/, "$1-$2");
|
||||
}
|
||||
return cleaned
|
||||
.replace(/^(\d{2})(\d)/, "($1) $2")
|
||||
.replace(/(\d{5})(\d)/, "$1-$2");
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
goto("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4 max-w-4xl">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-3xl font-bold text-primary mb-2">Solicitar Acesso ao SGSE</h1>
|
||||
<p class="text-base-content/70">
|
||||
Preencha o formulário abaixo para solicitar acesso ao Sistema de Gerenciamento da Secretaria de Esportes.
|
||||
Sua solicitação será analisada pela equipe de Tecnologia da Informação.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if notice}
|
||||
<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} mb-6">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{#if notice.type === "success"}
|
||||
<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"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.message}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Nome -->
|
||||
<form.Field name="nome" validators={{ onChange: formSchema.shape.nome }}>
|
||||
{#snippet children(field)}
|
||||
<div class="form-control md:col-span-2">
|
||||
<label class="label" for="nome">
|
||||
<span class="label-text">Nome Completo *</span>
|
||||
</label>
|
||||
<input
|
||||
id="nome"
|
||||
type="text"
|
||||
placeholder="Digite seu nome completo"
|
||||
class="input input-bordered w-full"
|
||||
value={field.state.value}
|
||||
onblur={field.handleBlur}
|
||||
oninput={(e) => field.handleChange(e.currentTarget.value)}
|
||||
/>
|
||||
{#if field.state.meta.errors.length > 0}
|
||||
<span class="text-error text-sm mt-1">{field.state.meta.errors[0]}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- Matrícula -->
|
||||
<form.Field name="matricula" validators={{ onChange: formSchema.shape.matricula }}>
|
||||
{#snippet children(field)}
|
||||
<div class="form-control">
|
||||
<label class="label" for="matricula">
|
||||
<span class="label-text">Matrícula *</span>
|
||||
</label>
|
||||
<input
|
||||
id="matricula"
|
||||
type="text"
|
||||
placeholder="Digite sua matrícula"
|
||||
class="input input-bordered w-full"
|
||||
value={field.state.value}
|
||||
onblur={field.handleBlur}
|
||||
oninput={(e) => field.handleChange(e.currentTarget.value)}
|
||||
/>
|
||||
{#if field.state.meta.errors.length > 0}
|
||||
<span class="text-error text-sm mt-1">{field.state.meta.errors[0]}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- E-mail -->
|
||||
<form.Field name="email" validators={{ onChange: formSchema.shape.email }}>
|
||||
{#snippet children(field)}
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text">E-mail *</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
class="input input-bordered w-full"
|
||||
value={field.state.value}
|
||||
onblur={field.handleBlur}
|
||||
oninput={(e) => field.handleChange(e.currentTarget.value)}
|
||||
/>
|
||||
{#if field.state.meta.errors.length > 0}
|
||||
<span class="text-error text-sm mt-1">{field.state.meta.errors[0]}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<!-- Telefone -->
|
||||
<form.Field name="telefone" validators={{ onChange: formSchema.shape.telefone }}>
|
||||
{#snippet children(field)}
|
||||
<div class="form-control md:col-span-2">
|
||||
<label class="label" for="telefone">
|
||||
<span class="label-text">Telefone *</span>
|
||||
</label>
|
||||
<input
|
||||
id="telefone"
|
||||
type="text"
|
||||
placeholder="(00) 00000-0000"
|
||||
class="input input-bordered w-full"
|
||||
value={field.state.value}
|
||||
onblur={field.handleBlur}
|
||||
oninput={(e) => {
|
||||
const masked = maskTelefone(e.currentTarget.value);
|
||||
e.currentTarget.value = masked;
|
||||
field.handleChange(masked);
|
||||
}}
|
||||
maxlength="15"
|
||||
/>
|
||||
{#if field.state.meta.errors.length > 0}
|
||||
<span class="text-error text-sm mt-1">{field.state.meta.errors[0]}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-6 gap-2">
|
||||
<button type="button" class="btn btn-ghost" onclick={handleCancel}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Solicitar Acesso
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-6">
|
||||
<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">Informações Importantes</h3>
|
||||
<div class="text-sm">
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>Todos os campos marcados com * são obrigatórios</li>
|
||||
<li>Sua solicitação será analisada pela equipe de TI em até 48 horas úteis</li>
|
||||
<li>Você receberá um e-mail com o resultado da análise</li>
|
||||
<li>Em caso de dúvidas, entre em contato com o suporte técnico</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
197
apps/web/src/routes/(dashboard)/ti/+page.svelte
Normal file
197
apps/web/src/routes/(dashboard)/ti/+page.svelte
Normal file
@@ -0,0 +1,197 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<h1 class="text-3xl font-bold text-primary mb-6">Tecnologia da Informação</h1>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Card Painel Administrativo -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-primary/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="card-title text-xl">Painel Administrativo</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Acesso restrito para gerenciamento de solicitações de acesso ao sistema e outras configurações administrativas.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/ti/painel-administrativo" class="btn btn-primary">
|
||||
Acessar Painel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Suporte Técnico -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-primary/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="card-title text-xl">Suporte Técnico</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Central de atendimento para resolução de problemas técnicos e dúvidas sobre o sistema.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<button class="btn btn-primary" disabled>
|
||||
Em breve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Gerenciar Permissões -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-success/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-success"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="card-title text-xl">Gerenciar Permissões</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Configure as permissões de acesso aos menus do sistema por função. Controle quem pode acessar, consultar e gravar dados.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/ti/painel-permissoes" class="btn btn-success">
|
||||
Configurar Permissões
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Personalizar por Matrícula -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-info/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-info"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="card-title text-xl">Personalizar por Matrícula</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Configure permissões específicas para usuários individuais por matrícula, sobrepondo as permissões da função.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/ti/personalizar-permissoes" class="btn btn-info">
|
||||
Personalizar Acessos
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Documentação -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-primary/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-primary"
|
||||
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>
|
||||
</div>
|
||||
<h2 class="card-title text-xl">Documentação</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Manuais, guias e documentação técnica do sistema para usuários e administradores.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<button class="btn btn-primary" disabled>
|
||||
Em breve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info 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">Área Restrita</h3>
|
||||
<div class="text-sm">
|
||||
Esta é uma área de acesso restrito. Apenas usuários autorizados pela equipe de TI podem acessar o Painel Administrativo.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,977 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient, useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
||||
import { authStore } from "$lib/stores/auth.svelte";
|
||||
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
|
||||
|
||||
const convex = useConvexClient();
|
||||
|
||||
// Aba ativa
|
||||
let abaAtiva = $state<"solicitacoes" | "usuarios" | "logs">("solicitacoes");
|
||||
|
||||
// ========================================
|
||||
// ABA 1: SOLICITAÇÕES DE ACESSO
|
||||
// ========================================
|
||||
const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
|
||||
let filtroStatusSolicitacao = $state<"todas" | "pendente" | "aprovado" | "rejeitado">("todas");
|
||||
let filtroNomeSolicitacao = $state("");
|
||||
let filtroMatriculaSolicitacao = $state("");
|
||||
let modalSolicitacaoAberto = $state(false);
|
||||
let solicitacaoSelecionada = $state<Id<"solicitacoesAcesso"> | null>(null);
|
||||
let acaoModalSolicitacao = $state<"aprovar" | "rejeitar" | null>(null);
|
||||
let observacoesSolicitacao = $state("");
|
||||
|
||||
let filteredSolicitacoes = $derived(() => {
|
||||
if (!solicitacoesQuery.data) return [];
|
||||
|
||||
return solicitacoesQuery.data.filter((s: any) => {
|
||||
const matchStatus = filtroStatusSolicitacao === "todas" || s.status === filtroStatusSolicitacao;
|
||||
const matchNome = s.nome.toLowerCase().includes(filtroNomeSolicitacao.toLowerCase());
|
||||
const matchMatricula = s.matricula.toLowerCase().includes(filtroMatriculaSolicitacao.toLowerCase());
|
||||
return matchStatus && matchNome && matchMatricula;
|
||||
});
|
||||
});
|
||||
|
||||
function abrirModalSolicitacao(solicitacaoId: Id<"solicitacoesAcesso">, acao: "aprovar" | "rejeitar") {
|
||||
solicitacaoSelecionada = solicitacaoId;
|
||||
acaoModalSolicitacao = acao;
|
||||
observacoesSolicitacao = "";
|
||||
modalSolicitacaoAberto = true;
|
||||
}
|
||||
|
||||
function fecharModalSolicitacao() {
|
||||
modalSolicitacaoAberto = false;
|
||||
solicitacaoSelecionada = null;
|
||||
acaoModalSolicitacao = null;
|
||||
observacoesSolicitacao = "";
|
||||
}
|
||||
|
||||
async function confirmarAcaoSolicitacao() {
|
||||
if (!solicitacaoSelecionada || !acaoModalSolicitacao) return;
|
||||
|
||||
try {
|
||||
if (acaoModalSolicitacao === "aprovar") {
|
||||
await convex.mutation(api.solicitacoesAcesso.aprovar, {
|
||||
solicitacaoId: solicitacaoSelecionada,
|
||||
observacoes: observacoesSolicitacao || undefined,
|
||||
});
|
||||
mostrarNotice("success", "Solicitação aprovada com sucesso!");
|
||||
} else {
|
||||
await convex.mutation(api.solicitacoesAcesso.rejeitar, {
|
||||
solicitacaoId: solicitacaoSelecionada,
|
||||
observacoes: observacoesSolicitacao || undefined,
|
||||
});
|
||||
mostrarNotice("success", "Solicitação rejeitada com sucesso!");
|
||||
}
|
||||
fecharModalSolicitacao();
|
||||
} catch (error: any) {
|
||||
mostrarNotice("error", error.message || "Erro ao processar solicitação.");
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ABA 2: GERENCIAMENTO DE USUÁRIOS
|
||||
// ========================================
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
const rolesQuery = useQuery(api.roles.listar, {});
|
||||
let filtroNomeUsuario = $state("");
|
||||
let filtroMatriculaUsuario = $state("");
|
||||
let filtroRoleUsuario = $state<string>("todos");
|
||||
let filtroStatusUsuario = $state<"todos" | "ativo" | "inativo">("todos");
|
||||
let modalUsuarioAberto = $state(false);
|
||||
let usuarioSelecionado = $state<Id<"usuarios"> | null>(null);
|
||||
let acaoModalUsuario = $state<"ativar" | "desativar" | "resetar" | "alterar_role" | null>(null);
|
||||
let novaRoleId = $state<Id<"roles"> | null>(null);
|
||||
|
||||
let filteredUsuarios = $derived(() => {
|
||||
if (!usuariosQuery.data) return [];
|
||||
|
||||
return usuariosQuery.data.filter((u: any) => {
|
||||
const matchNome = u.nome.toLowerCase().includes(filtroNomeUsuario.toLowerCase());
|
||||
const matchMatricula = u.matricula.toLowerCase().includes(filtroMatriculaUsuario.toLowerCase());
|
||||
const matchRole = filtroRoleUsuario === "todos" || u.role.nome === filtroRoleUsuario;
|
||||
const matchStatus = filtroStatusUsuario === "todos" ||
|
||||
(filtroStatusUsuario === "ativo" && u.ativo) ||
|
||||
(filtroStatusUsuario === "inativo" && !u.ativo);
|
||||
return matchNome && matchMatricula && matchRole && matchStatus;
|
||||
});
|
||||
});
|
||||
|
||||
function abrirModalUsuario(usuarioId: Id<"usuarios">, acao: "ativar" | "desativar" | "resetar" | "alterar_role") {
|
||||
usuarioSelecionado = usuarioId;
|
||||
acaoModalUsuario = acao;
|
||||
|
||||
// Se for alterar role, pegar a role atual do usuário
|
||||
if (acao === "alterar_role" && usuariosQuery.data) {
|
||||
const usuario = usuariosQuery.data.find((u: any) => u._id === usuarioId);
|
||||
if (usuario) {
|
||||
novaRoleId = usuario.role._id;
|
||||
}
|
||||
}
|
||||
|
||||
modalUsuarioAberto = true;
|
||||
}
|
||||
|
||||
function fecharModalUsuario() {
|
||||
modalUsuarioAberto = false;
|
||||
usuarioSelecionado = null;
|
||||
acaoModalUsuario = null;
|
||||
novaRoleId = null;
|
||||
}
|
||||
|
||||
async function confirmarAcaoUsuario() {
|
||||
if (!usuarioSelecionado || !acaoModalUsuario) return;
|
||||
|
||||
try {
|
||||
if (acaoModalUsuario === "ativar") {
|
||||
await convex.mutation(api.usuarios.ativar, { id: usuarioSelecionado });
|
||||
mostrarNotice("success", "Usuário ativado com sucesso!");
|
||||
} else if (acaoModalUsuario === "desativar") {
|
||||
await convex.mutation(api.usuarios.desativar, { id: usuarioSelecionado });
|
||||
mostrarNotice("success", "Usuário desativado com sucesso!");
|
||||
} else if (acaoModalUsuario === "resetar") {
|
||||
await convex.mutation(api.usuarios.resetarSenha, {
|
||||
usuarioId: usuarioSelecionado,
|
||||
novaSenha: "Mudar@123"
|
||||
});
|
||||
mostrarNotice("success", "Senha resetada para 'Mudar@123' com sucesso!");
|
||||
} else if (acaoModalUsuario === "alterar_role" && novaRoleId) {
|
||||
await convex.mutation(api.usuarios.alterarRole, {
|
||||
usuarioId: usuarioSelecionado,
|
||||
novaRoleId: novaRoleId
|
||||
});
|
||||
mostrarNotice("success", "Função/Nível alterado com sucesso!");
|
||||
}
|
||||
fecharModalUsuario();
|
||||
} catch (error: any) {
|
||||
mostrarNotice("error", error.message || "Erro ao processar ação.");
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ABA 3: HISTÓRICO DE ACESSOS
|
||||
// ========================================
|
||||
const logsQuery = useQuery(api.logsAcesso.listar, { limite: 100 });
|
||||
let filtroTipoLog = $state<string>("todos");
|
||||
let filtroUsuarioLog = $state("");
|
||||
let modalLimparLogsAberto = $state(false);
|
||||
|
||||
let filteredLogs = $derived(() => {
|
||||
if (!logsQuery.data) return [];
|
||||
|
||||
return logsQuery.data.filter((log: any) => {
|
||||
const matchTipo = filtroTipoLog === "todos" || log.tipo === filtroTipoLog;
|
||||
const matchUsuario = !filtroUsuarioLog ||
|
||||
(log.usuario && log.usuario.nome.toLowerCase().includes(filtroUsuarioLog.toLowerCase()));
|
||||
return matchTipo && matchUsuario;
|
||||
});
|
||||
});
|
||||
|
||||
async function limparLogs() {
|
||||
try {
|
||||
await convex.mutation(api.logsAcesso.limparTodos, {});
|
||||
mostrarNotice("success", "Histórico de logs limpo com sucesso!");
|
||||
modalLimparLogsAberto = false;
|
||||
} catch (error: any) {
|
||||
mostrarNotice("error", error.message || "Erro ao limpar logs.");
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// UTILITÁRIOS
|
||||
// ========================================
|
||||
let notice = $state<{ type: "success" | "error"; message: string } | null>(null);
|
||||
|
||||
function mostrarNotice(type: "success" | "error", message: string) {
|
||||
notice = { type, message };
|
||||
setTimeout(() => {
|
||||
notice = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function formatarData(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function getStatusBadgeClass(status: string): string {
|
||||
switch (status) {
|
||||
case "pendente":
|
||||
return "badge-warning";
|
||||
case "aprovado":
|
||||
return "badge-success";
|
||||
case "rejeitado":
|
||||
return "badge-error";
|
||||
default:
|
||||
return "badge-ghost";
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusLabel(status: string): string {
|
||||
switch (status) {
|
||||
case "pendente":
|
||||
return "Pendente";
|
||||
case "aprovado":
|
||||
return "Aprovado";
|
||||
case "rejeitado":
|
||||
return "Rejeitado";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
|
||||
function getTipoLogIcon(tipo: string): string {
|
||||
switch (tipo) {
|
||||
case "login":
|
||||
return "🔓";
|
||||
case "logout":
|
||||
return "🔒";
|
||||
case "acesso_negado":
|
||||
return "⛔";
|
||||
case "senha_alterada":
|
||||
return "🔑";
|
||||
case "sessao_expirada":
|
||||
return "⏰";
|
||||
default:
|
||||
return "📝";
|
||||
}
|
||||
}
|
||||
|
||||
function getTipoLogLabel(tipo: string): string {
|
||||
switch (tipo) {
|
||||
case "login":
|
||||
return "Login";
|
||||
case "logout":
|
||||
return "Logout";
|
||||
case "acesso_negado":
|
||||
return "Acesso Negado";
|
||||
case "senha_alterada":
|
||||
return "Senha Alterada";
|
||||
case "sessao_expirada":
|
||||
return "Sessão Expirada";
|
||||
default:
|
||||
return tipo;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ProtectedRoute requireAuth={true} allowedRoles={["admin", "ti"]} maxLevel={1}>
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<h1 class="text-4xl font-bold text-primary">Painel Administrativo</h1>
|
||||
</div>
|
||||
<p class="text-base-content/70 text-lg">
|
||||
Controle total de acesso, usuários e auditoria do sistema SGSE
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if notice}
|
||||
<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} mb-6">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{#if notice.type === "success"}
|
||||
<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"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span>{notice.message}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs tabs-boxed bg-base-200 p-2 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
class="tab {abaAtiva === 'solicitacoes' ? 'tab-active' : ''}"
|
||||
onclick={() => (abaAtiva = "solicitacoes")}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
|
||||
Solicitações de Acesso
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="tab {abaAtiva === 'usuarios' ? 'tab-active' : ''}"
|
||||
onclick={() => (abaAtiva = "usuarios")}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Gerenciar Usuários
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="tab {abaAtiva === 'logs' ? 'tab-active' : ''}"
|
||||
onclick={() => (abaAtiva = "logs")}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
|
||||
Histórico de Acessos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ABA 1: SOLICITAÇÕES -->
|
||||
{#if abaAtiva === "solicitacoes"}
|
||||
<!-- Estatísticas -->
|
||||
{#if solicitacoesQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="stat bg-gradient-to-br from-primary/20 to-primary/10 shadow-lg rounded-xl border border-primary/30">
|
||||
<div class="stat-title">Total</div>
|
||||
<div class="stat-value text-primary">{solicitacoesQuery.data.length}</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-warning/20 to-warning/10 shadow-lg rounded-xl border border-warning/30">
|
||||
<div class="stat-title">Pendentes</div>
|
||||
<div class="stat-value text-warning">
|
||||
{solicitacoesQuery.data.filter((s: any) => s.status === "pendente").length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-success/20 to-success/10 shadow-lg rounded-xl border border-success/30">
|
||||
<div class="stat-title">Aprovadas</div>
|
||||
<div class="stat-value text-success">
|
||||
{solicitacoesQuery.data.filter((s: any) => s.status === "aprovado").length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-error/20 to-error/10 shadow-lg rounded-xl border border-error/30">
|
||||
<div class="stat-title">Rejeitadas</div>
|
||||
<div class="stat-value text-error">
|
||||
{solicitacoesQuery.data.filter((s: any) => s.status === "rejeitado").length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-status-solicitacao">
|
||||
<span class="label-text font-semibold">Status</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro-status-solicitacao"
|
||||
class="select select-bordered select-primary w-full"
|
||||
bind:value={filtroStatusSolicitacao}
|
||||
>
|
||||
<option value="todas">Todas</option>
|
||||
<option value="pendente">Pendente</option>
|
||||
<option value="aprovado">Aprovado</option>
|
||||
<option value="rejeitado">Rejeitado</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-nome-solicitacao">
|
||||
<span class="label-text font-semibold">Nome</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro-nome-solicitacao"
|
||||
type="text"
|
||||
placeholder="Buscar por nome..."
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={filtroNomeSolicitacao}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-matricula-solicitacao">
|
||||
<span class="label-text font-semibold">Matrícula</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro-matricula-solicitacao"
|
||||
type="text"
|
||||
placeholder="Buscar por matrícula..."
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={filtroMatriculaSolicitacao}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela de Solicitações -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body p-0">
|
||||
{#if solicitacoesQuery.isLoading}
|
||||
<div class="flex justify-center items-center p-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if solicitacoesQuery.error}
|
||||
<div class="alert alert-error m-4">
|
||||
<span>Erro ao carregar solicitações: {solicitacoesQuery.error.message}</span>
|
||||
</div>
|
||||
{:else if filteredSolicitacoes().length === 0}
|
||||
<div class="text-center py-12 text-base-content/70">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||
</svg>
|
||||
<p class="text-lg font-semibold">Nenhuma solicitação encontrada</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th>Data</th>
|
||||
<th>Nome</th>
|
||||
<th>Matrícula</th>
|
||||
<th>E-mail</th>
|
||||
<th>Telefone</th>
|
||||
<th>Status</th>
|
||||
<th>Resposta</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredSolicitacoes() as solicitacao (solicitacao._id)}
|
||||
<tr class="hover">
|
||||
<td class="font-mono text-sm">{formatarData(solicitacao.dataSolicitacao)}</td>
|
||||
<td class="font-semibold">{solicitacao.nome}</td>
|
||||
<td><code class="bg-base-200 px-2 py-1 rounded">{solicitacao.matricula}</code></td>
|
||||
<td class="text-sm">{solicitacao.email}</td>
|
||||
<td class="text-sm">{solicitacao.telefone}</td>
|
||||
<td>
|
||||
<span class="badge {getStatusBadgeClass(solicitacao.status)} badge-lg">
|
||||
{getStatusLabel(solicitacao.status)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="font-mono text-sm">
|
||||
{solicitacao.dataResposta ? formatarData(solicitacao.dataResposta) : "-"}
|
||||
</td>
|
||||
<td>
|
||||
{#if solicitacao.status === "pendente"}
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
onclick={() => abrirModalSolicitacao(solicitacao._id, "aprovar")}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Aprovar
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm"
|
||||
onclick={() => abrirModalSolicitacao(solicitacao._id, "rejeitar")}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Rejeitar
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-base-content/50 text-sm italic">
|
||||
{solicitacao.observacoes || "Sem observações"}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ABA 2: USUÁRIOS -->
|
||||
{#if abaAtiva === "usuarios"}
|
||||
<!-- Estatísticas -->
|
||||
{#if usuariosQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="stat bg-gradient-to-br from-primary/20 to-primary/10 shadow-lg rounded-xl border border-primary/30">
|
||||
<div class="stat-title">Total de Usuários</div>
|
||||
<div class="stat-value text-primary">{usuariosQuery.data.length}</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-success/20 to-success/10 shadow-lg rounded-xl border border-success/30">
|
||||
<div class="stat-title">Ativos</div>
|
||||
<div class="stat-value text-success">
|
||||
{usuariosQuery.data.filter((u: any) => u.ativo).length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-error/20 to-error/10 shadow-lg rounded-xl border border-error/30">
|
||||
<div class="stat-title">Inativos</div>
|
||||
<div class="stat-value text-error">
|
||||
{usuariosQuery.data.filter((u: any) => !u.ativo).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-nome-usuario">
|
||||
<span class="label-text font-semibold">Nome</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro-nome-usuario"
|
||||
type="text"
|
||||
placeholder="Buscar por nome..."
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={filtroNomeUsuario}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-matricula-usuario">
|
||||
<span class="label-text font-semibold">Matrícula</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro-matricula-usuario"
|
||||
type="text"
|
||||
placeholder="Buscar por matrícula..."
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={filtroMatriculaUsuario}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-role-usuario">
|
||||
<span class="label-text font-semibold">Função</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro-role-usuario"
|
||||
class="select select-bordered select-primary w-full"
|
||||
bind:value={filtroRoleUsuario}
|
||||
>
|
||||
<option value="todos">Todos</option>
|
||||
{#if rolesQuery.data}
|
||||
{#each rolesQuery.data as role}
|
||||
<option value={role.nome}>{role.nome}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-status-usuario">
|
||||
<span class="label-text font-semibold">Status</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro-status-usuario"
|
||||
class="select select-bordered select-primary w-full"
|
||||
bind:value={filtroStatusUsuario}
|
||||
>
|
||||
<option value="todos">Todos</option>
|
||||
<option value="ativo">Ativo</option>
|
||||
<option value="inativo">Inativo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela de Usuários -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body p-0">
|
||||
{#if usuariosQuery.isLoading}
|
||||
<div class="flex justify-center items-center p-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if usuariosQuery.error}
|
||||
<div class="alert alert-error m-4">
|
||||
<span>Erro ao carregar usuários: {usuariosQuery.error.message}</span>
|
||||
</div>
|
||||
{:else if filteredUsuarios().length === 0}
|
||||
<div class="text-center py-12 text-base-content/70">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<p class="text-lg font-semibold">Nenhum usuário encontrado</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Nome</th>
|
||||
<th>Matrícula</th>
|
||||
<th>E-mail</th>
|
||||
<th>Função</th>
|
||||
<th>Nível</th>
|
||||
<th>Último Acesso</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredUsuarios() as usuario (usuario._id)}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
{#if usuario.ativo}
|
||||
<span class="badge badge-success badge-lg">🟢 Ativo</span>
|
||||
{:else}
|
||||
<span class="badge badge-error badge-lg">🔴 Inativo</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="font-semibold">{usuario.nome}</td>
|
||||
<td><code class="bg-base-200 px-2 py-1 rounded">{usuario.matricula}</code></td>
|
||||
<td class="text-sm">{usuario.email}</td>
|
||||
<td>
|
||||
<span class="badge badge-primary">{usuario.role.nome}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge badge-outline">{usuario.role.nivel}</span>
|
||||
</td>
|
||||
<td class="font-mono text-sm">
|
||||
{usuario.ultimoAcesso ? formatarData(usuario.ultimoAcesso) : "Nunca"}
|
||||
</td>
|
||||
<td>
|
||||
<div class="dropdown dropdown-end">
|
||||
<button type="button" tabindex="0" class="btn btn-ghost btn-sm">
|
||||
<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52">
|
||||
{#if usuario.ativo}
|
||||
<li><button type="button" onclick={() => abrirModalUsuario(usuario._id, "desativar")} class="text-error">Desativar</button></li>
|
||||
{:else}
|
||||
<li><button type="button" onclick={() => abrirModalUsuario(usuario._id, "ativar")} class="text-success">Ativar</button></li>
|
||||
{/if}
|
||||
<li><button type="button" onclick={() => abrirModalUsuario(usuario._id, "alterar_role")} class="text-primary">Alterar Função/Nível</button></li>
|
||||
<li><button type="button" onclick={() => abrirModalUsuario(usuario._id, "resetar")}>Resetar Senha</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ABA 3: LOGS -->
|
||||
{#if abaAtiva === "logs"}
|
||||
<!-- Estatísticas -->
|
||||
{#if logsQuery.data}
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
|
||||
<div class="stat bg-gradient-to-br from-primary/20 to-primary/10 shadow-lg rounded-xl border border-primary/30">
|
||||
<div class="stat-title">Total</div>
|
||||
<div class="stat-value text-primary text-3xl">{logsQuery.data.length}</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-success/20 to-success/10 shadow-lg rounded-xl border border-success/30">
|
||||
<div class="stat-title">Logins</div>
|
||||
<div class="stat-value text-success text-3xl">
|
||||
{logsQuery.data.filter((log: any) => log.tipo === "login").length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-info/20 to-info/10 shadow-lg rounded-xl border border-info/30">
|
||||
<div class="stat-title">Logouts</div>
|
||||
<div class="stat-value text-info text-3xl">
|
||||
{logsQuery.data.filter((log: any) => log.tipo === "logout").length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-error/20 to-error/10 shadow-lg rounded-xl border border-error/30">
|
||||
<div class="stat-title">Negados</div>
|
||||
<div class="stat-value text-error text-3xl">
|
||||
{logsQuery.data.filter((log: any) => log.tipo === "acesso_negado").length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-warning/20 to-warning/10 shadow-lg rounded-xl border border-warning/30">
|
||||
<div class="stat-title">Outros</div>
|
||||
<div class="stat-value text-warning text-3xl">
|
||||
{logsQuery.data.filter((log: any) => !["login", "logout", "acesso_negado"].includes(log.tipo)).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Filtros e Ações -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title text-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filtros
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-error btn-sm"
|
||||
onclick={() => (modalLimparLogsAberto = true)}
|
||||
>
|
||||
<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>
|
||||
Limpar Histórico
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-tipo-log">
|
||||
<span class="label-text font-semibold">Tipo de Evento</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro-tipo-log"
|
||||
class="select select-bordered select-primary w-full"
|
||||
bind:value={filtroTipoLog}
|
||||
>
|
||||
<option value="todos">Todos</option>
|
||||
<option value="login">Login</option>
|
||||
<option value="logout">Logout</option>
|
||||
<option value="acesso_negado">Acesso Negado</option>
|
||||
<option value="senha_alterada">Senha Alterada</option>
|
||||
<option value="sessao_expirada">Sessão Expirada</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="filtro-usuario-log">
|
||||
<span class="label-text font-semibold">Usuário</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro-usuario-log"
|
||||
type="text"
|
||||
placeholder="Buscar por usuário..."
|
||||
class="input input-bordered input-primary w-full"
|
||||
bind:value={filtroUsuarioLog}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela de Logs -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body p-0">
|
||||
{#if logsQuery.isLoading}
|
||||
<div class="flex justify-center items-center p-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if logsQuery.error}
|
||||
<div class="alert alert-error m-4">
|
||||
<span>Erro ao carregar logs: {logsQuery.error.message}</span>
|
||||
</div>
|
||||
{:else if filteredLogs().length === 0}
|
||||
<div class="text-center py-12 text-base-content/70">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 opacity-50" 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>
|
||||
<p class="text-lg font-semibold">Nenhum log encontrado</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th>Data/Hora</th>
|
||||
<th>Tipo</th>
|
||||
<th>Usuário</th>
|
||||
<th>IP</th>
|
||||
<th>Detalhes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredLogs() as log (log._id)}
|
||||
<tr class="hover">
|
||||
<td class="font-mono text-sm">{formatarData(log.timestamp)}</td>
|
||||
<td>
|
||||
<span class="badge badge-lg">
|
||||
{getTipoLogIcon(log.tipo)} {getTipoLogLabel(log.tipo)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="font-semibold">
|
||||
{log.usuario ? log.usuario.nome : "Sistema"}
|
||||
</td>
|
||||
<td class="font-mono text-sm">
|
||||
{log.ipAddress || "-"}
|
||||
</td>
|
||||
<td class="text-sm text-base-content/70">
|
||||
{log.detalhes || "-"}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal Solicitação -->
|
||||
{#if modalSolicitacaoAberto}
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
{acaoModalSolicitacao === "aprovar" ? "Aprovar Solicitação" : "Rejeitar Solicitação"}
|
||||
</h3>
|
||||
<p class="mb-4">
|
||||
{acaoModalSolicitacao === "aprovar"
|
||||
? "Tem certeza que deseja aprovar esta solicitação de acesso?"
|
||||
: "Tem certeza que deseja rejeitar esta solicitação de acesso?"}
|
||||
</p>
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="observacoes-solicitacao">
|
||||
<span class="label-text">Observações (opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="observacoes-solicitacao"
|
||||
class="textarea textarea-bordered h-24"
|
||||
placeholder="Adicione observações sobre esta decisão..."
|
||||
bind:value={observacoesSolicitacao}
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick={fecharModalSolicitacao}>Cancelar</button>
|
||||
<button
|
||||
class="btn {acaoModalSolicitacao === 'aprovar' ? 'btn-success' : 'btn-error'}"
|
||||
onclick={confirmarAcaoSolicitacao}
|
||||
>
|
||||
{acaoModalSolicitacao === "aprovar" ? "Aprovar" : "Rejeitar"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop" onclick={fecharModalSolicitacao}>
|
||||
<button type="button">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
{/if}
|
||||
|
||||
<!-- Modal Usuário -->
|
||||
{#if modalUsuarioAberto}
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
{acaoModalUsuario === "ativar" ? "Ativar Usuário" :
|
||||
acaoModalUsuario === "desativar" ? "Desativar Usuário" :
|
||||
acaoModalUsuario === "alterar_role" ? "Alterar Função/Nível" : "Resetar Senha"}
|
||||
</h3>
|
||||
|
||||
{#if acaoModalUsuario === "alterar_role"}
|
||||
<p class="mb-4">Selecione a nova função/nível para este usuário:</p>
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="select-role">
|
||||
<span class="label-text font-semibold">Função</span>
|
||||
</label>
|
||||
{#if rolesQuery.isLoading}
|
||||
<div class="flex justify-center p-4">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
</div>
|
||||
{:else if rolesQuery.data && rolesQuery.data.length > 0}
|
||||
<select
|
||||
id="select-role"
|
||||
class="select select-bordered select-primary w-full"
|
||||
bind:value={novaRoleId}
|
||||
>
|
||||
{#each rolesQuery.data as role}
|
||||
<option value={role._id}>
|
||||
{role.nome} (Nível {role.nivel}){#if role.setor} - {role.setor}{/if}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">
|
||||
Quanto menor o nível, maior o acesso (0 = Admin)
|
||||
</span>
|
||||
</label>
|
||||
{:else}
|
||||
<div class="alert alert-warning">
|
||||
<span>Nenhuma função disponível. Verifique se as roles foram criadas no banco de dados.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="mb-4">
|
||||
{acaoModalUsuario === "ativar" ? "Tem certeza que deseja ativar este usuário?" :
|
||||
acaoModalUsuario === "desativar" ? "Tem certeza que deseja desativar este usuário?" :
|
||||
"Tem certeza que deseja resetar a senha deste usuário? A nova senha será 'Mudar@123'."}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick={fecharModalUsuario}>Cancelar</button>
|
||||
<button
|
||||
class="btn {acaoModalUsuario === 'ativar' ? 'btn-success' : acaoModalUsuario === 'alterar_role' ? 'btn-primary' : 'btn-error'}"
|
||||
onclick={confirmarAcaoUsuario}
|
||||
disabled={acaoModalUsuario === 'alterar_role' && !novaRoleId}
|
||||
>
|
||||
Confirmar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop" onclick={fecharModalUsuario}>
|
||||
<button type="button">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
{/if}
|
||||
|
||||
<!-- Modal Limpar Logs -->
|
||||
{#if modalLimparLogsAberto}
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4 text-error">⚠️ Limpar Histórico de Logs</h3>
|
||||
<p class="mb-4">
|
||||
<strong>ATENÇÃO:</strong> Esta ação irá remover TODOS os logs de acesso do sistema.
|
||||
Esta ação é <strong>IRREVERSÍVEL</strong>.
|
||||
</p>
|
||||
<p class="mb-4 text-base-content/70">
|
||||
Tem certeza que deseja continuar?
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick={() => (modalLimparLogsAberto = false)}>Cancelar</button>
|
||||
<button class="btn btn-error" onclick={limparLogs}>
|
||||
<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>
|
||||
Sim, Limpar Tudo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop" onclick={() => (modalLimparLogsAberto = false)}>
|
||||
<button type="button">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
{/if}
|
||||
</main>
|
||||
</ProtectedRoute>
|
||||
@@ -0,0 +1,331 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Buscar matriz de permissões
|
||||
const matrizQuery = useQuery(api.menuPermissoes.obterMatrizPermissoes, {});
|
||||
|
||||
let salvando = $state(false);
|
||||
let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);
|
||||
|
||||
async function atualizarPermissao(
|
||||
roleId: Id<"roles">,
|
||||
menuPath: string,
|
||||
campo: "podeAcessar" | "podeConsultar" | "podeGravar",
|
||||
valor: boolean
|
||||
) {
|
||||
try {
|
||||
salvando = true;
|
||||
|
||||
// Se está marcando podeGravar, deve marcar podeConsultar e podeAcessar também
|
||||
let podeAcessar = valor;
|
||||
let podeConsultar = valor;
|
||||
let podeGravar = campo === "podeGravar" ? valor : false;
|
||||
|
||||
if (campo === "podeConsultar") {
|
||||
podeConsultar = valor;
|
||||
podeGravar = false; // Desmarcar gravar se desmarcou consultar
|
||||
}
|
||||
|
||||
if (campo === "podeAcessar") {
|
||||
podeAcessar = valor;
|
||||
if (!valor) {
|
||||
podeConsultar = false;
|
||||
podeGravar = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Buscar a permissão atual para aplicar lógica correta
|
||||
const roleData = matrizQuery.data?.find((r) => r.role._id === roleId);
|
||||
const permissaoAtual = roleData?.permissoes.find((p) => p.menuPath === menuPath);
|
||||
|
||||
if (permissaoAtual) {
|
||||
// Aplicar lógica de dependências
|
||||
if (campo === "podeGravar" && valor) {
|
||||
podeAcessar = true;
|
||||
podeConsultar = true;
|
||||
podeGravar = true;
|
||||
} else if (campo === "podeConsultar" && valor) {
|
||||
podeAcessar = true;
|
||||
podeConsultar = true;
|
||||
podeGravar = permissaoAtual.podeGravar;
|
||||
} else if (campo === "podeAcessar" && !valor) {
|
||||
podeAcessar = false;
|
||||
podeConsultar = false;
|
||||
podeGravar = false;
|
||||
} else if (campo === "podeConsultar" && !valor) {
|
||||
podeAcessar = permissaoAtual.podeAcessar;
|
||||
podeConsultar = false;
|
||||
podeGravar = false;
|
||||
} else if (campo === "podeGravar" && !valor) {
|
||||
podeAcessar = permissaoAtual.podeAcessar;
|
||||
podeConsultar = permissaoAtual.podeConsultar;
|
||||
podeGravar = false;
|
||||
} else {
|
||||
podeAcessar = permissaoAtual.podeAcessar;
|
||||
podeConsultar = permissaoAtual.podeConsultar;
|
||||
podeGravar = permissaoAtual.podeGravar;
|
||||
}
|
||||
}
|
||||
|
||||
await client.mutation(api.menuPermissoes.atualizarPermissao, {
|
||||
roleId,
|
||||
menuPath,
|
||||
podeAcessar,
|
||||
podeConsultar,
|
||||
podeGravar,
|
||||
});
|
||||
|
||||
mensagem = { tipo: "success", texto: "Permissão atualizada com sucesso!" };
|
||||
setTimeout(() => {
|
||||
mensagem = null;
|
||||
}, 3000);
|
||||
} catch (e: any) {
|
||||
mensagem = { tipo: "error", texto: e.message || "Erro ao atualizar permissão" };
|
||||
} finally {
|
||||
salvando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function inicializarPermissoes(roleId: Id<"roles">) {
|
||||
try {
|
||||
salvando = true;
|
||||
await client.mutation(api.menuPermissoes.inicializarPermissoesRole, { roleId });
|
||||
mensagem = { tipo: "success", texto: "Permissões inicializadas!" };
|
||||
setTimeout(() => {
|
||||
mensagem = null;
|
||||
}, 3000);
|
||||
} catch (e: any) {
|
||||
mensagem = { tipo: "error", texto: e.message || "Erro ao inicializar permissões" };
|
||||
} finally {
|
||||
salvando = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" class="text-primary hover:text-primary-focus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
|
||||
</li>
|
||||
<li class="font-semibold">Gerenciar Permissões</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-3 bg-primary/10 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-base-content">Gerenciar Permissões de Acesso</h1>
|
||||
<p class="text-base-content/60 mt-1">Configure as permissões de acesso aos menus do sistema por função</p>
|
||||
</div>
|
||||
<button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Voltar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if mensagem}
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={mensagem.tipo === "success"} class:alert-error={mensagem.tipo === "error"}>
|
||||
{#if mensagem.tipo === "success"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{mensagem.texto}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Informações sobre o sistema de permissões -->
|
||||
<div class="alert alert-info mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Como funciona:</h3>
|
||||
<ul class="text-sm mt-2 space-y-1">
|
||||
<li>• <strong>Acessar:</strong> Permite visualizar o menu e entrar na página</li>
|
||||
<li>• <strong>Consultar:</strong> Permite visualizar dados (requer "Acessar")</li>
|
||||
<li>• <strong>Gravar:</strong> Permite criar, editar e excluir dados (requer "Consultar")</li>
|
||||
<li>• <strong>Admin e TI:</strong> Têm acesso total automático a todos os recursos</li>
|
||||
<li>• <strong>Dashboard e Solicitar Acesso:</strong> São públicos para todos os usuários</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Matriz de Permissões -->
|
||||
{#if matrizQuery.isLoading}
|
||||
<div class="flex justify-center items-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if matrizQuery.error}
|
||||
<div class="alert alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Erro ao carregar permissões: {matrizQuery.error.message}</span>
|
||||
</div>
|
||||
{:else if matrizQuery.data}
|
||||
{#each matrizQuery.data as roleData}
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="card-title text-xl">
|
||||
{roleData.role.nome}
|
||||
<div class="badge badge-primary">Nível {roleData.role.nivel}</div>
|
||||
{#if roleData.role.nivel <= 1}
|
||||
<div class="badge badge-success">Acesso Total</div>
|
||||
{/if}
|
||||
</h2>
|
||||
<p class="text-sm text-base-content/60 mt-1">{roleData.role.descricao}</p>
|
||||
</div>
|
||||
|
||||
{#if roleData.role.nivel > 1}
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
onclick={() => inicializarPermissoes(roleData.role._id)}
|
||||
disabled={salvando}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
Inicializar Permissões
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if roleData.role.nivel <= 1}
|
||||
<div class="alert alert-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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>
|
||||
<span>Esta função possui acesso total ao sistema automaticamente.</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra table-sm">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th class="w-1/3">Menu</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
Acessar
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Consultar
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Gravar
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each roleData.permissoes as permissao}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-semibold">{permissao.menuNome}</span>
|
||||
<span class="text-xs text-base-content/60">{permissao.menuPath}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
checked={permissao.podeAcessar}
|
||||
disabled={salvando}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(
|
||||
roleData.role._id,
|
||||
permissao.menuPath,
|
||||
"podeAcessar",
|
||||
e.currentTarget.checked
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-info"
|
||||
checked={permissao.podeConsultar}
|
||||
disabled={salvando || !permissao.podeAcessar}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(
|
||||
roleData.role._id,
|
||||
permissao.menuPath,
|
||||
"podeConsultar",
|
||||
e.currentTarget.checked
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-success"
|
||||
checked={permissao.podeGravar}
|
||||
disabled={salvando || !permissao.podeConsultar}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(
|
||||
roleData.role._id,
|
||||
permissao.menuPath,
|
||||
"podeGravar",
|
||||
e.currentTarget.checked
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</ProtectedRoute>
|
||||
|
||||
@@ -0,0 +1,383 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
let matriculaBusca = $state("");
|
||||
let usuarioEncontrado = $state<any>(null);
|
||||
let buscando = $state(false);
|
||||
let salvando = $state(false);
|
||||
let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);
|
||||
|
||||
// Buscar permissões personalizadas do usuário
|
||||
const permissoesQuery = $derived(
|
||||
usuarioEncontrado
|
||||
? useQuery(api.menuPermissoes.listarPermissoesPersonalizadas, {
|
||||
matricula: usuarioEncontrado.matricula,
|
||||
})
|
||||
: null
|
||||
);
|
||||
|
||||
// Buscar menus disponíveis
|
||||
const menusQuery = useQuery(api.menuPermissoes.listarMenus, {});
|
||||
|
||||
async function buscarUsuario() {
|
||||
if (!matriculaBusca.trim()) {
|
||||
mensagem = { tipo: "error", texto: "Digite uma matrícula para buscar" };
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
buscando = true;
|
||||
const usuario = await client.query(api.menuPermissoes.buscarUsuarioPorMatricula, {
|
||||
matricula: matriculaBusca.trim(),
|
||||
});
|
||||
|
||||
if (usuario) {
|
||||
usuarioEncontrado = usuario;
|
||||
mensagem = null;
|
||||
} else {
|
||||
usuarioEncontrado = null;
|
||||
mensagem = { tipo: "error", texto: "Usuário não encontrado com esta matrícula" };
|
||||
}
|
||||
} catch (e: any) {
|
||||
mensagem = { tipo: "error", texto: e.message || "Erro ao buscar usuário" };
|
||||
} finally {
|
||||
buscando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function atualizarPermissao(
|
||||
menuPath: string,
|
||||
campo: "podeAcessar" | "podeConsultar" | "podeGravar",
|
||||
valor: boolean
|
||||
) {
|
||||
if (!usuarioEncontrado) return;
|
||||
|
||||
try {
|
||||
salvando = true;
|
||||
|
||||
// Obter permissão atual do menu
|
||||
const permissaoAtual = permissoesQuery?.data?.find((p) => p.menuPath === menuPath);
|
||||
|
||||
let podeAcessar = valor;
|
||||
let podeConsultar = false;
|
||||
let podeGravar = false;
|
||||
|
||||
// Aplicar lógica de dependências
|
||||
if (campo === "podeGravar" && valor) {
|
||||
podeAcessar = true;
|
||||
podeConsultar = true;
|
||||
podeGravar = true;
|
||||
} else if (campo === "podeConsultar" && valor) {
|
||||
podeAcessar = true;
|
||||
podeConsultar = true;
|
||||
podeGravar = permissaoAtual?.podeGravar || false;
|
||||
} else if (campo === "podeAcessar" && !valor) {
|
||||
podeAcessar = false;
|
||||
podeConsultar = false;
|
||||
podeGravar = false;
|
||||
} else if (campo === "podeConsultar" && !valor) {
|
||||
podeAcessar = permissaoAtual?.podeAcessar !== undefined ? permissaoAtual.podeAcessar : false;
|
||||
podeConsultar = false;
|
||||
podeGravar = false;
|
||||
} else if (campo === "podeGravar" && !valor) {
|
||||
podeAcessar = permissaoAtual?.podeAcessar !== undefined ? permissaoAtual.podeAcessar : false;
|
||||
podeConsultar = permissaoAtual?.podeConsultar !== undefined ? permissaoAtual.podeConsultar : false;
|
||||
podeGravar = false;
|
||||
} else if (permissaoAtual) {
|
||||
podeAcessar = permissaoAtual.podeAcessar;
|
||||
podeConsultar = permissaoAtual.podeConsultar;
|
||||
podeGravar = permissaoAtual.podeGravar;
|
||||
}
|
||||
|
||||
await client.mutation(api.menuPermissoes.atualizarPermissaoPersonalizada, {
|
||||
matricula: usuarioEncontrado.matricula,
|
||||
menuPath,
|
||||
podeAcessar,
|
||||
podeConsultar,
|
||||
podeGravar,
|
||||
});
|
||||
|
||||
mensagem = { tipo: "success", texto: "Permissão personalizada atualizada!" };
|
||||
setTimeout(() => {
|
||||
mensagem = null;
|
||||
}, 3000);
|
||||
} catch (e: any) {
|
||||
mensagem = { tipo: "error", texto: e.message || "Erro ao atualizar permissão" };
|
||||
} finally {
|
||||
salvando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function limparBusca() {
|
||||
matriculaBusca = "";
|
||||
usuarioEncontrado = null;
|
||||
mensagem = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" class="text-primary hover:text-primary-focus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
|
||||
</li>
|
||||
<li class="font-semibold">Personalizar Permissões</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-3 bg-info/10 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-base-content">Personalizar Permissões por Matrícula</h1>
|
||||
<p class="text-base-content/60 mt-1">Configure permissões específicas para usuários individuais</p>
|
||||
</div>
|
||||
<button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Voltar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertas -->
|
||||
{#if mensagem}
|
||||
<div class="alert mb-6 shadow-lg" class:alert-success={mensagem.tipo === "success"} class:alert-error={mensagem.tipo === "error"}>
|
||||
{#if mensagem.tipo === "success"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{mensagem.texto}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Card de Busca -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Buscar Usuário</h2>
|
||||
<p class="text-sm text-base-content/60">Digite a matrícula do usuário para personalizar suas permissões</p>
|
||||
|
||||
<div class="flex gap-4 mt-4">
|
||||
<div class="form-control flex-1">
|
||||
<label class="label" for="matricula-busca">
|
||||
<span class="label-text font-semibold">Matrícula</span>
|
||||
</label>
|
||||
<input
|
||||
id="matricula-busca"
|
||||
type="text"
|
||||
class="input input-bordered input-primary w-full"
|
||||
placeholder="Digite a matrícula..."
|
||||
bind:value={matriculaBusca}
|
||||
disabled={buscando}
|
||||
onkeydown={(e) => e.key === "Enter" && buscarUsuario()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-end gap-2">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={buscarUsuario}
|
||||
disabled={buscando || !matriculaBusca.trim()}
|
||||
>
|
||||
{#if buscando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
{/if}
|
||||
Buscar
|
||||
</button>
|
||||
|
||||
{#if usuarioEncontrado}
|
||||
<button class="btn btn-ghost" onclick={limparBusca}>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Limpar
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informações do Usuário -->
|
||||
{#if usuarioEncontrado}
|
||||
<div class="card bg-gradient-to-br from-info/10 to-info/5 shadow-xl mb-6 border-2 border-info/20">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-info text-info-content rounded-full w-16">
|
||||
<span class="text-2xl font-bold">{usuarioEncontrado.nome.charAt(0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold">{usuarioEncontrado.nome}</h3>
|
||||
<div class="flex gap-4 mt-1 text-sm">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
<strong>Matrícula:</strong> {usuarioEncontrado.matricula}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<strong>Email:</strong> {usuarioEncontrado.email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<div class="badge badge-primary badge-lg">
|
||||
Nível {usuarioEncontrado.role.nivel}
|
||||
</div>
|
||||
<p class="text-sm mt-1">{usuarioEncontrado.role.descricao}</p>
|
||||
<div class="badge mt-2" class:badge-success={usuarioEncontrado.ativo} class:badge-error={!usuarioEncontrado.ativo}>
|
||||
{usuarioEncontrado.ativo ? "Ativo" : "Inativo"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabela de Permissões -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Permissões Personalizadas</h2>
|
||||
<div class="alert alert-info mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm">
|
||||
<strong>Permissões personalizadas sobrepõem as permissões da função.</strong><br />
|
||||
Configure apenas os menus que deseja personalizar para este usuário.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if menusQuery.isLoading}
|
||||
<div class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if menusQuery.data}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra table-sm">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th class="w-1/3">Menu</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
Acessar
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Consultar
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Gravar
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each menusQuery.data as menu}
|
||||
{@const permissao = permissoesQuery?.data?.find((p) => p.menuPath === menu.path)}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-semibold">{menu.nome}</span>
|
||||
<span class="text-xs text-base-content/60">{menu.path}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
checked={permissao?.podeAcessar || false}
|
||||
disabled={salvando}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(menu.path, "podeAcessar", e.currentTarget.checked)}
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-info"
|
||||
checked={permissao?.podeConsultar || false}
|
||||
disabled={salvando || !permissao?.podeAcessar}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(menu.path, "podeConsultar", e.currentTarget.checked)}
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-success"
|
||||
checked={permissao?.podeGravar || false}
|
||||
disabled={salvando || !permissao?.podeConsultar}
|
||||
onchange={(e) =>
|
||||
atualizarPermissao(menu.path, "podeGravar", e.currentTarget.checked)}
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if permissao}
|
||||
<div class="badge badge-warning badge-sm">Personalizado</div>
|
||||
{:else}
|
||||
<div class="badge badge-ghost badge-sm">Padrão da Função</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</ProtectedRoute>
|
||||
|
||||
Reference in New Issue
Block a user