Fixed non-uniform spacing

Reviewed-on: erman/esn-code-scanner-app#9

.gitea/workflows/release.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
   schedule:
-    - cron: "0 22 * * 0" # sunday 22:00
+    - cron: "0 22 1 * *" # First of every month
 
 jobs:
   build:
@@ -48,6 +48,26 @@ jobs:
             org.opencontainers.image.ref.name=${{ env.GITHUB_REF }}
             org.opencontainers.image.title=ScanWave
 
+  deploy:
+    needs: build
+    steps:
+      - name: Trigger Komodo Deploy
+        env:
+          URL:  ${{ secrets.KOMODO_URL }}
+          SECRET: ${{ secrets.KOMODO_SECRET }}
+          BODY_FILE: ${{ github.event_path }}
+        run: |
+          SIG="sha256=$(openssl dgst -sha256 -hmac "$SECRET" "$BODY_FILE" | cut -d' ' -f2)"
+          curl -fsSL -X POST "$URL" \
+              -H 'Content-Type: application/json' \
+              -H "X-Hub-Signature-256: $SIG" \
+              -H 'X-GitHub-Event: push' \
+              -H "X-GitHub-Delivery: $GITHUB_RUN_ID.$GITHUB_RUN_NUMBER" \
+              --data @"$BODY_FILE"
+
+  verify:
+    needs: build
+    steps:
       - name: Run Trivy vulnerability scanner
         uses: aquasecurity/trivy-action@0.24.0
         with:

.github/copilot-instructions.md

@@ -0,0 +1,88 @@
+GitHub Copilot Instructions for This Repository
+Use Svelte 5 runes exclusively
+
+Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
+svelte.dev
+svelte.dev
+
+Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
+
+Enforce a clean component structure
+
+<script> comes first, followed by markup and then an optional <style> (rarely needed—prefer Tailwind).
+
+Export component props with export let … (still valid in Svelte 5).
+
+Keep each component focused on one visual/behavioural concern; split larger UIs into children.
+
+Tailwind-only styling conventions
+
+Base container: rounded-lg border border-gray-300 (or rounded-md on small items).
+
+Absolutely no shadow-* classes.
+
+Use p-4 or p-6 for internal padding, and gap-* utilities (not margin hacks) for spacing between children.
+
+Prefer neutral greys (gray-50‒gray-800) and a single accent palette defined in tailwind.config.js.
+
+HTML & accessibility
+
+Generate semantic elements (<button>, <nav>, <main>, <section>, <label>, etc.).
+
+Every interactive element must have an accessible name (aria-label, visible text, or title).
+
+Do not generate tabindex gymnastics; rely on natural DOM order.
+
+Type safety & tooling
+
+Default to <script lang="ts"> unless the file is explicitly plain JS.
+
+Always import types from @types/svelte or svelte where needed.
+
+File / folder conventions
+
+Component names are PascalCase.svelte.
+
+Collocate tests as ComponentName.test.ts beside the component.
+
+Put shared util functions in src/lib.
+
+Example pattern (reference only)
+
+svelte
+Copy
+Edit
+<!-- copilot: follow the repo instructions above -->
+<script lang="ts">
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  $effect(() => console.log(`count is ${count}`));
+</script>
+
+<div class="rounded-lg border border-gray-300 p-4 flex flex-col gap-4">
+  <button
+    class="rounded-md px-4 py-2 bg-blue-600 text-white"
+    onclick={() => count++}
+    aria-label="Increment counter"
+  >
+    {count}
+  </button>
+
+  <p>{doubled}</p>
+</div>
+What not to do
+
+No inline style="" attributes.
+
+No external CSS files unless Tailwind cannot express the rule.
+
+No class names that imply design debt (.box, .wrapper, .container-1, etc.).
+
+Avoid non-reactive variables; if a value affects the UI, use a rune.
+
+NEVER $: label syntax; use $state(), $derived(), and $effect().
+
+If you want to use supabse client in the browser, it is stored in the data
+variable obtained from let { data } = $props();
+
+Using `on:click` to listen to the click event is deprecated. Use the event attribute `onclick` instead

docker-compose-prod.yml

@@ -9,4 +9,4 @@ services:
       - "traefik.http.routers.scan-wave.tls.certresolver=leresolver"
       - "traefik.http.routers.scan-wave.entrypoints=websecure"
       - "traefik.http.services.scan-wave.loadbalancer.server.port=3000"
-      - "traefik.http.routers.scan-wave.middlewares=hsts"
+      - "traefik.http.routers.scan-wave.middlewares=hsts"

src/lib/google.ts

@@ -2,7 +2,10 @@ import { google } from 'googleapis';
 import { env } from '$env/dynamic/private';
 import quotedPrintable from 'quoted-printable';   //  tiny, zero-dep package
 
