better sighnout and more user info

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

@@ -1,36 +1,19 @@
 <script lang="ts">
-import { onMount } from 'svelte';
-import { goto } from '$app/navigation'
-
-let { data } = $props();
-let user_data = $state();
-
-onMount(async () => {
-    const { data: { user } } = await data.supabase.auth.getUser();
-    user_data = user;
-});
-
-async function signOut() {
-    const { error } = await data.supabase.auth.signOut();
-    if (error) {
-        console.error('Sign out error:', error);
-    } else {
-        user_data = null; // Clear user data on sign out
-        await goto('/');
-    }
-};
+    import type { User } from '@supabase/supabase-js';
 
+	export let data: { 
+        user: User | null,
+        user_profile: any | null
+    };
 </script>
 
-{#if user_data}
-    <div class="user-profile">
-        <h2 class="text-2xl font-bold mb-2">Currently logged in</h2>
-        <p><strong>Username:</strong> {user_data.user_metadata.display_name}</p>
-        <p><strong>Email:</strong> {user_data.email}</p>
-    </div>
-    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mt-4" onclick={signOut}>
-        Sign Out
-    </button>
-{:else}
-    <p>Loading user profile...</p>
-{/if}
+<div class="user-profile">
+    <h2 class="mb-2 text-2xl font-bold">Currently logged in</h2>
+    <p><strong>Username:</strong> {data.user?.user_metadata.display_name}</p>
+    <p><strong>Email:</strong> {data.user?.email}</p>
+    <p><strong>Section:</strong> {data.user_profile?.section.name}</p>
+    <p><strong>Position:</strong> {data.user_profile?.section_position}</p>
+</div>
+<button class="mt-4 rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
+    <a href="/auth/signout">Sign out</a>
+</button>