mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
654 lines
19 KiB
JavaScript
654 lines
19 KiB
JavaScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import { useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function AdminLeaderboardPage() {
|
|
const { data: session, status } = useSession();
|
|
const [teams, setTeams] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const router = useRouter();
|
|
// Add state for expanded team details
|
|
const [expandedTeam, setExpandedTeam] = useState(null);
|
|
const [teamDetails, setTeamDetails] = useState({});
|
|
const [loadingDetails, setLoadingDetails] = useState(false);
|
|
|
|
// Check if user is admin
|
|
useEffect(() => {
|
|
if (status === "authenticated") {
|
|
if (session?.user?.role !== "admin") {
|
|
router.push("/team-selection");
|
|
} else {
|
|
fetchLeaderboardData();
|
|
}
|
|
} else if (status === "unauthenticated") {
|
|
router.push("/login");
|
|
}
|
|
}, [session, status, router]);
|
|
|
|
// Fetch leaderboard data
|
|
const fetchLeaderboardData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError("");
|
|
|
|
const response = await fetch("/api/admin/leaderboard", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Cache-Control": "no-cache, no-store, must-revalidate",
|
|
},
|
|
credentials: "include",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch leaderboard data");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setTeams(data);
|
|
} catch (err) {
|
|
console.error("Error fetching leaderboard data:", err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 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]);
|
|
|
|
// New function to toggle team details dropdown and fetch data
|
|
const toggleTeamDetails = async (teamId) => {
|
|
if (expandedTeam === teamId) {
|
|
// Close dropdown if already open
|
|
setExpandedTeam(null);
|
|
} else {
|
|
// Open dropdown for this team
|
|
setExpandedTeam(teamId);
|
|
|
|
// Only fetch if we don't already have data for this team
|
|
if (!teamDetails[teamId]) {
|
|
setLoadingDetails(true);
|
|
try {
|
|
const response = await fetch(`/api/admin/teams/${teamId}/stats`, {
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Cache-Control": "no-cache, no-store, must-revalidate",
|
|
},
|
|
credentials: "include",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch team details");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setTeamDetails((prev) => ({
|
|
...prev,
|
|
[teamId]: data,
|
|
}));
|
|
} catch (err) {
|
|
console.error("Error fetching team details:", err);
|
|
} finally {
|
|
setLoadingDetails(false);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if (status === "loading" || loading) {
|
|
return <div className="admin-page loading">Loading...</div>;
|
|
}
|
|
|
|
if (status === "unauthenticated") {
|
|
return null; // Will redirect via useEffect
|
|
}
|
|
|
|
return (
|
|
<div className="admin-page">
|
|
<div className="page-header">
|
|
<div className="page-title">Admin Leaderboard</div>
|
|
<div className="placeholder"></div>
|
|
</div>
|
|
|
|
<div className="admin-content">
|
|
{error && <p className="error-message">{error}</p>}
|
|
|
|
<div className="admin-card">
|
|
<h2>Team Progress</h2>
|
|
|
|
<button
|
|
className="refresh-button"
|
|
onClick={fetchLeaderboardData}
|
|
disabled={loading}
|
|
>
|
|
🔄 Refresh Data
|
|
</button>
|
|
|
|
{teams.length === 0 ? (
|
|
<p className="no-data">No teams currently participating.</p>
|
|
) : (
|
|
<div className="leaderboard-table-container">
|
|
<table className="leaderboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Team Name</th>
|
|
<th>Members</th>
|
|
<th>Progress</th>
|
|
<th>Last Activity</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{teams.map((team, index) => (
|
|
<>
|
|
<tr key={team.id}>
|
|
<td>{index + 1}</td>
|
|
<td>
|
|
{team.name} ({team.code})
|
|
</td>
|
|
<td>{team.memberCount}</td>
|
|
<td>
|
|
<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
|
|
? new Date(team.lastActivity).toLocaleString()
|
|
: "Never"}
|
|
</td>
|
|
<td>
|
|
<div className="action-buttons">
|
|
<button
|
|
className="reset-button"
|
|
onClick={() =>
|
|
handleResetTeamProgress(team.id, team.name)
|
|
}
|
|
>
|
|
Reset
|
|
</button>
|
|
<button
|
|
className="details-button"
|
|
onClick={() => toggleTeamDetails(team.id)}
|
|
>
|
|
{expandedTeam === team.id
|
|
? "Hide Details"
|
|
: "View Details"}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/* Team details dropdown */}
|
|
{expandedTeam === team.id && (
|
|
<tr
|
|
key={`details-${team.id}`}
|
|
className="team-details-row"
|
|
>
|
|
<td colSpan={6}>
|
|
<div className="team-details-container">
|
|
{loadingDetails && !teamDetails[team.id] ? (
|
|
<div className="details-loading">
|
|
Loading team details...
|
|
</div>
|
|
) : teamDetails[team.id] ? (
|
|
<>
|
|
<h3>Team Stats for {team.name}</h3>
|
|
|
|
{/* Found clues section */}
|
|
<div className="details-section">
|
|
<h4>
|
|
Found Clues (
|
|
{teamDetails[team.id].foundClues.length})
|
|
</h4>
|
|
{teamDetails[team.id].foundClues.length >
|
|
0 ? (
|
|
<table className="details-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Found At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{teamDetails[team.id].foundClues.map(
|
|
(clue) => (
|
|
<tr key={`found-${clue.id}`}>
|
|
<td>{clue.title}</td>
|
|
<td>
|
|
{new Date(
|
|
clue.found_at
|
|
).toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<p className="no-data-message">
|
|
No clues found yet
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Skipped clues section */}
|
|
<div className="details-section">
|
|
<h4>
|
|
Skipped Clues (
|
|
{teamDetails[team.id].skippedClues.length}
|
|
)
|
|
</h4>
|
|
{teamDetails[team.id].skippedClues.length >
|
|
0 ? (
|
|
<table className="details-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Skipped At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{teamDetails[
|
|
team.id
|
|
].skippedClues.map((clue) => (
|
|
<tr key={`skipped-${clue.id}`}>
|
|
<td>{clue.title}</td>
|
|
<td>
|
|
{new Date(
|
|
clue.found_at
|
|
).toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<p className="no-data-message">
|
|
No clues skipped
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="details-error">
|
|
Error loading team details
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Admin Navigation Bar */}
|
|
<div className="admin-nav-bar">
|
|
<button
|
|
className="admin-nav-button"
|
|
onClick={() => router.push("/admin")}
|
|
>
|
|
<div className="admin-nav-icon">⏱️</div>
|
|
<div className="admin-nav-label">Timer</div>
|
|
</button>
|
|
<button
|
|
className="admin-nav-button"
|
|
onClick={() => router.push("/admin/clues")}
|
|
>
|
|
<div className="admin-nav-icon">📝</div>
|
|
<div className="admin-nav-label">Clues</div>
|
|
</button>
|
|
<button
|
|
className="admin-nav-button active"
|
|
onClick={() => router.push("/admin/leaderboard")}
|
|
>
|
|
<div className="admin-nav-icon">🏆</div>
|
|
<div className="admin-nav-label">Leaderboard</div>
|
|
</button>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.admin-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background-color: #f4e9dc;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background-color: #68543c;
|
|
color: white;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.admin-content {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 70px; /* Space for navbar */
|
|
}
|
|
|
|
.admin-card {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.refresh-button {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
background-color: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0.5rem 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.refresh-button:disabled {
|
|
background-color: #a5d6a7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.leaderboard-table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.leaderboard-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.leaderboard-table th,
|
|
.leaderboard-table td {
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.leaderboard-table th {
|
|
background-color: #f5f5f5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.leaderboard-table tr:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.reset-button {
|
|
background-color: #f44336;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0.4rem 0.6rem;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
background-color: #ffebee;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
text-align: center;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
color: #666;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
/* Admin Navigation Bar Styles */
|
|
.admin-nav-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: white;
|
|
border-top: 1px solid #ddd;
|
|
padding: 10px 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 100;
|
|
}
|
|
|
|
.admin-nav-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 8px 0;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
color: #666;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.admin-nav-button.active {
|
|
color: #68543c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.admin-nav-button:hover {
|
|
background-color: rgba(104, 84, 60, 0.1);
|
|
}
|
|
|
|
.admin-nav-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.details-button {
|
|
background-color: #3f51b5;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0.4rem 0.6rem;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.details-button:hover {
|
|
background-color: #303f9f;
|
|
}
|
|
|
|
.team-details-row {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.team-details-container {
|
|
padding: 1.5rem;
|
|
margin: 0.5rem 0;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
}
|
|
|
|
.team-details-container h3 {
|
|
color: #3f51b5;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.details-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.details-section h4 {
|
|
color: #68543c;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.details-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.details-table th {
|
|
background-color: #f5f5f5;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 0.6rem;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.details-table td {
|
|
padding: 0.6rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.details-table tr:nth-child(even) {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.details-loading {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
|
|
.details-error {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: #d32f2f;
|
|
background-color: #ffebee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.no-data-message {
|
|
font-style: italic;
|
|
color: #666;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|