feat: added logs component to page.

Author: Sahil2004

infrastructure/control-panel/src/fragments/LiveDataFlow/LiveDataFlow.stories.ts renamed to infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.stories.ts

@@ -8,7 +8,7 @@
 		...restProps
 	}: { events: LogEvent[]; activeEventIndex: number } = $props();
 
-	const commonClasses = 'w-full h-full bg-white';
+	const commonClasses = 'w-full h-full rounded-md p-4 bg-white';
 	const commonLogClasses =
 		'flex cursor-pointer gap-2 rounded-md p-2 transition-colors hover:bg-gray-100';
 	const activeLogClass = 'bg-gray-100';

infrastructure/control-panel/src/fragments/LiveDataFlow/LiveDataFlow.svelte renamed to infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.svelte

@@ -1,78 +1,100 @@
 <script lang="ts">
-	import { Table } from "$lib/ui";
-	import { LiveDataFlow } from "../fragments";
+	import { LiveDataFlow, Logs } from '$lib/fragments';
+	import { Table } from '$lib/ui';
 
-    const handlePreviousPage = async () => {
-	alert('Previous btn clicked. Make a call to your server to fetch data.');
-};
-const handleNextPage = async () => {
-	alert('Next btn clicked. Make a call to your server to fetch data.');
-};
-const tableHeadings = [
-	'Image',
-	'Material Name',
-	'Description',
-	'Product ID',
-	'Smart Contract'
-	// "Ledger Link",
-];
-const pages = [
-	{ name: '1', href: '#' },
-	{ name: '2', href: '#' },
-	{ name: '3', href: '#' }
-];
-const tableData = [
-	{
-		image: 'https://example.com/image1.jpg',
-		name: 'Material 1',
-		description: 'Description of Material 1',
-		productId: '12345',
-		smartContract: '0x1234567890abcdef',
-		ledgerLink: 'https://example.com/ledger1'
-	},
-	{
-		image: 'https://example.com/image2.jpg',
-		name: 'Material 2',
-		description: 'Description of Material 2',
-		productId: '67890',
-		smartContract: '0xabcdef1234567890',
-		ledgerLink: 'https://example.com/ledger2'
-	}
-];
-
-const mappedData = tableData.map((row) => {
-	return {
-		rowOne: {
-			type: 'image',
-			value: row.image
-		},
-		rowTwo: {
-			type: 'text',
-			value: row.name
+	const handlePreviousPage = async () => {
+		alert('Previous btn clicked. Make a call to your server to fetch data.');
+	};
+	const handleNextPage = async () => {
+		alert('Next btn clicked. Make a call to your server to fetch data.');
+	};
+	const tableHeadings = [
+		'Image',
+		'Material Name',
+		'Description',
+		'Product ID',
+		'Smart Contract'
+		// "Ledger Link",
+	];
+	const pages = [
+		{ name: '1', href: '#' },
+		{ name: '2', href: '#' },
+		{ name: '3', href: '#' }
+	];
+	const tableData = [
+		{
+			image: 'https://example.com/image1.jpg',
+			name: 'Material 1',
+			description: 'Description of Material 1',
+			productId: '12345',
+			smartContract: '0x1234567890abcdef',
+			ledgerLink: 'https://example.com/ledger1'
 		},
-		rowThree: {
-			type: 'text',
-			value: row.description
+		{
+			image: 'https://example.com/image2.jpg',
+			name: 'Material 2',
+			description: 'Description of Material 2',
+			productId: '67890',
+			smartContract: '0xabcdef1234567890',
+			ledgerLink: 'https://example.com/ledger2'
+		}
+	];
+
+	const mappedData = tableData.map((row) => {
+		return {
+			rowOne: {
+				type: 'image',
+				value: row.image
+			},
+			rowTwo: {
+				type: 'text',
+				value: row.name
+			},
+			rowThree: {
+				type: 'text',
+				value: row.description
+			},
+			rowFour: {
+				type: 'text',
+				value: row.productId
+			},
+			rowFive: {
+				type: 'text',
+				value: row.smartContract
+			}
+			// rowSix: {
+			//     type: "snippet",
+			//     snippet: BadgeCell,
+			//     value:
+			//         row.ledgerLink,
+			// },
+		};
+	});
+
+	let currentSelectedEventIndex = $state(-1);
+
+	const events = [
+		{
+			timestamp: new Date(),
+			action: 'upload',
+			message: 'msg_123',
+			to: 'alice.vault.dev'
 		},
-		rowFour: {
-			type: 'text',
-			value: row.productId
+		{
+			timestamp: new Date(),
+			action: 'fetch',
+			message: 'msg_124',
+			from: 'bob.vault.dev'
 		},
-		rowFive: {
-			type: 'text',
-			value: row.smartContract
+		{
+			timestamp: new Date(),
+			action: 'webhook',
+			to: 'Alice',
+			from: 'Pic'
 		}
-		// rowSix: {
-		//     type: "snippet",
-		//     snippet: BadgeCell,
-		//     value:
-		//         row.ledgerLink,
-		// },
-	};
-});
+	];
 </script>
 
-
 <!-- <section>
     <Table
     class="mb-7"
@@ -90,4 +112,7 @@ const mappedData = tableData.map((row) => {
     />
 </section> -->
 
-<LiveDataFlow/>
+<section class="flex gap-2">
+	<LiveDataFlow />
+	<Logs class="w-[40%]" {events} bind:activeEventIndex={currentSelectedEventIndex} />
+</section>