just need to fix the map to clue function.

app/(main)/create-team/page.js

@@ -4,13 +4,12 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 
-// Removed the styles object for navbar
-
 export default function CreateTeam() {
-  const { data: session, status } = useSession();
+  const { data: session, status, update: updateSession } = useSession();
   const [teamName, setTeamName] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(true);
+  const [success, setSuccess] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -31,6 +30,11 @@ export default function CreateTeam() {
     setError("");
 
     try {
+      // Validate team name
+      if (!teamName || teamName.trim() === "") {
+        throw new Error("Team name is required");
+      }
+
       // Check session status before proceeding
       if (status !== "authenticated") {
         throw new Error("You must be logged in to create a team");
@@ -42,7 +46,7 @@ export default function CreateTeam() {
           "Content-Type": "application/json",
         },
         credentials: "include", // Important: include credentials with the request
-        body: JSON.stringify({ name: teamName }),
+        body: JSON.stringify({ name: teamName.trim() }),
       });
 
       const data = await response.json();
@@ -52,23 +56,33 @@ export default function CreateTeam() {
       }
 
       console.log("Team created successfully with ID:", data.teamId);
+      setSuccess(true);
 
-      // Force a session refresh to update the session with the new teamId
+      // Try to update the session with the new team ID
-      await fetch("/api/auth/session", {
+      try {
-        method: "GET",
+        // Wait briefly to ensure DB changes are reflected
-        credentials: "include",
+        await new Promise((resolve) => setTimeout(resolve, 500));
-      });
+        await updateSession(); // Update the NextAuth session if possible
+      } catch (sessionErr) {
+        console.warn(
+          "Session update failed, using redirect instead:",
+          sessionErr
+        );
+      }
 
       // Use window.location for a hard navigation to ensure session is fully updated
+      setTimeout(() => {
         window.location.href = `/${data.teamId}`;
+      }, 1000);
     } catch (err) {
       console.error("Team creation error:", err);
       setError(err.message);
+    } finally {
       setIsLoading(false);
     }
   };
 
