Event overview panel

src/routes/+page.svelte

@@ -6,6 +6,8 @@
     <h1 class="text-3xl font-bold text-center mb-2">ESN Scanner App</h1>
     <h2 class="text-lg text-gray-600 text-center mb-8">Make entrance to your events a breeze.</h2>
     <div class="flex space-x-4 w-full justify-center">
-        <a href="/private/home" class="w-64 py-2 bg-blue-600 text-white rounded-lg text-center hover:bg-blue-700 transition">Get started</a>
+        <a href="/private/home" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300 w-64 text-center transition">
+            Get started
+        </a>
     </div>
 </div>

src/routes/private/events/+page.server.ts

@@ -0,0 +1,8 @@
+export async function load({ locals }) {
+    const { data: events, error } = await locals.supabase
+        .from('events')
+        .select('*')
+        .order('date', { ascending: false });
+    console.log('events', events);  
+    return { events };
+}

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let data;
+</script>
+
+<h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
+  {#each data.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"
+    >
+      <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>
+  {/each}
+</div>
+
+<a
+  href="/private/creator"
+  class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300"
+>
+  New Event
+</a>

src/routes/private/events/event/+page.server.ts

@@ -0,0 +1,13 @@
+export async function load({ locals, url }) {
+    const event_id = url.searchParams.get('id');
+    const { data: event_data, error: eventError } = await locals.supabase
+        .from('events')
+        .select('*')
+        .eq('id', event_id)
+        .single()
+    const { data: participants, error: participantsError } = await locals.supabase
+        .from('participants')
+        .select('*, scanned_by:profiles (id, display_name)')
+        .eq('event', event_id)
+    return {event_data, participants};
+}

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+	let { data } = $props();
+
+	const scannedCount = data.participants.filter((p) => p.scanned).length;
+	const notScannedCount = data.participants.length - scannedCount;
+
+</script>
+
+<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
+
+<div class="mb-2 rounded border border-gray-300 bg-white p-4">
+	<div class="flex flex-col gap-1">
+		<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
+		<span class="text-black-500 text-sm">{data.event_data.date}</span>
+	</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-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>
+		<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
+	</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-red-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" />
+			<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
+			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
+		</svg>
+		<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
+	</div>
+</div>
+
+<div class="rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
+	<ul class="space-y-1">
+		{#each data.participants as p}
+			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+				{#if p.scanned}
+					<svg
+						title="Scanned"
+						class="mr-2 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>
+				{:else}
+					<svg
+						title="Not scanned"
+						class="mr-2 inline h-4 w-4 text-red-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" />
+						<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
+						<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
+					</svg>
+				{/if}
+				<span class="font-semibold">{p.name} {p.surname}</span>
+				<span class="flex-1"></span>
+				{#if p.scanned_by}
+					<div class="flex flex-row items-end ml-2">
+						<span class="mr-1 text-xs text-gray-500">
+							{new Date(p.scanned_at).toLocaleTimeString([], {
+								hour: '2-digit',
+								minute: '2-digit',
+								hour12: false
+							})}
+						</span>
+						<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>

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

@@ -15,7 +15,7 @@
 		scan_state = ScanState.scanning;
 
 		data.supabase
-			.from('qrcodes')
+			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
 			.then( response => {