refactor(ui): update components to use new player field names

src/app/page.tsx

@@ -24,10 +24,10 @@ export default async function Home() {
     include: {
       matches: {
         include: {
-          team1P1: true,
-          team1P2: true,
-          team2P1: true,
-          team2P2: true,
+          player1P1: true,
+          player1P2: true,
+          player2P1: true,
+          player2P2: true,
         },
         orderBy: { playedAt: "desc" },
       },
@@ -178,7 +178,7 @@ export default async function Home() {
                     <div className="flex justify-between items-center">
                       <div className="flex-1 text-center">
                         <div className="text-sm font-medium text-gray-900">
-                          {match.team1P1.name} & {match.team1P2.name}
+                          {match.player1P1?.name} & {match.player1P2?.name}
                         </div>
                         <div className="text-lg font-bold text-gray-800">
                           {match.team1Score}
@@ -187,7 +187,7 @@ export default async function Home() {
                       <div className="px-3 text-gray-500">vs</div>
                       <div className="flex-1 text-center">
                         <div className="text-sm font-medium text-gray-900">
-                          {match.team2P1.name} & {match.team2P2.name}
+                          {match.player2P1?.name} & {match.player2P2?.name}
                         </div>
                         <div className="text-lg font-bold text-gray-800">
                           {match.team2Score}