fix: Move fetchWhosWho outside useEffect for pagination access

- Move fetchWhosWho function outside useEffect using useCallback
- Fixes TypeScript error: Cannot find name 'fetchWhosWho'
- Allows pagination buttons to call fetchWhosWho with new page number
- Maintains polling functionality with proper cleanup

src/components/features/admin/admin-dashboard.tsx

@@ -1293,77 +1293,65 @@ export function AdminDashboard({
     };
   }, []);
 
-  // Fetch Who's Who data
-  useEffect(() => {
-    let abortController: AbortController | null = null;
-    let intervalId: NodeJS.Timeout | null = null;
+  // Fetch Who's Who data - moved outside useEffect so it can be called from pagination buttons
+  const fetchWhosWho = useCallback(async (silent = false, page = whosWhoPage) => {
+    if (!silent) {
+      setWhosWhoLoading(true);
+    }
 
-    const fetchWhosWho = async (silent = false, page = whosWhoPage) => {
-      // Abort previous request if still pending
-      if (abortController) {
-        abortController.abort();
-      }
-      abortController = new AbortController();
+    try {
+      const response = await fetch(`/api/admin/whos-who?page=${page}&limit=${whosWhoLimit}`, {
+        credentials: 'include',
+      });
 
-      if (!silent) {
-        setWhosWhoLoading(true);
-      }
-
-      try {
-        const response = await fetch(`/api/admin/whos-who?page=${page}&limit=${whosWhoLimit}`, {
-          credentials: 'include',
-          signal: abortController.signal,
-        });
-
-        if (!response.ok) {
-          if (response.status === 401) {
-            console.warn('[AdminDashboard] Unauthorized for Who\'s Who fetch');
-            return;
-          }
-          console.warn(`[AdminDashboard] Who's Who fetch returned ${response.status}`);
+      if (!response.ok) {
+        if (response.status === 401) {
+          console.warn('[AdminDashboard] Unauthorized for Who\'s Who fetch');
           return;
         }
+        console.warn(`[AdminDashboard] Who's Who fetch returned ${response.status}`);
+        return;
+      }
 
-        const data = await response.json();
-        if (data && data.success !== false) {
-          setWhosWhoData(data);
-        } else {
-          console.warn('[AdminDashboard] Who\'s Who API returned error:', data.error);
-          if (!silent) {
-            setWhosWhoData(null);
-          }
-        }
-      } catch (error) {
-        if (error instanceof Error && error.name !== 'AbortError') {
-          console.warn('[AdminDashboard] Failed to fetch Who\'s Who:', error);
-          if (!silent) {
-            setWhosWhoData(null);
-          }
-        }
-      } finally {
+      const data = await response.json();
+      if (data && data.success !== false) {
+        setWhosWhoData(data);
+      } else {
+        console.warn('[AdminDashboard] Who\'s Who API returned error:', data.error);
         if (!silent) {
-          setWhosWhoLoading(false);
+          setWhosWhoData(null);
         }
       }
-    };
+    } catch (error) {
+      if (error instanceof Error) {
+        console.warn('[AdminDashboard] Failed to fetch Who\'s Who:', error);
+        if (!silent) {
+          setWhosWhoData(null);
+        }
+      }
+    } finally {
+      if (!silent) {
+        setWhosWhoLoading(false);
+      }
+    }
+  }, [whosWhoPage, whosWhoLimit]);
 
+  // Set up polling for Who's Who data
+  useEffect(() => {
     // Initial fetch
     fetchWhosWho(false);
 
     // Poll every 30 seconds (same as other components)
-    intervalId = setInterval(() => {
+    const intervalId = setInterval(() => {
       fetchWhosWho(true); // Silent refresh
     }, 30000);
 
     return () => {
-      if (abortController) {
-        abortController.abort();
-      }
       if (intervalId) {
         clearInterval(intervalId);
       }
     };
-  }, []);
+  }, [fetchWhosWho]);
 
   // Fetch guestbook entries
   useEffect(() => {