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

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

src/routes/api/events/+server.ts

@@ -0,0 +1,21 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ locals }) => {
+    try {
+        const { data: events, error } = await locals.supabase
+            .from('events')
+            .select('*')
+            .order('date', { ascending: false });
+            
+        if (error) {
+            console.error('Error fetching events:', error);
+            return json({ error: error.message }, { status: 500 });
+        }
+        
+        return json({ events });
+    } catch (err) {
+        console.error('Error in events API:', err);
+        return json({ error: 'Internal server error' }, { status: 500 });
+    }
+};

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

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

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

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

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

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

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

@@ -1,20 +1,81 @@
 <script lang="ts">
-    export let data;
+    // Get the supabase client
+    let { data } = $props();
+    
+    // Create reactive states for events and loading
+    let events = $state([]);
+    let loading = $state(true);
+    let error = $state(null);
+
+    // Load events when component mounts
+    $effect(() => {
+        loadEvents();
+    });
+    
+    async function loadEvents() {
+        loading = true;
+        error = null;
+        
+        try {
+            const { data: eventsData, error: supabaseError } = await data.supabase
+                .from('events')
+                .select('*')
+                .order('date', { ascending: false });
+                
+            if (supabaseError) throw supabaseError;
+            
+            events = eventsData || [];
+        } catch (err) {
+            console.error('Error fetching events:', err);
+            error = 'Failed to load events';
+        } finally {
+            loading = false;
+        }
+    }
 </script>
 
 <h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
-  {#each data.events as event}
-    <a
-      href={`/private/events/event?id=${event.id}`}
-      class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
-    >
-      <div class="flex flex-col gap-1">
-        <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
-        <span class="text-gray-500 text-sm">{event.date}</span>
+  {#if loading}
+    <!-- Loading placeholders -->
+    {#each Array(4) as _}
+      <div class="border border-gray-300 rounded bg-white p-4 animate-pulse">
+        <div class="flex flex-col gap-1">
+          <div class="h-5 bg-gray-200 rounded w-3/4 mb-2"></div>
+          <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+        </div>
       </div>
-    </a>
-  {/each}
+    {/each}
+  {:else if error}
+    <!-- Error state -->
+    <div class="col-span-full text-center p-4 text-red-600">
+      {error}
+      <button 
+        onclick={loadEvents}
+        class="ml-2 text-blue-600 underline"
+      >
+        Try again
+      </button>
+    </div>
+  {:else if events.length === 0}
+    <!-- Empty state -->
+    <div class="col-span-full text-center p-4 text-gray-500">
+      No events found
+    </div>
+  {:else}
+    <!-- Events list -->
+    {#each events as event}
+      <a
+        href={`/private/events/event?id=${event.id}`}
+        class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
+      >
+        <div class="flex flex-col gap-1">
+          <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
+          <span class="text-gray-500 text-sm">{event.date}</span>
+        </div>
+      </a>
+    {/each}
+  {/if}
 </div>
 
 <a