feat: setup control-panel project, added-colors same as eid-wallet

infrastructure/control-panel/.storybook/main.ts

@@ -1,25 +1,20 @@
 import type { StorybookConfig } from '@storybook/sveltekit';
 
-import { join, dirname } from "path"
+import { join, dirname } from 'path';
 
 /**
-* This function is used to resolve the absolute path of a package.
-* It is needed in projects that use Yarn PnP or are set up within a monorepo.
-*/
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')))
+	return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|ts|svelte)"
-  ],
-  "addons": [
-    getAbsolutePath('@storybook/addon-svelte-csf')
-  ],
-  "framework": {
-    "name": getAbsolutePath('@storybook/sveltekit'),
-    "options": {}
-  }
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [getAbsolutePath('@storybook/addon-svelte-csf')],
+	framework: {
+		name: getAbsolutePath('@storybook/sveltekit'),
+		options: {}
+	}
 };
-export default config;
+export default config;

infrastructure/control-panel/.storybook/preview.ts

@@ -1,15 +1,15 @@
-import type { Preview } from '@storybook/sveltekit'
-import "../src/app.css";
+import type { Preview } from '@storybook/sveltekit';
+import '../src/app.css';
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
 };
 
-export default preview;
+export default preview;

infrastructure/control-panel/package.json

@@ -42,6 +42,14 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
-		"@inlang/paraglide-js": "^2.0.0"
+		"@hugeicons/core-free-icons": "^1.0.13",
+		"@hugeicons/svelte": "^1.0.2",
+		"@inlang/paraglide-js": "^2.0.0",
+		"@xyflow/svelte": "^1.2.2",
+		"clsx": "^2.1.1",
+		"flowbite": "^3.1.2",
+		"flowbite-svelte": "^1.10.7",
+		"flowbite-svelte-icons": "^2.2.1",
+		"tailwind-merge": "^3.0.2"
 	}
 }

infrastructure/control-panel/src/app.css

@@ -1,36 +1,71 @@
 @import 'tailwindcss';
 
