fixed some styling with member list page

app/(main)/[teamId]/page.js

@@ -0,0 +1,489 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { use } from "react"; // Add this import for React.use()
+
+export default function TeamPage({ params }) {
+  const { status, data: session } = useSession();
+  const [team, setTeam] = useState(null);
+  const [teamMembers, setTeamMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [huntActive, setHuntActive] = useState(false);
+  const router = useRouter();
+
+  // Unwrap the params Promise using React.use()
+  const unwrappedParams = use(params);
+  const teamId = unwrappedParams.teamId;
+
+  // Add a function to check if the hunt has been activated by admin
+  const checkHuntStatus = useCallback(async () => {
+    try {
+      const response = await fetch("/api/hunt-status", {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setHuntActive(data.active || false);
+      }
+    } catch (err) {
+      console.error("Failed to check hunt status:", err);
+    }
+  }, []);
+
+  const fetchTeamData = useCallback(async () => {
+    try {
+      if (!teamId || isNaN(parseInt(teamId, 10))) {
+        throw new Error("Invalid team ID");
+      }
+
+      console.log("Fetching team data for team ID:", teamId);
+
+      const response = await fetch(`/api/teams/${teamId}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        // Add cache: 'no-store' to prevent caching of team data
+        cache: "no-store",
+      });
+
+      if (!response.ok) {
+        const text = await response.text();
+        let errorMessage;
+        try {
+          const errorData = JSON.parse(text);
+          errorMessage = errorData.error || "Failed to fetch team data";
+        } catch (unused) {
+          errorMessage = `Failed to fetch team data: ${
+            response.status
+          } ${text.slice(0, 100)}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const data = await response.json();
+      console.log("Team data received:", data);
+
+      if (!data.team) {
+        throw new Error("Team not found");
+      }
+
+      setTeam(data.team);
+      setTeamMembers(data.members || []);
+      setError("");
+
+      // Check hunt status whenever we fetch team data
+      await checkHuntStatus();
+    } catch (err) {
+      console.error("Team page error:", err);
+      setError(err.message);
+      // If we get a 401 error, redirect to login
+      if (err.message.includes("401")) {
+        router.push("/login");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [teamId, router, checkHuntStatus]);
+
+  useEffect(() => {
+    // Only attempt to fetch data when session is ready and we have a teamId
+    if (status === "authenticated" && teamId) {
+      console.log("Session authenticated, fetching team data");
+      fetchTeamData();
+
+      // Set up an interval to refresh team data every 10 seconds
+      const refreshInterval = setInterval(fetchTeamData, 10000);
+
+      // Clean up the interval when component unmounts
+      return () => clearInterval(refreshInterval);
+    } else if (status === "unauthenticated") {
+      console.log("User not authenticated, redirecting to login");
+      router.push("/login");
+    }
+  }, [teamId, status, fetchTeamData, router]);
+
+  if (status === "loading" || loading) {
+    return (
+      <div className="loading-container">
+        <div className="loading-spinner"></div>
+        <div className="loading-text">Loading team data...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <div className="error-icon">⚠️</div>
+        <div className="error-message">Error: {error}</div>
+        <Link href="/team-selection">
+          <button className="back-button">Back to Team Selection</button>
+        </Link>
+      </div>
+    );
+  }
+
+  if (!team) {
+    return (
+      <div className="error-container">
+        <div className="error-icon">🔍</div>
+        <div className="error-message">Team not found</div>
+        <Link href="/team-selection">
+          <button className="back-button">Back to Team Selection</button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="team-page">
+      <div className="team-banner">
+        <div className="team-info">
+          <h1 className="team-name">Team Name: {team.name}</h1>
+          <div className="team-code">{team.code}</div>
+        </div>
+      </div>
+
+      <div className="members-container">
+        <h2 className="members-title">Team Members</h2>
+
+        {teamMembers.length > 0 ? (
+          <div className="members-list">
+            {teamMembers.map((member) => (
+              <div key={member.id} className="member-card">
+                <div className="member-avatar">👤</div>
+                <div className="member-details">
+                  <div className="member-name">
+                    {member.username}
+                    {member.id === session?.user?.id && " (You)"}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="empty-state">No team members found</div>
+        )}
+
+        {/* Remove the add member button - it was here before */}
+      </div>
+
+      <div className="team-actions">
+        <button
+          className="action-button leave-button"
+          onClick={async () => {
+            if (confirm("Are you sure you want to leave this team?")) {
+              try {
+                setLoading(true);
+                const response = await fetch(`/api/teams/${teamId}/leave`, {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  credentials: "include",
+                });
+
+                if (response.ok) {
+                  router.push("/team-selection");
+                } else {
+                  const error = await response.json();
+                  throw new Error(error.message || "Failed to leave team");
+                }
+              } catch (err) {
+                setError(err.message);
+                setLoading(false);
+              }
+            }
+          }}
+        >
+          Leave Team
+        </button>
+
+        {/* New Start Hunt button with conditional behavior */}
+        {session?.user?.role !== "admin" && (
+          <button
+            className="action-button start-button"
+            onClick={async () => {
+              try {
+                setLoading(true);
+
+                if (!huntActive) {
+                  // If hunt is not active, redirect to the "not started" page
+                  router.push(`/hunt-not-started?teamId=${teamId}`);
+                } else {
+                  // If hunt is active, try to start the hunt
+                  const response = await fetch(
+                    `/api/teams/${teamId}/start-hunt`,
+                    {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      credentials: "include",
+                    }
+                  );
+
+                  if (response.ok) {
+                    fetchTeamData();
+                  } else {
+                    const error = await response.json();
+                    throw new Error(error.message || "Failed to start hunt");
+                  }
+                }
+              } catch (err) {
+                setError(err.message);
+                setLoading(false);
+              }
+            }}
+          >
+            Start Hunt
+          </button>
+        )}
+
+        {/* Keep the admin start button which directly starts the hunt */}
+        {session?.user?.role === "admin" && (
+          <button
+            className="action-button start-button"
+            onClick={async () => {
+              try {
+                setLoading(true);
+                const response = await fetch(
+                  `/api/teams/${teamId}/start-hunt`,
+                  {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    credentials: "include",
+                  }
+                );
+
+                if (response.ok) {
+                  fetchTeamData();
+                } else {
+                  const error = await response.json();
+                  throw new Error(error.message || "Failed to start hunt");
+                }
+              } catch (err) {
+                setError(err.message);
+                setLoading(false);
+              }
+            }}
+          >
+            Start Hunt
+          </button>
+        )}
+      </div>
+
+      <div className="nav-bar">
+        {/* Update the Home link to point to the current team page */}
+        <Link href={`/${teamId}`} className="nav-item">
+          <div className="nav-icon">🏠</div>
+          <div className="nav-label">Home</div>
+        </Link>
+        <Link href="/leaderboard" className="nav-item">
+          <div className="nav-icon">📊</div>
+          <div className="nav-label">Stats</div>
+        </Link>
+        <Link href="/team-selection" className="nav-item active">
+          <div className="nav-icon">👥</div>
+          <div className="nav-label">Team</div>
+        </Link>
+        <Link href="/profile" className="nav-item">
+          <div className="nav-icon">👤</div>
+          <div className="nav-label">Profile</div>
+        </Link>
+      </div>
+
+      <style jsx>{`
+        .team-page {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+          background-color: #f4f4f4;
+          font-family: Arial, sans-serif;
+        }
+
+        .team-banner {
+          background-color: #68543c;
+          color: white;
+          padding: 20px;
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+
+        .team-info {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .team-name {
+          margin: 0;
+          font-size: 24px;
+          font-weight: bold;
+        }
+
+        .team-code {
+          font-size: 24px;
+          font-weight: bold;
+          margin-left: auto;
+        }
+
+        .members-container {
+          padding: 20px;
+          flex: 1;
+        }
+
+        .members-title {
+          font-size: 18px;
+          margin-bottom: 15px;
+          color: #333;
+        }
+
+        .members-list {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+
+        .member-card {
+          background-color: white;
+          border-radius: 8px;
+          padding: 15px;
+          display: flex;
+          align-items: center;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .member-avatar {
+          font-size: 24px;
+          margin-right: 15px;
+        }
+
+        .member-name {
+          font-weight: 600;
+        }
+
+        .empty-state {
+          text-align: center;
+          padding: 30px;
+          color: #888;
+        }
+
+        .add-member-button {
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 15px;
+          margin-top: 20px;
+          width: 100%;
+          font-size: 16px;
+          font-weight: bold;
+          cursor: pointer;
+        }
+
+        .team-actions {
+          display: flex;
+          gap: 10px;
+          padding: 20px;
+        }
+
+        .action-button {
+          flex: 1;
+          padding: 15px;
+          border: none;
+          border-radius: 8px;
+          font-weight: bold;
+          cursor: pointer;
+        }
+
+        .leave-button {
+          background-color: #f6bd60;
+          color: #333;
+        }
+
+        .start-button {
+          background-color: #588157;
+          color: white;
+        }
+
+        .nav-bar {
+          display: flex;
+          justify-content: space-around;
+          background-color: white;
+          border-top: 1px solid #ddd;
+          padding: 10px 0;
+        }
+
+        .nav-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-decoration: none;
+          color: #666;
+          flex: 1;
+          padding: 10px 0;
+        }
+
+        .nav-item.active {
+          color: #68543c;
+        }
+
+        .nav-icon {
+          font-size: 24px;
+          margin-bottom: 5px;
+        }
+
+        .nav-label {
+          font-size: 12px;
+        }
+
+        .loading-container,
+        .error-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100vh;
+          padding: 20px;
+          text-align: center;
+        }
+
+        .loading-spinner {
+          border: 4px solid #f3f3f3;
+          border-top: 4px solid #68543c;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          animation: spin 1s linear infinite;
+          margin-bottom: 20px;
+        }
+
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
+        .error-icon {
+          font-size: 48px;
+          margin-bottom: 20px;
+        }
+
+        .error-message {
+          margin-bottom: 20px;
+          color: #d32f2f;
+        }
+      `}</style>
+    </div>
+  );
+}

app/(main)/hunt-not-started/page.js

@@ -0,0 +1,102 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+
+export default function HuntNotStarted() {
+  const [countdown, setCountdown] = useState(10);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const teamId = searchParams.get("teamId");
+
+  useEffect(() => {
+    // Countdown timer
+    if (countdown > 0) {
+      const timer = setTimeout(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    } else {
+      // Redirect back to team page when countdown reaches 0
+      if (teamId) {
+        router.push(`/${teamId}`);
+      } else {
+        router.push("/team-selection");
+      }
+    }
+  }, [countdown, router, teamId]);
+
+  return (
+    <div className="hunt-not-started">
+      <div className="message-container">
+        <div className="message-icon">⏳</div>
+        <h1 className="message-title">Hunt Not Started Yet</h1>
+        <p className="message-text">
+          The treasure hunt has not been activated by an administrator yet.
+          Please check back later or contact an admin to start the hunt.
+        </p>
+        <p className="countdown">Redirecting back in {countdown} seconds...</p>
+        <Link href={teamId ? `/${teamId}` : "/team-selection"}>
+          <button className="back-button">Return Now</button>
+        </Link>
+      </div>
+
+      <style jsx>{`
+        .hunt-not-started {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          background-color: #f4f4f4;
+          padding: 20px;
+        }
+
+        .message-container {
+          background-color: white;
+          border-radius: 8px;
+          padding: 30px;
+          text-align: center;
+          max-width: 500px;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .message-icon {
+          font-size: 48px;
+          margin-bottom: 20px;
+        }
+
+        .message-title {
+          color: #68543c;
+          margin-bottom: 20px;
+        }
+
+        .message-text {
+          color: #555;
+          margin-bottom: 30px;
+          line-height: 1.5;
+        }
+
+        .countdown {
+          font-weight: bold;
+          color: #68543c;
+          margin-bottom: 20px;
+        }
+
+        .back-button {
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 10px 20px;
+          font-size: 16px;
+          cursor: pointer;
+        }
+
+        .back-button:hover {
+          background-color: #53402d;
+        }
+      `}</style>
+    </div>
+  );
+}

app/(main)/team/[teamId]/page.js

@@ -132,12 +132,9 @@ export default function TeamPage({ params }) {
   return (
     <div className="team-page">
       <div className="team-banner">
-        <Link href="/team-selection" className="back-button">
-          ←
-        </Link>
         <div className="team-info">
-          <h1 className="team-name">{team.name}</h1>
+          <h1 className="team-name">Team Name: {team.name}</h1>
-          <div className="team-code">Team Code: {team.code}</div>
+          <div className="team-code">{team.code}</div>
         </div>
       </div>
 
@@ -299,17 +296,11 @@ export default function TeamPage({ params }) {
           align-items: center;
         }
 
-        .back-button {
-          text-decoration: none;
-          color: white;
-          font-size: 24px;
-          margin-right: 15px;
-          display: flex;
-          align-items: center;
-        }
-
         .team-info {
           flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
         }
 
         .team-name {
@@ -319,9 +310,9 @@ export default function TeamPage({ params }) {
         }
 
         .team-code {
-          margin-top: 5px;
+          font-size: 24px;
-          font-size: 14px;
+          font-weight: bold;
-          opacity: 0.8;
+          margin-left: auto;
         }
 
         .members-container {