seed tournament done

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -4,6 +4,10 @@ import { ensureServerQueryData } from '@/lib/tanstack-query/utils/ensure'
 import SeedTournament from '@/features/tournaments/components/seed-tournament'
 import { Container, Alert, Text } from '@mantine/core'
 import { Info } from '@phosphor-icons/react'
+import { useMemo } from 'react'
+import { BracketData } from '@/features/bracket/types'
+import { Match } from '@/features/matches/types'
+import BracketView from '@/features/bracket/components/bracket-view'
 
 export const Route = createFileRoute('/_authed/admin/tournaments/run/$id')({
   beforeLoad: async ({ context, params }) => {
@@ -31,6 +35,50 @@ function RouteComponent() {
   const { tournament } = Route.useRouteContext()
   const router = useRouter()
 
+  const bracket: BracketData = useMemo(() => {
+    if (!tournament.matches || tournament.matches.length === 0) {
+      return { winners: [], losers: [] }
+    }
+
+    console.log('Tournament Matches:', tournament.matches)
+    
+    const winnersMap = new Map<number, Match[]>()
+    const losersMap = new Map<number, Match[]>()
+    
+    tournament.matches.sort((a, b) => a.lid - b.lid).forEach((match) => {
+      console.log('Processing Match:', match)
+      if (!match.is_losers_bracket) {
+        if (!winnersMap.has(match.round)) {
+          winnersMap.set(match.round, [])
+        }
+        winnersMap.get(match.round)!.push(match)
+        console.log('Added to Winners Bracket:', match)
+      } else {
+        if (!losersMap.has(match.round)) {
+          losersMap.set(match.round, [])
+        }
+        losersMap.get(match.round)!.push(match)
+        console.log('Added to Losers Bracket:', match)
+      }
+    })
+
+    // Convert to dense arrays sorted by round (0, 1, 2, 3...)
+    const winners = Array.from(winnersMap.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, matches]) => matches)
+    
+    const losers = Array.from(losersMap.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, matches]) => matches)
+
+    console.log('Winners Bracket (fixed):', winners)
+    console.log('Losers Bracket (fixed):', losers)
+    return { winners, losers }
+  }, [tournament.matches])
+
+
+  console.log('Bracket Data:', bracket)
+
   const handleSuccess = () => {
     router.navigate({
       to: '/admin/tournaments/$id',
@@ -44,7 +92,7 @@ function RouteComponent() {
     <Container size="md">
       {
         tournament.matches?.length ?
-          <p>Matches</p>
+          <BracketView bracket={bracket} onAnnounce={console.log} />
           : (
             <SeedTournament
               tournamentId={tournament.id}