fix: search values binded

Author: grv-saini-20

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

@@ -2,16 +2,17 @@
 	let {
 		title,
 		searchValue = $bindable(''),
-		rightTitle
-	}: { title: string; searchValue: string; rightTitle: string } = $props();
+		rightTitle,
+		placeholder
+	}: { 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="Search eVaults"
+			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"
 		/>

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

@@ -2,6 +2,9 @@
 	import { TableCard, TableCardHeader } from '$lib/fragments';
 	import { Table } from '$lib/ui';
 
+    let eventsSearchValue = $state('');
+    let platformsSearchQuery = $state('');
+
 	const handlePreviousPage = async () => {
 		alert('Previous btn clicked. Make a call to your server to fetch data.');
 	};
@@ -95,7 +98,8 @@
 	<TableCard>
 		<TableCardHeader
 			title="Events"
-			searchValue=""
+            placeholder="Search Events"
+			bind:searchValue={eventsSearchValue}
 			rightTitle="No evault selected. Select an evault to monitor logs"
 		/>
 		<Table
@@ -109,8 +113,9 @@
 
 	<TableCard>
 		<TableCardHeader
-			title="Events"
-			searchValue=""
+			title="Platforms"
+            placeholder="Search Platforms"
+			bind:searchValue={platformsSearchQuery}
 			rightTitle="No evault selected. Select an evault to monitor logs"
 		/>
 		<Table