fix: update session handling to refresh admin navigation after login

src/app/auth/login/page.tsx

@@ -4,9 +4,11 @@ import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { authClient } from "@/lib/auth-client"
+import { useSession } from "@/components/SessionProvider"
 
 export default function LoginPage() {
   const router = useRouter()
+  const { refreshSession } = useSession()
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(false)
   
@@ -29,8 +31,15 @@ export default function LoginPage() {
       if (result.error) {
         setError(result.error.message || "Failed to sign in")
       } else {
-        // Navigate to admin page - Better Auth will handle session update
+        // Refresh the session after successful login
+        try {
+          await refreshSession()
+        } catch (err) {
+          console.error("Failed to refresh session:", err)
+        }
+        // Navigate to admin page
         router.push("/admin")
+        router.refresh()
       }
     } catch {
       setError("An unexpected error occurred")

src/components/Navigation.tsx

@@ -9,16 +9,29 @@ export default function Navigation() {
   const { session, loading } = useSession()
   const [userRole, setUserRole] = useState<string | null>(null)
 
+  // Fetch user role whenever session changes
   useEffect(() => {
-    // Fetch user role from database if session exists
+    const fetchUserRole = async () => {
       const userId = (session?.user as { id?: string })?.id
       if (userId) {
-      fetch(`/api/users/${userId}/role`)
-        .then(res => res.json())
-        .then(data => setUserRole(data.role))
-        .catch(() => setUserRole(null));
+        try {
+          const response = await fetch(`/api/users/${userId}/role`)
+          if (response.ok) {
+            const data = await response.json()
+            setUserRole(data.role)
+          } else {
+            setUserRole(null)
           }
-  }, [session]);
+        } catch {
+          setUserRole(null)
+        }
+      } else {
+        setUserRole(null)
+      }
+    }
+
+    fetchUserRole()
+  }, [session])
 
   const handleLogout = async () => {
     await authClient.signOut()
@@ -56,6 +69,12 @@ export default function Navigation() {
                       >
                         Admin
                       </Link>
+                      <Link
+                        href="/admin/matches"
+                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                      >
+                        Matches
+                      </Link>
                       <Link
                         href="/admin/players"
                         className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"

src/components/SessionProvider.tsx

@@ -20,7 +20,8 @@ export function SessionProvider({ children }: { children: React.ReactNode }) {
     try {
       const result = await authClient.getSession()
       if (result.data) {
-        setSession(result.data)
+        // Create a new object reference to trigger re-renders
+        setSession({ ...result.data })
       } else {
         setSession(null)
       }
@@ -46,7 +47,7 @@ export function SessionProvider({ children }: { children: React.ReactNode }) {
       if (customEvent.detail?.session !== undefined) {
         // Session was updated
         if (customEvent.detail.session) {
-          setSession(customEvent.detail.session)
+          setSession({ ...customEvent.detail.session })
         } else {
           setSession(null)
         }