+@font-face {
+	font-family: 'Archivo';
+	src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+}
+
+@layer base {
+	/* Typography */
+	h1 {
+		@apply text-[90px]/[1.5] font-semibold text-black;
+	}
+
+	h2 {
+		@apply text-6xl/[1.5] font-semibold text-black;
+	}
+
+	h3 {
+		@apply text-3xl/[1.5] font-semibold text-black;
+	}
+
+	h4 {
+		@apply text-xl/[1.5] font-semibold text-black;
+	}
+
+	p {
+		@apply text-base/[1.5] font-normal text-black;
+	}
+
+	.small {
+		@apply text-xs/[1.5] font-normal text-black;
+	}
+}
 
 @theme {
-    /* Custom theme */
-    --color-primary: #8e52ff;
-    --color-primary-100: #e8dcff;
-    --color-primary-200: #d2baff;
-    --color-primary-300: #bb97ff;
-    --color-primary-400: #a575ff;
-    --color-primary-500: #8e52ff;
-
-    --color-secondary: #73efd5;
-    --color-secondary-100: #e3fcf7;
-    --color-secondary-200: #c7f9ee;
-    --color-secondary-300: #abf6e6;
-    --color-secondary-400: #8ff2dd;
-    --color-secondary-500: #73efd5;
-
-    --color-white: #ffffff;
-    --color-gray: #f5f5f5;
-
-    --color-black: #1f1f1f;
-    --color-black-100: #d2d2d2;
-    --color-black-300: #a5a5a5;
-    --color-black-500: #797979;
-    --color-black-700: #4c4c4c;
-    --color-black-900: #1f1f1f;
-
-    --color-danger: #ff5255;
-    --color-danger-100: #ffdcdd;
-    --color-danger-200: #ffb1a7;
-    --color-danger-300: #ff968e;
-    --color-danger-400: #ff7b77;
-    --color-danger-500: #ff5255;
-}
+	/* Custom theme */
+	--color-primary: #8e52ff;
+	--color-primary-100: #e8dcff;
+	--color-primary-200: #d2baff;
+	--color-primary-300: #bb97ff;
+	--color-primary-400: #a575ff;
+	--color-primary-500: #8e52ff;
+
+	--color-secondary: #73efd5;
+	--color-secondary-100: #e3fcf7;
+	--color-secondary-200: #c7f9ee;
+	--color-secondary-300: #abf6e6;
+	--color-secondary-400: #8ff2dd;
+	--color-secondary-500: #73efd5;
+
+	--color-white: #ffffff;
+	--color-gray: #f5f5f5;
+
+	--color-black: #1f1f1f;
+	--color-black-100: #d2d2d2;
+	--color-black-300: #a5a5a5;
+	--color-black-500: #797979;
+	--color-black-700: #4c4c4c;
+	--color-black-900: #1f1f1f;
+
+	--color-danger: #ff5255;
+	--color-danger-100: #ffdcdd;
+	--color-danger-200: #ffb1a7;
+	--color-danger-300: #ff968e;
+	--color-danger-400: #ff7b77;
+	--color-danger-500: #ff5255;
+
+	--color-green: #0fb340;
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'svelte';
+import { LiveDataFlow } from '..';
+
+export default {
+	title: 'UI/LiveDataFlow',
+	component: LiveDataFlow,
+	tags: ['autodocs'],
+	render: (args: { Component: LiveDataFlow; props: ComponentProps<typeof LiveDataFlow> }) => ({
+		Component: LiveDataFlow,
+		props: args
+	})
+};
+
+export const Default = {
+	args: {
+		events: [
+			{ id: 1, from: 'alice', to: 'pictique' },
+			{ id: 2, from: 'pictique', to: 'bob' }
+		]
+	}
+};

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

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Database01FreeIcons, PauseFreeIcons, PlayFreeIcons } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+
+	interface IEvent {
+		id: string;
+		from: string;
+		to: string;
+		imageSrc?: string;
+		vaultName?: string;
+	}
+
+	interface IDataFlowProps {
+		events: IEvent[];
+	}
+
+	let { events }: IDataFlowProps = $props();
+	let isPaused = $state(false);
+</script>
+
+<article class="bg-gray flex h-[80vh] w-full flex-col items-center rounded-md px-16 py-6">
+	<div class="mb-20.5 flex w-full items-center justify-between">
+		<h4 class="text-xl">Live Monitoring</h4>
+		<button
+			onclick={() => (isPaused = !isPaused)}
+			class="font-geist text-black-700 flex items-center gap-2 rounded-4xl border border-[#e5e5e5] bg-white px-4 py-3 text-base font-medium"
+		>
+			{#if isPaused}
+				<HugeiconsIcon icon={PlayFreeIcons} size="24px" />
+			{:else}
+				<HugeiconsIcon icon={PauseFreeIcons} size="24px" />
+			{/if}
+			{isPaused ? 'Resume Live Feed' : 'Pause Live Feed'}
+		</button>
+	</div>
+	<div class="relative z-10 flex w-full items-center justify-between">
+		<!-- svelte-ignore element_invalid_self_closing_tag -->
+		<div
+			class="border-s-green border-b-green border-e-green absolute start-[50%] top-[55%] z-[-1] h-[175px] w-[88%] translate-x-[-50%] rounded-md border border-t-transparent bg-transparent"
+		>
+			<div
+				class="dot bg-green absolute start-[-1px] top-0 h-2.5 w-2.5 rounded-full"
+				style="--dot-animation-state: {isPaused ? 'paused' : 'running'}"
+			/>
+		</div>
+
+		<div
+			class="flex flex-col items-center justify-center gap-2 rounded-md border border-black/10 bg-white p-3"
+		>
+			<HugeiconsIcon icon={Database01FreeIcons} />
+			<div class="text-sm font-semibold">{events[0].from}</div>
+			<div class="text-xs text-gray-500">{events[0].vaultName}</div>
+		</div>
+
+		<div
+			class="absolute start-[50%] top-[200px] translate-x-[-50%] rounded-md bg-white p-3 text-center shadow"
+		>
+			<img src="/" alt="Icon" />
+			<div class="text-xs text-gray-700">{events[1].from}</div>
+		</div>
+
+		<div
+			class="border-green flex flex-col items-center justify-center gap-2 rounded-md border bg-white p-3"
+		>
+			<HugeiconsIcon icon={Database01FreeIcons} />
+			<div class="text-sm font-semibold">{events[2].from}</div>
+			<div class="text-xs text-gray-500">{events[2].vaultName}</div>
+		</div>
+	</div>
+</article>
+
+<style>
+	.dot {
+		offset-path: rect(0px 100% 175px 0px round 0%);
+		offset-distance: 0%;
+		offset-rotate: auto;
+		animation: move 10s linear infinite;
+		animation-play-state: var(--dot-animation-state, running);
+	}
+
+	@keyframes move {
+		0% {
+			offset-distance: 100%;
+			opacity: 1;
+		}
+		50% {
+			opacity: 1;
+		}
+		55% {
+			opacity: 0.4;
+		}
+		60% {
+			opacity: 0;
+		}
+		100% {
+			offset-distance: 0%;
+			opacity: 0;
+		}
+	}
+</style>

infrastructure/control-panel/src/lib/fragments/Logs/Logs.stories.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps } from 'svelte';
+import Logs from './Logs.svelte';
+
+export default {
+	title: 'UI/Logs',
+	component: Logs,
+	tags: ['autodocs'],
+	render: (args: { Component: Logs; props: ComponentProps<typeof Logs> }) => ({
+		Component: Logs,
+		props: args
+	})
+};
+
+export const Default = {
+	args: {
+		events: [
+			{
+				timestamp: new Date(),
+				action: 'upload',
+				message: 'msg_123',
+				to: 'alice.vault.dev'
+			},
+			{
+				timestamp: new Date(),
+				action: 'fetch',
+				message: 'msg_124',
+				from: 'bob.vault.dev'
+			},
+			{
+				timestamp: new Date(),
+				action: 'webhook',
+				to: 'Alice',
+				from: 'Pic'
+			}
+		]
+	}
+};