canInteract && setShowScore(true)}
+ >
+ {/* Anchors for Lines */}
+
+
+
+ {/* Header */}
+
+
+ #{node.display_number}
+ {node.match?.court && (
+
+ {node.match.court.name}
+
+ )}
+
+
+ {new Date(node.match?.start_time || node.planned_start_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+
+
+ {/* Teams */}
+
+ {/* P1 Row */}
+
+
+ {p1 ? p1.name : (node.source_p1_type ? 'TBD' : 'Bye')}
+
+ {match && {getWinCount(match, p1?.id)}}
+
+
+ {/* P2 Row */}
+
+
+ {p2 ? p2.name : (node.source_p2_type ? 'TBD' : 'Bye')}
+
+ {match && {getWinCount(match, p2?.id)}}
+
+
+
!isPending && onClick(node)}
+ className={`w-64 bg-white dark:bg-zinc-900 rounded-xl border-2 ${winnerId ? 'border-orange-500 ring-4 ring-orange-500/10' : 'border-zinc-300 dark:border-zinc-800'} shadow-sm ${!isPending ? 'cursor-pointer hover:-translate-y-1 transition duration-200 group' : 'opacity-80 cursor-default'} overflow-hidden transition-all`}
+ >
+ {/* Header */}
+
+
+ # {node.display_number}
+ {match?.court && {match.court.name}}
+
+ {winnerId ?
:
{timeDisplay ? new Date(timeDisplay).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'TBD'}}
+
+
+ {/* Content */}
+
+ {/* P1 */}
+
+ {p1 ? p1.name : (node.source_p1_type ? 'TBD' : 'Bye')}
+ {p1Wins}
+
+ {/* P2 */}
+
+ {p2 ? p2.name : (node.source_p2_type ? 'TBD' : 'Bye')}
+ {p2Wins}
+
+
+
+ {rounds[r].sort((a, b) => a.display_number - b.display_number).map(n => (
+
+ ))}
+
+ ));
+ };
+
+ const wb = nodes.filter(n => n.bracket_type === 'Winners');
+ const lb = nodes.filter(n => n.bracket_type === 'Losers');
+ const finals = nodes.filter(n => n.bracket_type === 'Finals');
+
+ return (
+
+
+
+
+
+
+
Winners Bracket
+ {renderTree(wb)}
+
+
+ {lb.length > 0 && (
+
+
Losers Bracket
+
{renderTree(lb, 'justify-start')}
+
+ )}
+
+
+ {finals.length > 0 && (
+
+
+ Championship
+
+ {finals.map(n =>
)}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* STICKY SEARCH BAR */}
+
+
+ setFilter(e.target.value)}
+ />
+
+
+
+
+
+ {filtered.map(m => (
+
+
+
+
+
+ {m.p1 || {m.p1_label}}
+ VS
+ {m.p2 || {m.p2_label}}
+
+
Match #{m.number} • {m.bracket} Round {m.round}
+
+
+
+ {m.winner ? (
+
+
Finished
+
{m.p1_sets} - {m.p2_sets}
+
+ ) : (m.p1 && m.p2) && (
+
+ )}
+
+
+ ))}
+ {filtered.length === 0 &&
No matching matches found
}
+
+
+ {error &&
{error}
}
+
+
+
+
Time
+
{new Date(timeDisplay).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+
+
+
+
+ {!isAdmin && (
+
+
+ setCode(e.target.value)} placeholder="•••••" className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-3 rounded-xl text-center tracking-[0.5em] dark:text-white font-bold outline-none focus:border-orange-500" />
+
+ )}
+
+
+
{p1Name}
+
VS
+
{p2Name}
+
+
+
+ {sets.map((s, i) => (
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+ {match.winner_team_id && }
+
+
+
+
+
+
+
{title}
+
+
+ {children}
+
+
+
+
+
+
{t.name}
+ {isAdmin && (
+
+ )}
+
+
+
+
+ {/* Use safe date parsing */}
+ {t.timestamp ? new Date(t.timestamp).toLocaleDateString() : 'TBD'} / {t.timestamp ? new Date(t.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}
+
+
+
+
+ {t.team_count} Teams
+
+
+ {t.type}
+
+
+
+
;
+
+ return (
+
+
+ {/* Create Button only if Admin */}
+
+ {isAdmin && (
+
+ )}
+
+
+ {groups.live.length > 0 && (
+
+
+
Live Events
+
+
+ {groups.live.map(t => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
+
+
+ )}
+
+
+
+ Upcoming
+
+ {groups.future.length > 0 ? (
+
+ {groups.future.map(t => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
+
+ ) : (
+ No Upcoming Events
+ )}
+
+
+ {groups.past.length > 0 && (
+
+
+ {showPast && (
+
+ {groups.past.map(t => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
+
+ )}
+
+ )}
+
+
setShowCreate(false)} title={editTarget ? "Modify Event" : "New Tournament"}>
+ { setShowCreate(false); loadTournaments(); }} />
+
+
+
+
+
+
+
Admin Access
+
Enter your credentials to manage events
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
;
+
+ return (
+
+ {/* Toolbar */}
+
+
+
+
+
+
+ {isAdmin && (
+
+ )}
+
+
+ {/* Main Content Area */}
+
+ {view === 'bracket'
+ ?
+ :
+ }
+
+
+ {scoreMatchNode && (
+
setScoreMatchNode(null)}
+ node={scoreMatchNode}
+ tournamentId={id}
+ isAdmin={isAdmin}
+ />
+ )}
+
+ setShowSettings(false)} title="Edit Tournament">
+ { setShowSettings(false); fetchData(); }} isEdit />
+
+