feat: add match management admin panel with delete functionality
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Navigation from "@/components/Navigation"
|
||||
import Link from "next/link"
|
||||
|
||||
interface Match {
|
||||
id: number
|
||||
playedAt: string | null
|
||||
team1Score: number
|
||||
team2Score: number
|
||||
status: string
|
||||
isCasual: boolean
|
||||
event?: {
|
||||
id: number
|
||||
name: string
|
||||
} | null
|
||||
team1P1: { id: number; name: string }
|
||||
team1P2: { id: number; name: string }
|
||||
team2P1: { id: number; name: string }
|
||||
team2P2: { id: number; name: string }
|
||||
}
|
||||
|
||||
export default function AdminMatchesPage() {
|
||||
const [matches, setMatches] = useState<Match[]>([])
|
||||
const [error, setError] = useState("")
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchMatches()
|
||||
}, [])
|
||||
|
||||
const fetchMatches = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/matches")
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new Error(data.error || "Failed to fetch matches")
|
||||
}
|
||||
const data = await response.json()
|
||||
setMatches(data)
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Unknown error")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (matchId: number) => {
|
||||
if (!confirm("Are you sure you want to delete this match? This action cannot be undone.")) {
|
||||
return
|
||||
}
|
||||
|
||||
setDeletingId(matchId)
|
||||
try {
|
||||
const response = await fetch(`/api/matches/${matchId}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setMatches(matches.filter(m => m.id !== matchId))
|
||||
} else {
|
||||
alert(`Error: ${data.error}`)
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
alert(`Error: ${err instanceof Error ? err.message : "Unknown error occurred"}`)
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
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 text-center">
|
||||
<p>Loading matches...</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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">
|
||||
{/* Page Header */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Match Management</h1>
|
||||
<p className="text-gray-500 mt-1">
|
||||
Manage {matches.length} match{matches.length !== 1 ? 'es' : ''} in the system
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Match Table */}
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Tournament
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Team 1
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Score
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Team 2
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Score
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{matches.map((match) => (
|
||||
<tr key={match.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{match.playedAt
|
||||
? new Date(match.playedAt).toLocaleDateString()
|
||||
: "N/A"}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{match.event ? (
|
||||
<Link
|
||||
href={`/admin/tournaments/${match.event.id}`}
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
{match.event.name}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 italic">Casual</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{match.team1P1.name} & {match.team1P2.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{match.team1Score}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{match.team2P1.name} & {match.team2P2.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{match.team2Score}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<button
|
||||
onClick={() => handleDelete(match.id)}
|
||||
disabled={deletingId === match.id}
|
||||
className="text-red-600 hover:text-red-900 disabled:opacity-50"
|
||||
>
|
||||
{deletingId === match.id ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { canManageMatch } from "@/lib/permissions";
|
||||
|
||||
/**
|
||||
* DELETE /api/matches/[id]
|
||||
*
|
||||
* Delete a match
|
||||
* Requires: club_admin, site_admin, or tournament_admin role (for their own tournaments)
|
||||
*/
|
||||
export async function DELETE(
|
||||
request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const { id } = await params;
|
||||
const matchId = parseInt(id);
|
||||
|
||||
// Validate match ID
|
||||
if (isNaN(matchId)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Invalid match ID" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Check permissions
|
||||
const permission = await canManageMatch(matchId);
|
||||
if (!permission.allowed) {
|
||||
return NextResponse.json(
|
||||
{ error: permission.reason || "Not authorized to delete this match" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
|
||||
// Verify match exists
|
||||
const existingMatch = await prisma.match.findUnique({
|
||||
where: { id: matchId },
|
||||
});
|
||||
|
||||
if (!existingMatch) {
|
||||
return NextResponse.json(
|
||||
{ error: "Match not found" },
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
|
||||
// Delete the match (cascading deletes will handle related records)
|
||||
await prisma.match.delete({
|
||||
where: { id: matchId },
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: "Match deleted successfully",
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
console.error("Error deleting match:", error);
|
||||
const message = error instanceof Error ? error.message : "Failed to delete match";
|
||||
return NextResponse.json(
|
||||
{ error: message },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getSession } from "@/lib/auth-simple";
|
||||
import { hasRole, canManageMatch } from "@/lib/permissions";
|
||||
|
||||
import { calculateTeamElo, calculateTeamEloChange } from "@/lib/elo-utils";
|
||||
import { calculateOpenSkillRatings, fromOpenSkillRating } from "@/lib/openskill-utils";
|
||||
@@ -8,6 +9,104 @@ import { calculateGlicko2Ratings } from "@/lib/glicko2-utils";
|
||||
|
||||
const K_FACTOR = 32; // Standard K-factor for Elo calculations
|
||||
|
||||
/**
|
||||
* GET /api/matches
|
||||
*
|
||||
* Get matches (admin only)
|
||||
* Requires: club_admin, site_admin, or tournament_admin role
|
||||
*/
|
||||
export async function GET() {
|
||||
try {
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
return NextResponse.json(
|
||||
{ error: "Not authenticated" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
|
||||
const userId = session.user?.id;
|
||||
if (!userId) {
|
||||
return NextResponse.json(
|
||||
{ error: "User ID not found in session" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
|
||||
// Fetch user from database to get current role
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: userId },
|
||||
select: { role: true }
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return NextResponse.json(
|
||||
{ error: "User not found" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
|
||||
const userRole = user.role as 'player' | 'tournament_admin' | 'club_admin' | 'site_admin';
|
||||
|
||||
let matches;
|
||||
if (userRole === 'club_admin' || userRole === 'site_admin') {
|
||||
// Club admins and site admins can see all matches
|
||||
matches = await prisma.match.findMany({
|
||||
include: {
|
||||
event: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
},
|
||||
},
|
||||
team1P1: { select: { id: true, name: true } },
|
||||
team1P2: { select: { id: true, name: true } },
|
||||
team2P1: { select: { id: true, name: true } },
|
||||
team2P2: { select: { id: true, name: true } },
|
||||
},
|
||||
orderBy: { playedAt: 'desc' },
|
||||
});
|
||||
} else if (userRole === 'tournament_admin') {
|
||||
// Tournament admins can only see matches in their own tournaments
|
||||
matches = await prisma.match.findMany({
|
||||
where: {
|
||||
event: {
|
||||
ownerId: userId,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
event: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
},
|
||||
},
|
||||
team1P1: { select: { id: true, name: true } },
|
||||
team1P2: { select: { id: true, name: true } },
|
||||
team2P1: { select: { id: true, name: true } },
|
||||
team2P2: { select: { id: true, name: true } },
|
||||
},
|
||||
orderBy: { playedAt: 'desc' },
|
||||
});
|
||||
} else {
|
||||
// Regular players cannot view matches via this API (should not happen if UI is protected)
|
||||
return NextResponse.json(
|
||||
{ error: "Insufficient permissions to view matches" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json(matches);
|
||||
} catch (error: unknown) {
|
||||
console.error("Error fetching matches:", error);
|
||||
const message = error instanceof Error ? error.message : "Failed to fetch matches";
|
||||
return NextResponse.json(
|
||||
{ error: message },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/matches
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user