Files
euchre_camp/src/app/matches/page.tsx
T

127 lines
4.8 KiB
TypeScript

import { prisma } from "@/lib/prisma";
import Navigation from "@/components/Navigation";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth-simple";
import { hasRole } from "@/lib/permissions";
export const dynamic = "force-dynamic";
export default async function MatchesListPage() {
// Check if user is logged in
const session = await getSession();
if (!session) {
redirect("/auth/login");
}
// Get user role
const userId = session.user?.id || session.user?.userId;
const user = await prisma.user.findUnique({
where: { id: userId },
});
// Fetch all matches with player data
const matches = await prisma.match.findMany({
orderBy: { createdAt: "desc" },
take: 50,
include: {
team1P1: true,
team1P2: true,
team2P1: true,
team2P2: true,
event: true,
},
});
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="bg-white shadow rounded-lg p-6 mb-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">All Matches</h1>
<p className="text-gray-500 mt-1">
View recent matches played.
</p>
</div>
</div>
</div>
{/* Matches List */}
<div className="bg-white shadow rounded-lg overflow-hidden">
<div className="overflow-x-auto">
<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">
Match ID
</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">
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">
Date
</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 font-medium text-gray-900">
#{match.id}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{match.team1P1.name} & {match.team1P2.name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{match.team2P1.name} & {match.team2P2.name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span className="font-medium">{match.team1Score}</span>
<span className="text-gray-400 mx-1">-</span>
<span className="font-medium">{match.team2Score}</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{match.playedAt
? new Date(match.playedAt).toLocaleDateString()
: "-"}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm">
<Link
href={`/matches/${match.id}`}
className="text-green-600 hover:text-green-900"
>
View
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
{matches.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500">No matches found.</p>
</div>
)}
</div>
</div>
</main>
</div>
);
}