cannot fix issue with elapsed timer on admin dashboard. fixing issues with QR code editing.

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

app/(main)/admin/page.js

@@ -21,6 +21,7 @@ export default function AdminDashboard() {
   const [presetSeconds, setPresetSeconds] = useState("");
   const [timerEndTime, setTimerEndTime] = useState(null);
   const timerRef = useRef(null);
+  const timerIntervalRef = useRef(null);
   const router = useRouter();
 
   // Load timer status on page load
@@ -28,33 +29,65 @@ export default function AdminDashboard() {
     async function loadTimerStatus() {
       try {
         setLoading(true);
+
+        // First, check if we already have timer data in localStorage
+        const existingTimer = getHuntTimer();
+        if (existingTimer && existingTimer.startTime) {
+          // If we have timer data, immediately set the display
+          setTimerActive(existingTimer.isActive);
+          if (existingTimer.endTime) {
+            setTimerEndTime(new Date(existingTimer.endTime).getTime());
+          }
+          setTimerDisplay(formatElapsedTime(existingTimer.startTime));
+        }
+
+        // Then, fetch fresh data from the server to ensure we're in sync
         const response = await fetch("/api/hunt/timer", {
           credentials: "include",
           headers: {
-            "Cache-Control": "no-cache",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+            Pragma: "no-cache",
           },
         });
+
+        if (!response.ok) {
+          throw new Error(`Server responded with status: ${response.status}`);
+        }
+
         const data = await response.json();
 
-        if (data.active) {
+        // Check both activity indicators to handle cases where they might be inconsistent
+        const isActive = data.active || data.timerActive;
+
+        if (isActive && data.startTime) {
           setTimerActive(true);
 
-          // Calculate elapsed time
-          if (data.startTime) {
-            // Store the start time in the centralized service
-            setHuntTimer(data.startTime, data.endTime);
+          // 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());
+          } else {
+            setTimerEndTime(null);
+          }
+
+          // Immediately display the current elapsed time
+          setTimerDisplay(formatElapsedTime(data.startTime));
+        } 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();
+            setTimerActive(false);
+            setTimerDisplay("--:--:--");
           }
         }
 
         setLoading(false);
       } catch (err) {
         console.error("Failed to load timer status:", err);
-        setError("Failed to load timer status");
+        setError(`Failed to load timer status: ${err.message}`);
         setLoading(false);
       }
     }
@@ -62,6 +95,14 @@ export default function AdminDashboard() {
     if (status === "authenticated") {
       loadTimerStatus();
     }
+
+    // Clear interval when component unmounts
+    return () => {
+      if (timerIntervalRef.current) {
+        clearInterval(timerIntervalRef.current);
+        timerIntervalRef.current = null;
+      }
+    };
   }, [status]);
 
   // Check if user is admin
@@ -77,11 +118,15 @@ export default function AdminDashboard() {
 
   // Timer update effect - use the centralized timer service
   useEffect(() => {
-    let intervalId;
+    // Clear any existing interval first to prevent multiple intervals
+    if (timerIntervalRef.current) {
+      clearInterval(timerIntervalRef.current);
+      timerIntervalRef.current = null;
+    }
 
     if (timerActive) {
-      // Use the existing timer data from the centralized service
-      intervalId = setInterval(() => {
+      // Start a new interval for timer updates
+      timerIntervalRef.current = setInterval(() => {
         const timerData = getHuntTimer();
 
         if (timerData && timerData.startTime) {
@@ -94,7 +139,8 @@ export default function AdminDashboard() {
             stopTimer();
           }
         } else {
-          setTimerDisplay("--:--:--");
+          // If timer data is suddenly gone, try to reload from server
+          fetchTimerStatusFromServer();
         }
       }, 1000);
     } else {
@@ -102,12 +148,56 @@ export default function AdminDashboard() {
     }
 
     return () => {
-      if (intervalId) {
-        clearInterval(intervalId);
+      if (timerIntervalRef.current) {
+        clearInterval(timerIntervalRef.current);
+        timerIntervalRef.current = null;
       }
     };
   }, [timerActive, timerEndTime]);
 
+  // Add a function to fetch timer status directly from the server
+  const fetchTimerStatusFromServer = async () => {
+    try {
+      const response = await fetch("/api/hunt/timer", {
+        credentials: "include",
+        headers: {
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache",
+        },
+      });
+
+      if (!response.ok) {
+        console.error("Server responded with status:", response.status);
+        return;
+      }
+
+      const data = await response.json();
+
+      // Check both activity indicators for consistency
+      const isActive = data.active || data.timerActive;
+
+      if (isActive && data.startTime) {
+        setTimerActive(true);
+        setHuntTimer(data.startTime, data.endTime);
+
+        if (data.endTime) {
+          setTimerEndTime(new Date(data.endTime).getTime());
+        } else {
+          setTimerEndTime(null);
+        }
+
+        setTimerDisplay(formatElapsedTime(data.startTime));
+      } else if (data.active === false && data.timerActive === false) {
+        // Only clear timer if server explicitly says timer is inactive
+        setTimerActive(false);
+        clearHuntTimer();
+        setTimerDisplay("--:--:--");
+      }
+    } catch (err) {
+      console.error("Error fetching timer status:", err);
+    }
+  };
+
   const startTimer = async (preset = false) => {
     setLoading(true);
     try {
@@ -152,6 +242,10 @@ export default function AdminDashboard() {
         }),
       });
 
+      if (!response.ok) {
+        throw new Error(`Server responded with status: ${response.status}`);
+      }
+
       const data = await response.json();
 
       if (data.success) {
@@ -166,13 +260,16 @@ export default function AdminDashboard() {
         // Update global timer data for all clients
         setHuntTimer(data.startTime, data.endTime);
 
+        // Immediately display the current elapsed time
+        setTimerDisplay(formatElapsedTime(data.startTime));
+
         setError("");
       } else {
         setError(data.error || "Failed to start timer");
       }
     } catch (err) {
       console.error("Failed to start timer:", err);
-      setError("Failed to start timer");
+      setError(`Failed to start timer: ${err.message}`);
     } finally {
       setLoading(false);
     }
@@ -189,6 +286,10 @@ export default function AdminDashboard() {
         body: JSON.stringify({ action: "stop" }),
       });
 
+      if (!response.ok) {
+        throw new Error(`Server responded with status: ${response.status}`);
+      }
+
       const data = await response.json();
 
       if (data.success) {
@@ -203,7 +304,7 @@ export default function AdminDashboard() {
       }
     } catch (err) {
       console.error("Failed to stop timer:", err);
-      setError("Failed to stop timer");
+      setError(`Failed to stop timer: ${err.message}`);
     } finally {
       setLoading(false);
     }