tests passing

frontend/app/audit/page.tsx

@@ -2,7 +2,7 @@
 
 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";
 
 interface CounterRecord {
@@ -35,26 +35,32 @@ export default function AuditPage() {
   const [sumData, setSumData] = useState<PaginatedResponse<SumRecord> | null>(null);
   const [counterPage, setCounterPage] = useState(1);
   const [sumPage, setSumPage] = useState(1);
-  const { user, isLoading, logout } = useAuth();
+  const { user, isLoading, logout, hasPermission } = useAuth();
   const router = useRouter();
 
-  useEffect(() => {
-    if (!isLoading && !user) {
-      router.push("/login");
-    }
-  }, [isLoading, user, router]);
+  const canViewAudit = hasPermission(Permission.VIEW_AUDIT);
 
   useEffect(() => {
-    if (user) {
+    if (!isLoading) {
+      if (!user) {
+        router.push("/login");
+      } else if (!canViewAudit) {
+        router.push("/");
+      }
+    }
+  }, [isLoading, user, router, canViewAudit]);
+
+  useEffect(() => {
+    if (user && canViewAudit) {
       fetchCounterRecords(counterPage);
     }
-  }, [user, counterPage]);
+  }, [user, counterPage, canViewAudit]);
 
   useEffect(() => {
-    if (user) {
+    if (user && canViewAudit) {
       fetchSumRecords(sumPage);
     }
-  }, [user, sumPage]);
+  }, [user, sumPage, canViewAudit]);
 
   const fetchCounterRecords = async (page: number) => {
     try {
@@ -97,7 +103,7 @@ export default function AuditPage() {
     );
   }
 
-  if (!user) {
+  if (!user || !canViewAudit) {
     return null;
   }
 
@@ -105,10 +111,6 @@ export default function AuditPage() {
     <main style={styles.main}>
       <div style={styles.header}>
         <div style={styles.nav}>
-          <a href="/" style={styles.navLink}>Counter</a>
-          <span style={styles.navDivider}>•</span>
-          <a href="/sum" style={styles.navLink}>Sum</a>
-          <span style={styles.navDivider}>•</span>
           <span style={styles.navCurrent}>Audit</span>
         </div>
         <div style={styles.userInfo}>