All event overview improvements

src/routes/private/events/event/archived/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+    import { page } from '$app/state';
+
+	let { data } = $props();
+
+	// Types
+	interface ArchivedEvent {
+		id: string;
+		name: string;
+		date: string;
+		total_participants: number;
+		scanned_participants: number;
+	}
+
+	let event_data = $state<ArchivedEvent | null>(null);
+	let loading = $state(true);
+
+	onMount(async () => {
+		const event_id = page.url.searchParams.get('id');
+        
+		if (!event_id) {
+			loading = false;
+			return;
+		}
+
+		const { data: event } = await data.supabase
+			.from('events_archived')
+			.select('*')
+			.eq('id', event_id)
+			.single();
+
+		event_data = event;
+		loading = false;
+	});
+</script>
+
+<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>
+
+<div class="mb-2 rounded border border-gray-300 bg-white p-4">
+	<div class="flex flex-col gap-1">
+		{#if loading}
+			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
+			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
+		{:else}
+			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
+			<span class="text-black-500 text-sm">{event_data?.date}</span>
+		{/if}
+	</div>
+</div>
+
+<div class="mb-2 rounded border border-gray-300 bg-white p-4">
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+        <div class="flex items-center justify-center gap-2">
+            <svg
+                class="inline h-4 w-4 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+            {#if loading}
+                <div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
+            {:else}
+                <span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
+            {/if}
+        </div>
+        <div class="hidden sm:block h-8 w-px bg-gray-300"></div>
+        <div class="flex items-center justify-center gap-2">
+            <svg
+                class="inline h-4 w-4 text-green-600"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            {#if loading}
+                <div class="h-4 w-28 bg-gray-200 rounded animate-pulse"></div>
+            {:else}
+                <span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
+            {/if}
+        </div>
+    </div>
+</div>