Merge pull request 'supabase-local' (#16) from supabase-local into main

Reviewed-on: #16

.github/copilot-instructions.md

@@ -1,9 +1,11 @@
 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. 
+Basics:
-svelte.dev
+- If you have any questions, always ask me first!
-svelte.dev
+- Use Svelte 5 runes exclusively
+- Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
+- When doing client-side loading, always implement placeholders and loaders, so the UI remains responsive and layout shifts are minimized.
+  - Don't use placeholders and loaders for static data like heading etc.
 
 Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
 

src/routes/api/auth/refresh/+server.ts

@@ -1,30 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { getOAuthClient } from '$lib/google/auth/server.js';
-
-export const POST: RequestHandler = async ({ request }) => {
-	try {
-		const { refreshToken } = await request.json();
-		
-		if (!refreshToken) {
-			return json({ error: 'Refresh token is required' }, { status: 400 });
-		}
-
-	const oauth = getOAuthClient();
-		oauth.setCredentials({ refresh_token: refreshToken });
-
-		const { credentials } = await oauth.refreshAccessToken();
-		
-		if (!credentials.access_token) {
-			return json({ error: 'Failed to refresh token' }, { status: 500 });
-		}
-
-		return json({ 
-			accessToken: credentials.access_token,
-			expiresIn: credentials.expiry_date 
-		});
-	} catch (error) {
-		console.error('Error refreshing access token:', error);
-		return json({ error: 'Failed to refresh access token' }, { status: 500 });
-	}
-};

src/routes/api/sheets/[sheetId]/data/+server.ts

@@ -1,22 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ params, request }) => {
-	try {
-		const { sheetId } = params;
-		const authHeader = request.headers.get('authorization');
-		
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
-
-		return json(sheetData);
-	} catch (error) {
-		console.error('Error fetching spreadsheet data:', error);
-		return json({ error: 'Failed to fetch spreadsheet data' }, { status: 500 });
-	}
-};

src/routes/api/sheets/recent/+server.ts

@@ -1,20 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ request }) => {
-	try {
-		const authHeader = request.headers.get('authorization');
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
-
-		return json(spreadsheets);
-	} catch (error) {
-		console.error('Error fetching recent spreadsheets:', error);
-		return json({ error: 'Failed to fetch spreadsheets' }, { status: 500 });
-	}
-};

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

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
   import { page } from '$app/state';
+  import EventInformation from './components/EventInformation.svelte';
+  import Statistics from './components/Statistics.svelte';
 
 	let { data } = $props();
 
@@ -37,52 +39,16 @@
 
 <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">
+<EventInformation 
-	<div class="flex flex-col gap-1">
+  event={event_data}
-		{#if loading}
+  loading={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="mb-4 rounded-lg border border-gray-300 bg-white p-6">
-    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+  <h2 class="mb-4 text-lg font-semibold text-gray-900">Event Statistics</h2>
-        <div class="flex items-center justify-center gap-2">
+  <Statistics 
-            <svg
+    loading={loading}
-                class="inline h-4 w-4 text-blue-600"
+    totalParticipants={event_data?.total_participants ?? 0}
-                fill="none"
+    scannedParticipants={event_data?.scanned_participants ?? 0}
-                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>

src/routes/private/events/event/archived/components/EventInformation.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface ArchivedEvent {
+    name: string;
+    date: string;
+  }
+
+  let { event, loading } = $props<{
+    event: ArchivedEvent | null;
+    loading: boolean;
+  }>();
+</script>
+
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+  <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}
+      <h2 class="mb-2 text-2xl font-semibold text-gray-900">{event?.name}</h2>
+      <div class="space-y-3">
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
+          <span class="text-sm text-gray-900">{event?.date}</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>

src/routes/private/events/event/archived/components/Statistics.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  let { 
+    loading,
+    totalParticipants,
+    scannedParticipants
+  } = $props<{
+    loading: boolean;
+    totalParticipants: number;
+    scannedParticipants: number;
+  }>();
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
+        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Total participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-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>
+            <span class="text-sm font-medium text-gray-700">Total participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{totalParticipants}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Scanned participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-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 font-medium text-gray-700">Scanned participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{scannedParticipants}</span>
+          {/if}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
-	import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
+	
+	// Import components
+	import EventInformation from './components/EventInformation.svelte';
+	import EmailTemplate from './components/EmailTemplate.svelte';
+	import GoogleAuthentication from './components/GoogleAuthentication.svelte';
+	import ParticipantsTable from './components/ParticipantsTable.svelte';
+	import EmailSending from './components/EmailSending.svelte';
+	import EmailResults from './components/EmailResults.svelte';
+	import ErrorMessage from './components/ErrorMessage.svelte';
+	import Statistics from './components/Statistics.svelte';
 
 	let { data } = $props();
 
@@ -31,7 +40,7 @@
 		email_sent: boolean;
 	}
 
