364 lines
13 KiB
TypeScript
364 lines
13 KiB
TypeScript
import { prisma } from "@/lib/prisma"
|
|
import Navigation from "@/components/Navigation"
|
|
import Link from "next/link"
|
|
import { notFound, redirect } from "next/navigation"
|
|
import { canManageTournament, canDeleteTournament } from "@/lib/permissions"
|
|
import { getTournamentStatus } from "@/lib/tournamentUtils"
|
|
import { DeleteTournamentButton } from "@/components/DeleteTournamentButton"
|
|
|
|
interface PageProps {
|
|
params: {
|
|
id: string
|
|
}
|
|
}
|
|
|
|
export default async function TournamentDetailPage({ params }: PageProps) {
|
|
// Next.js 16 requires awaiting params
|
|
const { id } = await params
|
|
const tournamentId = parseInt(id, 10)
|
|
|
|
if (isNaN(tournamentId)) {
|
|
notFound()
|
|
}
|
|
|
|
// Check if user can manage this tournament
|
|
const permission = await canManageTournament(tournamentId)
|
|
if (!permission.allowed) {
|
|
redirect("/auth/login")
|
|
}
|
|
|
|
// Check if user can delete this tournament
|
|
const deletePermission = await canDeleteTournament(tournamentId)
|
|
|
|
let tournament = await prisma.event.findUnique({
|
|
where: { id: tournamentId },
|
|
include: {
|
|
participants: {
|
|
include: {
|
|
player: true,
|
|
},
|
|
},
|
|
teams: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
rounds: {
|
|
include: {
|
|
bracketMatchups: {
|
|
include: {
|
|
team1: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
team2: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
match: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|
|
|
|
if (!tournament) {
|
|
notFound()
|
|
}
|
|
|
|
// Update tournament status based on event date
|
|
const calculatedStatus = getTournamentStatus(tournament.eventDate);
|
|
if (tournament.status !== calculatedStatus) {
|
|
tournament = await prisma.event.update({
|
|
where: { id: tournamentId },
|
|
data: { status: calculatedStatus },
|
|
include: {
|
|
participants: {
|
|
include: {
|
|
player: true,
|
|
},
|
|
},
|
|
teams: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
rounds: {
|
|
include: {
|
|
bracketMatchups: {
|
|
include: {
|
|
team1: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
team2: {
|
|
include: {
|
|
player1: true,
|
|
player2: true,
|
|
},
|
|
},
|
|
match: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
const matches = await prisma.match.findMany({
|
|
where: { eventId: tournamentId },
|
|
include: {
|
|
team1P1: true,
|
|
team1P2: true,
|
|
team2P1: true,
|
|
team2P2: true,
|
|
},
|
|
orderBy: { playedAt: "desc" },
|
|
})
|
|
|
|
const matchCount = matches.length
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Navigation />
|
|
|
|
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div className="px-4 py-6 sm:px-0">
|
|
{/* Breadcrumb */}
|
|
<nav className="mb-4">
|
|
<ol className="flex items-center space-x-2">
|
|
<li>
|
|
<Link href="/admin/tournaments" className="text-green-600 hover:text-green-900">
|
|
Tournaments
|
|
</Link>
|
|
</li>
|
|
<li className="text-gray-400">/</li>
|
|
<li className="text-gray-600">{tournament.name}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
{/* Tournament Header */}
|
|
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">{tournament.name}</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
{tournament.format} - {tournament.status}
|
|
</p>
|
|
{tournament.eventDate && (
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
{new Date(tournament.eventDate).toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
{permission.allowed && (
|
|
<>
|
|
<Link
|
|
href={`/admin/tournaments/${tournament.id}/edit`}
|
|
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Edit
|
|
</Link>
|
|
<Link
|
|
href={`/admin/tournaments/${tournament.id}/results`}
|
|
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700"
|
|
>
|
|
Enter Results
|
|
</Link>
|
|
<a
|
|
href={`/api/tournaments/${tournament.id}/export`}
|
|
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Export CSV
|
|
</a>
|
|
{deletePermission.allowed && (
|
|
<DeleteTournamentButton
|
|
tournamentId={tournament.id}
|
|
tournamentName={tournament.name}
|
|
matchCount={matchCount}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<p className="text-sm text-gray-500">Participants</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{tournament.participants.length}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<p className="text-sm text-gray-500">Teams</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{tournament.teams.length}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<p className="text-sm text-gray-500">Rounds</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{tournament.rounds.length}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<p className="text-sm text-gray-500">Matches</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{matches.length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-gray-200">
|
|
<nav className="-mb-px flex space-x-8">
|
|
<button className="border-green-500 text-green-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Overview
|
|
</button>
|
|
<button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Participants
|
|
</button>
|
|
<button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Teams
|
|
</button>
|
|
<button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Schedule
|
|
</button>
|
|
<button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Results
|
|
</button>
|
|
<button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
|
Analytics
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="mt-6">
|
|
{/* Participants Section */}
|
|
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
|
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
|
Participants ({tournament.participants.length})
|
|
</h2>
|
|
|
|
{tournament.participants.length > 0 ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
{tournament.participants.map((participant) => (
|
|
<div
|
|
key={participant.id}
|
|
className="bg-gray-50 rounded p-2 text-center"
|
|
>
|
|
<Link
|
|
href={`/players/${participant.player.id}/profile`}
|
|
className="text-green-600 hover:text-green-900 text-sm"
|
|
>
|
|
{participant.player.name}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500">No participants registered yet.</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Teams Section */}
|
|
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
|
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
|
Teams ({tournament.teams.length})
|
|
</h2>
|
|
|
|
{tournament.teams.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{tournament.teams.map((team) => (
|
|
<div
|
|
key={team.id}
|
|
className="bg-gray-50 rounded p-3 flex justify-between items-center"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-gray-900">
|
|
{team.player1.name} + {team.player2.name}
|
|
</p>
|
|
<p className="text-sm text-gray-500">{team.teamName}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500">No teams created yet.</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recent Matches Section */}
|
|
<div className="bg-white shadow rounded-lg p-6">
|
|
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
|
Recent Matches ({matches.length})
|
|
</h2>
|
|
|
|
{matches.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{matches.slice(0, 10).map((match) => (
|
|
<div
|
|
key={match.id}
|
|
className="border border-gray-200 rounded p-3"
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex-1">
|
|
<p className="text-sm text-gray-500">
|
|
{match.playedAt?.toLocaleDateString()}
|
|
</p>
|
|
<p className="font-medium">
|
|
{match.team1P1.name} + {match.team1P2.name} vs{" "}
|
|
{match.team2P1.name} + {match.team2P2.name}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`font-bold ${
|
|
match.team1Score > match.team2Score
|
|
? 'text-green-600'
|
|
: match.team1Score < match.team2Score
|
|
? 'text-red-600'
|
|
: 'text-gray-600'
|
|
}`}>
|
|
{match.team1Score}
|
|
</span>
|
|
<span className="text-gray-400 mx-2">-</span>
|
|
<span className={`font-bold ${
|
|
match.team2Score > match.team1Score
|
|
? 'text-green-600'
|
|
: match.team2Score < match.team1Score
|
|
? 'text-red-600'
|
|
: 'text-gray-600'
|
|
}`}>
|
|
{match.team2Score}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500">No matches recorded yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|