SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
deyvisonwanderley
2025-12-04 15:34:24 -03:00
parent 88f25dc6ab
commit eb7f3507d3
14 changed files with 151 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import { resolve } from '$app/paths';
import WidgetGestaoPontos from '$lib/components/ponto/WidgetGestaoPontos.svelte';
import { Clock, ChevronRight, Info } from 'lucide-svelte';
const menuItems = [
{
categoria: 'Gestão de Ausências',
descricao: 'Gerencie solicitações de ausências e aprovações',
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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>`,
iconComponent: Clock,
gradient: 'from-orange-500/10 to-orange-600/20',
accentColor: 'text-orange-600',
bgIcon: 'bg-orange-500/20',
@@ -16,9 +16,7 @@
nome: 'Gestão de Ausências',
descricao: 'Visualizar e gerenciar solicitações de ausências',
href: '/secretaria-executiva/gestao-ausencias',
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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>`
iconComponent: Clock
}
]
}
@@ -48,9 +46,7 @@
<!-- Cabeçalho da Categoria -->
<div class="mb-6 flex items-start gap-6">
<div class="p-4 {categoria.bgIcon} rounded-2xl">
<div class={categoria.accentColor}>
{@html categoria.icon}
</div>
<svelte:component this={categoria.iconComponent} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
</div>
<div class="flex-1">
<h2 class="card-title mb-2 text-2xl {categoria.accentColor}">
@@ -72,24 +68,9 @@
<div
class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
>
<div class="{categoria.accentColor} group-hover:text-white">
{@html opcao.icon}
</div>
<svelte:component this={opcao.iconComponent} class="h-5 w-5 {categoria.accentColor} group-hover:text-white" strokeWidth={2} />
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-base-content/30 group-hover:text-primary h-5 w-5 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>
<ChevronRight class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300" strokeWidth={2} />
</div>
<h3
class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
@@ -115,19 +96,7 @@
<!-- Card de Ajuda -->
<div class="alert alert-info mt-8 shadow-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<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>
<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<div>
<h3 class="font-bold">Precisa de ajuda?</h3>
<div class="text-sm">

147
apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
View File

@@ -5,6 +5,7 @@
import { api } from '@sgse-app/backend/convex/_generated/api';
import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import { Clock, ArrowLeft, FileText, CheckCircle, XCircle, Info, Eye } from 'lucide-svelte';
const client = useConvexClient();
const currentUser = useQuery(api.auth.getCurrentUser, {});
@@ -86,20 +87,7 @@
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="rounded-xl bg-orange-500/20 p-3">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Clock class="h-8 w-8 text-orange-600" strokeWidth={2} />
</div>
<div>
<h1 class="text-primary text-3xl font-bold">Gestão de Ausências</h1>
@@ -107,20 +95,7 @@
</div>
</div>
<button class="btn gap-2" onclick={() => goto(resolve('/secretaria-executiva'))}>
<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>
@@ -130,20 +105,7 @@
<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
<div class="stat-figure text-orange-500">
<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 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>
<FileText class="h-8 w-8" strokeWidth={2} />
</div>
<div class="stat-title">Total</div>
<div class="stat-value text-orange-500">{stats.total}</div>
@@ -152,20 +114,7 @@
<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
<div class="stat-figure text-warning">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Clock class="h-8 w-8" strokeWidth={2} />
</div>
<div class="stat-title">Pendentes</div>
<div class="stat-value text-warning">{stats.aguardando}</div>
@@ -174,20 +123,7 @@
<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
<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>
<CheckCircle class="h-8 w-8" strokeWidth={2} />
</div>
<div class="stat-title">Aprovadas</div>
<div class="stat-value text-success">{stats.aprovadas}</div>
@@ -196,20 +132,7 @@
<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
<div class="stat-figure text-error">
<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="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-8 w-8" strokeWidth={2} />
</div>
<div class="stat-title">Reprovadas</div>
<div class="stat-value text-error">{stats.reprovadas}</div>
@@ -246,19 +169,7 @@
{#if ausenciasFiltradas.length === 0}
<div class="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="stroke-info h-6 w-6 shrink-0"
>
<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>
<Info class="stroke-info h-6 w-6 shrink-0" strokeWidth={2} />
<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
</div>
{:else}
@@ -320,26 +231,7 @@
class="btn btn-primary btn-sm gap-2"
onclick={() => selecionarSolicitacao(ausencia._id)}
>
<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>
<Eye class="h-4 w-4" strokeWidth={2} />
Ver Detalhes
</button>
{:else}
@@ -348,26 +240,7 @@
class="btn btn-sm gap-2"
onclick={() => selecionarSolicitacao(ausencia._id)}
>
<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>
<Eye class="h-4 w-4" strokeWidth={2} />
Ver Detalhes
</button>
{/if}