fix: update session handling to refresh admin navigation after login

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 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));
+    const fetchUserRole = async () => {
+      const userId = (session?.user as { id?: string })?.id
+      if (userId) {
+        try {
+          const response = await fetch(`/api/users/${userId}/role`)
+          if (response.ok) {
+            const data = await response.json()
+            setUserRole(data.role)
+          } else {
+            setUserRole(null)
+          }
+        } catch {
+          setUserRole(null)
+        }
+      } else {
+        setUserRole(null)
+      }
     }
-  }, [session]);
+
+    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"