From 6f563bbf7e078b1a12eb6d1bacd6fa8c32d2428b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 8 Jul 2025 15:56:01 +0200
Subject: [PATCH] All event overview improvements

---
 src/routes/private/events/+page.svelte        | 237 ++++++++++++++++--
 src/routes/private/events/SingleEvent.svelte  |   2 +-
 .../private/events/archived/+page.svelte      |  77 ------
 .../events/event/archived/+page.svelte        |  88 +++++++
 4 files changed, 308 insertions(+), 96 deletions(-)
 delete mode 100644 src/routes/private/events/archived/+page.svelte
 create mode 100644 src/routes/private/events/event/archived/+page.svelte

diff --git a/src/routes/private/events/+page.svelte b/src/routes/private/events/+page.svelte
index 01b0edc..a4002fa 100644
--- a/src/routes/private/events/+page.svelte
+++ b/src/routes/private/events/+page.svelte
@@ -1,25 +1,226 @@
 <script lang="ts">
-    export let data;
+	import { onMount } from 'svelte';
+	import SingleEvent from './SingleEvent.svelte';
+
+	let { data } = $props();
+
+	// Types
+	interface Event {
+		id: string;
+		name: string;
+		date: string;
+		archived: boolean; // Whether the event is from events_archived table
+	}
+
+	// State
+	let allEvents = $state<Event[]>([]); // All events from both tables
+	let displayEvents = $state<Event[]>([]); // Events to display (filtered by search)
+	let loading = $state(true);
+	let error = $state('');
+	let searchTerm = $state('');
+	let isSearching = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	onMount(async () => {
+		await loadEvents();
+	});
+
+	async function loadEvents() {
+		loading = true;
+		error = '';
+		try {
+			// Fetch regular events
+			const { data: eventsData, error: eventsError } = await data.supabase
+				.from('events')
+				.select('id, name, date')
+				.order('date', { ascending: false });
+
+			if (eventsError) throw eventsError;
+
+			// Fetch archived events (limited to 20)
+			const { data: archivedEventsData, error: archivedError } = await data.supabase
+				.from('events_archived')
+				.select('id, name, date')
+				.order('date', { ascending: false })
+				.limit(20);
+
+			if (archivedError) throw archivedError;
+
+			// Merge both arrays, marking archived events
+			const regularEvents = (eventsData || []).map(event => ({ ...event, archived: false }));
+			const archivedEvents = (archivedEventsData || []).map(event => ({ ...event, archived: true }));
+			
+			// Sort all events by date (newest first)
+			const combined = [...regularEvents, ...archivedEvents];
+			
+			allEvents = combined;
+			displayEvents = allEvents;
+
+		} catch (err) {
+			console.error('Error loading events:', err);
+			error = 'Failed to load events';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function formatDate(dateString: string) {
+		return new Date(dateString).toLocaleDateString('en-GB', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric'
+		});
+	}
+
+	async function searchEvents(term: string) {
+		if (!term.trim()) {
+			displayEvents = allEvents;
+			return;
+		}
+
+		isSearching = true;
+		error = '';
+		
+		try {
+			// Search regular events
+			const { data: regularResults, error: regularError } = await data.supabase
+				.from('events')
+				.select('id, name, date')
+				.ilike('name', `%${term}%`)
+				.order('date', { ascending: false });
+
+			if (regularError) {
+				console.error('Regular events search error:', regularError);
+				throw regularError;
+			}
+
+			// Search archived events
+			const { data: archivedResults, error: archivedError } = await data.supabase
+				.from('events_archived')
+				.select('id, name, date')
+				.ilike('name', `%${term}%`)
+				.order('date', { ascending: false })
+				.limit(50);
+
+			if (archivedError) {
+				console.error('Archived events search error:', archivedError);
+				throw archivedError;
+			}
+
+			// Merge search results
+			const regularEvents = (regularResults || []).map(event => ({ ...event, archived: false }));
+			const archivedEvents = (archivedResults || []).map(event => ({ ...event, archived: true }));
+			
+			// Sort merged results by date (newest first)
+			const combined = [...regularEvents, ...archivedEvents];
+			combined.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+			
+			displayEvents = combined;
+
+		} catch (err) {
+			console.error('Error searching events:', err);
+		} finally {
+			isSearching = false;
+		}
+	}
+
+	// Handle search term changes
+	function handleSearchInput() {
+		if (searchTimeout) {
+			clearTimeout(searchTimeout);
+		}
+		
+		searchTimeout = setTimeout(() => {
+			searchEvents(searchTerm);
+		}, 300);
+	}
+
+	function clearSearch() {
+		searchTerm = '';
+		displayEvents = allEvents;
+	}
 </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}