-export const scopes = ['https://www.googleapis.com/auth/gmail.send'];
+export const scopes = [
+	'https://www.googleapis.com/auth/gmail.send',
+	'https://www.googleapis.com/auth/userinfo.email'
+];
 
 export function getOAuthClient() {
 	return new google.auth.OAuth2(
@@ -55,17 +58,19 @@ export async function sendGmail(
         <div style="height: 4px; width: 20%; background: #2e3192;"></div>
       </div>
       <div style="font-size: 12px; color: #999; padding-top: 0px; margin-top: 10px; line-height: 1.5; ">
-        <p>This email has been generated with the help of *insert software name*</p>
+        <p>This email has been generated with the help of ScanWave</p>
       </div>
     </div>
   </body>
 </html>`;
 
-
 	const boundary = 'BOUNDARY';
 	const nl = '\r\n';                   // RFC-5322 line ending
 
-	const htmlQP = quotedPrintable.encode(message_html);
+	// Convert HTML to a Buffer, then to latin1 string for quotedPrintable.encode
+	const htmlBuffer = Buffer.from(message_html, 'utf8');
+	const htmlLatin1 = htmlBuffer.toString('latin1');
+	const htmlQP = quotedPrintable.encode(htmlLatin1);
 	const qrLines = qr_code.replace(/.{1,76}/g, '$&' + nl);
 
 	const rawParts = [

src/lib/helpers/event.ts

@@ -1,4 +1,4 @@
-export async function load({ locals, url }) {
+export async function load({ data, url }) {
     const event_id = url.searchParams.get('id');
     const { data: event_data, error: eventError } = await locals.supabase
         .from('events')

src/routes/private/api/gmail/+server.ts

@@ -23,7 +23,7 @@ export const GET: RequestHandler = async ({ url }) => {
 			const html = `
 				<script>
 					localStorage.setItem('gmail_refresh_token', ${JSON.stringify(refreshToken)});
-					location = '/private/creator';
+					location = '/private/events/creator';
 				</script>`;
 			return new Response(html, { headers: { 'Content-Type': 'text/html' } });
 		} catch (err) {

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

@@ -1,61 +0,0 @@
-import type { Actions } from './$types';
-import { error as kitError } from '@sveltejs/kit';
-import Papa from 'papaparse';
-import { fail } from '@sveltejs/kit';
-
-export async function load({ locals }) {
-    const { data: events, error } = await locals.supabase
-        .from('events')
-        .select('*')
-        .order('date', { ascending: true });
-
-    if (error) {
-        console.error('❌ supabase error:', error);
-        // optional: throw to render SvelteKit error page
-        throw kitError(500, 'Could not load events');
-    }
-
-    return { events };
-}
-
-export const actions = {
-    create: async (event) => {
-        const formData = await event.request.formData();
-        let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
-            {
-                "p_name": formData.get('name'),
-                "p_date": formData.get('date'),
-                "p_description": formData.get('description'),
-            });
-        return {
-            new_event,
-            error
-        }
-    },
-    participants: async (event) => {
-        const formData = await event.request.formData();
-        const file = formData.get('participants') as File;
-
-        let csvText = await file.text();
-
-        const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
-            skipEmptyLines: true,
-            header: false
-        });
-        // Remove the first row (header)
-        if (parsedRows.length > 0) {
-            parsedRows.shift();
-        }
-
-        // Map each row to an object with keys: name, surname, email
-        const participants = parsedRows.map((row: string[]) => ({
-            name: row[0],
-            surname: row[1],
-            email: row[2]
-        }));
-
-        return {
-            participants,
-        }
-    }
-} satisfies Actions;

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

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
-  import StepCraftEmail from "./steps/StepCraftEmail.svelte";
-  import StepCreateEvent from "./steps/StepCreateEvent.svelte";
-  import StepOverview from "./steps/StepOverview.svelte";
-  import StepUploadFiles from "./steps/StepUploadFiles.svelte";
-
-  let { data, form } = $props();
-
-  let event = $state({});
-  let participants = $state([]);
-  let email = $state({'body': '', 'subject': ''});
-  let authorized = $state(false);
-
-  $effect(() => {
-    if (form && form.new_event) {
-      event = form.new_event;
-    }
-    if (form && form.participants) {
-      participants = form.participants;
-    }
-  });
-
-  // Array of step components in order
-  const steps = [
-    StepConnectGoogle,
-    StepCreateEvent,
-    StepUploadFiles,
-    StepCraftEmail,
-    StepOverview
-  ];
-
-  let step: number = $state(0);
-
-  // let stepConditions = $derived([
-  //   authorized,
-  //   !!new_event?.name,
-  //   !!participants?.length,
-  //   !!subject && !!body
-  // ]);
-
-  // for debugging purpouses
-  let stepConditions = [
-    true,
-    true,
-    true,
-    true
-  ];
-
-  function nextStep() {
-    if (step < steps.length - 1) step += 1;
-  }
-  function prevStep() {
-    if (step > 0) step -= 1;
-  }
-</script>
-
-<div class="flex items-center justify-between mb-4 mt-2">
-  <button
-    onclick={prevStep}
-    disabled={step === 0}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Previous
-  </button>
-  <span class="flex-1 text-center text-gray-600 font-medium">
-    Step {step + 1} of {steps.length}
-  </span>
-  <button
-    onclick={nextStep}
-    disabled={step === steps.length - 1 || !stepConditions[step]}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Next
-  </button>
-</div>
-
-{#if step == 0}
-  <StepConnectGoogle bind:authorized />
-{:else if step == 1}
-  <StepCreateEvent {event} />
-{:else if step == 2}
-  <StepUploadFiles {participants} />
-{:else if step == 3}
-  <StepCraftEmail bind:email />
-{:else if step == 4}
-  <StepOverview
-    {data}
-    {event}
-    {participants}
-    {email}
-    {stepConditions}
-  />
-{/if}

src/routes/private/creator/finish/+page.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import { onMount } from 'svelte';
-    import QRCode from 'qrcode';
-
-    let { data } = $props();
-	let session_storage_id = page.url.searchParams.get('data');
-	let all_data = {};
-
-	const StepStatus = {
-		Loading: 'loading',
-		Waiting: 'waiting',
-		Success: 'success',
-		Failure: 'failure'
-	} as const;
-	type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
-	let supabase_status: StepStatus = $state(StepStatus.Waiting);
-	let email_status: StepStatus = $state(StepStatus.Waiting);
-
-	onMount(async () => {
-		if (!session_storage_id) {
-			console.error('No session storage ID provided in the URL');
-			return;
-		}
-		all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
-
-		supabase_status = StepStatus.Loading;
-		try {
-			const { result } = await insert_data_supabase(all_data.participants, all_data.event);
-			supabase_status = StepStatus.Success;
-			// Now send emails
-			email_status = StepStatus.Loading;
-			let allSuccess = true;
-			for (const obj of result) {
-				let qr_code = await dataToBase64(obj.id);
-				const payload = {
-					action: 'send',
-					to: obj.email,
-					subject: all_data.email.subject,
-					text: all_data.email.body,
-					qr_code: qr_code,
-					refreshToken: localStorage.getItem('gmail_refresh_token')
-				};
-				const res = await fetch('/private/api/gmail', {
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify(payload)
-				});
-				if (!res.ok) {
-					allSuccess = false;
-					console.error('Failed to send email to', obj.email, await res.text());
-				}
-			}
-			email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
-		} catch (e) {
-			supabase_status = StepStatus.Failure;
-			email_status = StepStatus.Failure;
-			console.error(e);
-		}
-	});
-
-    async function dataToBase64(data: string): Promise<string> {
-        try {
-            const url = await QRCode.toDataURL(data);
-            const parts = url.split(',');
-            const base64 = parts[1];
-            return base64;
-        } catch (err) {
-            console.error(err);
-            return '';
-        }
-    }
-
-	async function insert_data_supabase(participants, event) {
-		const names = participants.map((p) => p.name);
-		const surnames = participants.map((p) => p.surname);
-		const emails = participants.map((p) => p.email);
-		const {
-			data: { user },
-			error: authError
-		} = await data.supabase.auth.getUser();
-		const { data: user_profile, error: profileError } = await data.supabase
-			.from('profiles')
-			.select('*, section:sections (id, name)')
-			.eq('id', user?.id)
-			.single();
-		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
-			p_section_id: user_profile?.section.id,
-			p_event_id: event.id,
-			p_names: names,
-			p_surnames: surnames,
-			p_emails: emails
-		});
-		
-		return { result };
-	}
-</script>
-
-<!-- Creating Database Entries -->
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
-	<h2 class="mb-2 text-xl font-bold">Creating database entries</h2>
-	{#if supabase_status === StepStatus.Waiting}
-		<span class="text-black-600">Waiting...</span>
-	{:else if supabase_status === StepStatus.Loading}
-		<span class="text-black-600">Creating entries...</span>
-	{:else if supabase_status === StepStatus.Success}
-		<span class="text-green-600">Database entries created successfully.</span>
-	{:else if supabase_status === StepStatus.Failure}
-		<span class="text-red-600">Failed to create database entries.</span>
-	{/if}
-</div>
-
-<!-- Sending Emails -->
-<div class="rounded border border-gray-300 bg-white p-4">
-	<h2 class="mb-2 text-xl font-bold">Sending emails</h2>
-	{#if email_status === StepStatus.Waiting}
-		<span class="text-black-600">Waiting...</span>
-	{:else if email_status === StepStatus.Loading}
-		<span class="text-black-600">Sending emails...</span>
-	{:else if email_status === StepStatus.Success}
-		<span class="text-green-600">Emails sent successfully.</span>
-	{:else if email_status === StepStatus.Failure}
-		<span class="text-red-600">Failed to send emails.</span>
-	{/if}
-</div>

src/routes/private/creator/steps/StepCraftEmail.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  export let email: { subject: string, body: string } = { subject: '', body: '' };
-</script>
-
-<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
-  <h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
-  <label class="flex flex-col text-gray-700">
-    Subject
-    <input
-      type="text"
-      bind:value={email.subject}
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Body
-    <textarea
-      bind:value={email.body}
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
-      rows="6"
-      required
-    ></textarea>
-  </label>
-</form>

src/routes/private/creator/steps/StepCreateEvent.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let { event } = $props();
-	let loading = $state(false);
-
-	function handleEnhance() {
-		loading = true;
-
-		return async ({ update }) => {
-			await update();
-			loading = false;
-		};
-	}
-</script>
-
-
-<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
-  <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
-  <label class="flex flex-col text-gray-700">
-    Name
-    <input
-      type="text"
-      name="name"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Date
-    <input
-      type="date"
-      name="date"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Description
-    <textarea
-      name="description"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
-      rows="3"
-      required
-    ></textarea>
-  </label>
-  <button
-    type="submit"
-    class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
-  >
-    Submit
-  </button>
-</form>
-
-{#if Object.keys(event).length === 0}
-  <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
-    {#if loading}
-      <strong>Loading...</strong>
-    {:else}
-      <strong>No event created yet...</strong>
-    {/if}
-  </div>
-{:else}
-  <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
-    <ol>
-      <li><strong>{event.name}</strong></li>
-      <li>{event.date}</li>
-      <li>{event.description}</li>
-    </ol>
-  </div>
-{/if}

src/routes/private/creator/steps/StepFinal.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-    import QRCode from 'qrcode';
-
-	const StepState = {
-		Waiting: 'waiting',
-		Processing: 'processing',
-		FinishedSuccess: 'finished_success',
-		FinishedFail: 'finished_fail'
-	};
-
-	let qr_codes_state = $state(StepState.Processing);
-	let emails_state = $state(StepState.FinishedSuccess);
-
-	// Inserts all participants into the database and returns their assigned IDs.
-	async function insert_data_supabase(data, participants, new_event) {
-		const names = participants.map((p) => p.name);
-		const surnames = participants.map((p) => p.surname);
-		const emails = participants.map((p) => p.email);
-		const {
-			data: { user },
-			error: authError
-		} = await data.supabase.auth.getUser();
-		const { data: user_profile, error: profileError } = await data.supabase
-			.from('profiles')
-			.select('*, section:sections (id, name)')
-			.eq('id', user?.id)
-			.single();
-		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
-			p_section_id: user_profile?.section.id,
-			p_event_id: new_event.id,
-			p_names: names,
-			p_surnames: surnames,
-			p_emails: emails
-		});
-
-		return { result };
-	}
-
-    // Creates a base64 interpretation of the ticket ID
-	function createB64QRCode(data) {
-		QRCode.toDataURL('I am a pony!')
-            .then((url) => {
-                const parts = url.split(',');
-                return { base64data: parts[1] };
-			})
-			.catch((err) => {
-				console.error(err);
-			});
-	}
-
-    function sendEmail(email, subject, body, qr_code_base64) {
-        // Here you would implement the logic to send the email.
-        // This is a placeholder function.
-        console.log(`Sending email to ${email} with subject "${subject}" and body "${body}"`);
-        console.log(`QR Code Base64: ${qr_code_base64}`);
-    }
-</script>
-
-Pl

src/routes/private/creator/steps/StepUploadFiles.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let { participants = [] } = $props();
-	let loading = $state(false);
-
-	function handleEnhance() {
-		loading = true;
-
-		return async ({ update }) => {
-			await update();
-			loading = false;
-		};
-	}
-</script>
-
-<form
-	method="POST"
-	action="?/participants"
-	use:enhance={handleEnhance}
-	enctype="multipart/form-data"
-	class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
->
-	<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
-	<label class="flex flex-col text-gray-700">
-		CSV File
-		<input
-			type="file"
-			name="participants"
-			id="participants"
-			accept=".csv"
-			class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
-			required
-		/>
-	</label>
-	<button
-		type="submit"
-		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
-	>
-		Submit
-	</button>
-</form>
-
-{#if participants.length === 0}
-	<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
-		{#if loading}
-			<strong>Loading...</strong>
-		{:else}
-			<strong>No participants yet...</strong>
-		{/if}
-	</div>
-{:else}
-	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
-		<ul class="space-y-2">
-			{#each participants as p, i}
-				<li class="flex items-center justify-between border-b pb-1">
-					<div>
-						<div class="font-semibold">{p.name} {p.surname}</div>
-						<div class="font-mono text-xs text-gray-600">{p.email}</div>
-					</div>
-				</li>
-			{/each}
-		</ul>
-	</div>
-{/if}

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

@@ -1,24 +1,53 @@
 <script lang="ts">
-    export let data;
+    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('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>
 
 <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>
+  {#if loading}
+    {#each Array(4) as _}
+      <div class="block border border-gray-300 rounded bg-white p-4 shadow-none min-h-[72px] h-full w-full">
+        <div class="flex flex-col gap-1">
+          <span class="font-semibold text-lg text-gray-300 bg-gray-200 rounded w-1/2 h-6 mb-2 inline-block"></span>
+          <span class="text-gray-300 text-sm bg-gray-100 rounded w-1/3 h-4 inline-block"></span>
+        </div>
       </div>
-    </a>
-  {/each}
+    {/each}
+  {:else}
+    {#each events as event}
+      <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>
 
 <a
-  href="/private/creator"
+  href="/private/events/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

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,77 @@
+<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>

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
+	import StepCraftEmail from './steps/StepCraftEmail.svelte';
+	import StepCreateEvent from './steps/StepCreateEvent.svelte';
+	import StepOverview from './steps/StepOverview.svelte';
+	import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+
+	let { data, form } = $props();
+
+	let event = $state({});
+	let participants = $state([]);
+	let email = $state({ body: '', subject: '' });
+	let authorized = $state(false);
+	let existingEventId = $state(null);
+	let isAddingParticipants = $state(false);
+
+	onMount(async () => {
+		const eventId = page.url.searchParams.get('eventId');
+		if (eventId) {
+			existingEventId = eventId;
+			isAddingParticipants = true;
+
+			// Fetch existing event data to prefill the form
+			const { data: existingEvent } = await data.supabase
+				.from('events')
+				.select('*')
+				.eq('id', eventId)
+				.single();
+
+			if (existingEvent) {
+				event = {
+					name: existingEvent.name,
+					date: existingEvent.date,
+					id: existingEvent.id
+				};
+			}
+		}
+	});
+
+	$effect(() => {
+		if (form && form.event) {
+			event = form.event;
+		}
+		if (form && form.participants) {
+			participants = form.participants;
+		}
+	});
+
+	// Array of step components in order
+	const steps = [
+		StepConnectGoogle,
+		StepCreateEvent,
+		StepUploadParticipants,
+		StepCraftEmail,
+		StepOverview
+	];
+
+	let step: number = $state(0);
+
+	let stepConditions = $derived([
+		authorized,
+		!!event?.name,
+		!!participants?.length,
+		!!email.subject
+	]);
+
+	function nextStep() {
+		if (step < steps.length - 1) step += 1;
+	}
+	function prevStep() {
+		if (step > 0) step -= 1;
+	}
+</script>
+
+{#if isAddingParticipants}
+	<div class="mt-2 mb-4">
+		<h1 class="text-center text-xl font-semibold text-gray-700">
+			Adding Participants to "{event.name}"
+		</h1>
+	</div>
+{/if}
+
+{#if step == 0}
+	<StepConnectGoogle bind:authorized />
+{:else if step == 1}
+	<StepCreateEvent bind:event readonly={isAddingParticipants} />
+{:else if step == 2}
+	<StepUploadParticipants bind:participants />
+{:else if step == 3}
+	<StepCraftEmail bind:email />
+{:else if step == 4}
+	<StepOverview
+		{data}
+		{event}
+		{participants}
+		{email}
+		{stepConditions}
+		{existingEventId}
+		{isAddingParticipants}
+	/>
+{/if}
+
+<div class="pb-20"></div>
+
+<div
+	class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
+	style="max-width: 100vw;"
+>
+	<div class="justify-content-center container mx-auto flex max-w-2xl p-2">
+		<button
+			onclick={prevStep}
+			disabled={step === 0}
+			class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Previous step"
+		>
+			Previous
+		</button>
+		<span class="flex flex-1 items-center justify-center text-center font-medium text-gray-600">
+			Step {step + 1} of {steps.length}
+		</span>
+		<button
+			onclick={nextStep}
+			disabled={step === steps.length - 1 || !stepConditions[step]}
+			class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			Next
+		</button>
+	</div>
+</div>

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

@@ -31,7 +31,8 @@ onMount(async () => {
 
 const connect = () => goto('/private/api/gmail?action=auth');
 
-async function sendTestEmail() {
+async function sendTestEmail(event: Event) {
+	event.preventDefault();
 	error = '';
 	success = '';
 	loading = true;
@@ -66,12 +67,11 @@ async function sendTestEmail() {
 	{#if !authorized}
 		<div class="mb-4 flex items-center justify-between">
 			<p class="text-gray-700">Google not connected.</p>
-			<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
+			<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
 				Connect Google
 			</button>
 		</div>
-	{:else}
-		<form on:submit|preventDefault={sendTestEmail} class="space-y-4">
+		<form onsubmit={sendTestEmail} class="space-y-4">
 			<label class="block">
 				<span class="text-gray-700">To</span>
 				<input type="email" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={to} required />

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

@@ -0,0 +1,252 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+	import QRCode from 'qrcode';
+
+	let { data } = $props();
+	let session_storage_id = page.url.searchParams.get('data');
+	let all_data = {};
+
+	const StepStatus = {
+		Loading: 'loading',
+		Waiting: 'waiting',
+		Success: 'success',
+		Failure: 'failure'
+	} as const;
+	type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
+	let event_status: StepStatus = $state(StepStatus.Waiting);
+	let participants_status: StepStatus = $state(StepStatus.Waiting);
+	let email_status: StepStatus = $state(StepStatus.Waiting);
+
+	let createdParticipants = $state([]);
+	let mailStatuses = $state([]); // { email, name, status: 'pending' | 'success' | 'failure' }
+
+	onMount(async () => {
+		if (!session_storage_id) {
+			console.error('No session storage ID provided in the URL');
+			return;
+		}
+		all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
+
+		try {
+			let createdEvent;
+			
+			if (all_data.isAddingParticipants && all_data.existingEventId) {
+				// Skip event creation for existing events
+				event_status = StepStatus.Success;
+				createdEvent = { id: all_data.existingEventId, ...all_data.event };
+			} else {
+				// Create new event
+				event_status = StepStatus.Loading;
+				createdEvent = await createEventInSupabase(all_data.event);
+				event_status = StepStatus.Success;
+			}
+
+			participants_status = StepStatus.Loading;
+			createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
+			participants_status = StepStatus.Success;
+
+		} catch (e) {
+			if (event_status === StepStatus.Loading) event_status = StepStatus.Failure;
+			else participants_status = StepStatus.Failure;
+			console.error(e);
+		}
+	});
+
+	async function createEventInSupabase(event) {
+		console.log('Creating event in Supabase:', event);
+		const { data: createdEvent, error: eventError } = await data.supabase.rpc('create_event', {
+			p_name: event.name,
+			p_date: event.date
+		});
+		console.log('Created event:', createdEvent);
+		if (eventError) throw eventError;
+		return createdEvent;
+	}
+
+	async function createParticipantsInSupabase(participants, event) {
+		const names = participants.map((p) => p.name);
+		const surnames = participants.map((p) => p.surname);
+		const emails = participants.map((p) => p.email);
+		const {
+			data: { user },
+			error: authError
+		} = await data.supabase.auth.getUser();
+		const { data: user_profile, error: profileError } = await data.supabase
+			.from('profiles')
+			.select('*, section:sections (id, name)')
+			.eq('id', user?.id)
+			.single();
+		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
+			p_section_id: user_profile?.section.id,
+			p_event_id: event.id,
+			p_names: names,
+			p_surnames: surnames,
+			p_emails: emails
+		});
+		if (qrCodeError) throw qrCodeError;
+		return result;
+	}
+
+	async function sendEmails(participants, email) {
+		mailStatuses = participants.map((p) => ({ email: p.email, name: `${p.name} ${p.surname}`, status: 'pending' }));
+		let allSuccess = true;
+		for (let i = 0; i < participants.length; i++) {
+			const obj = participants[i];
+			let qr_code = await dataToBase64(obj.id);
+			const payload = {
+				action: 'send',
+				to: obj.email,
+				subject: email.subject,
+				text: email.body,
+				qr_code: qr_code,
+				refreshToken: localStorage.getItem('gmail_refresh_token')
+			};
+			try {
+				const res = await fetch('/private/api/gmail', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(payload)
+				});
+				if (res.ok) {
+					mailStatuses[i].status = 'success';
+				} else {
+					mailStatuses[i].status = 'failure';
+					allSuccess = false;
+					console.error('Failed to send email to', obj.email, await res.text());
+				}
+			} catch (e) {
+				mailStatuses[i].status = 'failure';
+				allSuccess = false;
+				console.error('Failed to send email to', obj.email, e);
+			}
+		}
+		return allSuccess;
+	}
+
+	async function dataToBase64(data: string): Promise<string> {
+		try {
+			const url = await QRCode.toDataURL(data);
+			const parts = url.split(',');
+			const base64 = parts[1];
+			return base64;
+		} catch (err) {
+			console.error(err);
+			return '';
+		}
+	}
+
+	async function launchMailCampaign() {
+		email_status = StepStatus.Loading;
+		try {
+			const allSuccess = await sendEmails(createdParticipants, all_data.email);
+			email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
+		} catch (e) {
+			email_status = StepStatus.Failure;
+			console.error(e);
+		}
+	}
+</script>
+
+<!-- Creating Event Entry -->
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">
+		{all_data.isAddingParticipants ? 'Using existing event' : 'Creating event'}
+	</h2>
+	{#if event_status === StepStatus.Waiting}
+		<span class="text-black-600">Waiting...</span>
+	{:else if event_status === StepStatus.Loading}
+		<span class="text-black-600">Creating event...</span>
+	{:else if event_status === StepStatus.Success}
+		<span class="text-green-600">
+			{all_data.isAddingParticipants ? 'Using existing event.' : 'Event created successfully.'}
+		</span>
+	{:else if event_status === StepStatus.Failure}
+		<span class="text-red-600">Failed to create event.</span>
+	{/if}
+</div>
+
+<!-- Creating Database Entries -->
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Creating QR codes for participants</h2>
+	{#if participants_status === StepStatus.Waiting}
+		<span class="text-black-600">Waiting...</span>
+	{:else if participants_status === StepStatus.Loading}
+		<span class="text-black-600">Creating entries...</span>
+	{:else if participants_status === StepStatus.Success}
+		<span class="text-green-600">QR codes created successfully.</span>
+	{:else if participants_status === StepStatus.Failure}
+		<span class="text-red-600">Failed to create QR codes.</span>
+	{/if}
+</div>
+
+<!-- Sending Emails -->
+<div class="rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-1 text-xl font-bold">Sending emails</h2>
+	<p class="text-sm text-red-500 mb-2">After pressing send, you must not exit this window until the mail are all sent!</p>
+	{#if email_status === StepStatus.Waiting}
+		<div class="flex items-center justify-between">
+			<span class="text-black-600">Waiting...</span>
+			<button
+				disabled={event_status !== StepStatus.Success || participants_status !== StepStatus.Success}
+				onclick={launchMailCampaign}
+				class="ml-4 px-6 py-2 rounded font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed
+					{event_status === StepStatus.Success && participants_status === StepStatus.Success ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-400 text-white'}"
+			>
+				Send all emails
+			</button>
+		</div>
+	{:else}
+		<ul class="mt-4 space-y-2">
+			{#each createdParticipants as p, i}
+				<li class="flex items-center border-b pb-1 gap-2">
+					{#if mailStatuses[i]?.status === 'success'}
+						<svg
+							title="Sent"
+							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 if mailStatuses[i]?.status === 'failure'}
+						<svg
+							title="Failed"
+							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>
+					{:else}
+						<svg
+							title="Pending"
+							class="mr-2 inline h-4 w-4 text-gray-400"
+							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}
+					<span class="font-semibold">{p.name} {p.surname}</span>
+					<span class="font-mono text-xs text-gray-600 ml-auto">{p.email}</span>
+				</li>
+			{/each}
+		</ul>
+		{#if email_status === StepStatus.Loading}
+			<span class="block mt-2 text-black-600">Sending emails...</span>
+		{:else if email_status === StepStatus.Success}
+			<span class="block mt-2 text-green-600">Emails sent successfully.</span>
+		{:else if email_status === StepStatus.Failure}
+			<span class="block mt-2 text-red-600">Failed to send emails.</span>
+		{/if}
+	{/if}
+</div>

src/routes/private/events/creator/steps/StepConnectGoogle.svelte

@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	{#if loading}
 		<div class="flex items-center space-x-2">
 			<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -59,7 +59,7 @@
 		{#if !authorized}
 			<section class="flex items-center justify-between w-full">
 				<p class="mr-4">You haven’t connected your Google account yet.</p>
-				<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
+				<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
 					Connect Google
 				</button>
 			</section>

src/routes/private/events/creator/steps/StepCraftEmail.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	let { email = $bindable() } = $props();
+
+	let showForm = $derived(!email.subject || !email.body);
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		email = {
+			subject: formData.get('subject') as string,
+			body: formData.get('body') as string
+		};
+		showForm = false;
+	}
+
+	function showEditForm() {
+		showForm = true;
+	}
+</script>
+
+{#if showForm}
+	<form onsubmit={handleSubmit} class="flex mt-2 flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
+		<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
+		<label class="flex flex-col text-gray-700">
+			Subject
+			<input
+				type="text"
+				name="subject"
+				value={email.subject ?? ''}
+				class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+				required
+			/>
+		</label>
+		<label class="flex flex-col text-gray-700">
+			Body
+			<textarea
+				name="body"
+				value={email.body ?? ''}
+				class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
+				rows="6"
+				required
+			></textarea>
+		</label>
+		<button
+			type="submit"
+			class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Save
+		</button>
+	</form>
+{:else}
+	<button
+		class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		onclick={showEditForm}
+		aria-label="Edit email"
+	>
+		Edit email
+	</button>
+	<div class="rounded border border-gray-300 bg-white p-4">
+		<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
+		<div class="mb-2">
+			<span class="block font-semibold">{email.subject}</span>
+		</div>
+		<div class="whitespace-pre-line text-gray-800">
+			{email.body}
+		</div>
+	</div>
+{/if}

src/routes/private/events/creator/steps/StepCreateEvent.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	let { event = $bindable(), readonly = false } = $props();
+
+	let loading = $state(false);
+	let showForm = $derived((!event.name || !event.date) && !readonly);
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		event = {
+			name: formData.get('name'),
+			date: formData.get('date')
+		};
+		showForm = false;
+		loading = false;
+	}
+
+	function showEditForm() {
+		if (!readonly) {
+			showForm = true;
+		}
+	}
+</script>
+
+{#if showForm}
+	<form
+		onsubmit={handleSubmit}
+		autocomplete="off"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+	>
+		<h2 class="mb-4 text-center text-2xl font-semibold">Create Event</h2>
+		<label class="mt-2 flex flex-col text-gray-700">
+			Name
+			<input
+				type="text"
+				name="name"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+				value={event.name ?? ''}
+			/>
+		</label>
+		<label class="mt-2 flex flex-col text-gray-700">
+			Date
+			<input
+				type="date"
+				name="date"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+				value={event.date ?? ''}
+			/>
+		</label>
+		<button
+			type="submit"
+			class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Save
+		</button>
+	</form>
+{/if}
+
+{#if !showForm}
+	{#if !readonly}
+		<button
+			class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+			onclick={showEditForm}
+			aria-label="Edit event"
+		>
+			Edit the event
+		</button>
+	{/if}
+	<div class="rounded border border-gray-300 bg-white p-4">
+		<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
+		{#if Object.keys(event).length > 0}
+			<ul>
+				<li><span class="font-semibold">{event.name}</span></li>
+				<li class="text-gray-700">{event.date}</li>
+			</ul>
+		{:else}
+			<strong class="text-gray-700">No event created yet...</strong>
+		{/if}
+	</div>
+{/if}

src/routes/private/events/creator/steps/StepOverview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	
-	let { data, event, participants, email, stepConditions } = $props();
+	let { data, event, participants, email, stepConditions, existingEventId = null, isAddingParticipants = false } = $props();
 
 	function redirectToFinish() {
 		// Generate a random variable name
@@ -9,21 +9,20 @@
 		// Save the data to sessionStorage
 		sessionStorage.setItem(
 			varName,
-			JSON.stringify({ event, participants, email })
+			JSON.stringify({ event, participants, email, existingEventId, isAddingParticipants })
 		);
 		// Redirect with the variable name as a query parameter
-		goto(`/private/creator/finish?data=${encodeURIComponent(varName)}`);
+		goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
 	}
 
 </script>
 
 <!-- New Event Overview -->
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
 	<ul class="space-y-1">
 		<li><span class="font-semibold">Name:</span> {event.name}</li>
 		<li><span class="font-semibold">Date:</span> {event.date}</li>
-		<li><span class="font-semibold">Description:</span> {event.description}</li>
 	</ul>
 </div>
 
@@ -59,7 +58,7 @@
 	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
 	disabled={!stepConditions.every(Boolean)}
 >
-	Generate QR codes and send
+	{isAddingParticipants ? 'Add participants and send emails' : 'Generate QR codes and send'}
 </button>
 
 <div class="mt-2 space-y-1">

src/routes/private/events/creator/steps/StepUploadParticipants.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import Papa from 'papaparse';
+
+	let { participants = $bindable() } = $props();
+	let showForm = $derived(participants.length === 0);
+	let errors = $state([]);
+
+	function isValidEmail(email: string): boolean {
+		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		errors = [];
+		const form = e.target as HTMLFormElement;
+		const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
+		const file = fileInput?.files?.[0];
+		if (!file) return;
+		const csvText = await file.text();
+		const { data: parsedRows } = Papa.parse<string[]>(csvText, {
+			skipEmptyLines: true,
+			header: false
+		});
+		// Remove the first row (header)
+		if (parsedRows.length > 0) {
+			parsedRows.shift();
+		}
+		const validated = [];
+		parsedRows.forEach((row, idx) => {
+			if (!row || row.length < 3) {
+				errors.push(`Row ${idx + 2} is missing columns.`);
+				return;
+			}
+			const [name, surname, email] = row;
+			if (!name || !surname || !email) {
+				errors.push(`Row ${idx + 2} has missing values.`);
+				return;
+			}
+			validated.push({
+				name,
+				surname,
+				email,
+				email_valid: isValidEmail(email)
+			});
+		});
+		if (errors.length > 0) {
+			return; // Do not proceed if there are errors
+		}
+		if (validated.length === 0) {
+			participants = [];
+			return;
+		}
+		participants = validated.sort((a, b) => {
+			if (a.email_valid === b.email_valid) return 0;
+			return a.email_valid ? 1 : -1;
+		});
+		showForm = false;
+	}
+
+	function showEditForm() {
+		showForm = true;
+	}
+</script>
+
+{#if showForm}
+	{#if errors.length > 0}
+		<div class="mb-4 mt-2 rounded border border-red-400 bg-red-50 p-4 text-red-700">
+			<ul class="list-disc ml-4">
+				{#each errors as err}
+					<li>{err}</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+	<form
+		onsubmit={handleSubmit}
+		autocomplete="off"
+		enctype="multipart/form-data"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+	>
+		<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
+		<label class="flex flex-col text-gray-700">
+			CSV File
+			<input
+				type="file"
+				name="participants"
+				id="participants"
+				accept=".csv"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+			/>
+		</label>
+		<button
+			type="submit"
+			class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Submit
+		</button>
+	</form>
+{:else}
+	<button
+		class="w-full mt-2 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		onclick={showEditForm}
+		aria-label="Edit participants"
+	>
+		Edit participants
+	</button>
+{/if}
+
+{#if !showForm}
+	<div class="mt-4 rounded border border-gray-300 bg-white p-4">
+		<div class="mb-2 flex items-center justify-between">
+			<h2 class="text-xl font-bold">Participants ({participants.length})</h2>
+			{#if participants.length > 0}
+				{#if participants.some((p) => !p.email_valid)}
+					<span class="text-xs text-gray-500">Some emails appear invalid</span>
+				{:else}
+					<span class="text-xs text-gray-500">All emails appear valid</span>
+				{/if}
+			{/if}
+		</div>
+
+		<ul class="space-y-1">
+			{#each participants as p}
+				<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+					{#if p.email_valid}
+						<svg
+							title="Valid email"
+							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="Invalid email"
+							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>
+					<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}

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

@@ -1,17 +1,64 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+
 	let { data } = $props();
 
-	const scannedCount = data.participants.filter((p) => p.scanned).length;
-	const notScannedCount = data.participants.length - scannedCount;
+	let event_data: any = $state(null);
+	let participants: any[] = $state([]);
+	let loading = $state(true);
+	let scannedCount: number = $state(0);
+	let notScannedCount: number = $state(0);
 
+	onMount(async () => {
+		const event_id = page.url.searchParams.get('id');
+
+		if (!event_id) {
+			loading = false;
+			return;
+		}
+
+		const { data: event } = await data.supabase
+			.from('events')
+			.select('*')
+			.eq('id', event_id)
+			.single();
+		event_data = event;
+
+		const { data: parts } = await data.supabase
+			.from('participants')
+			.select('*, scanned_by:profiles (id, display_name)')
+			.eq('event', event_id);
+		participants = parts || [];
+		scannedCount = participants.filter((p) => p.scanned).length;
+		notScannedCount = participants.length - scannedCount;
+		loading = false;
+	});
 </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 class="flex items-center justify-between gap-4">
+		<div class="flex flex-col gap-1">
+			{#if loading}
+				<div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
+				<div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
+			{:else}
+				<span class="text-gray-700 text-lg font-semibold">{event_data?.name}</span>
+				<span class="text-gray-500 text-sm">{event_data?.date}</span>
+			{/if}
+		</div>
+		{#if loading}
+			<div class="h-10 w-32 animate-pulse rounded bg-gray-200"></div>
+		{:else if event_data}
+			<a
+				href={`/private/events/creator?eventId=${event_data.id}`}
+				class="rounded border border-gray-300 bg-blue-600 px-6 py-2 font-semibold text-white transition hover:bg-blue-700"
+			>
+				Add Participants
+			</a>
+		{/if}
 	</div>
 </div>
 
@@ -26,7 +73,11 @@
 		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 		</svg>
-		<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
+		{#if loading}
+			<div class="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
+		{:else}
+			<span class="text-sm text-gray-700">Scanned ({scannedCount})</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">
@@ -41,55 +92,71 @@
 			<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>
+		{#if loading}
+			<div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
+		{:else}
+			<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
+		{/if}
 	</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>
+	<h2 class="mb-2 rounded text-xl font-bold">
+		{#if loading}
+			<div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
+		{:else}
+			Participants ({participants.length})
+		{/if}
+	</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}
+		{#if loading}
+			<li>
+				<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
 			</li>
-		{/each}
+		{:else}
+			{#each participants as p}
+				<li class="flex items-center gap-2 border-b border-gray-300 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="ml-2 flex flex-row items-end">
+							<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}
+		{/if}
 	</ul>
 </div>

src/service-worker.ts

@@ -0,0 +1,80 @@
+/// <reference types="@sveltejs/kit" />
+import { build, files, version } from '$service-worker';
+
+// Create a unique cache name for this deployment
+const CACHE = `cache-${version}`;
+
+const ASSETS = [
+	...build, // the app itself
+	...files  // everything in `static`
+];
+
+self.addEventListener('install', (event) => {
+	// Create a new cache and add all files to it
+	async function addFilesToCache() {
+		const cache = await caches.open(CACHE);
+		await cache.addAll(ASSETS);
+	}
+
+	event.waitUntil(addFilesToCache());
+});
+
+self.addEventListener('activate', (event) => {
+	// Remove previous cached data from disk
+	async function deleteOldCaches() {
+		for (const key of await caches.keys()) {
+			if (key !== CACHE) await caches.delete(key);
+		}
+	}
+
+	event.waitUntil(deleteOldCaches());
+});
+
+self.addEventListener('fetch', (event) => {
+	// ignore POST requests etc
+	if (event.request.method !== 'GET') return;
+
+	async function respond() {
+		const url = new URL(event.request.url);
+		const cache = await caches.open(CACHE);
+
+		// `build`/`files` can always be served from the cache
+		if (ASSETS.includes(url.pathname)) {
+			const response = await cache.match(url.pathname);
+
+			if (response) {
+				return response;
+			}
+		}
+
+		// for everything else, try the network first, but
+		// fall back to the cache if we're offline
+		try {
+			const response = await fetch(event.request);
+
+			// if we're offline, fetch can return a value that is not a Response
+			// instead of throwing - and we can't pass this non-Response to respondWith
+			if (!(response instanceof Response)) {
+				throw new Error('invalid response from fetch');
+			}
+
+			if (response.status === 200) {
+				cache.put(event.request, response.clone());
+			}
+
+			return response;
+		} catch (err) {
+			const response = await cache.match(event.request);
+
+			if (response) {
+				return response;
+			}
+
+			// if there's no cache, then just error out
+			// as there is nothing we can do to respond to this request
+			throw err;
+		}
+	}
+
+	event.respondWith(respond());
+});