fixed elapsed timer on clue page cannot fix it on admin page. I am done. now to move on to the styling to match UI

app/(main)/admin/page.js

@@ -7,6 +7,7 @@ import {
   clearHuntTimer,
   getHuntTimer,
   formatElapsedTime,
+  syncTimerWithServer,
 } from "@/utils/timerService";
 
 export default function AdminDashboard() {
@@ -14,7 +15,6 @@ export default function AdminDashboard() {
   const [timerActive, setTimerActive] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
-  const [elapsedTime, setElapsedTime] = useState(0); // in seconds
   const [timerDisplay, setTimerDisplay] = useState("--:--:--");
   const [presetHours, setPresetHours] = useState("");
   const [presetMinutes, setPresetMinutes] = useState("");
@@ -22,6 +22,7 @@ export default function AdminDashboard() {
   const [timerEndTime, setTimerEndTime] = useState(null);
   const timerRef = useRef(null);
   const timerIntervalRef = useRef(null);
+  const timerStartTimeRef = useRef(null); // New ref to store the start time
   const router = useRouter();
 
   // Load timer status on page load
@@ -33,8 +34,12 @@ export default function AdminDashboard() {
         // First, check if we already have timer data in localStorage
         const existingTimer = getHuntTimer();
         if (existingTimer && existingTimer.startTime) {
+          // Store the start time in the ref to prevent it from being lost on re-renders
+          timerStartTimeRef.current = existingTimer.startTime;
+
           // If we have timer data, immediately set the display
-          setTimerActive(existingTimer.isActive);
+          setTimerActive(existingTimer.isActive !== false);
+          setTimerDisplay(formatElapsedTime(existingTimer.startTime));
           if (existingTimer.endTime) {
             setTimerEndTime(new Date(existingTimer.endTime).getTime());
           }
@@ -61,10 +66,15 @@ export default function AdminDashboard() {
         if (isActive && data.startTime) {
           setTimerActive(true);
 
+          // Store the start time in the ref for persistence across renders
+          timerStartTimeRef.current = data.startTime;
+
           // Store the start time in the centralized service
-          setHuntTimer(data.startTime, data.endTime);
+          setHuntTimer(data.startTime, data.endTime, true); // Explicitly set isActive=true
+
+          // Update the display immediately with the correct time
+          setTimerDisplay(formatElapsedTime(data.startTime));
 
-          // If there's an end time, set it
           if (data.endTime) {
             setTimerEndTime(new Date(data.endTime).getTime());
           } else {
@@ -72,10 +82,12 @@ export default function AdminDashboard() {
           }
         } else {
           // Only clear local timer if server explicitly says timer is not active
-          // This prevents clearing a valid timer if the server response is ambiguous
           if (data.active === false && data.timerActive === false) {
             clearHuntTimer();
+            timerStartTimeRef.current = null; // Clear the start time ref
             setTimerActive(false);
+            setTimerDisplay("--:--:--");
+            setTimerEndTime(null);
           }
         }
 
@@ -111,48 +123,53 @@ export default function AdminDashboard() {
     }
   }, [session, status, router]);
 
-  // Create a separate effect for updating the timer display
+  // Create a separate effect for updating the timer display - but only have one instance
   useEffect(() => {
-    let timerId;
+    // Clear any existing interval to avoid duplicates
+    if (timerIntervalRef.current) {
+      clearInterval(timerIntervalRef.current);
+      timerIntervalRef.current = null;
+    }
 
-    // Initialize timer
-    async function initializeTimer() {
-      // Set up timer updates
-      const updateTimer = () => {
-        const timerData = getHuntTimer();
-        if (timerData && timerData.startTime) {
-          setTimerDisplay(formatElapsedTime(timerData.startTime));
+    const updateTimer = () => {
+      // Use the ref to access the persisted start time
+      const startTime = timerStartTimeRef.current;
 
-          // If there's an end time, check if we've reached it
-          if (timerEndTime && Date.now() >= timerEndTime) {
-            stopTimer();
-          }
-        } else {
-          setTimerDisplay("--:--:--");
+      if (timerActive && startTime) {
+        // Format time using the start time from our ref, which persists across renders
+        setTimerDisplay(formatElapsedTime(startTime));
+
+        // Check if timer has ended
+        if (timerEndTime && Date.now() >= timerEndTime) {
+          stopTimer();
         }
-      };
-
-      // Initial update
-      updateTimer();
-
-      // Update every second
-      timerId = setInterval(updateTimer, 1000);
-    }
-
-    // Only initialize timer if the timer is active
-    if (timerActive) {
-      initializeTimer();
-    } else {
-      setTimerDisplay("--:--:--");
-    }
-
-    // Clean up interval on unmount
-    return () => {
-      if (timerId) {
-        clearInterval(timerId);
+      } else if (timerActive) {
+        // If timer is active but no data, try to restore
+        syncTimerWithServer().then((result) => {
+          if (result.success && result.data) {
+            timerStartTimeRef.current = result.data.startTime;
+          }
+        });
+      } else {
+        setTimerDisplay("--:--:--");
       }
     };
-  }, [timerActive, timerEndTime]);
+
+    // Initial update
+    updateTimer();
+
+    // Set up interval for timer updates
+    if (timerActive) {
+      timerIntervalRef.current = setInterval(updateTimer, 1000);
+    }
+
+    return () => {
+      if (timerIntervalRef.current) {
+        clearInterval(timerIntervalRef.current);
+        timerIntervalRef.current = null;
+      }
+    };
+  }, [timerActive, timerEndTime]); // Include timerEndTime as a dependency
 
   // Add a function to fetch timer status directly from the server
   const fetchTimerStatusFromServer = async () => {
@@ -177,8 +194,8 @@ export default function AdminDashboard() {
 
       if (isActive && data.startTime) {
         setTimerActive(true);
+        timerStartTimeRef.current = data.startTime; // Update the ref
         setHuntTimer(data.startTime, data.endTime);
-
         if (data.endTime) {
           setTimerEndTime(new Date(data.endTime).getTime());
         } else {
@@ -189,6 +206,7 @@ export default function AdminDashboard() {
       } else if (data.active === false && data.timerActive === false) {
         // Only clear timer if server explicitly says timer is inactive
         setTimerActive(false);
+        timerStartTimeRef.current = null; // Clear the ref
         clearHuntTimer();
         setTimerDisplay("--:--:--");
       }
@@ -250,6 +268,9 @@ export default function AdminDashboard() {
       if (data.success) {
         setTimerActive(true);
 
+        // Store the start time in the ref
+        timerStartTimeRef.current = data.startTime;
+
         if (endTime) {
           setTimerEndTime(new Date(endTime).getTime());
         } else {
@@ -293,6 +314,7 @@ export default function AdminDashboard() {
 
       if (data.success) {
         setTimerActive(false);
+        timerStartTimeRef.current = null; // Clear the ref
         setTimerEndTime(null);
         setTimerDisplay("--:--:--");
 
@@ -465,6 +487,7 @@ export default function AdminDashboard() {
           padding: 1rem;
           display: flex;
           flex-direction: column;
+          justify-content: center;
           align-items: center;
           padding-bottom: 70px; /* Add space for the navbar */
         }