+	{#if loading}
+		<!-- Loading placeholders -->
+		{#each Array(4) as _}
+			<div class="block border border-gray-300 rounded bg-white p-4 min-h-[72px]">
+				<div class="flex flex-col gap-1">
+					<div class="h-6 w-3/4 bg-gray-200 rounded animate-pulse"></div>
+					<div class="h-4 w-1/2 bg-gray-100 rounded animate-pulse"></div>
+				</div>
+			</div>
+		{/each}
+	{:else if error}
+		<div class="col-span-full text-center py-8">
+			<p class="text-red-600">{error}</p>
+			<button
+				onclick={loadEvents}
+				class="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+			>
+				Try Again
+			</button>
+		</div>
+	{:else if displayEvents.length === 0}
+		<div class="col-span-full text-center py-8">
+			<p class="text-gray-500">No events found. Create your first event!</p>
+		</div>
+	{:else}
+		{#each displayEvents as event}
+			<SingleEvent
+				id={event.id}
+				name={event.name}
+				date={formatDate(event.date)}
+				archived={event.archived}
+			/>
+		{/each}
+	{/if}
 </div>
 
-<a
-  href="/private/events/event/new"
-  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>
\ No newline at end of file
+<!-- Bottom actions -->
+<div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4">
+	<!-- Search bar -->
+	<div class="relative mr-4">
+		<input
+			type="text"
+			bind:value={searchTerm}
+			oninput={handleSearchInput}
+			placeholder="Search events..."
+			class="w-64 pl-10 pr-4 py-3 rounded-full border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+		/>
+		<div class="absolute left-3 top-1/2 -translate-y-1/2">
+			{#if isSearching}
+				<svg class="animate-spin h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+				</svg>
+			{:else}
+				<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+				</svg>
+			{/if}
+		</div>
+		{#if searchTerm}
+			<button
+				onclick={clearSearch}
+				class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+				aria-label="Clear search"
+			>
+				<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- New Event button -->
+	<a
+		href="/private/events/event/new"
+		class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full border border-gray-300 transition whitespace-nowrap"
+	>
+		New Event
+	</a>
+</div>
\ No newline at end of file
diff --git a/src/routes/private/events/SingleEvent.svelte b/src/routes/private/events/SingleEvent.svelte
index ef08e73..5887730 100644
--- a/src/routes/private/events/SingleEvent.svelte
+++ b/src/routes/private/events/SingleEvent.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <a
-    href={archived ? `/private/events/archived?id=${id}` : `/private/events/event?id=${id}`}
+    href={archived ? `/private/events/event/archived?id=${id}` : `/private/events/event/view?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}`}
 >
diff --git a/src/routes/private/events/archived/+page.svelte b/src/routes/private/events/archived/+page.svelte
deleted file mode 100644
index 2df8b53..0000000
--- a/src/routes/private/events/archived/+page.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-    import { page } from '$app/state';
-
-	let { data } = $props();
-
-	let event_data = $state();
-	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 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>
diff --git a/src/routes/private/events/event/archived/+page.svelte b/src/routes/private/events/event/archived/+page.svelte
new file mode 100644
index 0000000..37cdb56
--- /dev/null
+++ b/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>