tests passing

frontend/app/page.tsx

@@ -2,19 +2,26 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { useAuth } from "./auth-context";
+import { useAuth, Permission } from "./auth-context";
 import { API_URL } from "./config";
 
 export default function Home() {
   const [count, setCount] = useState<number | null>(null);
-  const { user, isLoading, logout } = useAuth();
+  const { user, isLoading, logout, hasPermission } = useAuth();
   const router = useRouter();
 
+  const canViewCounter = hasPermission(Permission.VIEW_COUNTER);
+
   useEffect(() => {
-    if (!isLoading && !user) {
-      router.push("/login");
+    if (!isLoading) {
+      if (!user) {
+        router.push("/login");
+      } else if (!canViewCounter) {
+        // Redirect to audit if user has audit permission, otherwise to login
+        router.push(hasPermission(Permission.VIEW_AUDIT) ? "/audit" : "/login");
+      }
     }
-  }, [isLoading, user, router]);
+  }, [isLoading, user, router, canViewCounter, hasPermission]);
 
   useEffect(() => {
     if (user) {
@@ -49,7 +56,7 @@ export default function Home() {
     );
   }
 
-  if (!user) {
+  if (!user || !canViewCounter) {
     return null;
   }
 
@@ -60,8 +67,6 @@ export default function Home() {
           <span style={styles.navCurrent}>Counter</span>
           <span style={styles.navDivider}>•</span>
           <a href="/sum" style={styles.navLink}>Sum</a>
-          <span style={styles.navDivider}>•</span>
-          <a href="/audit" style={styles.navLink}>Audit</a>
         </div>
         <div style={styles.userInfo}>
           <span style={styles.userEmail}>{user.email}</span>