feat: add player name editing functionality in admin UI and fix site_admin access to admin dashboard

src/app/admin/page.tsx

@@ -37,7 +37,7 @@ export default async function AdminDashboard() {
   }
 
   // Non-admin users should see a different dashboard
-  if (user.role !== "club_admin") {
+  if (user.role !== "club_admin" && user.role !== "site_admin") {
     if (user.playerId) {
       redirect("/players/" + user.playerId + "/profile")
     } else {

src/app/admin/players/page.tsx

@@ -1,33 +1,82 @@
-import { prisma } from "@/lib/prisma"
+"use client"
+
+import { useState, useEffect } from "react"
 import Navigation from "@/components/Navigation"
 import Link from "next/link"
-import { redirect } from "next/navigation"
-import { getSession } from "@/lib/auth-simple"
-import { hasRole } from "@/lib/permissions"
 
-export default async function AdminPlayersPage() {
+interface Player {
-  const session = await getSession()
+  id: number
+  name: string
+  currentElo: number
+  gamesPlayed: number
+  wins: number
+  losses: number
+  user?: {
+    email: string
+  } | null
+}
 
-  if (!session) {
+export default function AdminPlayersPage() {
-    redirect("/auth/login")
+  const [players, setPlayers] = useState<Player[]>([])
+  const [error, setError] = useState("")
+  const [editingPlayer, setEditingPlayer] = useState<Player | null>(null)
+  const [newName, setNewName] = useState("")
+  const [isSaving, setIsSaving] = useState(false)
+
+  useEffect(() => {
+    fetchPlayers()
+  }, [])
+
+  const fetchPlayers = async () => {
+    try {
+      const response = await fetch("/api/players")
+      if (!response.ok) {
+        throw new Error("Failed to fetch players")
+      }
+      const data = await response.json()
+      setPlayers(data)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Unknown error")
+    }
   }
 
-  // Only site_admin and club_admin can manage players
+  const handleEditClick = (player: Player) => {
-  const permission = await hasRole('club_admin')
+    setEditingPlayer(player)
-  if (!permission.allowed) {
+    setNewName(player.name)
-    redirect("/auth/login")
   }
 
-  // Get all players with their user association
+  const handleSaveName = async () => {
-  const players = await prisma.player.findMany({
+    if (!editingPlayer || !newName.trim()) return
-    include: {
-      user: true,
-    },
-    orderBy: { name: "asc" },
-  })
 
-  // Get total count
+    setIsSaving(true)
-  const playerCount = await prisma.player.count()
+    try {
+      const response = await fetch(`/api/admin/players/${editingPlayer.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name: newName.trim() }),
+      })
+
+      const data = await response.json()
+
+      if (data.success) {
+        setPlayers(players.map(p =>
+          p.id === editingPlayer.id ? { ...p, name: data.player.name } : p
+        ))
+        setEditingPlayer(null)
+        setNewName("")
+      } else {
+        alert(`Error: ${data.error}`)
+      }
+    } catch (err: unknown) {
+      alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const playerCount = players.length
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -45,6 +94,12 @@ export default async function AdminPlayersPage() {
             </div>
           </div>
 
+          {error && (
+            <div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
+              {error}
+            </div>
+          )}
+
           {/* Player Table */}
           <div className="bg-white shadow rounded-lg overflow-hidden">
             <table className="min-w-full divide-y divide-gray-200">
@@ -114,12 +169,20 @@ export default async function AdminPlayersPage() {
                       )}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <Link
+                      <div className="flex space-x-2">
-                        href={`/players/${player.id}/profile`}
+                        <Link
-                        className="text-green-600 hover:text-green-900"
+                          href={`/players/${player.id}/profile`}
-                      >
+                          className="text-green-600 hover:text-green-900"
-                        View Profile
+                        >
-                      </Link>
+                          View
+                        </Link>
+                        <button
+                          onClick={() => handleEditClick(player)}
+                          className="text-blue-600 hover:text-blue-900"
+                        >
+                          Edit
+                        </button>
+                      </div>
                     </td>
                   </tr>
                 ))}
@@ -128,6 +191,56 @@ export default async function AdminPlayersPage() {
           </div>
         </div>
       </main>
+
+      {/* Edit Player Modal */}
+      {editingPlayer && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
+          <div className="bg-white rounded-lg shadow-xl p-6 m-4 max-w-md w-full">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">
+              Edit Player Name
+            </h3>
+            
+            <p className="text-sm text-gray-600 mb-4">
+              Current name: {editingPlayer.name}
+            </p>
+
+            <div className="mb-6">
+              <label htmlFor="playerName" className="block text-sm font-medium text-gray-700 mb-2">
+                New Name
+              </label>
+              <input
+                type="text"
+                id="playerName"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
+                placeholder="Enter new player name"
+              />
+            </div>
+
+            <div className="flex justify-end space-x-3">
+              <button
+                type="button"
+                onClick={() => {
+                  setEditingPlayer(null)
+                  setNewName("")
+                }}
+                className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSaveName}
+                disabled={isSaving || !newName.trim()}
+                className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 disabled:opacity-50"
+              >
+                {isSaving ? 'Saving...' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/app/api/admin/players/[id]/route.ts

@@ -0,0 +1,90 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { hasRole } from "@/lib/permissions";
+
+/**
+ * PATCH /api/admin/players/[id]
+ * 
+ * Update a player's name
+ * Requires: club_admin or site_admin role
+ */
+export async function PATCH(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const playerId = parseInt(params.id);
+
+    // Validate player ID
+    if (isNaN(playerId)) {
+      return NextResponse.json(
+        { error: "Invalid player ID" },
+        { status: 400 }
+      );
+    }
+
+    // Check permissions - only club_admin and site_admin can edit players
+    const permission = await hasRole('club_admin');
+    if (!permission.allowed) {
+      return NextResponse.json(
+        { error: permission.reason || "Not authorized to edit players" },
+        { status: 403 }
+      );
+    }
+
+    // Verify player exists
+    const existingPlayer = await prisma.player.findUnique({
+      where: { id: playerId },
+      include: { user: true },
+    });
+
+    if (!existingPlayer) {
+      return NextResponse.json(
+        { error: "Player not found" },
+        { status: 404 }
+      );
+    }
+
+    const body = await request.json();
+    const { name } = body;
+
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return NextResponse.json(
+        { error: "Player name is required" },
+        { status: 400 }
+      );
+    }
+
+    const trimmedName = name.trim();
+    const normalizedName = trimmedName.toLowerCase();
+
+    // Update the player
+    const updatedPlayer = await prisma.player.update({
+      where: { id: playerId },
+      data: {
+        name: trimmedName,
+        normalizedName,
+      },
+    });
+
+    // If the player has an associated user, update the user's name too
+    if (existingPlayer.user) {
+      await prisma.user.update({
+        where: { id: existingPlayer.user.id },
+        data: { name: trimmedName },
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      player: updatedPlayer,
+    });
+  } catch (error: unknown) {
+    console.error("Error updating player:", error);
+    const message = error instanceof Error ? error.message : "Failed to update player";
+    return NextResponse.json(
+      { error: message },
+      { status: 500 }
+    );
+  }
+}

src/app/api/players/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+/**
+ * GET /api/players
+ * 
+ * Get all players with their user associations
+ * This is a public endpoint (no authentication required)
+ */
+export async function GET() {
+  try {
+    const players = await prisma.player.findMany({
+      include: {
+        user: {
+          select: {
+            email: true,
+          },
+        },
+      },
+      orderBy: { name: "asc" },
+    });
+
+    return NextResponse.json(players);
+  } catch (error: unknown) {
+    console.error("Error fetching players:", error);
+    const message = error instanceof Error ? error.message : "Failed to fetch players";
+    return NextResponse.json(
+      { error: message },
+      { status: 500 }
+    );
+  }
+}