-  if (isLoading) {
+  if (isLoading && !success) {
     return <div className="loading">Loading...</div>;
   }
 
@@ -82,6 +96,14 @@ export default function CreateTeam() {
 
       <div className="auth-container">
         <div className="auth-card">
+          {success ? (
+            <div className="success-message">
+              <div className="success-icon">✅</div>
+              <h2>Team Created Successfully!</h2>
+              <p>Redirecting to your new team page...</p>
+            </div>
+          ) : (
+            <>
               <h1>Create a New Team</h1>
               <form onSubmit={handleCreateTeam}>
                 <div className="form-group">
@@ -92,23 +114,30 @@ export default function CreateTeam() {
                     onChange={(e) => setTeamName(e.target.value)}
                     required
                     className="auth-input"
+                    maxLength={50}
                   />
                 </div>
-            <button type="submit" className="auth-button" disabled={isLoading}>
+                <button
+                  type="submit"
+                  className="auth-button"
+                  disabled={isLoading}
+                >
                   {isLoading ? "Creating..." : "Create Team"}
                 </button>
               </form>
               {error && <p className="error-message">{error}</p>}
+            </>
+          )}
           <div className="team-options">
             <Link href="/team-selection">
-              <button className="auth-button">Back to Team Selection</button>
+              <button className="auth-button secondary-button">
+                Back to Team Selection
+              </button>
             </Link>
           </div>
         </div>
       </div>
 
-      {/* Navbar removed from here */}
-
       <style jsx>{`
         .auth-page {
           display: flex;
@@ -159,7 +188,18 @@ export default function CreateTeam() {
           color: red;
           margin-top: 10px;
         }
-        /* Navbar styles removed from here */
+        .success-message {
+          text-align: center;
+          padding: 20px 0;
+        }
+        .success-icon {
+          font-size: 48px;
+          margin-bottom: 10px;
+          color: #4caf50;
+        }
+        .secondary-button {
+          background-color: #a98467;
+        }
       `}</style>
     </div>
   );

app/(main)/leaderboard/page.js

@@ -162,17 +162,24 @@ export default function LeaderboardPage() {
           <div className="nav-icon">🗺️</div>
           <div className="nav-label">Map</div>
         </Link>
-        <Link href="/leaderboard" className="nav-item active">
+        <Link href="/stats" className="nav-item">
           <div className="nav-icon">📊</div>
           <div className="nav-label">Stats</div>
         </Link>
-        <Link href="/team-selection" className="nav-item">
+        <Link
+          href={
+            teams.length > 0 && session?.user?.teamId
+              ? `/${session.user.teamId}`
+              : "/team-selection"
+          }
+          className="nav-item"
+        >
           <div className="nav-icon">👥</div>
           <div className="nav-label">Team</div>
         </Link>
-        <Link href="/profile" className="nav-item">
+        <Link href="/leaderboard" className="nav-item active">
-          <div className="nav-icon">👤</div>
+          <div className="nav-icon">🏆</div>
-          <div className="nav-label">Profile</div>
+          <div className="nav-label">Leaderboard</div>
         </Link>
       </div>
 

app/(main)/map/page.js

@@ -43,7 +43,7 @@ export default function MapPage() {
     window.location.href = url;
   }, []);
 
-  // Fetch team data for the current user
+  // Enhanced fetchTeamData function
   const fetchTeamData = useCallback(async () => {
     try {
       const response = await fetch("/api/user/team", {
@@ -71,6 +71,7 @@ export default function MapPage() {
       }
 
       const data = await response.json();
+      console.log("Team data loaded:", data);
       setTeamData(data);
       return data;
     } catch (err) {
@@ -573,6 +574,13 @@ export default function MapPage() {
     });
   }, [mapSvg, clues, enhanceSvgMap]);
 
+  // Add useEffect to load team data
+  useEffect(() => {
+    if (status === "authenticated") {
+      fetchTeamData();
+    }
+  }, [status, fetchTeamData]);
+
   if (status === "loading" || loading) {
     return (
       <div className={styles["loading-container"]}>
@@ -620,7 +628,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 || "Your Team"}
+          {teamData?.team?.name || "Loading..."}
         </div>
         <div className={styles["elapsed-time"]}>
           <span className={styles["time-value"]}>{elapsedTime}</span>
@@ -667,9 +675,9 @@ export default function MapPage() {
           <div className={styles["nav-icon"]}>👥</div>
           <div className={styles["nav-label"]}>Team</div>
         </Link>
-        <Link href="/team-selection" className={styles["nav-item"]}>
+        <Link href="/leaderboard" className={styles["nav-item"]}>
-          <div className={styles["nav-icon"]}>🔙</div>
+          <div className={styles["nav-icon"]}>🏆</div>
-          <div className={styles["nav-label"]}>Back</div>
+          <div className={styles["nav-label"]}>Leaderboard</div>
         </Link>
       </nav>
     </div>

app/api/team-stats/route.js

@@ -81,13 +81,18 @@ export async function GET(request) {
     const teamRankings = await query(`
       SELECT 
         t.id,
-        COUNT(DISTINCT tc.clue_id) as cluesFound
+        COUNT(DISTINCT tc.clue_id) as cluesFound,
+        COUNT(DISTINCT u.id) as memberCount
       FROM 
         teams t
       LEFT JOIN 
         team_clues tc ON t.id = tc.team_id
+      LEFT JOIN
+        users u ON t.id = u.team_id
       GROUP BY 
         t.id
+      HAVING 
+        memberCount > 0
       ORDER BY 
         cluesFound DESC
     `);

app/api/teams/create/route.js

@@ -46,6 +46,17 @@ export async function POST(request) {
       )
     `);
 
+    // Check if team name already exists
+    const existingTeam = await queryOne("SELECT id FROM teams WHERE name = ?", [
+      name,
+    ]);
+    if (existingTeam) {
+      return Response.json(
+        { error: "Team name already exists" },
+        { status: 409 }
+      );
+    }
+
     // Insert team without created_by field
     const result = await run("INSERT INTO teams (name, code) VALUES (?, ?)", [
       name,
@@ -53,11 +64,21 @@ export async function POST(request) {
     ]);
 
     const teamId = result.lastID;
+    if (!teamId) {
+      throw new Error("Failed to create team - no ID returned");
+    }
 
     // Update the user's team_id
     await run("UPDATE users SET team_id = ? WHERE id = ?", [teamId, userId]);
 
-    return Response.json({ success: true, teamId, code });
+    // Return a more complete response with all needed data
+    return Response.json({
+      success: true,
+      teamId,
+      teamName: name,
+      code,
+      message: "Team created successfully",
+    });
   } catch (error) {
     console.error("Create team error:", error);
     return Response.json(