From 7621fbea36219c761dc36b3fc534253ee48cd481 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Thu, 4 Dec 2025 17:06:59 -0300
Subject: [PATCH] feat: replace SVG icons with Lucide components in the Central
 de Chamados page for improved consistency and maintainability

---
 .../ti/central-chamados/+page.svelte          | 151 ++----------------
 1 file changed, 11 insertions(+), 140 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
index 64e998d..d6e4132 100644
--- a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
@@ -7,6 +7,7 @@
 	import { useConvexWithAuth } from '$lib/hooks/useConvexWithAuth';
 	import SlaChart from '$lib/components/chamados/SlaChart.svelte';
 	import { resolve } from '$app/paths';
+	import { MessageSquare, BarChart3, FileText, Clock, User, Info, MessageCircle, UserPlus } from 'lucide-svelte';
 
 	type Ticket = Doc<'tickets'>;
 	type Usuario = Doc<'usuarios'>;
@@ -701,20 +702,7 @@
 	<div class="mb-6">
 		<div class="mb-2 flex items-center gap-4">
 			<div class="bg-info/20 rounded-xl p-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="text-info h-8 w-8"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
-					/>
-				</svg>
+				<MessageSquare class="text-info h-8 w-8" strokeWidth={2} />
 			</div>
 			<div>
 				<h1 class="text-primary text-3xl font-bold">Central de Chamados</h1>
@@ -731,60 +719,21 @@
 			class="tab flex items-center gap-2 {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
 			onclick={() => (abaAtiva = 'dashboard')}
 		>
-			<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>
+			<BarChart3 class="h-5 w-5" strokeWidth={2} />
 			<span class="font-medium">Dashboard</span>
 		</button>
 		<button
 			class="tab flex items-center gap-2 {abaAtiva === 'chamados' ? 'tab-active' : ''}"
 			onclick={() => (abaAtiva = 'chamados')}
 		>
-			<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 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-5 w-5" strokeWidth={2} />
 			<span class="font-medium">Painel de Chamados</span>
 		</button>
 		<button
 			class="tab flex items-center gap-2 {abaAtiva === 'sla' ? 'tab-active' : ''}"
 			onclick={() => (abaAtiva = 'sla')}
 		>
-			<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>
+			<Clock class="h-5 w-5" strokeWidth={2} />
 			<span class="font-medium">Configurações SLA</span>
 		</button>
 	</div>
@@ -1005,20 +954,7 @@
 					class="border-base-300 bg-base-100/50 rounded-3xl border-2 border-dashed p-12 text-center shadow-lg"
 				>
 					<div class="mx-auto max-w-md">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-base-content/30 mx-auto mb-4 h-16 w-16"
-							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="text-base-content/30 mx-auto mb-4 h-16 w-16" strokeWidth={2} />
 						<h3 class="text-base-content mb-2 text-xl font-semibold">Nenhum chamado selecionado</h3>
 						<p class="text-base-content/60 text-sm">
 							Selecione um chamado na tabela acima para visualizar detalhes e realizar ações.
@@ -1047,39 +983,13 @@
 								</h2>
 								<div class="text-base-content/70 flex flex-wrap items-center gap-4 text-sm">
 									<div class="flex items-center 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-											/>
-										</svg>
+										<User class="h-4 w-4" strokeWidth={2} />
 										<span class="font-semibold">Solicitante:</span>
 										<span>{detalheSelecionado.solicitanteNome}</span>
 									</div>
 									{#if detalheSelecionado.prazoConclusao}
 										<div class="flex items-center 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-												/>
-											</svg>
+											<Clock class="h-4 w-4" strokeWidth={2} />
 											<span class="font-semibold">Prazo:</span>
 											<span>{prazoRestante(detalheSelecionado.prazoConclusao) ?? '--'}</span>
 										</div>
@@ -1094,20 +1004,7 @@
 						<!-- Detalhes do Chamado -->
 						<div class="border-primary/20 bg-base-100/90 rounded-3xl border-2 p-6 shadow-lg">
 							<div class="mb-4 flex items-center gap-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="text-primary 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>
+								<Info class="text-primary h-5 w-5" strokeWidth={2} />
 								<h3 class="text-base-content text-lg font-semibold">Detalhes do chamado</h3>
 							</div>
 							<div class="space-y-4">
@@ -1141,20 +1038,7 @@
 						<!-- Responder Chamado -->
 						<div class="border-primary/20 bg-base-100/90 rounded-3xl border-2 p-6 shadow-lg">
 							<div class="mb-4 flex items-center gap-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="text-primary 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-									/>
-								</svg>
+								<MessageCircle class="text-primary h-5 w-5" strokeWidth={2} />
 								<h3 class="text-base-content text-lg font-semibold">Responder chamado</h3>
 							</div>
 							<div class="space-y-4">
@@ -1244,20 +1128,7 @@
 						<!-- Atribuir Responsável -->
 						<div class="border-primary/20 bg-base-100/90 rounded-3xl border-2 p-6 shadow-lg">
 							<div class="mb-4 flex items-center gap-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="text-primary 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>
+								<UserPlus class="text-primary h-5 w-5" strokeWidth={2} />
 								<h3 class="text-base-content text-lg font-semibold">Atribuir responsável</h3>
 							</div>
 							<div class="space-y-3">