From 300dfe7fc9e2fa643f95708b87e36983a84b4045 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Thu, 4 Dec 2025 15:58:38 -0300
Subject: [PATCH] feat: replace SVG icons with Lucide components in email
 configuration and dashboard pages for enhanced consistency and
 maintainability

---
 apps/web/src/routes/(dashboard)/+page.svelte  |  92 +-----------
 .../funcionarios/relatorios/+page.svelte      |  58 +-------
 .../ti/configuracoes-email/+page.svelte       | 134 ++++--------------
 3 files changed, 38 insertions(+), 246 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/+page.svelte b/apps/web/src/routes/(dashboard)/+page.svelte
index 7c14623..e94ed26 100644
--- a/apps/web/src/routes/(dashboard)/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/+page.svelte
@@ -5,7 +5,7 @@
 	import { goto, replaceState } from '$app/navigation';
 	import { afterNavigate } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { UserPlus, Mail } from 'lucide-svelte';
+	import { UserPlus, Mail, Clock, Award, TrendingUp, Zap, Users, Database } from 'lucide-svelte';
 	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
 	import { loginModalStore } from '$lib/stores/loginModal.svelte';
 
@@ -248,20 +248,7 @@
 								<p class="text-base-content/60 mt-1 text-xs">de 5 total</p>
 							</div>
 							<div class="bg-warning/20 rounded-full p-4">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="text-warning 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="text-warning h-8 w-8" strokeWidth={2} />
 							</div>
 						</div>
 					</div>
@@ -283,20 +270,7 @@
 								</p>
 							</div>
 							<div class="bg-success/20 rounded-full p-4">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="text-success 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>
+								<Award class="text-success h-8 w-8" strokeWidth={2} />
 							</div>
 						</div>
 					</div>
@@ -316,20 +290,7 @@
 									</p>
 								</div>
 								<div class="bg-secondary/20 rounded-full p-4">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="text-secondary h-8 w-8"
-										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>
+									<TrendingUp class="text-secondary h-8 w-8" strokeWidth={2} />
 								</div>
 							</div>
 						</div>
@@ -357,20 +318,7 @@
 				<div class="mb-6">
 					<div class="mb-4 flex items-center gap-3">
 						<div class="bg-error/10 animate-pulse rounded-lg p-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="text-error h-6 w-6"
-								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>
+							<Zap class="text-error h-6 w-6" strokeWidth={2} />
 						</div>
 						<div>
 							<h2 class="text-base-content text-2xl font-bold">Monitoramento em Tempo Real</h2>
@@ -407,20 +355,7 @@
 										<p class="text-base-content/60 mt-1 text-xs">sessões ativas</p>
 									</div>
 									<div class="bg-primary/20 rounded-full p-3">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-primary h-6 w-6"
-											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>
+										<Users class="text-primary h-6 w-6" strokeWidth={2} />
 									</div>
 								</div>
 							</div>
@@ -442,20 +377,7 @@
 										<p class="text-base-content/60 mt-1 text-xs">no banco de dados</p>
 									</div>
 									<div class="bg-success/20 rounded-full p-3">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-success h-6 w-6"
-											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>
+										<Database class="text-success h-6 w-6" strokeWidth={2} />
 									</div>
 								</div>
 							</div>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
index 12d2799..a44036b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
@@ -3,6 +3,7 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import { onMount } from 'svelte';
 	import { resolve } from '$app/paths';
+	import { BarChart3, Info, DollarSign, Users } from 'lucide-svelte';
 
 	const client = useConvexClient();
 
@@ -114,20 +115,7 @@
 	<!-- Header -->
 	<div class="mb-8 flex items-center gap-4">
 		<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 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>
+			<BarChart3 class="text-primary h-8 w-8" strokeWidth={2} />
 		</div>
 		<div>
 			<h1 class="text-base-content text-3xl font-bold">Relatórios de Funcionários</h1>
@@ -143,19 +131,7 @@
 			class:alert-error={notice.kind === 'error'}
 			class:alert-success={notice.kind === 'success'}
 		>
