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)/map/page.js

@@ -27,6 +27,8 @@ export default function MapPage() {
 
   // Add local state for hunt active status
   const [huntActive, setHuntActive] = useState(null);
+  // Add previous hunt state to detect when hunt ends
+  const [previousHuntState, setPreviousHuntState] = useState(null);
 
   // Use useCallback for functions called in useEffect to avoid dependency issues
   const softRedirect = useCallback(
@@ -293,6 +295,18 @@ export default function MapPage() {
     }
   }, [status, fetchTeamData]);
 
+  // Add this useEffect to detect when hunt ends
+  useEffect(() => {
+    // If previous state was active but current state is not active, the hunt just ended
+    if (previousHuntState === true && huntActive === false) {
+      console.log("Hunt has ended! Redirecting to leaderboard...");
+      router.push("/leaderboard?huntEnded=true");
+    }
+
+    // Update previous state after checking
+    setPreviousHuntState(huntActive);
+  }, [huntActive, previousHuntState, router]);
+
   if (status === "loading" || loading) {
     return (
       <div className={styles["loading-container"]}>
@@ -302,8 +316,11 @@ export default function MapPage() {
     );
   }
 
-  // If hunt status is known to be inactive, show message
-  if (huntActive === false) {
+  // Remove or modify this conditional block since we're now handling hunt ending differently
+  // Instead of showing an error message, we'll redirect in the useEffect
+  if (huntActive === false && previousHuntState === null) {
+    // Only show this if we just landed on the page and hunt is inactive
+    // (not when the hunt just ended)
     return (
       <div className={styles["map-error"]}>
         <h2>Hunt Not Active</h2>
@@ -371,7 +388,7 @@ export default function MapPage() {
       {/* Map Banner with team info and timer */}
       <div className={styles["map-banner"]}>
         <div className={styles["team-name"]}>
-          {teamData?.team?.name || "Loading..."}
+          Team Name: {teamData?.team?.name || "Loading..."}
         </div>
         <div className={styles["elapsed-time"]}>
           <span className={styles["time-value"]}>{elapsedTime}</span>