feat: add tournament schedule page with generator component
Schedule page displays round-robin rounds with matchups, team names, status badges, and links to result entry. Generator component provides generate/delete buttons with success/error feedback.
This commit is contained in:
@@ -0,0 +1,219 @@
|
|||||||
|
import { prisma } from "@/lib/prisma"
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
import Navigation from "@/components/Navigation"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { notFound, redirect } from "next/navigation"
|
||||||
|
import { canManageTournament } from "@/lib/permissions"
|
||||||
|
import { ScheduleGenerator } from "@/components/ScheduleGenerator"
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
params: {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
pending: "bg-gray-100 text-gray-700",
|
||||||
|
in_progress: "bg-yellow-100 text-yellow-800",
|
||||||
|
completed: "bg-green-100 text-green-800",
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function TournamentSchedulePage({ params }: PageProps) {
|
||||||
|
const { id } = await params
|
||||||
|
const tournamentId = parseInt(id, 10)
|
||||||
|
|
||||||
|
if (isNaN(tournamentId)) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
const permission = await canManageTournament(tournamentId)
|
||||||
|
if (!permission.allowed) {
|
||||||
|
redirect("/auth/login")
|
||||||
|
}
|
||||||
|
|
||||||
|
const tournament = await prisma.event.findUnique({
|
||||||
|
where: { id: tournamentId },
|
||||||
|
include: {
|
||||||
|
teams: {
|
||||||
|
include: {
|
||||||
|
player1: true,
|
||||||
|
player2: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rounds: {
|
||||||
|
orderBy: { roundNumber: "asc" },
|
||||||
|
include: {
|
||||||
|
bracketMatchups: {
|
||||||
|
include: {
|
||||||
|
team1: {
|
||||||
|
include: { player1: true, player2: true },
|
||||||
|
},
|
||||||
|
team2: {
|
||||||
|
include: { player1: true, player2: true },
|
||||||
|
},
|
||||||
|
match: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!tournament) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasSchedule = tournament.rounds.length > 0
|
||||||
|
|
||||||
|
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>
|
||||||
|
<Link href={`/admin/tournaments/${tournament.id}`} className="text-green-600 hover:text-green-900">
|
||||||
|
{tournament.name}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="text-gray-400">/</li>
|
||||||
|
<li className="text-gray-600">Schedule</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Page Header */}
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Tournament Schedule</h1>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
{tournament.name} — {tournament.teams.length} teams
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Schedule Generator (when no schedule exists) */}
|
||||||
|
{!hasSchedule && (
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
||||||
|
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||||
|
No Schedule Generated
|
||||||
|
</h2>
|
||||||
|
<ScheduleGenerator
|
||||||
|
tournamentId={tournamentId}
|
||||||
|
teamCount={tournament.teams.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Schedule Rounds */}
|
||||||
|
{hasSchedule && tournament.rounds.map((round) => (
|
||||||
|
<div key={round.id} className="bg-white shadow rounded-lg p-6 mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h2 className="text-lg font-medium text-gray-900">
|
||||||
|
Round {round.roundNumber}
|
||||||
|
</h2>
|
||||||
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${statusColors[round.status] || statusColors.pending}`}>
|
||||||
|
{round.status.replace("_", " ")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{round.bracketMatchups.length === 0 ? (
|
||||||
|
<p className="text-gray-500">No matchups in this round.</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{round.bracketMatchups.map((matchup) => {
|
||||||
|
const team1Name = matchup.team1
|
||||||
|
? `${matchup.team1.player1.name} + ${matchup.team1.player2.name}`
|
||||||
|
: "TBD"
|
||||||
|
const team2Name = matchup.team2
|
||||||
|
? `${matchup.team2.player1.name} + ${matchup.team2.player2.name}`
|
||||||
|
: "TBD"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={matchup.id}
|
||||||
|
className="border border-gray-200 rounded p-3"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{matchup.tableNumber && (
|
||||||
|
<span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||||
|
Table {matchup.tableNumber}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${statusColors[matchup.status] || statusColors.pending}`}>
|
||||||
|
{matchup.status.replace("_", " ")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium mt-1">
|
||||||
|
{team1Name} <span className="text-gray-400">vs</span> {team2Name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
{matchup.match ? (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className={`font-bold ${
|
||||||
|
matchup.match.team1Score > matchup.match.team2Score
|
||||||
|
? 'text-green-600'
|
||||||
|
: 'text-gray-900'
|
||||||
|
}`}>
|
||||||
|
{matchup.match.team1Score}
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-400">-</span>
|
||||||
|
<span className={`font-bold ${
|
||||||
|
matchup.match.team2Score > matchup.match.team1Score
|
||||||
|
? 'text-green-600'
|
||||||
|
: 'text-gray-900'
|
||||||
|
}`}>
|
||||||
|
{matchup.match.team2Score}
|
||||||
|
</span>
|
||||||
|
<Link
|
||||||
|
href={`/matches/${matchup.match.id}`}
|
||||||
|
className="text-green-600 hover:text-green-900 text-sm"
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
href={`/admin/tournaments/${tournament.id}/results`}
|
||||||
|
className="px-3 py-1 border border-green-300 rounded text-sm font-medium text-green-700 hover:bg-green-50"
|
||||||
|
>
|
||||||
|
Enter Result
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Actions when schedule exists */}
|
||||||
|
{hasSchedule && (
|
||||||
|
<div className="bg-white shadow rounded-lg p-6">
|
||||||
|
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||||
|
Schedule Actions
|
||||||
|
</h2>
|
||||||
|
<ScheduleGenerator
|
||||||
|
tournamentId={tournamentId}
|
||||||
|
teamCount={tournament.teams.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
|
||||||
|
interface ScheduleGeneratorProps {
|
||||||
|
tournamentId: number
|
||||||
|
teamCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ScheduleGenerator({ tournamentId, teamCount }: ScheduleGeneratorProps) {
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false)
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const [result, setResult] = useState<{
|
||||||
|
roundsCreated: number
|
||||||
|
matchupsCreated: number
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
setError("")
|
||||||
|
setResult(null)
|
||||||
|
setIsGenerating(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/tournaments/${tournamentId}/schedule`, {
|
||||||
|
method: "POST",
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
setError(data.error || "Failed to generate schedule")
|
||||||
|
setIsGenerating(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setResult({
|
||||||
|
roundsCreated: data.roundsCreated,
|
||||||
|
matchupsCreated: data.matchupsCreated,
|
||||||
|
})
|
||||||
|
setIsGenerating(false)
|
||||||
|
|
||||||
|
// Reload to show the schedule
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload()
|
||||||
|
}, 1500)
|
||||||
|
} catch {
|
||||||
|
setError("An error occurred. Please try again.")
|
||||||
|
setIsGenerating(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
setError("")
|
||||||
|
setIsGenerating(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/tournaments/${tournamentId}/schedule`, {
|
||||||
|
method: "DELETE",
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
setError(data.error || "Failed to delete schedule")
|
||||||
|
setIsGenerating(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.reload()
|
||||||
|
} catch {
|
||||||
|
setError("An error occurred. Please try again.")
|
||||||
|
setIsGenerating(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const expectedRounds = teamCount % 2 === 0 ? teamCount - 1 : teamCount
|
||||||
|
const expectedMatchups = (teamCount * (teamCount - 1)) / 2
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="rounded-md bg-red-50 p-4">
|
||||||
|
<div className="text-sm text-red-700">{error}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result && (
|
||||||
|
<div className="rounded-md bg-green-50 p-4">
|
||||||
|
<div className="text-sm text-green-700">
|
||||||
|
Generated {result.roundsCreated} rounds with {result.matchupsCreated} matchups!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm text-gray-600 mb-2">
|
||||||
|
Generate a round-robin schedule for <strong>{teamCount} teams</strong>.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
This will create {expectedRounds} rounds with {expectedMatchups} total matchups.
|
||||||
|
Each team plays every other team exactly once.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={isGenerating || teamCount < 2}
|
||||||
|
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 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isGenerating ? "Generating..." : "Generate Schedule"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={isGenerating}
|
||||||
|
className="px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Delete Schedule
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user