fixed user leaderboard. need to add features to admin leaderboard and fix timing issue on admin dashboard.

Grey = cant click
Red = current
Green = complete
blue = skipped?

Need to add Clue page Need to fix Leaderboard.

app/(main)/admin/page.js

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import {
   setHuntTimer,
   clearHuntTimer,
+  getHuntTimer,
   formatElapsedTime,
 } from "@/utils/timerService";
 
@@ -26,6 +27,7 @@ export default function AdminDashboard() {
   useEffect(() => {
     async function loadTimerStatus() {
       try {
+        setLoading(true);
         const response = await fetch("/api/hunt/timer", {
           credentials: "include",
           headers: {
@@ -39,18 +41,13 @@ export default function AdminDashboard() {
 
           // Calculate elapsed time
           if (data.startTime) {
-            const startTime = new Date(data.startTime).getTime();
-            const currentTime = Date.now();
-            const elapsed = Math.floor((currentTime - startTime) / 1000);
-            setElapsedTime(elapsed);
-
-            // Update global timer data for all clients
+            // Store the start time in the centralized service
             setHuntTimer(data.startTime, data.endTime);
-          }
 
-          // If there's an end time, set it
-          if (data.endTime) {
-            setTimerEndTime(new Date(data.endTime).getTime());
+            // If there's an end time, set it
+            if (data.endTime) {
+              setTimerEndTime(new Date(data.endTime).getTime());
+            }
           }
         }
 
@@ -78,62 +75,39 @@ export default function AdminDashboard() {
     }
   }, [session, status, router]);
 
-  // Timer update effect
+  // Timer update effect - use the centralized timer service
   useEffect(() => {
-    if (timerActive) {
-      timerRef.current = setInterval(() => {
-        setElapsedTime((prev) => {
-          const newElapsed = prev + 1;
+    let intervalId;
 
-          // If we have an end time and we've reached it, stop the timer
+    if (timerActive) {
+      // Use the existing timer data from the centralized service
+      intervalId = setInterval(() => {
+        const timerData = getHuntTimer();
+
+        if (timerData && timerData.startTime) {
+          // Format the elapsed time using the centralized service
+          const formattedTime = formatElapsedTime(timerData.startTime);
+          setTimerDisplay(formattedTime);
+
+          // If there's an end time, check if we've reached it
           if (timerEndTime && Date.now() >= timerEndTime) {
             stopTimer();
-            return prev;
           }
-
-          // Update the display
-          formatTimeDisplay(newElapsed);
-          return newElapsed;
-        });
+        } else {
+          setTimerDisplay("--:--:--");
+        }
       }, 1000);
     } else {
-      if (timerRef.current) {
-        clearInterval(timerRef.current);
-      }
+      setTimerDisplay("--:--:--");
     }
 
     return () => {
-      if (timerRef.current) {
-        clearInterval(timerRef.current);
+      if (intervalId) {
+        clearInterval(intervalId);
       }
     };
   }, [timerActive, timerEndTime]);
 
-  // Format time for display whenever elapsed time changes
-  useEffect(() => {
-    formatTimeDisplay(elapsedTime);
-  }, [elapsedTime]);
-
-  // Format seconds into HH:MM:SS
-  const formatTimeDisplay = (totalSeconds) => {
-    if (!timerActive) {
-      setTimerDisplay("--:--:--");
-      return;
-    }
-
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    const display = [
-      hours.toString().padStart(2, "0"),
-      minutes.toString().padStart(2, "0"),
-      seconds.toString().padStart(2, "0"),
-    ].join(":");
-
-    setTimerDisplay(display);
-  };
-
   const startTimer = async (preset = false) => {
     setLoading(true);
     try {
@@ -182,7 +156,6 @@ export default function AdminDashboard() {
 
       if (data.success) {
         setTimerActive(true);
-        setElapsedTime(0);
 
         if (endTime) {
           setTimerEndTime(new Date(endTime).getTime());
@@ -221,8 +194,7 @@ export default function AdminDashboard() {
       if (data.success) {
         setTimerActive(false);
         setTimerEndTime(null);
-        setElapsedTime(0);
-        formatTimeDisplay(0);
+        setTimerDisplay("--:--:--");
 
         // Clear timer data for all clients
         clearHuntTimer();