More supabase migrations

.github/copilot-instructions.md

@@ -91,6 +91,7 @@ onsubmit|preventDefault={handleSubmit} is depracated, do not use it!
 
 Loading session using page.server.ts is not needed as the session is already available in the locals object.
 
+Do not use import { page } from '$app/stores'; as it is deprecated! Use instead: import { page } from '$app/state'; 
 
 IMPORTANT: Always make sure that the client-side module are not importing secrets
 or are running any sensritive code that could expose secrets to the client.
@@ -100,6 +101,8 @@ fetch data from there instead of directly in the client-side module.
 The database schema in supabase is as follows:
 -- WARNING: This schema is for context only and is not meant to be run.
 -- Table order and constraints may not be valid for execution.
+-- WARNING: This schema is for context only and is not meant to be run.
+-- Table order and constraints may not be valid for execution.
 
 CREATE TABLE public.events (
   id uuid NOT NULL DEFAULT gen_random_uuid(),
@@ -142,6 +145,7 @@ CREATE TABLE public.participants (
   scanned_at timestamp with time zone,
   scanned_by uuid,
   section_id uuid,
+  email_sent boolean DEFAULT false,
   CONSTRAINT participants_pkey PRIMARY KEY (id),
   CONSTRAINT participants_created_by_fkey FOREIGN KEY (created_by) REFERENCES auth.users(id),
   CONSTRAINT participants_event_fkey FOREIGN KEY (event) REFERENCES public.events(id),
@@ -167,8 +171,3 @@ CREATE TABLE public.sections (
   CONSTRAINT sections_pkey PRIMARY KEY (id)
 );
 
-An event is created by calling RPC databse function create_event
-by passing the following parameters: 
-- name, date, email_subject, email_body, sheet_id, name_column, surname_column, email_column, confirmation_column
-
-

src/lib/components/GoogleAuthButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { GoogleAuthManager, createGoogleAuthState } from '$lib/google/auth/manager.js';
+
+	// Props
+	let { 
+		onSuccess, 
+		onError, 
+		disabled = false,
+		size = 'default',
+		variant = 'primary'
+	} = $props<{
+		onSuccess?: (token: string) => void;
+		onError?: (error: string) => void;
+		disabled?: boolean;
+		size?: 'small' | 'default' | 'large';
+		variant?: 'primary' | 'secondary';
+	}>();
+
+	// State
+	let authState = $state(createGoogleAuthState());
+	let authManager = new GoogleAuthManager(authState);
+
+	onMount(() => {
+		authManager.checkConnection();
+	});
+
+	async function handleConnect() {
+		if (authState.connecting || disabled) return;
+
+		try {
+			await authManager.connectToGoogle();
+			if (authState.isConnected && authState.token) {
+				onSuccess?.(authState.token);
+			}
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Failed to connect to Google';
+			onError?.(errorMessage);
+		}
+	}
+
+	async function handleDisconnect() {
+		await authManager.disconnectGoogle();
+	}
+
+	// Size classes
+	const sizeClasses = {
+		small: 'px-3 py-1.5 text-sm',
+		default: 'px-4 py-2 text-base',
+		large: 'px-6 py-3 text-lg'
+	};
+
+	// Variant classes
+	const variantClasses = {
+		primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',
+		secondary: 'bg-white hover:bg-gray-50 text-gray-900 border-gray-300'
+	};
+</script>
+
+{#if authState.isConnected}
+	<div class="flex flex-wrap items-center gap-3">
+		<div class="flex items-center gap-2 rounded-full bg-green-100 px-3 py-1 border border-green-300 whitespace-nowrap">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-600" 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 text-green-800">Connected</span>
+		</div>
+		
+		{#if authState.userEmail}
+			<div class="flex items-center gap-2 rounded-full bg-blue-100 px-3 py-1 border border-blue-300 max-w-full overflow-hidden">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+				</svg>
+				<span class="text-sm font-medium text-blue-800 truncate">{authState.userEmail}</span>
+			</div>
+		{/if}
+		
+		<button
+			onclick={handleDisconnect}
+			class="flex items-center gap-2 rounded-full bg-red-100 px-3 py-1 border border-red-300 hover:bg-red-200 transition-colors whitespace-nowrap"
+			aria-label="Disconnect from Google"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+			</svg>
+			<span class="text-sm font-medium text-red-800">Disconnect</span>
+		</button>
+	</div>
+{:else}
+	<div class="flex flex-col gap-2">
+		<button
+			onclick={handleConnect}
+			disabled={authState.connecting || disabled}
+			class="inline-flex items-center border font-medium rounded-md transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 {sizeClasses[size as keyof typeof sizeClasses]} {variantClasses[variant as keyof typeof variantClasses]}"
+			aria-label="Connect to Google"
+		>
+			{#if authState.connecting}
+				<div class="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
+				Connecting...
+			{:else}
+				<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24">
+					<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+					<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+					<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+					<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+				</svg>
+				Connect to Google
+			{/if}
+		</button>
+		
+		{#if authState.error}
+			<div class="text-sm text-red-600 mt-1">
+				{authState.error}
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/google/auth/client.ts

@@ -98,6 +98,122 @@ export async function getUserInfo(accessToken: string): Promise<{ email: string;
 	}
 }
 
+/**
+ * Authenticate with Google using OAuth popup flow
+ * @returns Authentication result with success status and tokens
+ */
+export async function authenticateWithGoogle(): Promise<{
+	success: boolean;
+	refreshToken?: string;
+	userEmail?: string;
+	error?: string;
+}> {
+	if (!browser) {
+		return { success: false, error: 'Not in browser environment' };
+	}
+
+	return new Promise((resolve) => {
+		try {
+			// Open popup window for OAuth
+			const popup = window.open(
+				'/auth/google',
+				'google-auth',
+				'width=500,height=600,scrollbars=yes,resizable=yes,left=' + 
+				Math.round(window.screen.width / 2 - 250) + ',top=' + 
+				Math.round(window.screen.height / 2 - 300)
+			);
+
+			if (!popup) {
+				resolve({ success: false, error: 'Failed to open popup window. Please allow popups for this site.' });
+				return;
+			}
+
+			let authCompleted = false;
+			let popupTimer: number | null = null;
+			
+			// Store current timestamp to detect changes in localStorage
+			const startTimestamp = localStorage.getItem('google_auth_timestamp') ?? '0';
+			
+			// Poll localStorage for auth completion
+			const pollInterval = setInterval(() => {
+				try {
+					const currentTimestamp = localStorage.getItem('google_auth_timestamp');
+					
+					// If timestamp has changed, auth is complete
+					if (currentTimestamp && currentTimestamp !== startTimestamp) {
+						handleAuthSuccess();
+					}
+				} catch (e) {
+					console.error('Error checking auth timestamp:', e);
+				}
+			}, 500); // Poll every 500ms
+			
+			// Common handler for authentication success
+			function handleAuthSuccess() {
+				if (authCompleted) return; // Prevent duplicate handling
+				
+				authCompleted = true;
+				
+				// Clean up timers
+				clearInterval(pollInterval);
+				if (popupTimer) clearTimeout(popupTimer);
+				
+				// Get tokens from localStorage
+				const refreshToken = localStorage.getItem('google_refresh_token');
+				const userEmail = localStorage.getItem('google_user_email');
+				
+				if (refreshToken) {
+					resolve({
+						success: true,
+						refreshToken,
+						userEmail: userEmail ?? undefined
+					});
+				} else {
+					resolve({ success: false, error: 'No refresh token found after authentication' });
+				}
+			}
+			
+			// Clean up function to handle all cleanup in one place
+			const cleanUp = () => {
+				clearInterval(pollInterval);
+				if (popupTimer) clearTimeout(popupTimer);
+			};
+
+			// Set a timeout for initial auth check
+			popupTimer = setTimeout(() => {
+				if (!authCompleted) {
+					cleanUp();
+					// Check if tokens were stored by the popup before it was closed
+					const refreshToken = localStorage.getItem('google_refresh_token');
+					const userEmail = localStorage.getItem('google_user_email');
+					
+					if (refreshToken) {
+						resolve({
+							success: true,
+							refreshToken,
+							userEmail: userEmail ?? undefined
+						});
+					} else {
+						resolve({ success: false, error: 'Authentication timeout or cancelled' });
+					}
+				}
+			}, 30 * 1000) as unknown as number;
+
+			// Final cleanup timeout
+			setTimeout(() => {
+				if (!authCompleted) {
+					cleanUp();
+					resolve({ success: false, error: 'Authentication timeout' });
+				}
+			}, 60 * 1000);
+
+		} catch (error) {
+			console.error('Error connecting to Google:', error);
+			resolve({ success: false, error: error instanceof Error ? error.message : 'Unknown error' });
+		}
+	});
+}
+
 /**
  * Revoke a Google access token
  * @param accessToken - Google access token to revoke

src/lib/google/auth/manager.ts

@@ -0,0 +1,120 @@
+import { authenticateWithGoogle } from '$lib/google/auth/client.js';
+
+export interface GoogleAuthState {
+	isConnected: boolean;
+	checking: boolean;
+	connecting: boolean;
+	showCancelOption: boolean;
+	token: string | null;
+	error: string | null;
+	userEmail: string | null;
+}
+
+export function createGoogleAuthState(): GoogleAuthState {
+	return {
+		isConnected: false,
+		checking: false,
+		connecting: false,
+		showCancelOption: false,
+		token: null,
+		error: null,
+		userEmail: null
+	};
+}
+
+export class GoogleAuthManager {
+	private readonly state: GoogleAuthState;
+	private cancelTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	constructor(state: GoogleAuthState) {
+		this.state = state;
+	}
+
+	checkConnection(): void {
+		this.state.checking = true;
+		this.state.error = null;
+
+		try {
+			const token = localStorage.getItem('google_refresh_token');
+			const email = localStorage.getItem('google_user_email');
+
+			this.state.isConnected = !!token;
+			this.state.token = token;
+			this.state.userEmail = email;
+		} catch (error) {
+			console.error('Error checking connection:', error);
+			this.state.error = 'Failed to check connection status';
+		} finally {
+			this.state.checking = false;
+		}
+	}
+
+	async connectToGoogle(): Promise<void> {
+		if (this.state.connecting) return;
+
+		this.state.connecting = true;
+		this.state.error = null;
+		this.state.showCancelOption = false;
+
+		// Show cancel option after 5 seconds
+		this.cancelTimeout = setTimeout(() => {
+			this.state.showCancelOption = true;
+		}, 5000);
+
+		try {
+			const result = await authenticateWithGoogle();
+
+			if (result.success && result.refreshToken) {
+				// Store tokens
+				localStorage.setItem('google_refresh_token', result.refreshToken);
+				if (result.userEmail) {
+					localStorage.setItem('google_user_email', result.userEmail);
+				}
+
+				// Update state
+				this.state.isConnected = true;
+				this.state.token = result.refreshToken;
+				this.state.userEmail = result.userEmail;
+			} else {
+				throw new Error(result.error ?? 'Authentication failed');
+			}
+		} catch (error) {
+			this.state.error = error instanceof Error ? error.message : 'Failed to connect to Google';
+		} finally {
+			this.state.connecting = false;
+			this.state.showCancelOption = false;
+			if (this.cancelTimeout) {
+				clearTimeout(this.cancelTimeout);
+				this.cancelTimeout = null;
+			}
+		}
+	}
+
+	cancelGoogleAuth(): void {
+		this.state.connecting = false;
+		this.state.showCancelOption = false;
+		this.state.error = null;
+
+		if (this.cancelTimeout) {
+			clearTimeout(this.cancelTimeout);
+			this.cancelTimeout = null;
+		}
+	}
+
+	async disconnectGoogle(): Promise<void> {
+		try {
+			// Clear local storage
+			localStorage.removeItem('google_refresh_token');
+			localStorage.removeItem('google_user_email');
+
+			// Reset state
+			this.state.isConnected = false;
+			this.state.token = null;
+			this.state.userEmail = null;
+			this.state.error = null;
+		} catch (error) {
+			console.error('Error disconnecting:', error);
+			this.state.error = 'Failed to disconnect';
+		}
+	}
+}

src/lib/google/auth/server.ts

@@ -26,7 +26,6 @@ export function getOAuthClient() {
  * @returns Auth URL for Google OAuth
  */
 export function createAuthUrl() {
-	console.warn("CREATE AUTH URL");
 	return getOAuthClient().generateAuthUrl({
 		access_type: 'offline',
 		prompt: 'consent',

src/lib/google/gmail/server.ts

@@ -1,9 +1,9 @@
 import { google } from 'googleapis';
 import quotedPrintable from 'quoted-printable';
-import { getAuthenticatedClient } from '../auth/server.js';
+import { getOAuthClient } from '../auth/server.js';
 
 /**
- * Create an HTML email template
+ * Create an HTML email template with ScanWave branding
  * @param text - Email body text
  * @returns HTML email template
  */
@@ -16,40 +16,44 @@ export function createEmailTemplate(text: string): string {
     </style>
   </head>
   <body style="font-family: 'Lato', sans-serif; background-color: #f9f9f9; padding: 20px; margin: 0;">
-    <div style="max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px;">
-      <p style="white-space: pre-line; font-size: 16px; color: #333;">${text}</p>
-      <img src="cid:qrCode1" alt="QR Code" style="display: block; margin: 20px auto; max-width: 50%; height: auto;" />
+    <div style="max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+      <p style="white-space: pre-line;font-size: 16px; line-height: 1.5; color: #333;">${text}</p>
+      <img src="cid:qrCode1" alt="QR Code" style="display: block; margin: 20px auto; max-width: 50%; min-width: 200px; height: auto;" />
+      <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between">
+        <div style="height: 4px; width: 20%; background: #00aeef;"></div>
+        <div style="height: 4px; width: 20%; background: #ec008c;"></div>
+        <div style="height: 4px; width: 20%; background: #7ac143;"></div>
+        <div style="height: 4px; width: 20%; background: #f47b20;"></div>
+        <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 ScanWave</p>
+      </div>
     </div>
   </body>
 </html>`;
 }
 
 /**
- * Send an email through Gmail
+ * Send an email through Gmail with QR code
  * @param refreshToken - Google refresh token
  * @param params - Email parameters (to, subject, text, qr_code)
  */
 export async function sendGmail(
 	refreshToken: string,
-  {
-    to,
-    subject,
-    text,
-    qr_code
-  }: {
-    to: string;
-    subject: string;
-    text: string;
-    qr_code: string;
-  }
+	{ to, subject, text, qr_code }: { to: string; subject: string; text: string; qr_code: string }
 ) {
-  const oauth = getAuthenticatedClient(refreshToken);
+	const oauth = getOAuthClient();
+	oauth.setCredentials({ refresh_token: refreshToken });
+
 	const gmail = google.gmail({ version: 'v1', auth: oauth });
 
 	const message_html = createEmailTemplate(text);
-  const boundary = 'BOUNDARY';
-  const nl = '\r\n';
 
+	const boundary = 'BOUNDARY';
+	const nl = '\r\n';                   // RFC-5322 line ending
+
+	// 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);
@@ -60,13 +64,14 @@ export async function sendGmail(
 		`To: ${to}`,
 		`Subject: ${subject}`,
 		`Content-Type: multipart/related; boundary="${boundary}"`,
-    '--' + boundary,
+		'',
+		`--${boundary}`,
 		'Content-Type: text/html; charset="UTF-8"',
 		'Content-Transfer-Encoding: quoted-printable',
 		'',
 		htmlQP,
 		'',
-    '--' + boundary,
+		`--${boundary}`,
 		'Content-Type: image/png',
 		'Content-Transfer-Encoding: base64',
 		'Content-ID: <qrCode1>',
@@ -74,11 +79,12 @@ export async function sendGmail(
 		'',
 		qrLines,
 		'',
-    '--' + boundary + '--',
+		`--${boundary}--`,
 		''
 	];
 
 	const rawMessage = rawParts.join(nl);
+
 	const raw = Buffer.from(rawMessage).toString('base64url');
 
 	await gmail.users.messages.send({

src/lib/google/sheets/server.ts

@@ -1,17 +1,20 @@
 import { google } from 'googleapis';
 import { getAuthenticatedClient } from '../auth/server.js';
+import { GoogleSheet } from './types.ts';
 
-export interface GoogleSheet {
-  id: string;
-  name: string;
-  modifiedTime: string;
-  webViewLink: string;
-}
-
+// Type for sheet data
 export interface SheetData {
   values: string[][];
 }
 
+// Server-side Google Sheets API handler
+export const googleSheetsServer = {
+  getRecentSpreadsheets,
+  getSpreadsheetData,
+  getSpreadsheetInfo,
+  searchSheets
+};
+
 /**
  * Get a list of recent Google Sheets
  * @param refreshToken - Google refresh token
@@ -87,3 +90,38 @@ export async function getSpreadsheetInfo(
 
   return response.data;
 }
+
+/**
+ * Search for Google Sheets by name
+ * @param refreshToken - Google refresh token
+ * @param query - Search query
+ * @param limit - Maximum number of sheets to return
+ * @returns List of Google Sheets matching the query
+ */
+export async function searchSheets(
+  refreshToken: string,
+  query: string,
+  limit: number = 20
+): Promise<GoogleSheet[]> {
+  const oauth = getAuthenticatedClient(refreshToken);
+  const drive = google.drive({ version: 'v3', auth: oauth });
+
+  // Create a query to search for spreadsheets with names containing the search term
+  const q = `mimeType='application/vnd.google-apps.spreadsheet' and name contains '${query}'`;
+
+  const response = await drive.files.list({
+    q,
+    orderBy: 'modifiedTime desc',
+    pageSize: limit,
+    fields: 'files(id,name,modifiedTime,webViewLink)'
+  });
+
+  return (
+    response.data.files?.map(file => ({
+      id: file.id!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      name: file.name!,
+      modifiedTime: file.modifiedTime!,
+      webViewLink: file.webViewLink!
+    })) || []
+  );
+}

src/lib/google/sheets/types.ts

@@ -0,0 +1,10 @@
+export interface GoogleSheet {
+  id: string;
+  name: string;
+  modifiedTime: string;
+  webViewLink: string;
+}
+
+export interface SheetData {
+  values: string[][];
+}

src/lib/types/types.ts

@@ -1,7 +1,9 @@
 export enum ScanState {
     scanning,
     scan_successful,
-    scan_failed
+    already_scanned,
+    scan_failed,
+    wrong_event
 }
 
 export type TicketData = {
@@ -22,7 +24,7 @@ export const defaultTicketData: TicketData = {
   name: '',
   surname: '',
   email: '',
-  event: '',
+  event: { id: '', name: '' },
   created_at: new Date().toISOString(),
   created_by: null,
   scanned: false,

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

@@ -1,6 +1,6 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { sheets } from '$lib/google/index.js';
+import { googleSheetsServer } from '$lib/google/sheets/server';
 
 export const GET: RequestHandler = async ({ params, request }) => {
 	try {
@@ -12,7 +12,7 @@ export const GET: RequestHandler = async ({ params, request }) => {
 		}
 
 		const refreshToken = authHeader.slice(7);
-		const sheetData = await sheets.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
+		const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
 
 		return json(sheetData);
 	} catch (error) {

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

@@ -1,6 +1,6 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { sheets } from '$lib/google/index.js';
+import { googleSheetsServer } from '$lib/google/sheets/server';
 
 export const GET: RequestHandler = async ({ request }) => {
 	try {
@@ -10,7 +10,7 @@ export const GET: RequestHandler = async ({ request }) => {
 		}
 
 		const refreshToken = authHeader.slice(7);
-		const spreadsheets = await sheets.getRecentSpreadsheets(refreshToken, 20);
+		const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
 
 		return json(spreadsheets);
 	} catch (error) {

src/routes/auth/google/callback/+server.ts

@@ -24,6 +24,19 @@ export const GET: RequestHandler = async ({ url }) => {
 			throw redirect(302, '/private/events?error=incomplete_tokens');
 		}
 
+		// Get user info to retrieve email
+		let userEmail = '';
+		try {
+			oauth.setCredentials(tokens);
+			const { google } = await import('googleapis');
+			const oauth2 = google.oauth2({ version: 'v2', auth: oauth });
+			const userInfo = await oauth2.userinfo.get();
+			userEmail = userInfo.data.email ?? '';
+		} catch (emailError) {
+			console.error('Error fetching user email:', emailError);
+			// Continue without email - it's not critical for the auth flow
+		}
+
 		// Create a success page with tokens that closes the popup and communicates with parent
 		const html = `
 <!DOCTYPE html>
@@ -64,34 +77,30 @@ export const GET: RequestHandler = async ({ url }) => {
 	<script>
 		(function() {
 			try {
-				// Store tokens in the parent window's localStorage
-				if (window.opener && !window.opener.closed) {
-					window.opener.localStorage.setItem('google_access_token', '${tokens.access_token}');
-					window.opener.localStorage.setItem('google_refresh_token', '${tokens.refresh_token}');
+				// Store tokens in localStorage (same origin)
+				localStorage.setItem('google_access_token', '${tokens.access_token}');
+				localStorage.setItem('google_refresh_token', '${tokens.refresh_token}');
+				${userEmail ? `localStorage.setItem('google_user_email', '${userEmail}');` : ''}
+				// Set timestamp that the main application will detect
+				localStorage.setItem('google_auth_timestamp', Date.now().toString());
 				
-					// Send success message to parent
-					window.opener.postMessage({ 
-						type: 'GOOGLE_AUTH_SUCCESS',
-						tokens: {
-							accessToken: '${tokens.access_token}',
-							refreshToken: '${tokens.refresh_token}'
-						}
-					}, '*');
+				// Update UI to show success
+				document.querySelector('.loading').textContent = 'Authentication complete! This window will close automatically.';
 				
-					// Close the popup after a short delay to ensure message is received
+				// Close window after a short delay
 				setTimeout(() => {
+					try {
 						window.close();
-					}, 500);
-				} else {
-					// If no opener, close immediately
-					window.close();
+					} catch (e) {
+						// If we can't close automatically, update message
+						document.querySelector('.loading').textContent = 'Authentication complete! You can close this window now.';
 					}
+				}, 1500);
 			} catch (error) {
 				console.error('Error in auth callback:', error);
-				// Try to close the window anyway
-				setTimeout(() => {
-					window.close();
-				}, 1000);
+				// Update UI to show error
+				document.querySelector('.success').textContent = '✗ Authentication error';
+				document.querySelector('.loading').textContent = 'Please close this window and try again.';
 			}
 		})();
 	</script>

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

@@ -0,0 +1,154 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { sendGmail } from '$lib/google/gmail/server.js';
+import QRCode from 'qrcode';
+
+interface Participant {
+	id: string;
+	name: string;
+	surname: string;
+	email: string;
+}
+
+interface EmailResult {
+	participant: Participant;
+	success: boolean;
+	error?: string;
+}
+
+async function generateQRCode(participantId: string): Promise<string> {
+	const qrCodeBase64 = await QRCode.toDataURL(participantId, {
+		type: 'image/png',
+		margin: 2,
+		scale: 8
+	});
+
+	// Remove the data URL prefix to get just the base64 string
+	return qrCodeBase64.replace(/^data:image\/png;base64,/, '');
+}
+
+async function sendEmailToParticipant(
+	participant: Participant,
+	subject: string,
+	text: string,
+	eventId: string,
+	refreshToken: string,
+	supabase: any
+): Promise<EmailResult> {
+	try {
+		const qrCodeBase64Data = await generateQRCode(participant.id);
+
+		// Send email with QR code
+		await sendGmail(refreshToken, {
+			to: participant.email,
+			subject: subject,
+			text: text,
+			qr_code: qrCodeBase64Data
+		});
+
+
+		// Call the participant_emailed RPC function
+		try {
+			await supabase.rpc('participant_emailed', {
+				p_participant_id: participant.id
+			});
+		} catch (dbError) {
+			console.error('Failed to call participant_emailed RPC:', dbError);
+			// Don't fail the entire operation if the RPC call fails
+		}
+
+		return {
+			participant: participant,
+			success: true
+		};
+	} catch (error) {
+		console.error('Failed to send email to participant:', participant.email, error);
+		return {
+			participant: participant,
+			success: false,
+			error: error instanceof Error ? error.message : 'Unknown error'
+		};
+	}
+}
+
+function validateRequest(participants: unknown, subject: unknown, text: unknown, eventId: unknown, refreshToken: unknown) {
+	if (!participants || !Array.isArray(participants)) {
+		return { error: 'Invalid participants array', status: 400 };
+	}
+
+	if (!subject || !text) {
+		return { error: 'Subject and text are required', status: 400 };
+	}
+
+	if (!eventId) {
+		return { error: 'Event ID is required', status: 400 };
+	}
+
+	if (!refreshToken || typeof refreshToken !== 'string') {
+		return { error: 'Refresh token is required', status: 401 };
+	}
+
+	return null;
+}
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	try {
+		const { participants, subject, text, eventId, refreshToken } = await request.json();
+		
+		const validationError = validateRequest(participants, subject, text, eventId, refreshToken);
+		if (validationError) {
+			return json({ error: validationError.error }, { status: validationError.status });
+		}
+
+		const results: EmailResult[] = [];
+		let successCount = 0;
+		let errorCount = 0;
+
+		// Send emails to each participant
+		for (const participant of participants as Participant[]) {
+			const result = await sendEmailToParticipant(
+				participant,
+				subject as string,
+				text as string,
+				eventId as string,
+				refreshToken as string,
+				locals.supabase
+			);
+
+			results.push(result);
+			
+			if (result.success) {
+				successCount++;
+			} else {
+				errorCount++;
+			}
+		}
+
+		return json({
+			success: true,
+			results,
+			summary: {
+				total: participants.length,
+				success: successCount,
+				errors: errorCount
+			}
+		});
+	} catch (error) {
+		console.error('Email sending error:', error);
+		
+		// Handle specific Gmail API errors
+		if (error instanceof Error) {
+			if (error.message.includes('Invalid Credentials') || error.message.includes('unauthorized')) {
+				return json({ error: 'Invalid or expired Google credentials' }, { status: 401 });
+			}
+			if (error.message.includes('quota')) {
+				return json({ error: 'Gmail API quota exceeded' }, { status: 429 });
+			}
+			if (error.message.includes('rate')) {
+				return json({ error: 'Rate limit exceeded' }, { status: 429 });
+			}
+		}
+		
+		return json({ error: 'Failed to send emails' }, { status: 500 });
+	}
+};

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

@@ -1,6 +1,6 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { sheets } from '$lib/google/index.js';
+import { googleSheetsServer } from '$lib/google/sheets/server.js';
 
 export const GET: RequestHandler = async ({ params, request }) => {
 	try {
@@ -12,7 +12,7 @@ export const GET: RequestHandler = async ({ params, request }) => {
 		}
 
 		const refreshToken = authHeader.slice(7);
-		const sheetData = await sheets.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
+		const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
 
 		return json(sheetData);
 	} catch (error) {

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

@@ -1,6 +1,6 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { sheets } from '$lib/google/index.js';
+import { googleSheetsServer } from '$lib/google/sheets/server.js';
 
 export const GET: RequestHandler = async ({ request }) => {
 	try {
@@ -10,7 +10,7 @@ export const GET: RequestHandler = async ({ request }) => {
 		}
 
 		const refreshToken = authHeader.slice(7);
-		const spreadsheets = await sheets.getRecentSpreadsheets(refreshToken, 20);
+		const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
 
 		return json(spreadsheets);
 	} catch (error) {

src/routes/private/api/google/sheets/search/+server.ts

@@ -0,0 +1,30 @@
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { googleSheetsServer } from '$lib/google/sheets/server.js';
+
+export const GET: RequestHandler = async ({ url, request }) => {
+	try {
+		// Get search query from URL
+		const query = url.searchParams.get('query');
+		
+		if (!query) {
+			throw error(400, 'Search query is required');
+		}
+		
+		// Get authorization token from request headers
+		const authHeader = request.headers.get('Authorization');
+		if (!authHeader || !authHeader.startsWith('Bearer ')) {
+			throw error(401, 'Missing or invalid Authorization header');
+		}
+		const refreshToken = authHeader.substring(7); // Remove "Bearer " prefix
+		
+		// Search for sheets using the query
+		const sheets = await googleSheetsServer.searchSheets(refreshToken, query);
+		
+		// Return the search results
+		return json(sheets);
+	} catch (err) {
+		console.error('Error searching Google Sheets:', err);
+		throw error(500, 'Failed to search Google Sheets');
+	}
+};

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

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

src/routes/private/events/SingleEvent.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <a
-    href={archived ? `/private/events/archived?id=${id}` : `/private/events/event?id=${id}`}
+    href={archived ? `/private/events/event/archived?id=${id}` : `/private/events/event/view?id=${id}`}
     class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
     aria-label={archived ? `View archived event ${name}` : `View event ${name}`}
 >

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

@@ -1,77 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-    import { page } from '$app/state';
-
-	let { data } = $props();
-
-	let event_data = $state();
-	let loading = $state(true);
-
-	onMount(async () => {
-		const event_id = page.url.searchParams.get('id');
-        
-		if (!event_id) {
-			loading = false;
-			return;
-		}
-
-		const { data: event } = await data.supabase
-			.from('events_archived')
-			.select('*')
-			.eq('id', event_id)
-			.single();
-
-		event_data = event;
-		loading = false;
-	});
-</script>
-
-<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>
-
-<div class="mb-2 rounded border border-gray-300 bg-white p-4">
-	<div class="flex flex-col gap-1">
-		{#if loading}
-			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
-			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
-		{:else}
-			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
-			<span class="text-black-500 text-sm">{event_data?.date}</span>
-		{/if}
-	</div>
-</div>
-
-<div class="mb-2 flex items-center rounded border border-gray-300 bg-white p-4">
-    <div class="flex flex-1 items-center justify-center gap-2">
-        <svg
-            class="inline h-4 w-4 text-blue-600"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-        >
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
-        </svg>
-        {#if loading}
-            <div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
-        {:else}
-            <span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
-        {/if}
-    </div>
-    <div class="mx-4 h-8 w-px bg-gray-300"></div>
-    <div class="flex flex-1 items-center justify-center gap-2">
-        <svg
-            class="inline h-4 w-4 text-green-600"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-        >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-        </svg>
-        {#if loading}
-            <div class="h-4 w-28 bg-gray-200 rounded animate-pulse"></div>
-        {:else}
-            <span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
-        {/if}
-    </div>
-</div>

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+    import { page } from '$app/state';
+
+	let { data } = $props();
+
+	// Types
+	interface ArchivedEvent {
+		id: string;
+		name: string;
+		date: string;
+		total_participants: number;
+		scanned_participants: number;
+	}
+
+	let event_data = $state<ArchivedEvent | null>(null);
+	let loading = $state(true);
+
+	onMount(async () => {
+		const event_id = page.url.searchParams.get('id');
+        
+		if (!event_id) {
+			loading = false;
+			return;
+		}
+
+		const { data: event } = await data.supabase
+			.from('events_archived')
+			.select('*')
+			.eq('id', event_id)
+			.single();
+
+		event_data = event;
+		loading = false;
+	});
+</script>
+
+<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>
+
+<div class="mb-2 rounded border border-gray-300 bg-white p-4">
+	<div class="flex flex-col gap-1">
+		{#if loading}
+			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
+			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
+		{:else}
+			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
+			<span class="text-black-500 text-sm">{event_data?.date}</span>
+		{/if}
+	</div>
+</div>
+
+<div class="mb-2 rounded border border-gray-300 bg-white p-4">
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+        <div class="flex items-center justify-center gap-2">
+            <svg
+                class="inline h-4 w-4 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+            {#if loading}
+                <div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
+            {:else}
+                <span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
+            {/if}
+        </div>
+        <div class="hidden sm:block h-8 w-px bg-gray-300"></div>
+        <div class="flex items-center justify-center gap-2">
+            <svg
+                class="inline h-4 w-4 text-green-600"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            {#if loading}
+                <div class="h-4 w-28 bg-gray-200 rounded animate-pulse"></div>
+            {:else}
+                <span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
+            {/if}
+        </div>
+    </div>
+</div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { isTokenValid, getUserInfo, revokeToken } from '$lib/google/auth/client.js';
-	import type { GoogleSheet } from '$lib/google/sheets/client.js';
+	import type { GoogleSheet } from '$lib/google/sheets/types.ts';
 	import { goto } from '$app/navigation';
 	
 	// Import Components
@@ -124,35 +124,49 @@
 			let popupTimer: number | null = null;
 			let cancelTimeout: number | null = null;
 
-			// Listen for messages from the popup
-			const messageHandler = (event: MessageEvent) => {
-				if (event.data?.type === 'GOOGLE_AUTH_SUCCESS') {
+			// Store current timestamp to detect changes in localStorage
+			const startTimestamp = localStorage.getItem('google_auth_timestamp') || '0';
+			
+			// Poll localStorage for auth completion
+			const pollInterval = setInterval(() => {
+				try {
+					const currentTimestamp = localStorage.getItem('google_auth_timestamp');
+					
+					// If timestamp has changed, auth is complete
+					if (currentTimestamp && currentTimestamp !== startTimestamp) {
+						handleAuthSuccess();
+					}
+				} catch (e) {
+					console.error('Error checking auth timestamp:', e);
+				}
+			}, 500); // Poll every 500ms
+			
+			// Common handler for authentication success
+			function handleAuthSuccess() {
+				if (authCompleted) return; // Prevent duplicate handling
+				
 				authCompleted = true;
 				authData.connecting = false;
 				authData.showCancelOption = false;
-					window.removeEventListener('message', messageHandler);
 				
 				// Clean up timers
+				clearInterval(pollInterval);
 				if (popupTimer) clearTimeout(popupTimer);
 				if (cancelTimeout) clearTimeout(cancelTimeout);
 				
-					// Check auth status again after success
+				// Update auth state
 				setTimeout(checkGoogleAuth, 100);
 			}
-			};
 			
 			// Clean up function to handle all cleanup in one place
 			const cleanUp = () => {
-				window.removeEventListener('message', messageHandler);
+				clearInterval(pollInterval);
 				if (popupTimer) clearTimeout(popupTimer);
 				if (cancelTimeout) clearTimeout(cancelTimeout);
 				authData.connecting = false;
 			};
 
-			window.addEventListener('message', messageHandler);
-
-			// Set a timeout to check auth status regardless of popup state
-			// This is a workaround for Cross-Origin-Opener-Policy restrictions
+			// Set a timeout for initial auth check
 			popupTimer = setTimeout(() => {
 				// Only check if auth isn't already completed
 				if (!authCompleted) {
@@ -160,21 +174,21 @@
 					// Check if tokens were stored by the popup before it was closed
 					setTimeout(checkGoogleAuth, 100);
 				}
-			}, 60 * 1000) as unknown as number;
+			}, 30 * 1000) as unknown as number; // Reduced from 60s to 30s
 
-			// After 20 seconds with no response, show cancel option
+			// Show cancel option sooner
 			cancelTimeout = setTimeout(() => {
 				if (!authCompleted) {
 					authData.showCancelOption = true;
 				}
-			}, 20 * 1000) as unknown as number;
+			}, 10 * 1000) as unknown as number; // Reduced from 20s to 10s
 
-			// Set a final timeout to clean up everything if nothing else worked
+			// Final cleanup timeout
 			setTimeout(() => {
 				if (!authCompleted) {
 					cleanUp();
 				}
-			}, 3 * 60 * 1000); // 3 minute max timeout
+			}, 60 * 1000); // Reduced from 3min to 1min
 
 		} catch (error) {
 			console.error('Error connecting to Google:', error);
@@ -401,15 +415,27 @@
 	<StepNavigator {currentStep} {totalSteps} />
 
 	<!-- Step Content -->
-	<div class="rounded-lg border border-gray-300 bg-white p-6 mb-6">
+	<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
 		{#if currentStep === 0}
-			<GoogleAuthStep {authData} {errors} {connectToGoogle} {cancelGoogleAuth} {disconnectGoogle} />
+			<GoogleAuthStep 
+				bind:errors
+				onSuccess={(token) => {
+					authData.error = null;
+					authData.token = token;
+					authData.isConnected = true;
+					setTimeout(checkGoogleAuth, 100);
+				}}
+				onError={(error) => {
+					authData.error = error;
+					authData.isConnected = false;
+				}}
+			/>
 		{:else if currentStep === 1}
-			<EventDetailsStep {eventData} {errors} />
+			<EventDetailsStep bind:eventData bind:errors />
 		{:else if currentStep === 2}
-			<GoogleSheetsStep {sheetsData} {errors} {loadRecentSheets} {selectSheet} {toggleSheetList} />
+			<GoogleSheetsStep bind:sheetsData bind:errors {loadRecentSheets} {selectSheet} {toggleSheetList} />
 		{:else if currentStep === 3}
-			<EmailSettingsStep {emailData} {errors} />
+			<EmailSettingsStep bind:emailData bind:errors />
 		{/if}
 
 		{#if errors.submit}

src/routes/private/events/event/new/components/EmailSettingsStep.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { emailData, errors } = $props<{
+	let { emailData = $bindable(), errors = $bindable() } = $props<{
 		emailData: {
 			subject: string;
 			body: string;

src/routes/private/events/event/new/components/EventDetailsStep.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { eventData, errors } = $props<{
+	let { eventData = $bindable(), errors = $bindable() } = $props<{
 		eventData: {
 			name: string;
 			date: string;

src/routes/private/events/event/new/components/GoogleAuthStep.svelte

@@ -1,144 +1,32 @@
 <script lang="ts">
+	import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
+
 	// Props
-	let { authData, errors, connectToGoogle, cancelGoogleAuth, disconnectGoogle } = $props<{
-		authData: {
-			isConnected: boolean;
-			checking: boolean;
-			connecting: boolean;
-			showCancelOption: boolean;
-			token: string | null;
-			error: string | null;
-			userEmail: string | null;
-		};
+	let { errors, onSuccess, onError } = $props<{
 		errors: Record<string, string>;
-		connectToGoogle: () => Promise<void>;
-		cancelGoogleAuth: () => void;
-		disconnectGoogle: () => Promise<void>;
+		onSuccess?: (token: string) => void;
+		onError?: (error: string) => void;
 	}>();
 </script>
 
 <div class="space-y-6">
 	<div class="text-center">
 		<h3 class="text-lg font-medium text-gray-900 mb-4">Connect Your Google Account</h3>
-		<p class="text-gray-600 mb-6">
+		<p class="text-gray-600 mb-4">
 			To create events and import participants from Google Sheets, you need to connect your Google account.
 		</p>
 
-		{#if authData.checking}
-			<div class="flex justify-center items-center space-x-2">
-				<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-				<span class="text-gray-600">Checking connection...</span>
-			</div>
-		{:else if authData.isConnected}
-			<div class="rounded-lg bg-green-50 border border-green-200 p-4 mb-4">
-				<div class="flex items-center justify-start">
-					<div class="justify-start flex flex-col items-start">
-						<p class="text-sm font-medium text-green-800">
-							Google account connected successfully!
-						</p>
-						{#if authData.userEmail}
-							<div class="flex items-center mt-2 bg-white rounded-full px-3 py-1 border border-green-300">
-								<p class="text-sm font-medium text-gray-700">
-									{authData.userEmail}
-								</p>
-							</div>
-						{/if}
-						<p class="text-sm text-green-700 mt-2">
-							You can now access Google Sheets and Gmail features.
-						</p>
-					</div>
-				</div>
+		<GoogleAuthButton 
+				size="large"
+				variant="primary"
+				onSuccess={onSuccess}
+				onError={onError}
+			/>
 
-				<div class="mt-4 flex justify-end">
-					<button
-						onclick={disconnectGoogle}
-						class="text-sm text-red-600 hover:text-red-800 flex items-center"
-						aria-label="Disconnect Google account"
-					>
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-						</svg>
-						Disconnect
-					</button>
+		{#if errors.google}
+			<div class="mt-4 text-sm text-red-600">
+				{errors.google}
 			</div>
-			</div>
-		{:else}
-			<div class="rounded-lg bg-yellow-50 border border-yellow-200 p-4 mb-4">
-				<div class="flex items-center justify-start">
-					<div class="flex-shrink-0">
-						<svg class="h-5 w-5 text-yellow-400" 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>
-					</div>
-					<div class="ml-3 justify-start flex flex-col items-start">
-						<p class="text-sm font-medium text-yellow-800">
-							Google account not connected
-						</p>
-						<p class="text-sm text-yellow-700 mt-1">
-							Please connect your Google account to continue with event creation.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<div class="flex flex-col gap-3">
-				<button
-					onclick={connectToGoogle}
-					disabled={authData.connecting}
-					class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed"
-					aria-label="Connect to Google account"
-				>
-					{#if authData.connecting}
-						<div class="w-5 h-5 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
-						Connecting...
-					{:else}
-						<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
-							<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-							<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-							<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-							<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-						</svg>
-						Connect to Google
-					{/if}
-				</button>
-				
-				{#if authData.connecting && authData.showCancelOption}
-					<button
-						onclick={cancelGoogleAuth}
-						class="text-sm text-gray-600 hover:text-gray-900"
-						aria-label="Cancel Google authentication"
-					>
-						Cancel connection
-					</button>
-					<p class="text-xs text-gray-500 mt-1">
-						Taking too long? You can cancel and try again.
-					</p>
-				{/if}
-			</div>
-		{/if}
-
-		{#if authData.error}
-			<div class="mt-4 rounded-lg bg-red-50 border border-red-200 p-4">
-				<div class="flex items-center">
-					<div class="flex-shrink-0">
-						<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-							<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-						</svg>
-					</div>
-					<div class="ml-3">
-						<p class="text-sm font-medium text-red-800">
-							Connection Error
-						</p>
-						<p class="text-sm text-red-700 mt-1">
-							{authData.error}
-						</p>
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		{#if errors.auth}
-			<p class="mt-2 text-sm text-red-600">{errors.auth}</p>
 		{/if}
 	</div>
 </div>

src/routes/private/events/event/new/components/GoogleSheetsStep.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { GoogleSheet } from '$lib/google/sheets';
+	import type { GoogleSheet } from '$lib/google/sheets/types.ts';
 	
 	// Props
-	let { sheetsData, errors, loadRecentSheets, selectSheet, toggleSheetList } = $props<{
+	let { sheetsData = $bindable(), errors = $bindable(), loadRecentSheets, selectSheet, toggleSheetList } = $props<{
 		sheetsData: {
 			availableSheets: GoogleSheet[];
 			selectedSheet: GoogleSheet | null;
@@ -21,6 +21,72 @@
 		selectSheet: (sheet: GoogleSheet) => Promise<void>;
 		toggleSheetList: () => void;
 	}>();
+	
+	// Search functionality
+	let searchQuery = $state('');
+	let isSearching = $state(false);
+	let searchResults = $state<GoogleSheet[]>([]);
+	let searchError = $state('');
+	
+	// Debounce function for search
+	function debounce(func: (...args: any[]) => void, wait: number) {
+		let timeout: ReturnType<typeof setTimeout> | null = null;
+		return function(...args: any[]) {
+			const later = () => {
+				timeout = null;
+				func(...args);
+			};
+			if (timeout) clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+		};
+	}
+	
+	// Search for sheets
+	const searchSheets = debounce(async () => {
+		if (!searchQuery.trim()) {
+			searchResults = [];
+			return;
+		}
+		
+		isSearching = true;
+		searchError = '';
+		
+		try {
+			const response = await fetch(`/private/api/google/sheets/search?query=${encodeURIComponent(searchQuery)}`, {
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${localStorage.getItem('google_refresh_token')}`
+				}
+			});
+			
+			if (response.ok) {
+				searchResults = await response.json();
+			} else {
+				searchError = 'Failed to search for sheets';
+				console.error('Search error:', await response.text());
+			}
+		} catch (error) {
+			searchError = 'Error searching for sheets';
+			console.error('Search error:', error);
+		} finally {
+			isSearching = false;
+		}
+	}, 500);
+	
+	// Clear search
+	function clearSearch() {
+		searchQuery = '';
+		searchResults = [];
+		searchError = '';
+	}
+	
+	$effect(() => {
+		if (searchQuery) {
+			searchSheets();
+		} else {
+			searchResults = [];
+		}
+	});
 </script>
 
 <div class="space-y-6">
@@ -69,9 +135,9 @@
 						</button>
 					</div>
 				{:else}
-					<!-- All sheets (expanded view) -->
+					<!-- All sheets and search (expanded view) -->
 					<div class="flex justify-between items-center mb-2">
-						<h4 class="text-sm font-medium text-gray-700">Available Sheets</h4>
+						<h4 class="text-sm font-medium text-gray-700">Google Sheets</h4>
 						{#if sheetsData.selectedSheet}
 							<button
 								onclick={toggleSheetList}
@@ -82,6 +148,90 @@
 							</button>
 						{/if}
 					</div>
+					
+					<!-- Search bar -->
+					<div class="relative mb-4">
+						<input
+							type="text"
+							bind:value={searchQuery}
+							placeholder="Search all your Google Sheets..."
+							class="w-full px-4 py-2 pl-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+						/>
+						<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+							</svg>
+						</div>
+						{#if searchQuery}
+							<button
+								onclick={clearSearch}
+								class="absolute inset-y-0 right-0 pr-3 flex items-center"
+								aria-label="Clear search"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						{/if}
+					</div>
+					
+					{#if isSearching}
+						<!-- Loading state -->
+						<div class="space-y-3">
+							{#each Array(3) as _}
+								<div class="p-4 border border-gray-200 rounded animate-pulse">
+									<div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+									<div class="h-3 bg-gray-100 rounded w-1/2"></div>
+								</div>
+							{/each}
+						</div>
+					{:else if searchQuery && searchResults.length === 0 && !searchError}
+						<!-- No search results -->
+						<div class="text-center py-6 border border-gray-200 rounded">
+							<p class="text-gray-500">No sheets found matching "{searchQuery}"</p>
+						</div>
+					{:else if searchError}
+						<!-- Search error -->
+						<div class="text-center py-6 border border-red-200 bg-red-50 rounded">
+							<p class="text-red-600">{searchError}</p>
+							<button
+								onclick={searchSheets}
+								class="mt-2 px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition"
+							>
+								Retry
+							</button>
+						</div>
+					{:else if searchQuery && searchResults.length > 0}
+						<!-- Search results -->
+						<div class="grid gap-3">
+							{#each searchResults as sheet}
+								<button
+									onclick={() => selectSheet(sheet)}
+									class="p-4 text-left border border-gray-200 rounded hover:border-blue-500 transition {
+										sheetsData.selectedSheet?.id === sheet.id ? 'border-blue-500 bg-blue-50' : ''
+									}"
+								>
+									<div class="font-medium text-gray-900">
+										{#if searchQuery}
+											{#each sheet.name.split(new RegExp(`(${searchQuery})`, 'i')) as part}
+												{#if part.toLowerCase() === searchQuery.toLowerCase()}
+													<span class="bg-yellow-200">{part}</span>
+												{:else}
+													{part}
+												{/if}
+											{/each}
+										{:else}
+											{sheet.name}
+										{/if}
+									</div>
+									<div class="text-sm text-gray-500">
+										Modified: {new Date(sheet.modifiedTime).toLocaleDateString('en-GB', {day: '2-digit', month: '2-digit', year: 'numeric'})}
+									</div>
+								</button>
+							{/each}
+						</div>
+					{:else}
+						<!-- Recent sheets (when not searching) -->
 						<div class="grid gap-3">
 							{#each sheetsData.availableSheets as sheet}
 								<button
@@ -92,11 +242,17 @@
 								>
 									<div class="font-medium text-gray-900">{sheet.name}</div>
 									<div class="text-sm text-gray-500">
-									Modified: {new Date(sheet.modifiedTime).toLocaleDateString()}
+										Modified: {new Date(sheet.modifiedTime).toLocaleDateString('en-GB', {day: '2-digit', month: '2-digit', year: 'numeric'})}
 									</div>
 								</button>
 							{/each}
 						</div>
+						{#if sheetsData.availableSheets.length === 0 && !sheetsData.loading}
+							<div class="text-center py-6 border border-gray-200 rounded">
+								<p class="text-gray-500">No recent sheets found. Try searching above.</p>
+							</div>
+						{/if}
+					{/if}
 				{/if}
 			</div>
 		{/if}
@@ -134,7 +290,7 @@
 											aria-label={`Select data type for column ${index + 1}`}
 											onclick={(e) => e.stopPropagation()}
 											onchange={(e) => {
-												const value = e.target.value;
+												const value = (e.target as HTMLSelectElement).value;
 												if (value === "none") return;
 												
 												// Reset previous selection if this column was already mapped
@@ -187,6 +343,7 @@
 												sheetsData.columnMapping.confirmation === cellIndex + 1 ? 'font-medium text-amber-700' : 
 												'text-gray-700'
 											}
+											title={cell || ''}
 										>
 											{cell || ''}
 										</span>
@@ -197,7 +354,17 @@
 					</tbody>
 				</table>
 			</div>
-			<p class="mt-2 text-sm text-gray-500">Showing first 10 rows</p>
+			<div class="flex justify-between mt-2">
+				<p class="text-sm text-gray-500">Showing first 10 rows</p>
+				{#if sheetsData.sheetData[0] && sheetsData.sheetData[0].length > 3}
+					<p class="text-sm text-gray-500">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
+							<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+						</svg>
+						Scroll horizontally to see all {sheetsData.sheetData[0].length} columns
+					</p>
+				{/if}
+			</div>
 		</div>
 	{/if}
 
@@ -211,3 +378,5 @@
 		<p class="text-sm text-red-600">{errors.sheetData}</p>
 	{/if}
 </div>
+
+

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

@@ -0,0 +1,608 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
+
+	let { data } = $props();
+
+	// Types
+	interface Event {
+		id: string;
+		created_at: string;
+		created_by: string;
+		name: string;
+		date: string;
+		section_id: string;
+		email_subject: string;
+		email_body: string;
+		sheet_id: string;
+		name_column: number;
+		surname_column: number;
+		email_column: number;
+		confirmation_column: number;
+	}
+
+	interface Participant {
+		id: string;
+		name: string;
+		surname: string;
+		email: string;
+		scanned: boolean;
+		email_sent: boolean;
+	}
+
+	// State
+	let event = $state<Event | null>(null);
+	let participants = $state<Participant[]>([]);
+	let loading = $state(true);
+	let participantsLoading = $state(true);
+	let syncingParticipants = $state(false);
+	let sendingEmails = $state(false);
+	let emailProgress = $state({ sent: 0, total: 0 });
+	let emailResults = $state<{success: boolean, results: any[], summary: any} | null>(null);
+	let error = $state('');
+
+	// Get event ID from URL params
+	let eventId = $derived($page.url.searchParams.get('id'));
+
+	onMount(async () => {
+		if (eventId) {
+			await loadEvent();
+			await loadParticipants();
+		}
+	});
+
+	async function loadEvent() {
+		loading = true;
+		try {
+			const { data: eventData, error: eventError } = await data.supabase
+				.from('events')
+				.select('*')
+				.eq('id', eventId)
+				.single();
+
+			if (eventError) throw eventError;
+			event = eventData;
+		} catch (err) {
+			console.error('Error loading event:', err);
+			error = 'Failed to load event';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function loadParticipants() {
+		participantsLoading = true;
+		try {
+			const { data: participantsData, error: participantsError } = await data.supabase
+				.from('participants')
+				.select('id, name, surname, email, scanned, email_sent')
+				.eq('event', eventId)
+				.order('scanned', { ascending: true })
+				.order('email_sent', { ascending: true })
+				.order('name', { ascending: true });
+
+			if (participantsError) throw participantsError;
+			participants = participantsData || [];
+		} catch (err) {
+			console.error('Error loading participants:', err);
+			error = 'Failed to load participants';
+		} finally {
+			participantsLoading = false;
+		}
+	}
+
+	async function syncParticipants() {
+		if (!event || !event.sheet_id) return;
+
+		// Check if user has Google authentication
+		const refreshToken = localStorage.getItem('google_refresh_token');
+		if (!refreshToken) {
+			error = 'Please connect your Google account first to sync participants';
+			return;
+		}
+
+		syncingParticipants = true;
+		error = '';
+		try {
+			// Fetch sheet data
+			const response = await fetch(`/private/api/google/sheets/${event.sheet_id}/data`, {
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${refreshToken}`
+				}
+			});
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					throw new Error('Google authentication expired. Please reconnect your Google account.');
+				}
+				throw new Error('Failed to fetch sheet data');
+			}
+
+			const sheetData = await response.json();
+			const rows = sheetData.values || [];
+
+			if (rows.length === 0) throw new Error('No data found in sheet');
+
+			// Extract participant data based on column mapping
+			const names: string[] = [];
+			const surnames: string[] = [];
+			const emails: string[] = [];
+
+			// Skip header row (start from index 1)
+			for (let i = 1; i < rows.length; i++) {
+				const row = rows[i];
+				if (row.length > 0) {
+					const name = row[event.name_column - 1] || '';
+					const surname = row[event.surname_column - 1] || '';
+					const email = row[event.email_column - 1] || '';
+					const confirmation = row[event.confirmation_column - 1] || '';
+
+					// Only add if the row has meaningful data (not all empty) AND confirmation is TRUE
+					const isConfirmed =
+						confirmation.toString().toLowerCase() === 'true' ||
+						confirmation.toString().toLowerCase() === 'yes' ||
+						confirmation === '1' ||
+						confirmation === 'x';
+
+					if ((name.trim() || surname.trim() || email.trim()) && isConfirmed) {
+						names.push(name.trim());
+						surnames.push(surname.trim());
+						emails.push(email.trim());
+					}
+				}
+			}
+
+			// Call database function to add participants
+			const { error: syncError } = await data.supabase.rpc('participants_add_bulk', {
+				p_event: eventId,
+				p_names: names,
+				p_surnames: surnames,
+				p_emails: emails
+			});
+
+			if (syncError) throw syncError;
+
+			// Reload participants
+			await loadParticipants();
+		} catch (err) {
+			console.error('Error syncing participants:', err);
+			error = 'Failed to sync participants';
+		} finally {
+			syncingParticipants = false;
+		}
+	}
+
+	async function sendEmailsToUncontacted() {
+		if (!event) return;
+
+		// Check if user has Google authentication
+		const refreshToken = localStorage.getItem('google_refresh_token');
+		if (!refreshToken) {
+			error = 'Please connect your Google account first to send emails';
+			return;
+		}
+
+		const uncontactedParticipants = participants.filter(p => !p.email_sent);
+		if (uncontactedParticipants.length === 0) {
+			error = 'No uncontacted participants found';
+			return;
+		}
+
+		sendingEmails = true;
+		emailProgress = { sent: 0, total: uncontactedParticipants.length };
+		emailResults = null;
+		error = '';
+
+		try {
+			// Send all emails in batch
+			const response = await fetch('/private/api/gmail', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					participants: uncontactedParticipants,
+					subject: event.email_subject,
+					text: event.email_body,
+					eventId: event.id,
+					refreshToken: refreshToken
+				})
+			});			if (response.ok) {
+				const result = await response.json();
+				emailProgress.sent = result.summary.success;
+				emailResults = result;
+				
+				// Update participants state to reflect email_sent status
+				participants = participants.map(p => {
+					const emailedParticipant = result.results.find((r: any) => r.participant.id === p.id);
+					if (emailedParticipant && emailedParticipant.success) {
+						return { ...p, email_sent: true };
+					}
+					return p;
+				});
+			} else {
+				const errorData = await response.json();
+				error = errorData.error || 'Failed to send emails';
+				console.error('Email sending failed:', errorData);
+			}
+		} catch (err) {
+			console.error('Error sending emails:', err);
+			error = 'Failed to send emails to participants';
+		} finally {
+			sendingEmails = false;
+		}
+	}
+
+	function formatDate(dateString: string) {
+		return new Date(dateString).toLocaleDateString('en-GB', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric'
+		});
+	}
+</script>
+
+<!-- Header -->
+<div class="mt-2 mb-4">
+	<h1 class="text-center text-2xl font-bold">Event Overview</h1>
+</div>
+
+<!-- Event Information -->
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+	{#if loading}
+		<!-- Loading placeholder -->
+		<div class="space-y-4">
+			<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
+			<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
+			<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
+			<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
+		</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 -->
+<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}
+		<!-- 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>
+
+<!-- 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">
+		<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">
+		<p class="text-sm text-red-600">{error}</p>
+	</div>
+{/if}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import QRScanner from './QRScanner.svelte';
 	import TicketDisplay from './TicketDisplay.svelte';
+	import { onMount } from 'svelte';
 
 	import type { TicketData } from '$lib/types/types';
 	import { ScanState, defaultTicketData } from '$lib/types/types';
@@ -10,27 +11,143 @@
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);
 	
+	// Events related state
+	interface Event {
+		id: string;
+		name: string;
+		date: string;
+	}
+	
+	let events = $state<Event[]>([]);
+	let selectedEventId = $state<string>("");
+	let isLoadingEvents = $state(true);
+	let eventsError = $state("");
+
+	onMount(async () => {
+		await loadEvents();
+	});
+
+	async function loadEvents() {
+		isLoadingEvents = true;
+		eventsError = '';
+		
+		try {
+			const { data: eventsData, error } = await data.supabase
+				.from('events')
+				.select('id, name, date')
+				.order('date', { ascending: false });
+
+			if (error) throw error;
+			events = eventsData || [];
+			
+			// If there are events, select the first one by default
+			if (events.length > 0) {
+				selectedEventId = events[0].id;
+			}
+		} catch (err) {
+			console.error('Error loading events:', err);
+			eventsError = 'Failed to load events';
+		} finally {
+			isLoadingEvents = false;
+		}
+	}
+
+	// Process a scanned QR code
 	$effect(() => {
 		if (scanned_id === "") return;
 		scan_state = ScanState.scanning;
 
+		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) {
-				ticket_data = response.data[0];
+					const participant = response.data[0];
+					ticket_data = participant;
+					
+					// Check if the participant belongs to the selected event
+					if (selectedEventId && participant.event.id !== selectedEventId) {
+						scan_state = ScanState.wrong_event;
+					} else if (participant.scanned) {
+						scan_state = ScanState.already_scanned; // Already scanned
+					} else {
 						scan_state = ScanState.scan_successful;
-				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id}).then();
+						data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id }).then();
+					}
 				} else {
 					ticket_data = defaultTicketData;
 					scan_state = ScanState.scan_failed;
 				}
-		})
+				
+				// Reset the scanned_id after 3 seconds to allow for a new scan
+				setTimeout(() => {
+					scanned_id = "";
+				}, 3000);
+			});
 	});
 </script>
 
-<QRScanner bind:message={scanned_id} />
+<div class="mx-auto p-4">
+	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
 
-<TicketDisplay {ticket_data} {scan_state}/>
+	<!-- Event Selector -->
+	<div class="rounded-lg border border-gray-300 p-4 mb-4">
+		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
+		{#if isLoadingEvents}
+			<div class="flex items-center justify-center h-10">
+				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+			</div>
+		{:else if eventsError}
+			<div class="text-red-600 text-center py-2">
+				{eventsError}
+				<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>
+		{: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"
+			>
+				{#each events as event}
+					<option value={event.id}>
+						{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
+					</option>
+				{/each}
+			</select>
+		{/if}
+	</div>
+
+	<!-- Scanner Section -->
+	<div class="mb-4">
+		<QRScanner bind:message={scanned_id} />
+	</div>
+
+	<!-- Ticket Display Section -->
+	<h2 class="text-lg font-semibold mb-4">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/QRScanner.svelte

@@ -45,7 +45,7 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-sm"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-lg border border-gray-300"></div>
 
 <style>
     /* Hide unwanted icons */

src/routes/private/scanner/TicketDisplay.svelte

@@ -5,6 +5,7 @@
 	let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();
 
 	function formatScannedAt(dateString: string): string {
+		if (!dateString) return '';
 		const date = new Date(dateString);
 		const day = String(date.getDate()).padStart(2, '0');
 		const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -14,37 +15,65 @@
 	}
 </script>
 
-<div class="py-3">
+<div class="border border-gray-300 rounded-lg overflow-hidden">
 	{#if scan_state === ScanState.scanning}
-		<div class="rounded border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700">
-			<p>Waiting for data...</p>
+		<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
+			<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+			<p class="text-gray-700">Waiting for QR code...</p>
 		</div>
 	{:else if scan_state === ScanState.scan_failed}
-		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
-			<p><strong>Scan failed!</strong></p>
-			<p>This is either not a valid ticket or this ticket has been purchased from a different section.</p>
+		<div class="bg-red-50 p-4">
+			<div class="flex items-center gap-2 mb-2">
+				<svg class="h-6 w-6 text-red-600" 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>
+		</div>
+	{:else if scan_state === ScanState.wrong_event}
+		<div class="bg-amber-50 p-4">
+			<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">
+					<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">
+				<p class="font-medium">{ticket_data.event.name}</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="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">
+					<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">
+				This ticket was already scanned by {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">
+				<p class="font-medium">{ticket_data.event.name}</p>
+				<p>{ticket_data.name} {ticket_data.surname}</p>
+			</div>
 		</div>
 	{:else if scan_state === ScanState.scan_successful}
-		{#if ticket_data.scanned}
-			<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
-				<p>Ticket already scanned!</p>
-				<p>
-					By {ticket_data.scanned_by?.display_name} on
-					{formatScannedAt(ticket_data.scanned_at)}
-				</p>
-				<hr class="my-2 border-t border-red-300" />
-				<ol>
-					<li><strong>{ticket_data.event.name}</strong></li>
-					<li>{ticket_data.name} {ticket_data.surname}</li>
-				</ol>
+		<div class="bg-green-50 p-4">
+			<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">
+					<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="font-medium">{ticket_data.event.name}</p>
+				<p>{ticket_data.name} {ticket_data.surname}</p>
 			</div>
-		{:else}
-			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
-				<ol>
-					<li><strong>{ticket_data.event.name}</strong></li>
-					<li>{ticket_data.name} {ticket_data.surname}</li>
-				</ol>
 		</div>
-		{/if}
 	{/if}
 </div>

src/service-worker.ts

@@ -36,6 +36,12 @@ self.addEventListener('fetch', (event) => {
 
 	async function respond() {
 		const url = new URL(event.request.url);
+		
+		// Skip caching for auth routes
+		if (url.pathname.startsWith('/auth/')) {
+			return fetch(event.request);
+		}
+
 		const cache = await caches.open(CACHE);
 
 		// `build`/`files` can always be served from the cache

supabase/migrations/20250708150826_remote_schema.sql

@@ -0,0 +1,90 @@
+drop function if exists "public"."create_event"(p_name text, p_date date, p_email_subject text, p_email_body text, p_sheet_id text, p_name_column integer, p_surname_column integer, p_email_column integer, p_confirmation_column integer);
+
+drop function if exists "public"."participant_emailed"(p_participant_id uuid, p_sent boolean);
+
+drop function if exists "public"."participants_add_bulk"(p_event uuid, p_names text[], p_surnames text[], p_emails text[]);
+
+drop index if exists "public"."participants_event_name_surname_email_uidx";
+
+alter table "public"."events" drop column "confirmation_column";
+
+alter table "public"."events" drop column "email_column";
+
+alter table "public"."events" drop column "name_column";
+
+alter table "public"."events" drop column "surname_column";
+
+alter table "public"."participants" drop column "email_sent";
+
+set check_function_bodies = off;
+
+CREATE OR REPLACE FUNCTION public.create_event(p_name text, p_date date)
+ RETURNS events
+ LANGUAGE plpgsql
+ SECURITY DEFINER
+ SET search_path TO 'public'
+AS $function$
+declare
+  v_user    uuid := auth.uid();                     -- current user
+  v_section uuid;                                   -- their section_id
+  v_evt     public.events%rowtype;                  -- the inserted event
+begin
+  -- 1) lookup the user's section
+  select section_id
+    into v_section
+    from public.profiles
+   where id = v_user;
+
+  if v_section is null then
+    raise exception 'no profile/section found for user %', v_user;
+  end if;
+
+  -- 2) insert into events, filling created_by and section_id
+  insert into public.events (
+    name,
+    date,
+    created_by,
+    section_id
+  )
+  values (
+    p_name,
+    p_date,
+    v_user,
+    v_section
+  )
+  returning * into v_evt;
+
+  -- 3) return the full row
+  return v_evt;
+end;
+$function$
+;
+
+CREATE OR REPLACE FUNCTION public.create_qrcodes_bulk(p_section_id uuid, p_event_id uuid, p_names text[], p_surnames text[], p_emails text[])
+ RETURNS SETOF participants
+ LANGUAGE plpgsql
+ SECURITY DEFINER
+ SET search_path TO 'public', 'pg_temp'
+AS $function$BEGIN
+    -----------------------------------------------------------------
+    -- 1) keep the array-length check exactly as before
+    -----------------------------------------------------------------
+    IF array_length(p_names, 1)  IS DISTINCT FROM
+       array_length(p_surnames,1) OR
+       array_length(p_names, 1)  IS DISTINCT FROM
+       array_length(p_emails,  1) THEN
+       RAISE EXCEPTION
+         'Names, surnames and emails arrays must all be the same length';
+    END IF;
+
+    RETURN QUERY
+    INSERT INTO public.participants (section_id, event, name, surname, email)
+    SELECT  p_section_id,
+            p_event_id,
+            n, s, e
+    FROM   unnest(p_names, p_surnames, p_emails) AS u(n, s, e)
+    RETURNING *;
+END;$function$
+;
+
+