fixed leaderboard, added feature to drop a team out of the teams table once it has hit 0 members, that check for members occurs when a user leaves a team. need to fix error with the timer in admin dashboard, make a separate page for it to be centrally run rather than be based on session instances.

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

Need to add Clue page Need to fix Leaderboard.

app/(main)/admin/leaderboard/page.js

@@ -29,49 +29,13 @@ export default function AdminLeaderboardPage() {
       setLoading(true);
       setError("");
 
-      // This is a placeholder - you'll need to implement the actual API
-      // For now, we'll just set dummy data
-      const dummyTeams = [
-        {
-          id: 1,
-          name: "Team Alpha",
-          code: "ALPHA1",
-          memberCount: 4,
-          cluesFound: 5,
-          totalClues: 10,
-          lastActivity: new Date().toISOString(),
-        },
-        {
-          id: 2,
-          name: "Team Beta",
-          code: "BETA12",
-          memberCount: 3,
-          cluesFound: 8,
-          totalClues: 10,
-          lastActivity: new Date().toISOString(),
-        },
-        {
-          id: 3,
-          name: "Team Gamma",
-          code: "GAMMA3",
-          memberCount: 5,
-          cluesFound: 2,
-          totalClues: 10,
-          lastActivity: new Date().toISOString(),
-        },
-      ];
-
-      setTeams(dummyTeams);
-
-      // Uncomment this when API is ready
-      /*
       const response = await fetch("/api/admin/leaderboard", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
-          "Cache-Control": "no-cache, no-store, must-revalidate"
+          "Cache-Control": "no-cache, no-store, must-revalidate",
         },
-        credentials: "include"
+        credentials: "include",
       });
 
       if (!response.ok) {
@@ -80,7 +44,6 @@ export default function AdminLeaderboardPage() {
 
       const data = await response.json();
       setTeams(data);
-      */
     } catch (err) {
       console.error("Error fetching leaderboard data:", err);
       setError(err.message);
@@ -89,6 +52,54 @@ export default function AdminLeaderboardPage() {
     }
   };
 
+  // Handle resetting a team's progress
+  const handleResetTeamProgress = async (teamId, teamName) => {
+    if (
+      !confirm(
+        `Are you sure you want to reset progress for team "${teamName}"?`
+      )
+    ) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      const response = await fetch(
+        `/api/admin/teams/${teamId}/reset-progress`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to reset team progress");
+      }
+
+      // Refresh the data after successful reset
+      fetchLeaderboardData();
+    } catch (err) {
+      console.error("Error resetting team progress:", err);
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+
+  // Auto refresh data every 30 seconds
+  useEffect(() => {
+    if (session?.user?.role === "admin") {
+      const interval = setInterval(() => {
+        fetchLeaderboardData();
+      }, 30000);
+
+      return () => clearInterval(interval);
+    }
+  }, [session]);
+
   if (status === "loading" || loading) {
     return <div className="admin-page loading">Loading...</div>;
   }
@@ -119,7 +130,7 @@ export default function AdminLeaderboardPage() {
           </button>
 
           {teams.length === 0 ? (
-            <p className="no-data">No team data available.</p>
+            <p className="no-data">No teams currently participating.</p>
           ) : (
             <div className="leaderboard-table-container">
               <table className="leaderboard-table">
@@ -142,7 +153,16 @@ export default function AdminLeaderboardPage() {
                       </td>
                       <td>{team.memberCount}</td>
                       <td>
-                        {team.cluesFound} / {team.totalClues}
+                        <div className="progress-container">
+                          <div
+                            className="progress-bar"
+                            style={{ width: `${team.progress}%` }}
+                          ></div>
+                          <span className="progress-text">
+                            {team.cluesFound} / {team.totalClues} (
+                            {team.progress}%)
+                          </span>
+                        </div>
                       </td>
                       <td>
                         {team.lastActivity
@@ -153,7 +173,7 @@ export default function AdminLeaderboardPage() {
                         <button
                           className="reset-button"
                           onClick={() =>
-                            alert(`Reset team ${team.name} progress`)
+                            handleResetTeamProgress(team.id, team.name)
                           }
                         >
                           Reset Progress
@@ -354,6 +374,33 @@ export default function AdminLeaderboardPage() {
         .admin-nav-label {
           font-size: 13px;
         }
+
+        .progress-container {
+          width: 100%;
+          background-color: #f0f0f0;
+          border-radius: 4px;
+          height: 20px;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .progress-bar {
+          height: 100%;
+          background-color: #4caf50;
+          transition: width 0.3s ease;
+        }
+
+        .progress-text {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          text-align: center;
+          line-height: 20px;
+          color: #333;
+          font-size: 0.8rem;
+          text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
+        }
       `}</style>
     </div>
   );