feat: added icons

Author: grv-saini-20

infrastructure/control-panel/src/lib/fragments/TableCardHeader/TableCardHeader.svelte

@@ -1,21 +1,33 @@
 <script lang="ts">
+	import { Search01FreeIcons } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+
 	let {
 		title,
 		searchValue = $bindable(''),
 		rightTitle,
 		placeholder
-	}: { title: string; searchValue: string; rightTitle: string, placeholder: string } = $props();
+	}: { title: string; searchValue: string; rightTitle: string; placeholder: string } = $props();
 </script>
 
 <header class="mb-4 flex w-full items-center justify-between px-4">
 	<div class="flex items-center gap-4">
 		<p class="text-black-700 font-semibold whitespace-nowrap">{title}</p>
-		<input
-			type="text"
-			placeholder={placeholder}
-			bind:value={searchValue}
-			class="bg-black-100 text-black-700 placeholder:text-black-700 w-full rounded-[8px] border border-gray-300 px-4 py-1.5 text-xs outline-0"
-		/>
+		<div class="relative w-full">
+			<input
+				type="text"
+				{placeholder}
+				bind:value={searchValue}
+				class="bg-black-100 text-black-700 placeholder:text-black-700 w-full rounded-[8px] border border-gray-300 px-4 py-1.5 pr-10 text-xs outline-0"
+			/>
+			<span class="text-black-700 absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2">
+				<HugeiconsIcon
+					icon={Search01FreeIcons}
+					size="16px"
+					color="var(--color-black-500)"
+				/>
+			</span>
+		</div>
 	</div>
 
 	<div class="flex items-center gap-2">

infrastructure/control-panel/src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { ButtonAction } from '$lib/ui';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { RefreshFreeIcons } from '@hugeicons/core-free-icons';
 	import '../app.css';
 
 	let { children } = $props();
@@ -15,7 +17,16 @@
 		<h4 class="text-primary text-xl font-semibold">Control Panel</h4>
 		{#if pageUrl === '/'}
 			<div class="flex items-center gap-4">
-				<ButtonAction size="sm" variant="soft">Refresh</ButtonAction>
+				<ButtonAction size="sm" variant="soft">
+					Refresh
+					<span class="ms-2">
+						<HugeiconsIcon
+							icon={RefreshFreeIcons}
+							color="var(--color-primary)"
+							size="20px"
+						/>
+					</span>
+				</ButtonAction>
 				<ButtonAction
 					size="sm"
 					class="whitespace-nowrap"