\n {/* Header */}\n

⚙️ Admin Dashboard

Manage all courts and games

\n setShowCreateForm(true)}\n className=\"px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 font-medium\"\n >\n ➕ New Game\n \n

\n\n {/* Error Display */}\n {error && (\n

\n {error}\n \n

\n )}\n\n {/* Tabs */}\n

\n setSelectedTab('overview')}\n className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${\n selectedTab === 'overview' \n ? 'bg-white text-blue-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n 📊 Overview\n \n setSelectedTab('games')}\n className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${\n selectedTab === 'games' \n ? 'bg-white text-blue-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n 🏓 Active Games\n \n setSelectedTab('courts')}\n className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${\n selectedTab === 'courts' \n ? 'bg-white text-blue-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n 🏟️ Courts\n \n

\n\n {/* Overview Tab */}\n {selectedTab === 'overview' && (\n

\n {/* Stats Cards */}\n

🏟️

Total Courts

{totalCourts}

\n\n

🏓

Active Games

{occupiedCourts}

\n\n

📈

Occupancy Rate

{occupancyRate}%

\n\n

🏢

Sites

{sites.length}

\n\n {/* Recent Activity */}\n

Recent Activity

\n {activeGames.length === 0 ? (\n

No active games

\n ) : (\n

\n {activeGames.slice(0, 5).map(game => {\n const teams = getTeamNames(game);\n return (\n

\n {teams.team1} vs {teams.team2}\n

\n Court {game.courtId.split('-').pop()} • {getGameDuration(game)} • {game.team1.score}-{game.team2.score}\n

\n onViewGame(game)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n View\n \n

\n );\n })}\n

\n )}\n

\n )}\n\n {/* Active Games Tab */}\n {selectedTab === 'games' && (\n

Active Games ({activeGames.length})

\n {activeGames.length === 0 ? (\n

🏓

No active games

Create a new game to get started

\n ) : (\n

\n {activeGames.map(game => {\n const teams = getTeamNames(game);\n const targetScore = game.gameFormat === 'standard' ? 11 : \n game.gameFormat === 'tournament15' ? 15 : 21;\n \n return (\n

Court {game.courtId.split('-').pop()}

\n {game.gameType} • {game.gameFormat} • {getGameDuration(game)}\n

\n \n {game.isComplete ? 'Complete' : 'Active'}\n \n

\n\n

\n {teams.team1}\n {game.currentServer === 'team1' && 🏓}\n

{game.team1.score}

\n\n

\n {teams.team2}\n {game.currentServer === 'team2' && 🏓}\n

{game.team2.score}

\n\n

\n Score Call: {game.currentServer === 'team1' ? game.team1.score : game.team2.score} - {game.currentServer === 'team1' ? game.team2.score : game.team1.score} - {game.serverNumber}\n

\n\n

\n onViewGame(game)}\n className=\"flex-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n 📊 Score\n \n window.open(`/audience/${game.courtId}`, '_blank')}\n className=\"flex-1 px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600\"\n >\n 👥 Audience\n \n onCompleteGame(game.id)}\n className=\"px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600\"\n disabled={loading}\n >\n 🏁\n \n

\n );\n })}\n

\n )}\n

\n )}\n\n {/* Courts Tab */}\n {selectedTab === 'courts' && (\n

\n {sites.map(site => (\n

{site.name}

\n {site.courts.filter(court => getGameForCourt(court.id)).length} of {site.courts.length} courts occupied\n

\n {site.courts.map(court => {\n const game = getGameForCourt(court.id);\n const isOccupied = !!game;\n \n return (\n \n

Court {court.number}

\n \n {isOccupied && game ? (\n

\n {game.gameType} • {getGameDuration(game)}\n

\n {game.team1.score} - {game.team2.score}\n

\n onViewGame(game)}\n className=\"w-full px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600\"\n >\n 📊 Score\n \n window.open(`/audience/${court.id}`, '_blank')}\n className=\"w-full px-3 py-1 bg-purple-500 text-white text-xs rounded hover:bg-purple-600\"\n >\n 👥 Audience\n \n

\n ) : (\n

🏓

Available

\n )}\n

\n );\n })}\n

\n ))}\n

\n )}\n

\n\n {/* Create Game Modal */}\n {showCreateForm && (\n setShowCreateForm(false)}\n loading={loading}\n />\n )}\n \n );\n}\n\ninterface CreateGameModalProps {\n sites: Site[];\n onCreateGame: (gameData: CreateGameRequest) => Promise;\n onClose: () => void;\n loading: boolean;\n}\n\nfunction CreateGameModal({ sites, onCreateGame, onClose, loading }: CreateGameModalProps) {\n const [formData, setFormData] = useState({\n siteId: sites[0]?.id || '',\n courtId: '',\n gameType: 'doubles' as 'singles' | 'doubles',\n gameFormat: 'standard' as 'standard' | 'tournament15' | 'tournament21',\n team1Player1: '',\n team1Player2: '',\n team2Player1: '',\n team2Player2: ''\n });\n\n const selectedSite = sites.find(site => site.id === formData.siteId);\n const availableCourts = selectedSite?.courts.filter(court => court.isActive) || [];\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n const gameData: CreateGameRequest = {\n courtId: formData.courtId,\n siteId: formData.siteId,\n team1Player1: formData.team1Player1,\n team1Player2: formData.gameType === 'doubles' ? formData.team1Player2 : undefined,\n team2Player1: formData.team2Player1,\n team2Player2: formData.gameType === 'doubles' ? formData.team2Player2 : undefined,\n gameType: formData.gameType,\n gameFormat: formData.gameFormat\n };\n\n const result = await onCreateGame(gameData);\n if (result) {\n onClose();\n }\n };\n\n return (\n

Create New Game

\n \n

\n Site\n setFormData({ ...formData, siteId: e.target.value, courtId: '' })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n >\n {sites.map(site => (\n \n ))}\n \n

\n\n

\n Court\n setFormData({ ...formData, courtId: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n >\n \n {availableCourts.map(court => (\n \n ))}\n \n

\n\n

\n Game Type\n setFormData({ ...formData, gameType: e.target.value as 'singles' | 'doubles' })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n >\n \n \n \n

\n\n

\n Format\n setFormData({ ...formData, gameFormat: e.target.value as any })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n

\n\n

Team 1

\n setFormData({ ...formData, team1Player1: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n {formData.gameType === 'doubles' && (\n setFormData({ ...formData, team1Player2: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n )}\n

\n\n

Team 2

\n setFormData({ ...formData, team2Player1: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n {formData.gameType === 'doubles' && (\n setFormData({ ...formData, team2Player2: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n )}\n

\n\n

\n \n Cancel\n \n \n {loading ? 'Creating...' : 'Create Game'}\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/max123/screen/code/frontend/components/AdminDashboard.tsx","extension","actionData","errors"]