feat: enhance employee and symbol management with new features, improved UI components, and backend schema updates
This commit is contained in:
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>
|
||||
|
||||
Reference in New Issue
Block a user