player card added

src/components/admin-dashboard.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
+import { ClickableUserId } from "@/components/clickable-user-id";
 import { AdminLedger } from "@/components/admin-ledger";
 import { MatchHistoryBattleCard } from "@/components/match-history-battle-card";
 import type { DashboardStatsBundle } from "@/lib/dashboard-stats";
@@ -11,8 +12,16 @@ import {
   type AdminDashboardTab,
 } from "@/lib/dashboard-search-url";
 import type { MatchmakerLogSource } from "@/lib/matchmaker-log-source";
-import type { DbMatch, DbTransaction, DbUser } from "@/types/database";
-import type { SerializedLedgerGlobalSummary } from "@/lib/ledger-integrity";
+import type {
+  AdminMatchRow,
+  DbMatch,
+  DbTransaction,
+  DbUser,
+} from "@/types/database";
+import {
+  txAmountToBigInt,
+  type SerializedLedgerGlobalSummary,
+} from "@/lib/ledger-integrity";
 import type { LedgerSortKey, LedgerSortOrder } from "@/lib/ledger-table-view";
 
 /** Bigint columns often arrive as strings from PostgREST / JSON. */
@@ -56,9 +65,24 @@ function formatTs(value: string | null): string {
   }
 }
 
+function matchEntryFeeCoinString(v: DbMatch["entry_fee"]): string | null {
+  if (v == null) return null;
+  return txAmountToBigInt(v).toString();
+}
+
+function formatPrizeCcChip(v: DbMatch["prize_cc"]): string {
+  if (v == null) return "—";
+  const b = txAmountToBigInt(v);
+  try {
+    return b.toLocaleString("en-US");
+  } catch {
+    return String(v);
+  }
+}
+
 type Props = {
   users: DbUser[];
-  matches: DbMatch[];
+  matches: AdminMatchRow[];
   usersError: string | null;
   matchesError: string | null;
   transactionsError: string | null;
@@ -378,12 +402,8 @@ export function AdminDashboard({
                           {i + 1}
                         </td>
                         <td className="px-4 py-2">
-                          <Link
-                            href={`/?tab=players&highlight=${row.userId}`}
-                            className="font-mono text-xs text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
-                            scroll={false}
-                          >
-                            {row.userId}
+                          <span className="font-mono text-xs">
+                            <ClickableUserId id={row.userId} />
                             {row.username != null && row.username !== "" ? (
                               <span className="text-zinc-700 dark:text-zinc-300">
                                 {" "}
@@ -392,7 +412,7 @@ export function AdminDashboard({
                             ) : (
                               <span className="text-zinc-500"> (—)</span>
                             )}
-                          </Link>
+                          </span>
                         </td>
                         <td className="px-4 py-2 text-right font-mono tabular-nums">
                           {row.totalPrizeCc.toLocaleString("en-US")}
@@ -448,7 +468,9 @@ export function AdminDashboard({
                               : "text-zinc-800 dark:text-zinc-200"
                           }
                         >
-                          <td className="px-4 py-2 font-mono text-xs">{u.id}</td>
+                          <td className="px-4 py-2 font-mono text-xs">
+                            <ClickableUserId id={u.id} />
+                          </td>
                           <td className="px-4 py-2">{u.username ?? "—"}</td>
                           <td className="px-4 py-2">{u.cc ?? "—"}</td>
                           <td className="px-4 py-2">{u.rc ?? "—"}</td>
@@ -622,8 +644,9 @@ export function AdminDashboard({
                       matchId={m.id}
                       statusLabel={statusLabel(m.status)}
                       createdAtLabel={formatTs(m.created_at)}
-                      entryFee={m.entry_fee}
-                      prizeCc={m.prize_cc}
+                      entryFeeCoins={matchEntryFeeCoinString(m.entry_fee)}
+                      entryHoldPerPlayerCoins={m.entryHoldPerPlayerCoins}
+                      prizeCcLabel={formatPrizeCcChip(m.prize_cc)}
                       winnerId={m.winner_id}
                       left={{
                         id: redId,

src/components/admin-ledger.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useMemo } from "react";
+import { ClickableUserId } from "@/components/clickable-user-id";
 import { buildDashboardHref } from "@/lib/dashboard-search-url";
 import { formatRcLabelFromCoinsBigInt } from "@/lib/coins-rc";
 import { auditMatchEconomics } from "@/lib/ledger-match-audit";
@@ -199,17 +200,7 @@ export function AdminLedger({
     const un = usernameById.get(id);
     return (
       <span className="font-mono text-xs">
-        <Link
-          href={buildDashboardHref({
-            tab: "players",
-            highlightId: String(id),
-            participantRaw,
-          })}
-          className="text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
-          scroll={false}
-        >
-          {id}
-        </Link>
+        <ClickableUserId id={id} />
         {un != null && un !== "" ? (
           <span className="text-zinc-600 dark:text-zinc-400"> ({un})</span>
         ) : null}

src/components/clickable-user-id.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { usePlayerCard } from "@/components/player-card-context";
+
+const defaultClass =
+  "cursor-pointer border-0 bg-transparent p-0 text-left font-mono text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100";
+
+type Props = {
+  id: number;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function ClickableUserId({ id, className, children }: Props) {
+  const { openPlayerCard } = usePlayerCard();
+  return (
+    <button
+      type="button"
+      className={className ?? defaultClass}
+      onClick={() => openPlayerCard(id)}
+    >
+      {children ?? id}
+    </button>
+  );
+}

src/components/match-history-battle-card.tsx

@@ -1,4 +1,8 @@
+"use client";
+
 import Link from "next/link";
+import { ClickableUserId } from "@/components/clickable-user-id";
+import { formatRcLabelFromCoinsBigInt } from "@/lib/coins-rc";
 
 type PlayerSide = {
   id: number | null;
@@ -12,14 +16,47 @@ type Props = {
   matchId: number;
   statusLabel: string;
   createdAtLabel: string;
-  entryFee: number | null;
-  prizeCc: number | null;
+  /** `matches.entry_fee` as coin string (bigint); RC shown in footer. */
+  entryFeeCoins: string | null;
+  /** Ledger `entry_hold` / player as coin string; null if unknown. */
+  entryHoldPerPlayerCoins: string | null;
+  /** Preformatted `prize_cc` for display (e.g. with grouping). */
+  prizeCcLabel: string;
   left: PlayerSide;
   right: PlayerSide;
   /** May be string when `bigint` is JSON-serialized. */
   winnerId: number | string | null;
 };
 
+function rcLabelFromCoinString(s: string | null): string {
+  if (s == null || String(s).trim() === "") return "—";
+  try {
+    return formatRcLabelFromCoinsBigInt(BigInt(String(s).trim()));
+  } catch {
+    return "—";
+  }
+}
+
+function entryTotalRcLabel(
+  feeCoins: string | null,
+  holdCoins: string | null,
+): string {
+  if (
+    feeCoins == null ||
+    holdCoins == null ||
+    String(feeCoins).trim() === "" ||
+    String(holdCoins).trim() === ""
+  ) {
+    return "—";
+  }
+  try {
+    const sum = BigInt(String(feeCoins).trim()) + BigInt(String(holdCoins).trim());
+    return formatRcLabelFromCoinsBigInt(sum);
+  } catch {
+    return "—";
+  }
+}
+
 function idsMatch(
   a: number | string | null | undefined,
   b: number | string | null | undefined,
@@ -110,7 +147,17 @@ function PlayerPanel({
             {playerLabel(side)}
           </p>
           <p className={`text-[11px] font-semibold tabular-nums ${s.score}`}>
-            ID: {side.id ?? "—"}
+            ID:{" "}
+            {side.id != null ? (
+              <ClickableUserId
+                id={side.id}
+                className="cursor-pointer border-0 bg-transparent p-0 text-[11px] font-semibold text-inherit underline decoration-white/50 underline-offset-2 hover:decoration-white"
+              >
+                {side.id}
+              </ClickableUserId>
+            ) : (
+              "—"
+            )}
           </p>
         </div>
       </div>
@@ -131,12 +178,17 @@ export function MatchHistoryBattleCard({
   matchId,
   statusLabel,
   createdAtLabel,
-  entryFee,
-  prizeCc,
+  entryFeeCoins,
+  entryHoldPerPlayerCoins,
+  prizeCcLabel,
   left,
   right,
   winnerId,
 }: Props) {
+  const entryRc = entryTotalRcLabel(entryFeeCoins, entryHoldPerPlayerCoins);
+  const entryFeeRc = rcLabelFromCoinString(entryFeeCoins);
+  const entryHoldRc = rcLabelFromCoinString(entryHoldPerPlayerCoins);
+  const prizeCcDisplay = prizeCcLabel.trim() === "" ? "—" : prizeCcLabel;
   const hasWinner =
     winnerId != null &&
     winnerId !== "" &&
@@ -181,15 +233,21 @@ export function MatchHistoryBattleCard({
       </div>
 
       <div className="mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-zinc-300/80 pt-1.5 text-xs font-medium text-zinc-700 dark:border-zinc-700 dark:text-zinc-300">
-        <div className="flex flex-wrap gap-2">
+        <div className="flex min-w-0 flex-1 flex-wrap gap-2">
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            Entry {entryFee ?? "—"}
+            Time {createdAtLabel}
           </span>
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            Prize {prizeCc ?? "—"} CC
+            Entry {entryRc}
           </span>
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            {createdAtLabel}
+            Entry hold {entryHoldRc}
+          </span>
+          <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
+            Prize {prizeCcDisplay} CC
+          </span>
+          <span className="rounded-md border border-emerald-200/90 bg-emerald-50 px-2 py-1 text-[11px] font-medium text-emerald-600 dark:border-emerald-300/35 dark:bg-emerald-400/15 dark:text-emerald-200">
+            Entry fee {entryFeeRc}
           </span>
         </div>
         <Link

src/components/player-card-context.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+type Ctx = {
+  openPlayerCard: (userId: number) => void;
+  closePlayerCard: () => void;
+  cardUserId: number | null;
+};
+
+const PlayerCardContext = createContext<Ctx | null>(null);
+
+export function PlayerCardProvider({ children }: { children: ReactNode }) {
+  const [cardUserId, setCardUserId] = useState<number | null>(null);
+
+  const openPlayerCard = useCallback((userId: number) => {
+    if (!Number.isFinite(userId) || userId < 1) return;
+    setCardUserId(Math.trunc(userId));
+  }, []);
+
+  const closePlayerCard = useCallback(() => {
+    setCardUserId(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      openPlayerCard,
+      closePlayerCard,
+      cardUserId,
+    }),
+    [openPlayerCard, closePlayerCard, cardUserId],
+  );
+
+  return (
+    <PlayerCardContext.Provider value={value}>
+      {children}
+    </PlayerCardContext.Provider>
+  );
+}
+
+export function usePlayerCard(): Ctx {
+  const ctx = useContext(PlayerCardContext);
+  if (!ctx) {
+    throw new Error("usePlayerCard must be used within PlayerCardProvider");
+  }
+  return ctx;
+}

src/components/player-card-modal.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type MouseEvent,
+} from "react";
+import Link from "next/link";
+import { loadPlayerCardAction } from "@/app/actions/load-player-card";
+import type {
+  PlayerCardData,
+  PlayerCardMatchHistoryRow,
+} from "@/lib/player-card-server";
+import {
+  formatRcLabelFromCoinsBigInt,
+  rcToCoins,
+} from "@/lib/coins-rc";
+import { usePlayerCard } from "@/components/player-card-context";
+
+function formatTsUtc(value: string | null): string {
+  if (!value) return "—";
+  try {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return value;
+    return d.toISOString().replace("T", " ").slice(0, 19) + " UTC";
+  } catch {
+    return value;
+  }
+}
+
+function rcFromStr(s: string): bigint {
+  try {
+    return BigInt(s);
+  } catch {
+    return BigInt(0);
+  }
+}
+
+function formatCcBalance(cc: number | null): string {
+  if (cc == null || !Number.isFinite(cc)) return "—";
+  return cc.toLocaleString("en-US");
+}
+
+/** `users.rc` is stored as display RC; show ledger-style RC plus coin units in brackets. */
+function formatRcBalanceWithCoins(rc: number | null): string {
+  if (rc == null || !Number.isFinite(rc)) return "—";
+  const coins = rcToCoins(rc);
+  if (coins != null) {
+    const rcLabel = formatRcLabelFromCoinsBigInt(BigInt(coins));
+    return `${rcLabel} (${coins.toLocaleString("en-US")})`;
+  }
+  return `${rc.toFixed(1)} RC`;
+}
+
+function outcomeClass(outcome: PlayerCardMatchHistoryRow["outcomeLabel"]): string {
+  if (outcome === "Win") {
+    return "font-semibold text-emerald-700 dark:text-emerald-400";
+  }
+  if (outcome === "Loss") {
+    return "font-semibold text-rose-700 dark:text-rose-400";
+  }
+  return "font-medium text-zinc-500 dark:text-zinc-400";
+}
+
+function opponentLine(m: PlayerCardMatchHistoryRow): string {
+  if (m.opponentId == null) return "Open slot";
+  const name =
+    m.opponentUsername != null && m.opponentUsername.trim() !== ""
+      ? m.opponentUsername.trim()
+      : "—";
+  return `${name} (${m.opponentId})`;
+}
+
+type LoadState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "error"; message: string }
+  | { status: "ok"; data: PlayerCardData };
+
+export function PlayerCardModal() {
+  const { cardUserId, closePlayerCard } = usePlayerCard();
+  const [load, setLoad] = useState<LoadState>({ status: "idle" });
+
+  useEffect(() => {
+    if (cardUserId == null) {
+      setLoad({ status: "idle" });
+      return;
+    }
+    let cancelled = false;
+    setLoad({ status: "loading" });
+    void (async () => {
+      const res = await loadPlayerCardAction(cardUserId);
+      if (cancelled) return;
+      if (res.ok) {
+        setLoad({ status: "ok", data: res.data });
+      } else {
+        setLoad({ status: "error", message: res.error });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [cardUserId]);
+
+  const onBackdrop = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) closePlayerCard();
+    },
+    [closePlayerCard],
+  );
+
+  useEffect(() => {
+    if (cardUserId == null) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closePlayerCard();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [cardUserId, closePlayerCard]);
+
+  if (cardUserId == null) return null;
+
+  const hold = load.status === "ok" ? rcFromStr(load.data.rcSpentHoldCoins) : BigInt(0);
+  const fee = load.status === "ok" ? rcFromStr(load.data.rcSpentFeeCoins) : BigInt(0);
+  const spentEntry = hold + fee;
+
+  return (
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/40 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="player-card-title"
+      onMouseDown={onBackdrop}
+    >
+      <div
+        className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-y-auto rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="shrink-0 border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <h2
+                id="player-card-title"
+                className="truncate text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50"
+              >
+                {load.status === "ok"
+                  ? load.data.username?.trim()
+                    ? load.data.username
+                    : `Player ${load.data.id}`
+                  : `Player ${cardUserId}`}
+              </h2>
+              <p className="mt-1 font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                ID {cardUserId}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={closePlayerCard}
+              className="shrink-0 rounded-lg border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-800 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-800"
+            >
+              Close
+            </button>
+          </div>
+          {load.status === "ok" ? (
+            <div className="mt-3 grid gap-1 text-sm text-zinc-600 dark:text-zinc-400">
+              <div className="flex flex-wrap justify-between gap-x-4 gap-y-0.5">
+                <span>Account created</span>
+                <span className="font-mono text-zinc-800 dark:text-zinc-200">
+                  {formatTsUtc(load.data.createdAt)}
+                </span>
+              </div>
+              <div className="flex flex-wrap justify-between gap-x-4 gap-y-0.5">
+                <span>Last seen</span>
+                <span className="font-mono text-zinc-800 dark:text-zinc-200">
+                  {formatTsUtc(load.data.lastSeen)}
+                </span>
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="min-h-0 shrink-0 overflow-y-auto px-5 py-4">
+          {load.status === "loading" ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">Loading…</p>
+          ) : load.status === "error" ? (
+            <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+              {load.message}
+            </p>
+          ) : load.status === "ok" ? (
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 gap-2 sm:gap-3">
+                <Stat
+                  label="Matches played"
+                  value={String(load.data.matchesPlayed)}
+                />
+                <Stat
+                  label="Matches won"
+                  value={String(load.data.matchesWon)}
+                />
+                <Stat
+                  label="Win rate"
+                  value={
+                    load.data.winRatePercent == null
+                      ? "—"
+                      : `${load.data.winRatePercent.toLocaleString("en-US", {
+                          maximumFractionDigits: 1,
+                          minimumFractionDigits: 0,
+                        })}%`
+                  }
+                />
+              </div>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <Stat
+                  label="RC balance"
+                  value={formatRcBalanceWithCoins(load.data.rcBalance)}
+                />
+                <Stat
+                  label="CC balance"
+                  value={formatCcBalance(load.data.ccBalance)}
+                />
+                <Stat
+                  label="RC purchased"
+                  value={formatRcLabelFromCoinsBigInt(
+                    rcFromStr(load.data.rcPurchasedCoins),
+                  )}
+                />
+                <Stat
+                  label="RC won (reward)"
+                  value={formatRcLabelFromCoinsBigInt(
+                    rcFromStr(load.data.rcRewardCoins),
+                  )}
+                />
+                <Stat
+                  label="RC spent (entry_hold + entry_fee)"
+                  value={formatRcLabelFromCoinsBigInt(spentEntry)}
+                />
+                <Stat
+                  label="RC spent on fees (entry_fee)"
+                  value={formatRcLabelFromCoinsBigInt(
+                    rcFromStr(load.data.rcSpentFeeCoins),
+                  )}
+                />
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        {load.status === "ok" ? (
+          <section
+            className="shrink-0 border-t border-zinc-200 bg-zinc-50/30 px-5 pb-4 pt-3 dark:border-zinc-700 dark:bg-zinc-950/20"
+            aria-label="Match history"
+          >
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+              Match history
+              {load.data.matchesPlayed > load.data.matchHistory.length ? (
+                <span className="ml-1.5 font-normal normal-case text-zinc-400 dark:text-zinc-500">
+                  (latest {load.data.matchHistory.length} of{" "}
+                  {load.data.matchesPlayed})
+                </span>
+              ) : null}
+            </h3>
+            <div className="mt-2 max-h-60 overflow-y-auto rounded-lg border border-zinc-200 bg-white sm:max-h-72 dark:border-zinc-700 dark:bg-zinc-900/80">
+              {load.data.matchHistory.length === 0 ? (
+                <p className="px-3 py-6 text-center text-sm text-zinc-500 dark:text-zinc-400">
+                  No matches yet.
+                </p>
+              ) : (
+                <ul className="divide-y divide-zinc-100 dark:divide-zinc-800">
+                  {load.data.matchHistory.map((m) => (
+                    <li key={m.matchId}>
+                      <div className="flex flex-col gap-1 px-3 py-2.5">
+                        <div className="flex flex-wrap items-baseline justify-between gap-2">
+                          <span className="min-w-0 text-xs text-zinc-800 dark:text-zinc-200">
+                            <Link
+                              href={`/match-logs/${m.matchId}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="font-mono font-semibold text-sky-700 underline decoration-sky-400/50 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
+                            >
+                              M{m.matchId}
+                            </Link>
+                            <span className="text-zinc-500 dark:text-zinc-400">
+                              {" "}
+                              · {formatTsUtc(m.createdAt)}
+                            </span>
+                          </span>
+                          <span
+                            className={`shrink-0 text-xs tabular-nums ${outcomeClass(m.outcomeLabel)}`}
+                          >
+                            {m.outcomeLabel}
+                          </span>
+                        </div>
+                        <p className="text-[11px] leading-snug text-zinc-600 dark:text-zinc-400">
+                          <span className="font-medium text-zinc-700 dark:text-zinc-300">
+                            {m.sideLabel}
+                          </span>
+                          {" · "}
+                          vs {opponentLine(m)}
+                          {" · "}
+                          Entry{" "}
+                          {formatRcLabelFromCoinsBigInt(
+                            rcFromStr(m.entryTotalCoins),
+                          )}
+                          {" · "}
+                          Entry fee{" "}
+                          {formatRcLabelFromCoinsBigInt(
+                            rcFromStr(m.entryFeeCoins),
+                          )}
+                        </p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-lg border border-zinc-100 bg-zinc-50/80 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950/50">
+      <p className="text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+        {label}
+      </p>
+      <p className="mt-0.5 font-mono text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-50">
+        {value}
+      </p>
+    </div>
+  );
+}

src/components/player-card-root.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { PlayerCardProvider } from "@/components/player-card-context";
+import { PlayerCardModal } from "@/components/player-card-modal";
+
+export function PlayerCardRoot({ children }: { children: React.ReactNode }) {
+  return (
+    <PlayerCardProvider>
+      {children}
+      <PlayerCardModal />
+    </PlayerCardProvider>
+  );
+}