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

@@ -1,16 +1,26 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import SingleEvent from './SingleEvent.svelte';
+
     let { data } = $props();
 
     let events: any[] = $state([]);
+    let archived_events: any[] = $state([]);
     let loading = $state(true);
 
     onMount(async () => {
       const { data: evs } = await data.supabase
         .from('events')
-        .select('*')
+        .select('id, name, date')
         .order('date', { ascending: false });
+
+      const { data: aevs } = await data.supabase
+        .from('events_archived')
+        .select('id, name, date')
+        .order('date', { ascending: false });    
+
       events = evs || [];
+      archived_events = aevs || [];        
       loading = false;
     });
 </script>
@@ -28,15 +38,10 @@
     {/each}
   {:else}
     {#each events as event}
-      <a
-        href={`/private/events/event?id=${event.id}`}
-        class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
-      >
-        <div class="flex flex-col gap-1">
-          <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
-          <span class="text-gray-500 text-sm">{event.date}</span>
-        </div>
-      </a>
+      <SingleEvent id={event.id} name={event.name} date={event.date} archived={false} />
+    {/each}
+    {#each archived_events as event}
+      <SingleEvent id={event.id} name={event.name} date={event.date} archived={true} />
     {/each}
   {/if}
 </div>

src/routes/private/events/SingleEvent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    const { id, name, date, archived = false } = $props();
+</script>
+
+<a
+    href={archived ? `/private/events/archived?id=${id}` : `/private/events/event?id=${id}`}
+    class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
+    aria-label={archived ? `View archived event ${name}` : `View event ${name}`}
+>
+    <div class="flex flex-col gap-1">
+        <span class="font-semibold text-lg text-black-700 group-hover:underline flex items-center gap-2">
+            {#if archived}
+                <svg class="inline w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="8" width="16" height="10" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 8V6a4 4 0 1 1 8 0v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
+            {/if}
+            {name}
+        </span>
+        <span class="text-gray-500 text-sm">{date}</span>
+    </div>
+</a>

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { data } = $props();
+
+	let event_data = $state();
+	let loading = $state(true);
+
+	onMount(async () => {
+		const event_id = new URLSearchParams(window.location.search).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 flex items-center rounded border border-gray-300 bg-white p-4">
+    <div class="flex flex-1 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="mx-4 h-8 w-px bg-gray-300"></div>
+    <div class="flex flex-1 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>