-	// State
+	// State management with Svelte 5 runes
 	let event = $state<Event | null>(null);
 	let participants = $state<Participant[]>([]);
 	let loading = $state(true);
@@ -43,7 +52,7 @@
 	let error = $state('');
 
 	// Get event ID from URL params
-	let eventId = $derived($page.url.searchParams.get('id'));
+	let eventId = $derived(page.url.searchParams.get('id'));
 
 	onMount(async () => {
 		if (eventId) {
@@ -197,7 +206,7 @@
 
 		try {
 			// Send all emails in batch
-			const response = await fetch('/private/api/gmail', {
+			const response = await fetch('/private/api/google/gmail', {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
@@ -209,7 +218,9 @@
 					eventId: event.id,
 					refreshToken: refreshToken
 				})
-			});			if (response.ok) {
+			});
+			
+			if (response.ok) {
 				const result = await response.json();
 				emailProgress.sent = result.summary.success;
 				emailResults = result;
@@ -235,12 +246,12 @@
 		}
 	}
 
-	function formatDate(dateString: string) {
+	function handleGoogleAuthSuccess() {
-		return new Date(dateString).toLocaleDateString('en-GB', {
+		error = '';
-			day: '2-digit',
+	}
-			month: '2-digit',
+	
-			year: 'numeric'
+	function handleGoogleAuthError(errorMsg: string) {
-		});
+		error = errorMsg;
 	}
 </script>
 
@@ -249,360 +260,50 @@
 	<h1 class="text-center text-2xl font-bold">Event Overview</h1>
 </div>
 
-<!-- Event Information -->
+<!-- Composable components -->
+<EventInformation {event} {loading} {error} />
+
+<GoogleAuthentication 
+	{loading} 
+	onSuccess={handleGoogleAuthSuccess} 
+	onError={handleGoogleAuthError} 
+/>
+
+<ParticipantsTable
+{event}
+{participants}
+{loading}
+participantsLoading={participantsLoading}
+syncingParticipants={syncingParticipants}
+onSyncParticipants={syncParticipants}
+/>
+
 <div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
-	{#if loading}
+	<h2 class="mb-4 text-xl font-semibold text-gray-900">Statistics</h2>
-		<!-- Loading placeholder -->
+	<Statistics 
-		<div class="space-y-4">
+		loading={loading || participantsLoading}
-			<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
+		totalCount={participants.length}
-			<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
+		scannedCount={participants.filter(p => p.scanned).length}
-			<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
+		emailSentCount={participants.filter(p => p.email_sent).length}
-			<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
+		pendingCount={participants.filter(p => !p.email_sent).length}
-		</div>
-	{:else if event}
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-			<div>
-				<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
-				<div class="space-y-3">
-					<div class="flex items-center">
-						<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
-						<span class="text-sm text-gray-900">{formatDate(event.date)}</span>
-					</div>
-					<div class="flex items-center">
-						<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
-						<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
-					</div>
-					<div class="flex items-center">
-						<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
-						<a
-							href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
-							target="_blank"
-							rel="noopener noreferrer"
-							class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mr-1 h-3 w-3"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-								/>
-							</svg>
-							Open in Google Sheets
-						</a>
-					</div>
-				</div>
-			</div>
-			<div>
-				<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
-				<div class="space-y-2">
-					<div>
-						<span class="text-sm font-medium text-gray-500">Subject:</span>
-						<p class="text-sm text-gray-900">{event.email_subject}</p>
-					</div>
-					<div>
-						<span class="text-sm font-medium text-gray-500">Body:</span>
-						<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	{:else if error}
-		<div class="py-8 text-center">
-			<p class="text-red-600">{error}</p>
-		</div>
-	{/if}
-</div>
-
-<!-- Google Authentication Section -->
-<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
-	<div class="mb-4 flex items-center justify-between">
-		<h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
-		<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
-	</div>
-	<GoogleAuthButton 
-		size="small" 
-		variant="secondary"
-		onSuccess={() => {
-			// Refresh the page or update UI state as needed
-			error = '';
-		}}
-		onError={(errorMsg) => {
-			error = errorMsg;
-		}}
 	/>
 </div>
 
-<!-- Participants Section -->
+<EmailTemplate {event} {loading} />
-<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
-	<div class="mb-4 flex items-center justify-between">
-		<h2 class="text-xl font-semibold text-gray-900">Participants</h2>
-		<button
-			onclick={syncParticipants}
-			disabled={syncingParticipants || !event}
-			class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-		>
-			{#if syncingParticipants}
-				Syncing...
-			{:else}
-				Sync Participants
-			{/if}
-		</button>
-	</div>
 
-	{#if participantsLoading}
+<EmailSending 
-		<!-- Loading placeholder for participants -->
+  {loading}
-		<div class="space-y-3">
+  {participants}
-			{#each Array(5) as _}
+  {sendingEmails}
-				<div class="grid grid-cols-5 gap-4 border-b border-gray-200 py-3">
+  {emailProgress}
-					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
+  {event}
-					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
+  onSendEmails={sendEmailsToUncontacted}
-					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
-					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
-					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
-				</div>
-			{/each}
-		</div>
-	{:else if participants.length > 0}
-		<div class="overflow-x-auto">
-			<table class="w-full">
-				<thead class="bg-gray-50">
-					<tr>
-						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
-						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Surname</th>
-						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
-						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Scanned</th>
-						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email Sent</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each participants as participant}
-						<tr class="border-b border-gray-200 hover:bg-gray-50">
-							<td class="px-4 py-3 text-sm text-gray-900">{participant.name}</td>
-							<td class="px-4 py-3 text-sm text-gray-900">{participant.surname}</td>
-							<td class="px-4 py-3 text-sm text-gray-900">{participant.email}</td>
-							<td class="px-4 py-3 text-sm">
-								{#if participant.scanned}
-									<div class="flex items-center text-green-600">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-5 w-5"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-												clip-rule="evenodd"
 />
-										</svg>
-									</div>
-								{:else}
-									<div class="flex items-center text-gray-400">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-5 w-5"
-											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>
-									</div>
-								{/if}
-							</td>
-							<td class="px-4 py-3 text-sm">
-								{#if participant.email_sent}
-									<div class="flex items-center text-blue-600">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-5 w-5"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</div>
-								{:else}
-									<div class="flex items-center text-gray-400">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-5 w-5"
-											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>
-									</div>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{:else}
-		<div class="py-8 text-center">
-			<p class="text-gray-500">
-				No participants found. Click "Sync Participants" to load from Google Sheets.
-			</p>
-		</div>
-	{/if}
-</div>
 
-<!-- Email Sending Section -->
-<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
-	<div class="mb-4 flex items-center justify-between">
-		<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
-		<div class="text-sm text-gray-500">
-			{participants.filter(p => !p.email_sent).length} uncontacted participants
-		</div>
-	</div>
-
-	{#if sendingEmails}
-		<div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
-			<div class="flex items-center justify-center">
-				<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" 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>
-				<span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
-			</div>
-		</div>
-	{:else}
-		<div class="space-y-4">
-			{#if participants.filter(p => !p.email_sent).length > 0}
-				<div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
-					<div class="flex items-center">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
-							<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-						</svg>
-						<span class="text-yellow-800 text-sm sm:text-base">
-							<strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
-						</span>
-					</div>
-				</div>
-				
-				<div class="flex items-center justify-end">
-					<button
-						onclick={sendEmailsToUncontacted}
-						disabled={!event || participants.filter(p => !p.email_sent).length === 0}
-						class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
-					>
-						Send Emails
-					</button>
-				</div>
-			{:else}
-				<div class="text-center py-4">
-					<div class="flex items-center justify-center text-green-600 mb-2">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
-							<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-						</svg>
-					</div>
-					<p class="text-green-700 font-medium">All participants have been contacted!</p>
-					<p class="text-sm text-green-600">No pending emails to send.</p>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<!-- Email Results Section -->
 {#if emailResults}
-	<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+	<EmailResults {emailResults} />
-		<div class="mb-4 flex items-center justify-between">
-			<h2 class="text-xl font-semibold text-gray-900">Email Results</h2>
-			<div class="text-sm text-gray-500">
-				{emailResults.summary.success} successful, {emailResults.summary.errors} failed
-			</div>
-		</div>
-
-		<div class="mb-4">
-			<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
-				<div class="flex items-center gap-2">
-					<div class="w-3 h-3 rounded-full bg-green-500"></div>
-					<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<div class="w-3 h-3 rounded-full bg-red-500"></div>
-					<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<div class="w-3 h-3 rounded-full bg-blue-500"></div>
-					<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
-				</div>
-			</div>
-		</div>
-
-		{#if emailResults.results.length > 0}
-			<div class="overflow-x-auto">
-				<table class="w-full">
-					<thead class="bg-gray-50">
-						<tr>
-							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
-							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
-							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each emailResults.results as result}
-							<tr class="border-b border-gray-200 hover:bg-gray-50">
-								<td class="px-4 py-3 text-sm text-gray-900">
-									{result.participant.name} {result.participant.surname}
-								</td>
-								<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
-								<td class="px-4 py-3 text-sm">
-									{#if result.success}
-										<div class="flex items-center text-green-600">
-											<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
-												<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-											</svg>
-											<span class="text-sm font-medium">Sent</span>
-										</div>
-									{:else}
-										<div class="flex items-center text-red-600">
-											<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
-											<span class="text-sm font-medium">Failed</span>
-											{#if result.error}
-												<span class="text-xs text-red-500 ml-2">({result.error})</span>
-											{/if}
-										</div>
-									{/if}
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		{/if}
-	</div>
 {/if}
 
 {#if error}
-	<div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
+	<ErrorMessage {error} />
-		<p class="text-sm text-red-600">{error}</p>
-	</div>
 {/if}

src/routes/private/events/event/view/components/EmailResults.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface EmailResultItem {
+    participant: {
+      id: string;
+      name: string;
+      surname: string;
+      email: string;
+    };
+    success: boolean;
+    error?: string;
+  }
+
+  interface EmailResultsSummary {
+    success: number;
+    errors: number;
+    total: number;
+  }
+
+  interface EmailResultsData {
+    success: boolean;
+    results: EmailResultItem[];
+    summary: EmailResultsSummary;
+  }
+
+  let { emailResults } = $props<{
+    emailResults: EmailResultsData | null;
+  }>();
+</script>
+
+{#if emailResults}
+  <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="text-xl font-semibold text-gray-900">Email Results</h2>
+      <div class="text-sm text-gray-500">
+        {emailResults.summary.success} successful, {emailResults.summary.errors} failed
+      </div>
+    </div>
+
+    <div class="mb-4">
+      <div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          <span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-full bg-red-500"></div>
+          <span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-full bg-blue-500"></div>
+          <span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
+        </div>
+      </div>
+    </div>
+
+    {#if emailResults.results.length > 0}
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
+              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
+              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each emailResults.results as result}
+              <tr class="border-b border-gray-200 hover:bg-gray-50">
+                <td class="px-4 py-3 text-sm text-gray-900">
+                  {result.participant.name} {result.participant.surname}
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
+                <td class="px-4 py-3 text-sm">
+                  {#if result.success}
+                    <div class="flex items-center text-green-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                      </svg>
+                      <span class="text-sm font-medium">Sent</span>
+                    </div>
+                  {:else}
+                    <div class="flex items-center text-red-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
+                      <span class="text-sm font-medium">Failed</span>
+                      {#if result.error}
+                        <span class="text-xs text-red-500 ml-2">({result.error})</span>
+                      {/if}
+                    </div>
+                  {/if}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  </div>
+{/if}

src/routes/private/events/event/view/components/EmailSending.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  interface Participant {
+    id: string;
+    email_sent: boolean;
+  }
+
+  interface EmailProgress {
+    sent: number;
+    total: number;
+  }
+
+  let { 
+    loading,
+    participants, 
+    sendingEmails, 
+    emailProgress,
+    event,
+    onSendEmails
+  } = $props<{
+    loading: boolean;
+    participants: Participant[];
+    sendingEmails: boolean;
+    emailProgress: EmailProgress;
+    event: any | null;
+    onSendEmails: () => void;
+  }>();
+  
+  // Using the $derived rune to calculate uncontacted participants
+  let uncontactedParticipantsCount = $derived(participants.filter(p => !p.email_sent).length);
+</script>
+
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
+    {#if !loading}
+      <div class="text-sm text-gray-500">
+        {uncontactedParticipantsCount} uncontacted participants
+      </div>
+    {:else}
+      <div class="text-sm text-gray-500">
+        Loading participants...
+      </div>
+    {/if}
+  </div>
+
+  {#if loading}
+    <div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
+  {:else if sendingEmails}
+    <div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
+      <div class="flex items-center justify-center">
+        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" 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>
+        <span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
+      </div>
+    </div>
+  {:else}
+    <div class="space-y-4">
+      {#if uncontactedParticipantsCount > 0}
+        <div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-yellow-800 text-sm sm:text-base">
+              <strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
+            </span>
+          </div>
+        </div>
+        
+        <div class="flex items-center justify-end">
+          <button
+            onclick={onSendEmails}
+            disabled={!event || uncontactedParticipantsCount === 0}
+            class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Send Emails
+          </button>
+        </div>
+      {:else}
+        <div class="text-center py-4">
+          <div class="flex items-center justify-center text-green-600 mb-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <p class="text-green-700 font-medium">All participants have been contacted!</p>
+          <p class="text-sm text-green-600">No pending emails to send.</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

src/routes/private/events/event/view/components/EmailSendingFixed.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  interface Participant {
+    id: string;
+    email_sent: boolean;
+  }
+
+  interface EmailProgress {
+    sent: number;
+    total: number;
+  }
+
+  let { 
+    loading,
+    participants, 
+    sendingEmails, 
+    emailProgress,
+    event,
+    onSendEmails
+  } = $props<{
+    loading: boolean;
+    participants: Participant[];
+    sendingEmails: boolean;
+    emailProgress: EmailProgress;
+    event: any | null;
+    onSendEmails: () => void;
+  }>();
+  
+  // Using the $derived rune to calculate uncontacted participants
+  let uncontactedParticipantsCount = $derived(participants.filter(p => !p.email_sent).length);
+</script>
+
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
+    {#if !loading}
+      <div class="text-sm text-gray-500">
+        {uncontactedParticipantsCount} uncontacted participants
+      </div>
+    {:else}
+      <div class="text-sm text-gray-500">
+        Loading participants...
+      </div>
+    {/if}
+  </div>
+
+  {#if loading}
+    <div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
+  {:else if sendingEmails}
+    <div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
+      <div class="flex items-center justify-center">
+        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" 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>
+        <span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
+      </div>
+    </div>
+  {:else}
+    <div class="space-y-4">
+      {#if uncontactedParticipantsCount > 0}
+        <div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-yellow-800 text-sm sm:text-base">
+              <strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
+            </span>
+          </div>
+        </div>
+        
+        <div class="flex items-center justify-end">
+          <button
+            onclick={onSendEmails}
+            disabled={!event || uncontactedParticipantsCount === 0}
+            class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Send Emails
+          </button>
+        </div>
+      {:else}
+        <div class="text-center py-4">
+          <div class="flex items-center justify-center text-green-600 mb-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <p class="text-green-700 font-medium">All participants have been contacted!</p>
+          <p class="text-sm text-green-600">No pending emails to send.</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

src/routes/private/events/event/view/components/EmailTemplate.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  interface Event {
+    email_subject: string;
+    email_body: string;
+  }
+
+  let { event, loading } = $props<{
+    event: Event | null;
+    loading: boolean;
+  }>();
+</script>
+
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+  <div class="mb-4">
+    <h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
+  </div>
+  
+  {#if loading}
+    <!-- Loading placeholder for email template content -->
+    <div class="space-y-4">
+      <div>
+        <span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
+        <div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
+      </div>
+      
+      <div>
+        <span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
+        <div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
+      </div>
+    </div>
+  {:else if event}
+    <div class="space-y-4">
+      <div>
+        <span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
+        <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
+          <p class="text-sm text-gray-900">{event.email_subject}</p>
+        </div>
+      </div>
+      <div>
+        <span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
+        <div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
+          <p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

src/routes/private/events/event/view/components/ErrorMessage.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  let { error } = $props<{
+    error: string;
+  }>();
+</script>
+
+{#if error}
+  <div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
+    <p class="text-sm text-red-600">{error}</p>
+  </div>
+{/if}

src/routes/private/events/event/view/components/EventInformation.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  interface Event {
+    name: string;
+    date: string;
+    created_at: string;
+    sheet_id: string;
+  }
+
+  let { event, loading, error } = $props<{
+    event: Event | null;
+    loading: boolean;
+    error: string;
+  }>();
+
+  function formatDate(dateString: string) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+  }
+</script>
+
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+  {#if loading}
+    <!-- Loading placeholder with header -->
+    <div>
+      <h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
+      <div class="space-y-3">
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
+          <div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
+        </div>
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
+          <div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
+        </div>
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
+          <div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+  {:else if event}
+    <div>
+      <h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
+      <div class="space-y-3">
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
+          <span class="text-sm text-gray-900">{formatDate(event.date)}</span>
+        </div>
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
+          <span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
+        </div>
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
+          <a
+            href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-1 h-3 w-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+            Open in Google Sheets
+          </a>
+        </div>
+      </div>
+    </div>
+  {:else if error}
+    <div class="py-8 text-center">
+      <p class="text-red-600">{error}</p>
+    </div>
+  {/if}
+</div>

src/routes/private/events/event/view/components/GoogleAuthentication.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
+
+  let { loading, onSuccess, onError } = $props<{
+    loading: boolean;
+    onSuccess: () => void;
+    onError: (message: string) => void;
+  }>();
+</script>
+
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
+    <p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
+  </div>
+  {#if loading}
+    <div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
+  {:else}
+    <GoogleAuthButton 
+      size="small" 
+      variant="secondary"
+      onSuccess={onSuccess}
+      onError={onError}
+    />
+  {/if}
+</div>

src/routes/private/events/event/view/components/ParticipantsTable.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  interface Participant {
+    id: string;
+    name: string;
+    surname: string;
+    email: string;
+    scanned: boolean;
+    email_sent: boolean;
+  }
+
+  interface Event {
+    id: string;
+    sheet_id: string;
+  }
+
+  let { 
+    event,
+    participants, 
+    loading, 
+    participantsLoading, 
+    syncingParticipants, 
+    onSyncParticipants 
+  } = $props<{
+    event: Event | null;
+    participants: Participant[];
+    loading: boolean;
+    participantsLoading: boolean;
+    syncingParticipants: boolean;
+    onSyncParticipants: () => void;
+  }>();
+</script>
+
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="text-xl font-semibold text-gray-900">Participants</h2>
+    <button
+      onclick={onSyncParticipants}
+      disabled={syncingParticipants || !event || loading}
+      class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      {#if syncingParticipants}
+        Syncing...
+      {:else}
+        Sync Participants
+      {/if}
+    </button>
+  </div>
+
+  {#if participantsLoading || loading}
+    <!-- Loading placeholder for participants -->
+    <div class="space-y-3">
+      {#each Array(5) as _}
+        <div class="grid grid-cols-5 gap-4 border-b border-gray-200 py-3">
+          <div class="h-4 animate-pulse rounded bg-gray-200"></div>
+          <div class="h-4 animate-pulse rounded bg-gray-200"></div>
+          <div class="h-4 animate-pulse rounded bg-gray-200"></div>
+          <div class="h-4 animate-pulse rounded bg-gray-200"></div>
+          <div class="h-4 animate-pulse rounded bg-gray-200"></div>
+        </div>
+      {/each}
+    </div>
+  {:else if participants.length > 0}
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
+            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Surname</th>
+            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
+            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Scanned</th>
+            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email Sent</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each participants as participant}
+            <tr class="border-b border-gray-200 hover:bg-gray-50">
+              <td class="px-4 py-3 text-sm text-gray-900">{participant.name}</td>
+              <td class="px-4 py-3 text-sm text-gray-900">{participant.surname}</td>
+              <td class="px-4 py-3 text-sm text-gray-900">{participant.email}</td>
+              <td class="px-4 py-3 text-sm">
+                {#if participant.scanned}
+                  <div class="flex items-center text-green-600">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                {:else}
+                  <div class="flex items-center text-gray-400">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5"
+                      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>
+                  </div>
+                {/if}
+              </td>
+              <td class="px-4 py-3 text-sm">
+                {#if participant.email_sent}
+                  <div class="flex items-center text-blue-600">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                {:else}
+                  <div class="flex items-center text-gray-400">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5"
+                      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>
+                  </div>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {:else}
+    <div class="py-8 text-center">
+      <p class="text-gray-500">
+        No participants found. Click "Sync Participants" to load from Google Sheets.
+      </p>
+    </div>
+  {/if}
+</div>

src/routes/private/events/event/view/components/Statistics.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  let { 
+    loading,
+    totalCount,
+    scannedCount,
+    emailSentCount,
+    pendingCount 
+  } = $props<{
+    loading: boolean;
+    totalCount: number;
+    scannedCount: number;
+    emailSentCount: number;
+    pendingCount: number;
+  }>();
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
+        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Total participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-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>
+            <span class="text-sm font-medium text-gray-700">Total participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{totalCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Scanned participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-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 font-medium text-gray-700">Scanned participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{scannedCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Email sent participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-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"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Email sent</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{emailSentCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Pending participants -->
+      <tr>
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-amber-500"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Pending emails</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{pendingCount}</span>
+          {/if}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -7,7 +7,7 @@
 	import { ScanState, defaultTicketData } from '$lib/types/types';
 
 	let { data } = $props();
-	let scanned_id = $state<string>("");
+	let scanned_id = $state<string>('');
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);
 
@@ -19,9 +19,9 @@
 	}
 
 	let events = $state<Event[]>([]);
-	let selectedEventId = $state<string>("");
+	let selectedEventId = $state<string>('');
 	let isLoadingEvents = $state(true);
-	let eventsError = $state("");
+	let eventsError = $state('');
 
 	onMount(async () => {
 		await loadEvents();
@@ -54,16 +54,16 @@
 
 	// Process a scanned QR code
 	$effect(() => {
-		if (scanned_id === "") return;
+		if (scanned_id === '') return;
 		scan_state = ScanState.scanning;
 
-		console.log("Scanned ID:", scanned_id);
+		console.log('Scanned ID:', scanned_id);
 
 		data.supabase
 			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
-			.then(response => {
+			.then((response) => {
 				if (response.data && response.data.length > 0) {
 					const participant = response.data[0];
 					ticket_data = participant;
@@ -84,38 +84,34 @@
 
 				// Reset the scanned_id after 3 seconds to allow for a new scan
 				setTimeout(() => {
-					scanned_id = "";
+					scanned_id = '';
 				}, 3000);
 			});
 	});
 </script>
 
-<div class="mx-auto p-4">
+<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>
-	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
 
 <!-- Event Selector -->
-	<div class="rounded-lg border border-gray-300 p-4 mb-4">
+<div class="mb-4 rounded-lg border border-gray-300 p-4">
-		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
+	<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
 	{#if isLoadingEvents}
-			<div class="flex items-center justify-center h-10">
+		<div class="flex h-10 items-center justify-center">
-				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+			<div
+				class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
+			></div>
 		</div>
 	{:else if eventsError}
-			<div class="text-red-600 text-center py-2">
+		<div class="py-2 text-center text-red-600">
 			{eventsError}
-				<button 
+			<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
-					onclick={loadEvents}
-					class="ml-2 text-blue-600 underline"
-				>
-					Try again
-				</button>
 		</div>
 	{:else if events.length === 0}
-			<p class="text-gray-500 text-center py-2">No events found</p>
+		<p class="py-2 text-center text-gray-500">No events found</p>
 	{:else}
 		<select
 			bind:value={selectedEventId}
-				class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+			class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
 		>
 			{#each events as event}
 				<option value={event.id}>
@@ -132,22 +128,5 @@
 </div>
 
 <!-- Ticket Display Section -->
-	<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
+<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
 <TicketDisplay {ticket_data} {scan_state} />
-	
-	<!-- Reset button -->
-	{#if scan_state !== ScanState.scanning}
-		<div class="flex justify-center mt-6 mb-4">
-			<button 
-				onclick={() => {
-					scanned_id = "";
-					scan_state = ScanState.scanning;
-				}}
-				class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
-				aria-label="Reset scanner"
-			>
-				Reset Scanner
-			</button>
-		</div>
-	{/if}
-</div>

src/routes/private/scanner/TicketDisplay.svelte

@@ -15,65 +15,73 @@
 	}
 </script>
 
-<div class="border border-gray-300 rounded-lg overflow-hidden">
+<div class="border border-gray-300 rounded-lg overflow-hidden h-[200px]">
+	<div class="h-full flex flex-col">
 		{#if scan_state === ScanState.scanning}
-		<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
+			<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
-			<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+				<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
-			<p class="text-gray-700">Waiting for QR code...</p>
+				<p class="text-gray-700 text-center">Waiting for QR code...</p>
 			</div>
 		{:else if scan_state === ScanState.scan_failed}
-		<div class="bg-red-50 p-4">
+			<div class="bg-red-50 p-4 flex-1 flex flex-col">
-			<div class="flex items-center gap-2 mb-2">
+				<div class="flex items-center gap-2 mb-3">
-				<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-red-600 flex-shrink-0" 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>
 					<h3 class="font-semibold text-red-800">Invalid Code</h3>
 				</div>
-			<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p>
+				<p class="text-red-700 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
+				<div class="mt-auto pt-2 opacity-0">
+					<!-- Spacer to maintain consistent height -->
+					<p class="font-medium invisible">Placeholder</p>
+					<p class="invisible">Placeholder</p>
+				</div>
 			</div>
 		{:else if scan_state === ScanState.wrong_event}
-		<div class="bg-amber-50 p-4">
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
 					</svg>
 					<h3 class="font-semibold text-amber-800">Wrong Event</h3>
 				</div>
 				<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
-			<div class="bg-white rounded p-3 border border-amber-200">
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
-				<p class="font-medium">{ticket_data.event.name}</p>
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{:else if scan_state === ScanState.already_scanned}
-		<div class="bg-amber-50 p-4">
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
 					</svg>
 					<h3 class="font-semibold text-amber-800">Already Scanned</h3>
 				</div>
-			<p class="text-amber-700 mb-1">
+				<p class="text-amber-700">
-				This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'} 
+					This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'} 
 					{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
 				</p>
-			<div class="bg-white rounded p-3 border border-amber-200 mt-2">
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
-				<p class="font-medium">{ticket_data.event.name}</p>
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{:else if scan_state === ScanState.scan_successful}
-		<div class="bg-green-50 p-4">
+			<div class="bg-green-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-green-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 					</svg>
 					<h3 class="font-semibold text-green-800">Valid Ticket</h3>
 				</div>
-			<div class="bg-white rounded p-3 border border-green-200">
+				<p class="text-green-700">Ticket successfully validated.</p>
-				<p class="font-medium">{ticket_data.event.name}</p>
+				<div class="bg-white rounded p-3 border border-green-200 mt-auto">
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{/if}
 	</div>
+</div>