feat: add matches list page at /matches route

src/app/matches/page.tsx

@@ -0,0 +1,126 @@
+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>
+  );
+}