-			<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} />
 			<span>{notice.text}</span>
 		</div>
 	{/if}
@@ -173,20 +149,7 @@
 				<div class="card-body p-6">
 					<div class="mb-6 flex items-center gap-3">
 						<div class="bg-primary/10 rounded-lg p-2.5">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="text-primary h-6 w-6"
-								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>
+							<DollarSign class="text-primary h-6 w-6" strokeWidth={2} />
 						</div>
 						<div class="flex-1">
 							<h3 class="text-base-content text-lg font-bold">
@@ -333,17 +296,8 @@
 				<div class="card-body p-6">
 					<div class="mb-6 flex items-center gap-3">
 						<div class="bg-secondary/10 rounded-lg p-2.5">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="text-secondary h-6 w-6"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
+							<Users class="text-secondary h-6 w-6" strokeWidth={2} />
+						</div>
 									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>
diff --git a/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte b/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
index 3e316e6..e82e214 100644
--- a/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
@@ -3,6 +3,7 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import type { FunctionReference } from 'convex/server';
+	import { Mail, CheckCircle, XCircle, AlertTriangle, Save, Info } from 'lucide-svelte';
 
 	const client = useConvexClient();
 	const currentUser = useQuery(api.auth.getCurrentUser as FunctionReference<'query'>);
@@ -175,20 +176,7 @@
 	<div class="mb-6 flex items-center justify-between">
 		<div class="flex items-center gap-4">
 			<div class="bg-secondary/10 rounded-xl p-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="text-secondary h-8 w-8"
-					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>
+				<Mail class="text-secondary h-8 w-8" strokeWidth={2} />
 			</div>
 			<div>
 				<h1 class="text-base-content text-3xl font-bold">Configurações de Email (SMTP)</h1>
@@ -206,28 +194,11 @@
 			class:alert-success={mensagem.tipo === 'success'}
 			class:alert-error={mensagem.tipo === '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"
-			>
-				{#if mensagem.tipo === '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>
+			{#if mensagem.tipo === 'success'}
+				<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+			{:else}
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+			{/if}
 			<span>{mensagem.texto}</span>
 		</div>
 	{/if}
@@ -243,28 +214,11 @@
 	<!-- Status -->
 	{#if !isLoading}
 		<div class="alert {configAtual?.data?.ativo ? 'alert-success' : 'alert-warning'} mb-6">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				class="h-6 w-6 shrink-0 stroke-current"
-			>
-				{#if configAtual?.data?.ativo}
-					<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="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"
-					/>
-				{/if}
-			</svg>
+			{#if configAtual?.data?.ativo}
+				<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+			{:else}
+				<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+			{/if}
 			<span>
 				<strong>Status:</strong>
 				{statusConfig}
@@ -419,25 +373,12 @@
 						onclick={testarConexao}
 						disabled={testando || processando}
 					>
-						{#if testando}
-							<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-								/>
-							</svg>
-						{/if}
-						Testar Conexão
+					{#if testando}
+						<span class="loading loading-spinner loading-sm"></span>
+					{:else}
+						<CheckCircle class="h-5 w-5" strokeWidth={2} />
+					{/if}
+					Testar Conexão
 					</button>
 
 					<button
@@ -445,25 +386,12 @@
 						onclick={salvarConfiguracao}
 						disabled={processando || testando}
 					>
-						{#if processando}
-							<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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-								/>
-							</svg>
-						{/if}
-						Salvar Configuração
+					{#if processando}
+						<span class="loading loading-spinner loading-sm"></span>
+					{:else}
+						<Save class="h-5 w-5" strokeWidth={2} />
+					{/if}
+					Salvar Configuração
 					</button>
 				</div>
 			</div>
@@ -518,19 +446,7 @@
 
 	<!-- Avisos -->
 	<div class="alert alert-info mt-6">
-		<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>
 			<p>
 				<strong>Dica de Segurança:</strong> Para Gmail e outros provedores, você pode precisar gerar