Add role base access control for events module

src/routes/+layout.server.ts

@@ -1,9 +1,18 @@
 import type { LayoutServerLoad } from './$types'
 
-export const load: LayoutServerLoad = async ({ locals: { safeGetSession }, cookies }) => {
-  const { session } = await safeGetSession()
+export const load: LayoutServerLoad = async ({ locals: { safeGetSession, getUserProfile }, cookies }) => {
+  const { session, user } = await safeGetSession()
+  
+  // Get the user profile if the user is authenticated
+  let profile = null
+  if (user) {
+    profile = await getUserProfile(user.id)
+  }
+  
   return {
     session,
+    user,
+    profile,
     cookies: cookies.getAll(),
   }
 }

src/routes/+layout.ts

@@ -39,5 +39,10 @@ export const load: LayoutLoad = async ({ data, depends, fetch }) => {
     data: { user },
   } = await supabase.auth.getUser()
 
-  return { session, supabase, user }
+  return { 
+    session, 
+    supabase, 
+    user, 
+    profile: data.profile 
+  }
 }

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <div class="min-h-screen flex flex-col justify-center items-center">
-    <!-- SVG QR Code Art on Top -->
     <div class="mb-8">
         <img class="w-32 h-auto" src="/qr-code.png" alt="">
     </div>

src/routes/private/+layout.svelte

@@ -3,6 +3,8 @@
 	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
 	import ToastContainer from '$lib/components/ToastContainer.svelte';
 
+	let { data } = $props();
+
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {
@@ -22,7 +24,9 @@
 			<ul class="flex space-x-4">
 				<li><a href="/private/home">Home</a></li>
 				<li><a href="/private/scanner">Scanner</a></li>
-				<li><a href="/private/events">Events</a></li>
+				{#if data.profile?.section_position === 'events_manager'}
+					<li><a href="/private/events">Events</a></li>
+				{/if}
 			</ul>
 		</div>
 	</div>

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

@@ -0,0 +1 @@
+Access to events denied!

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

@@ -1,22 +0,0 @@
-// src/routes/my-page/+page.server.ts
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ locals }) => {
-    // get the logged-in user
-    const { data: { user }, error: authError } = await locals.supabase.auth.getUser();
-
-    const { data: user_profile, error: profileError } = await locals.supabase.from('profiles').select('*, section:sections (id, name)').eq('id', user?.id).single();
-
-    if (authError) {
-        console.error('Supabase auth error:', authError);
-        throw new Error('Could not get user');
-    }
-
-    if (profileError) {
-        console.error('Supabase profile error:', profileError);
-        throw new Error('Could not get user profile');
-    }
-
-    return { user, user_profile };
-
-};

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

@@ -1,10 +1,5 @@
 <script lang="ts">
-    import type { User } from '@supabase/supabase-js';
-
-	export let data: { 
-        user: User | null,
-        user_profile: any | null
-    };
+    let { data } = $props();
 </script>
 
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
@@ -16,18 +11,18 @@
                 {data.user?.user_metadata.display_name?.[0] ?? "U"}
             </div>
             <div>
-                <span class="text-lg font-semibold text-gray-800">{data.user?.user_metadata.display_name}</span>
+                <span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
                 <div class="text-sm text-gray-500">{data.user?.email}</div>
             </div>
         </div>
         <div class="flex flex-col gap-1">
             <div>
                 <span class="font-medium text-gray-700">Section:</span>
-                <span class="text-gray-900">{data.user_profile?.section.name ?? "N/A"}</span>
+                <span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
             </div>
             <div>
                 <span class="font-medium text-gray-700">Position:</span>
-                <span class="text-gray-900">{data.user_profile?.section_position ?? "N/A"}</span>
+                <span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
             </div>
         </div>
         <h2 class="text-lg mb-2 mt-4">User guide</h2>