From 1532c102232cf5bfb76e895b004ce24fab8101d9 Mon Sep 17 00:00:00 2001
From: David Gwilliam <dhgwilliam@gmail.com>
Date: Fri, 3 Apr 2026 19:26:52 -0700
Subject: [PATCH] feat: integrate TeamsSection component into tournament detail
 page

Update tournament detail page to use new TeamsSection component:
- Import TeamsSection component
- Replace static teams display with interactive configuration
- Pass tournament ID, teams, and participants to component

Refs #22
---
 src/app/admin/tournaments/[id]/page.tsx | 38 +++++++++----------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/app/admin/tournaments/[id]/page.tsx b/src/app/admin/tournaments/[id]/page.tsx
index 43492bd..1c6255a 100644
--- a/src/app/admin/tournaments/[id]/page.tsx
+++ b/src/app/admin/tournaments/[id]/page.tsx
@@ -6,6 +6,7 @@ import { notFound, redirect } from "next/navigation"
 import { canManageTournament, canDeleteTournament } from "@/lib/permissions"
 import { getTournamentStatus } from "@/lib/tournamentUtils"
 import { DeleteTournamentButton } from "@/components/DeleteTournamentButton"
+import TeamsSection from "@/components/TeamsSection"
 
 interface PageProps {
   params: {
@@ -284,31 +285,18 @@ export default async function TournamentDetailPage({ params }: PageProps) {
             </div>
 
             {/* Teams Section */}
-            <div className="bg-white shadow rounded-lg p-6 mb-6">
-              <h2 className="text-lg font-medium text-gray-900 mb-4">
-                Teams ({tournament.teams.length})
-              </h2>
-              
-              {tournament.teams.length > 0 ? (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  {tournament.teams.map((team) => (
-                    <div
-                      key={team.id}
-                      className="bg-gray-50 rounded p-3 flex justify-between items-center"
-                    >
-                      <div>
-                        <p className="font-medium text-gray-900">
-                          {team.player1.name} + {team.player2.name}
-                        </p>
-                        <p className="text-sm text-gray-500">{team.teamName}</p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-gray-500">No teams created yet.</p>
-              )}
-            </div>
+            <TeamsSection
+              tournamentId={tournament.id}
+              teams={tournament.teams}
+              participants={tournament.participants.map(p => ({
+                id: p.player.id,
+                name: p.player.name,
+                currentElo: p.player.currentElo,
+              }))}
+              teamDurability={tournament.teamDurability || "permanent"}
+              partnerRotation={tournament.partnerRotation || "none"}
+              allowByes={tournament.allowByes ?? true}
+            />
 
             {/* Recent Matches Section */}
             <div className="bg-white shadow rounded-lg p-6">