feat: replace SVG icons with Lucide components in user management and dashboard pages for improved consistency and maintainability

This commit is contained in:
2025-12-05 04:44:43 -03:00
parent 7621fbea36
commit 6e659514e3
5 changed files with 118 additions and 807 deletions

View File

@@ -5,6 +5,17 @@
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import {
Home,
ShieldCheck,
Plus,
ArrowLeft,
CheckCircle,
XCircle,
Search,
X,
ChevronDown
} from 'lucide-svelte';
const client = useConvexClient();
@@ -216,20 +227,7 @@
<ul>
<li>
<a href={resolve('/')} 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>
<Home class="h-4 w-4" strokeWidth={2} />
Dashboard
</a>
</li>
@@ -244,20 +242,7 @@
<div class="mb-6">
<div class="mb-2 flex flex-wrap items-center gap-3">
<div class="bg-primary/10 rounded-xl p-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary 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-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>
<ShieldCheck class="text-primary h-8 w-8" strokeWidth={2} />
</div>
<div class="flex-1">
<h1 class="text-base-content text-3xl font-bold">
@@ -268,37 +253,11 @@
</p>
</div>
<button class="btn btn-primary gap-2" onclick={abrirModalNovoPerfil}>
<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 4v16m8-8H4"
/>
</svg>
<Plus class="h-5 w-5" strokeWidth={2} />
Criar novo perfil
</button>
<button class="btn gap-2" onclick={() => goto(resolve('/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>
<ArrowLeft class="h-5 w-5" strokeWidth={2} />
Voltar
</button>
</div>
@@ -312,33 +271,9 @@
class:alert-error={mensagem.tipo === 'error'}
>
{#if mensagem.tipo === 'success'}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
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>
<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
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>
<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
{/if}
<span class="font-semibold">{mensagem.texto}</span>
</div>
@@ -361,20 +296,7 @@
class="input input-bordered w-full pr-10"
bind:value={busca}
/>
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-base-content/40 absolute top-3.5 right-3 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>
<Search class="text-base-content/40 absolute top-3.5 right-3 h-5 w-5" strokeWidth={2} />
</div>
</div>
@@ -431,39 +353,14 @@
</div>
{:else if rolesQuery.error}
<div class="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
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>
<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<span>Erro ao carregar perfis: {rolesQuery.error.message}</span>
</div>
{:else if rolesQuery.data && catalogoQuery.data}
{#if rolesFiltradas.length === 0}
<div class="card bg-base-100 shadow-xl">
<div class="card-body items-center text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-base-content/30 h-16 w-16"
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>
<Search class="text-base-content/30 h-16 w-16" strokeWidth={2} />
<h3 class="mt-4 text-xl font-bold">Nenhum resultado encontrado</h3>
<p class="text-base-content/60">
{busca
@@ -496,20 +393,7 @@
</div>
{#if roleRow.nivel <= 1}
<div class="badge badge-lg badge-success 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<CheckCircle class="h-4 w-4" strokeWidth={2} />
Acesso Total
</div>
{/if}
@@ -522,19 +406,7 @@
{#if roleRow.nivel <= 1}
<div class="alert alert-success shadow-md">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
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>
<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<div>
<h3 class="font-bold">Perfil Administrativo</h3>
<div class="text-sm">
@@ -556,21 +428,11 @@
disabled={salvando}
>
<span class="text-lg font-semibold">{item.recurso}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
<ChevronDown
class="h-5 w-5 transition-transform"
class:rotate-180={recursoExpandido}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
strokeWidth={2}
/>
</button>
<!-- Lista de ações (visível quando expandido) -->