fixing navbar

Adding Svg files and fixing appearance of navbar to look like the design pages

app/(main)/stats/page.js

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import styles from "./stats.module.css";
+import NavBar from "@/components/NavBar";
 
 export default function StatsPage() {
   const { data: session, status } = useSession();
@@ -11,6 +12,7 @@ export default function StatsPage() {
   const [error, setError] = useState(null);
   const [teamStats, setTeamStats] = useState(null);
   const [expanded, setExpanded] = useState(false);
+  const [huntActive, setHuntActive] = useState(null);
   const router = useRouter();
 
   useEffect(() => {
@@ -22,9 +24,34 @@ export default function StatsPage() {
 
     if (status === "authenticated") {
       fetchTeamStats();
+      checkHuntStatus();
     }
   }, [status, router]);
 
+  // Check hunt status but don't redirect
+  const checkHuntStatus = async () => {
+    try {
+      const timestamp = Date.now();
+      const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-store, no-cache, must-revalidate",
+          Pragma: "no-cache",
+        },
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setHuntActive(data.active);
+        // We're just checking status, no redirect needed for stats page
+      }
+    } catch (err) {
+      console.error("Failed to check hunt status:", err);
+    }
+  };
+
   const fetchTeamStats = async () => {
     try {
       setLoading(true);
@@ -181,6 +208,12 @@ export default function StatsPage() {
         <h2 className={styles.teamName}>{teamStats.team.name}</h2>
       </div>
 
+      {!huntActive && teamStats && (
+        <div className="hunt-inactive-banner">
+          <p>The treasure hunt is not currently active. Team progress will be visible here once the hunt begins.</p>
+        </div>
+      )}
+
       <div className={styles.statsCard}>
         <div className={styles.summaryStats}>
           <div className={styles.statItem}>
@@ -229,27 +262,8 @@ export default function StatsPage() {
         </div>
       </div>
 
-      <div className={styles.navBar}>
-        <Link href="/map" className={styles.navItem}>
-          <div className={styles.navIcon}>🗺️</div>
-          <div className={styles.navLabel}>Map</div>
-        </Link>
-        <Link href="/stats" className={`${styles.navItem} ${styles.active}`}>
-          <div className={styles.navIcon}>📊</div>
-          <div className={styles.navLabel}>Stats</div>
-        </Link>
-        <Link
-          href={teamStats?.team ? `/${teamStats.team.id}` : "/team-selection"}
-          className={styles.navItem}
-        >
-          <div className={styles.navIcon}>👥</div>
-          <div className={styles.navLabel}>Team</div>
-        </Link>
-        <Link href="/leaderboard" className={styles.navItem}>
-          <div className={styles.navIcon}>🏆</div>
-          <div className={styles.navLabel}>Leaderboard</div>
-        </Link>
-      </div>
+      {/* Replace hardcoded navbar with NavBar component */}
+      <NavBar activeLink="stats" teamData={teamStats.team} />
 
       <style jsx>{`
         .clue-icon.found {
@@ -259,6 +273,16 @@ export default function StatsPage() {
         .clue-icon.skipped {
           background-color: #1976d2;
         }
+        
+        .hunt-inactive-banner {
+          background-color: #fff3cd;
+          color: #856404;
+          padding: 12px 15px;
+          margin: 15px 20px 0;
+          border-radius: 4px;
+          text-align: center;
+          font-size: 0.9rem;
+        }
       `}</style>
     </div>
   );