From fa0e798db7b442b4ca964e2a8cf98cbb108070ec Mon Sep 17 00:00:00 2001 From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com> Date: Thu, 19 Mar 2026 19:25:37 -0700 Subject: [PATCH] Add "Games to Score" widget to admin dashboard (#183) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add "Games to Score" widget to admin dashboard Shows scoring events for today and tomorrow in a tabbed card, with status badges (Pending/Scored), a scored/total progress counter, and direct "Score" / "View" links to each event's results page. Excludes non-scoring schedule_event types so only actionable events surface. - app/models/scoring-event.ts: add getEventsForDates() model function that queries scoringEvents joined with sportsSeasons/sport for a given list of date strings - app/routes/admin._index.tsx: call getEventsForDates([today, tomorrow]) in the loader and render the GamesToScore component below the stats row - app/models/__tests__/scoring-event-dashboard.test.ts: 8 unit tests covering empty input, shape mapping, multi-date filtering, completed events, and the inArray where conditions https://claude.ai/code/session_014zKK15o5RJfTaodLvnZpF5 * Fix getEventsForDates to include bracket events by game scheduledAt The previous implementation only matched on scoringEvents.eventDate, which is often null for bracket events where individual game times are set on playoffMatchGames.scheduledAt instead. Switched to a two-step query mirroring getUpcomingEventsForDraftedParticipants: 1. selectDistinct event IDs via left joins through playoffMatches → playoffMatchGames, matching where eventDate IN dates OR any game's scheduledAt falls within the date range's timestamp bounds 2. findMany on the matched IDs with sportsSeason + sport relations Updated tests to cover the two-step flow, leftJoin usage, and the scheduledAt timestamp bounds appearing in the where clause. https://claude.ai/code/session_014zKK15o5RJfTaodLvnZpF5 * Document dual game date storage in CLAUDE.md scoringEvents.eventDate and playoffMatchGames.scheduledAt both hold game dates depending on the event type. Added a dedicated section under Important Patterns explaining when each is used and the two-step selectDistinct + findMany pattern required for correct date queries. https://claude.ai/code/session_014zKK15o5RJfTaodLvnZpF5 --------- Co-authored-by: Claude --- CLAUDE.md | 14 + .../__tests__/scoring-event-dashboard.test.ts | 259 ++++++++++++++++++ app/models/scoring-event.ts | 105 +++++++ app/routes/admin._index.tsx | 230 +++++++++++++++- 4 files changed, 605 insertions(+), 3 deletions(-) create mode 100644 app/models/__tests__/scoring-event-dashboard.test.ts diff --git a/CLAUDE.md b/CLAUDE.md index dcbc641..1af74cc 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -147,6 +147,20 @@ const league = await db.query.leagues.findFirst({...}); - Check `clerkId` for ownership validation - Admin checks via `isAdmin` boolean on users table +### Scoring Event Dates + +Game/event dates are stored in **two different places** depending on the event type, and any date-based query must account for both: + +1. **`scoringEvents.eventDate`** (`date` column, `YYYY-MM-DD` string) — set directly on the event. Used for non-bracket events (majors, final standings) and sometimes for bracket events when the admin sets a single date for the whole round. + +2. **`playoffMatchGames.scheduledAt`** (`timestamp` column) — set on individual games within a bracket match. Bracket events (e.g. a playoff series) often have `eventDate = null` on the scoring event itself, with each game's exact time stored here instead. + +**Pattern for date-range queries:** Use a two-step approach: +1. `selectDistinct` event IDs via left joins through `playoffMatches → playoffMatchGames`, filtering with `eventDate IN [dates] OR (scheduledAt >= dayStart AND scheduledAt <= dayEnd)` +2. `findMany` on the matched IDs to load full event data with relations + +See `getEventsForDates` and `getUpcomingEventsForDraftedParticipants` in `app/models/scoring-event.ts` for the reference implementation. All timestamp bounds use UTC (`T00:00:00.000Z` / `T23:59:59.999Z`). + ### Draft Logic The draft system implements snake draft: diff --git a/app/models/__tests__/scoring-event-dashboard.test.ts b/app/models/__tests__/scoring-event-dashboard.test.ts new file mode 100644 index 0000000..7097b29 --- /dev/null +++ b/app/models/__tests__/scoring-event-dashboard.test.ts @@ -0,0 +1,259 @@ +/** + * Tests for getEventsForDates — the admin dashboard "Games to Score" query. + */ +import { describe, it, expect, vi, beforeEach } from "vitest"; + +// ── DB mock ────────────────────────────────────────────────────────────────── +// selectDistinct returns a fluent chain; findMany is used in step 2. +const mockFindMany = vi.fn(); +const mockSelectChainBase = { + from: vi.fn(), + leftJoin: vi.fn(), + where: vi.fn(), +}; + +function makeSelectChain(rows: { id: string }[]) { + const chain = { + from: vi.fn().mockReturnThis(), + leftJoin: vi.fn().mockReturnThis(), + where: vi.fn().mockResolvedValue(rows), + }; + return chain; +} + +const mockSelectDistinct = vi.fn(); + +const mockDb = { + query: { + scoringEvents: { findMany: mockFindMany }, + }, + selectDistinct: mockSelectDistinct, +}; + +vi.mock("~/database/context", () => ({ + database: () => mockDb, +})); + +vi.mock("~/database/schema", () => ({ + scoringEvents: { + id: "se.id", + eventDate: "se.event_date", + eventType: "se.event_type", + eventStartsAt: "se.event_starts_at", + createdAt: "se.created_at", + }, + playoffMatches: { + scoringEventId: "pm.scoring_event_id", + id: "pm.id", + }, + playoffMatchGames: { + playoffMatchId: "pmg.playoff_match_id", + scheduledAt: "pmg.scheduled_at", + }, +})); + +vi.mock("drizzle-orm", () => ({ + eq: (col: unknown, val: unknown) => ({ type: "eq", col, val }), + and: (...args: unknown[]) => ({ type: "and", args }), + asc: (col: unknown) => ({ type: "asc", col }), + desc: (col: unknown) => ({ type: "desc", col }), + gte: (col: unknown, val: unknown) => ({ type: "gte", col, val }), + lte: (col: unknown, val: unknown) => ({ type: "lte", col, val }), + or: (...args: unknown[]) => ({ type: "or", args }), + inArray: (col: unknown, arr: unknown) => ({ type: "inArray", col, arr }), + isNotNull: (col: unknown) => ({ type: "isNotNull", col }), +})); + +import { getEventsForDates } from "../scoring-event"; + +// ── Helpers ────────────────────────────────────────────────────────────────── + +function makeEventRow(overrides: Partial<{ + id: string; + name: string; + eventDate: string | null; + eventStartsAt: Date | null; + eventType: string; + isComplete: boolean; + completedAt: Date | null; + sportsSeasonId: string; + sportsSeason: { name: string; sport: { name: string; slug: string | null } }; +}> = {}) { + return { + id: overrides.id ?? "event-1", + name: overrides.name ?? "Test Event", + eventDate: overrides.eventDate ?? "2026-03-20", + eventStartsAt: overrides.eventStartsAt ?? null, + eventType: overrides.eventType ?? "playoff_game", + isComplete: overrides.isComplete ?? false, + completedAt: overrides.completedAt ?? null, + sportsSeasonId: overrides.sportsSeasonId ?? "season-1", + sportsSeason: overrides.sportsSeason ?? { + name: "2026 NFL Playoffs", + sport: { name: "NFL", slug: "nfl" }, + }, + }; +} + +// ── Tests ───────────────────────────────────────────────────────────────────── + +describe("getEventsForDates", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockSelectDistinct.mockReturnValue(makeSelectChain([])); + }); + + it("returns empty array and skips DB when no dates given", async () => { + const result = await getEventsForDates([]); + expect(result).toEqual([]); + expect(mockSelectDistinct).not.toHaveBeenCalled(); + expect(mockFindMany).not.toHaveBeenCalled(); + }); + + it("returns empty array when selectDistinct finds no matching event IDs", async () => { + mockSelectDistinct.mockReturnValue(makeSelectChain([])); + + const result = await getEventsForDates(["2026-03-20"]); + + expect(result).toEqual([]); + expect(mockFindMany).not.toHaveBeenCalled(); + }); + + it("maps database rows to DashboardScoringEvent shape", async () => { + mockSelectDistinct.mockReturnValue(makeSelectChain([{ id: "e1" }])); + mockFindMany.mockResolvedValueOnce([ + makeEventRow({ + id: "e1", + name: "Conference Finals", + eventDate: "2026-03-20", + eventType: "playoff_game", + isComplete: false, + sportsSeasonId: "ss-1", + sportsSeason: { + name: "2026 NBA Playoffs", + sport: { name: "NBA", slug: "nba" }, + }, + }), + ]); + + const result = await getEventsForDates(["2026-03-20"]); + + expect(result).toHaveLength(1); + expect(result[0]).toMatchObject({ + id: "e1", + name: "Conference Finals", + eventDate: "2026-03-20", + eventType: "playoff_game", + isComplete: false, + sportsSeasonId: "ss-1", + sportsSeasonName: "2026 NBA Playoffs", + sportName: "NBA", + sportSlug: "nba", + }); + }); + + it("returns events for multiple dates", async () => { + mockSelectDistinct.mockReturnValue( + makeSelectChain([{ id: "e1" }, { id: "e2" }]) + ); + mockFindMany.mockResolvedValueOnce([ + makeEventRow({ id: "e1", eventDate: "2026-03-20" }), + makeEventRow({ id: "e2", eventDate: "2026-03-21" }), + ]); + + const result = await getEventsForDates(["2026-03-20", "2026-03-21"]); + + expect(result).toHaveLength(2); + expect(result.map((e) => e.id)).toEqual(["e1", "e2"]); + }); + + it("includes completed events with isComplete: true", async () => { + mockSelectDistinct.mockReturnValue(makeSelectChain([{ id: "e-done" }])); + mockFindMany.mockResolvedValueOnce([ + makeEventRow({ + id: "e-done", + isComplete: true, + completedAt: new Date("2026-03-20T18:00:00Z"), + }), + ]); + + const result = await getEventsForDates(["2026-03-20"]); + + expect(result[0].isComplete).toBe(true); + expect(result[0].completedAt).toBeInstanceOf(Date); + }); + + it("includes eventStartsAt when present", async () => { + const starts = new Date("2026-03-20T19:30:00Z"); + mockSelectDistinct.mockReturnValue(makeSelectChain([{ id: "e1" }])); + mockFindMany.mockResolvedValueOnce([ + makeEventRow({ id: "e1", eventStartsAt: starts }), + ]); + + const result = await getEventsForDates(["2026-03-20"]); + + expect(result[0].eventStartsAt).toEqual(starts); + }); + + it("uses two DB calls: selectDistinct then findMany", async () => { + mockSelectDistinct.mockReturnValue(makeSelectChain([{ id: "e1" }])); + mockFindMany.mockResolvedValueOnce([makeEventRow({ id: "e1" })]); + + await getEventsForDates(["2026-03-20"]); + + expect(mockSelectDistinct).toHaveBeenCalledOnce(); + expect(mockFindMany).toHaveBeenCalledOnce(); + }); + + it("passes event IDs from step 1 into findMany in step 2", async () => { + mockSelectDistinct.mockReturnValue( + makeSelectChain([{ id: "abc" }, { id: "def" }]) + ); + mockFindMany.mockResolvedValueOnce([]); + + await getEventsForDates(["2026-03-20"]); + + const findManyArgs = mockFindMany.mock.calls[0][0]; + const whereStr = JSON.stringify(findManyArgs.where); + expect(whereStr).toContain("abc"); + expect(whereStr).toContain("def"); + }); + + it("uses leftJoin so bracket events without playoffMatchGames still qualify via eventDate", async () => { + const chain = makeSelectChain([]); + mockSelectDistinct.mockReturnValue(chain); + + await getEventsForDates(["2026-03-20"]); + + expect(chain.leftJoin).toHaveBeenCalled(); + }); + + it("includes both eventDate and scheduledAt timestamp bounds in the where clause", async () => { + const chain = makeSelectChain([]); + mockSelectDistinct.mockReturnValue(chain); + + await getEventsForDates(["2026-03-20", "2026-03-21"]); + + // The where clause is the first (and only) arg to chain.where + const whereArg = JSON.stringify((chain.where as ReturnType).mock.calls[0][0]); + // eventDate inArray check + expect(whereArg).toContain("2026-03-20"); + expect(whereArg).toContain("2026-03-21"); + // timestamp bounds for scheduledAt + expect(whereArg).toContain("T00:00:00.000Z"); + expect(whereArg).toContain("T23:59:59.999Z"); + }); + + it("excludes schedule_event type via the where clause", async () => { + const chain = makeSelectChain([]); + mockSelectDistinct.mockReturnValue(chain); + + await getEventsForDates(["2026-03-20"]); + + const whereArg = JSON.stringify((chain.where as ReturnType).mock.calls[0][0]); + expect(whereArg).toContain("playoff_game"); + expect(whereArg).toContain("major_tournament"); + expect(whereArg).toContain("final_standings"); + expect(whereArg).not.toContain("schedule_event"); + }); +}); diff --git a/app/models/scoring-event.ts b/app/models/scoring-event.ts index 78b8a04..8ca14cb 100644 --- a/app/models/scoring-event.ts +++ b/app/models/scoring-event.ts @@ -544,6 +544,111 @@ export async function getUpcomingEventsForDraftedParticipants( return Array.from(eventMap.values()); } +export interface DashboardScoringEvent { + id: string; + name: string; + eventDate: string | null; + eventStartsAt: Date | null; + eventType: string; + isComplete: boolean; + completedAt: Date | null; + sportsSeasonId: string; + sportsSeasonName: string; + sportName: string; + sportSlug: string | null; +} + +/** + * Get all scoring events (excluding schedule_event type) for the given dates, + * joined with their sports season and sport info. Used for the admin dashboard + * "Games to Score" widget. + * + * An event is included if EITHER its own eventDate falls on one of the given + * dates, OR any of its playoffMatchGames has a scheduledAt timestamp on one of + * those dates. This ensures bracket events where the admin set dates on + * individual games (rather than the event itself) are still surfaced. + */ +export async function getEventsForDates( + dates: string[], + providedDb?: ReturnType +): Promise { + if (dates.length === 0) return []; + + const db = providedDb || database(); + + // Build timestamp bounds covering the full span of the requested dates so we + // can range-check the playoffMatchGames.scheduledAt timestamp column. + const sortedDates = [...dates].sort(); + const dateFromTimestamp = new Date(sortedDates[0] + "T00:00:00.000Z"); + const dateToTimestamp = new Date(sortedDates[sortedDates.length - 1] + "T23:59:59.999Z"); + + // Step 1: collect distinct event IDs where the event date OR any game's + // scheduledAt falls within the requested dates. + const rows = await db + .selectDistinct({ id: schema.scoringEvents.id }) + .from(schema.scoringEvents) + .leftJoin( + schema.playoffMatches, + eq(schema.playoffMatches.scoringEventId, schema.scoringEvents.id) + ) + .leftJoin( + schema.playoffMatchGames, + eq(schema.playoffMatchGames.playoffMatchId, schema.playoffMatches.id) + ) + .where( + and( + inArray(schema.scoringEvents.eventType, [ + "playoff_game", + "major_tournament", + "final_standings", + ]), + or( + inArray(schema.scoringEvents.eventDate, dates), + and( + isNotNull(schema.playoffMatchGames.scheduledAt), + gte(schema.playoffMatchGames.scheduledAt, dateFromTimestamp), + lte(schema.playoffMatchGames.scheduledAt, dateToTimestamp) + ) + ) + ) + ); + + if (rows.length === 0) return []; + + const eventIds = rows.map((r) => r.id); + + // Step 2: fetch the matched events with sport season + sport info. + const events = await db.query.scoringEvents.findMany({ + where: inArray(schema.scoringEvents.id, eventIds), + orderBy: [ + asc(schema.scoringEvents.eventDate), + asc(schema.scoringEvents.eventStartsAt), + asc(schema.scoringEvents.createdAt), + ], + with: { + sportsSeason: { + with: { + sport: true, + }, + }, + }, + }); + + return events.map((e) => ({ + id: e.id, + name: e.name, + eventDate: e.eventDate, + eventStartsAt: e.eventStartsAt, + eventType: e.eventType, + isComplete: e.isComplete, + completedAt: e.completedAt, + sportsSeasonId: e.sportsSeasonId, + sportsSeasonName: e.sportsSeason.name, + sportName: e.sportsSeason.sport.name, + sportSlug: e.sportsSeason.sport.slug, + })); +} + /** * Bulk create scoring events for a sports season. * Returns created events in order. diff --git a/app/routes/admin._index.tsx b/app/routes/admin._index.tsx index 776cf70..001f2b9 100644 --- a/app/routes/admin._index.tsx +++ b/app/routes/admin._index.tsx @@ -1,9 +1,11 @@ import { Link } from "react-router"; +import { useState } from "react"; import type { Route } from "./+types/admin._index"; import { findAllSports } from "~/models/sport"; import { findAllSportsSeasons } from "~/models/sports-season"; import { findAllSeasonTemplates } from "~/models/season-template"; +import { getEventsForDates } from "~/models/scoring-event"; import { Card, CardContent, @@ -12,17 +14,29 @@ import { CardTitle, } from "~/components/ui/card"; import { Button } from "~/components/ui/button"; -import { Trophy, Calendar, FolderKanban, ArrowRight, Camera } from "lucide-react"; +import { Badge } from "~/components/ui/badge"; +import { Trophy, Calendar, FolderKanban, ArrowRight, CheckCircle2, Clock, ExternalLink } from "lucide-react"; export function meta(): Route.MetaDescriptors { return [{ title: "Admin - Brackt" }]; } +function getTodayAndTomorrowDates() { + const today = new Date(); + const tomorrow = new Date(today); + tomorrow.setDate(today.getDate() + 1); + const toDateStr = (d: Date) => d.toISOString().split("T")[0]; + return { today: toDateStr(today), tomorrow: toDateStr(tomorrow) }; +} + export async function loader() { - const [sports, sportsSeasons, templates] = await Promise.all([ + const { today, tomorrow } = getTodayAndTomorrowDates(); + + const [sports, sportsSeasons, templates, upcomingEvents] = await Promise.all([ findAllSports(), findAllSportsSeasons(), findAllSeasonTemplates(), + getEventsForDates([today, tomorrow]), ]); return { @@ -31,11 +45,216 @@ export async function loader() { sportsSeasonsCount: sportsSeasons.length, templatesCount: templates.length, }, + upcomingEvents, + today, + tomorrow, }; } +function formatEventTime(eventStartsAt: string | null): string | null { + if (!eventStartsAt) return null; + const d = new Date(eventStartsAt); + return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); +} + +function getEventTypeLabel(eventType: string): string { + switch (eventType) { + case "playoff_game": return "Bracket"; + case "major_tournament": return "Tournament"; + case "final_standings": return "Final Standings"; + default: return eventType; + } +} + +type DashboardEvent = { + id: string; + name: string; + eventDate: string | null; + eventStartsAt: string | null; + eventType: string; + isComplete: boolean; + completedAt: string | null; + sportsSeasonId: string; + sportsSeasonName: string; + sportName: string; + sportSlug: string | null; +}; + +function GamesToScore({ + events, + today, + tomorrow, +}: { + events: DashboardEvent[]; + today: string; + tomorrow: string; +}) { + const [activeTab, setActiveTab] = useState<"today" | "tomorrow">("today"); + + const todayEvents = events.filter((e) => e.eventDate === today); + const tomorrowEvents = events.filter((e) => e.eventDate === tomorrow); + const displayEvents = activeTab === "today" ? todayEvents : tomorrowEvents; + + const scored = displayEvents.filter((e) => e.isComplete).length; + const total = displayEvents.length; + const pending = total - scored; + + return ( + + +
+
+ Games to Score + Scoring events that need your attention +
+ {total > 0 && ( +
+
+ {scored}/{total} +
+

scored

+
+ )} +
+ + {/* Tab selector */} +
+ + +
+ + + + {displayEvents.length === 0 ? ( +
+ No scoring events scheduled for {activeTab === "today" ? "today" : "tomorrow"}. +
+ ) : ( + <> + {pending > 0 && ( +
+ + {pending} event{pending !== 1 ? "s" : ""} still need{pending === 1 ? "s" : ""} scoring +
+ )} + {pending === 0 && total > 0 && ( +
+ + All events scored for {activeTab === "today" ? "today" : "tomorrow"}! +
+ )} + +
+ {displayEvents.map((event) => ( +
+
+
+ {event.name} + + {getEventTypeLabel(event.eventType)} + +
+
+ {event.sportName} + · + {event.sportsSeasonName} + {event.eventStartsAt && ( + <> + · + {formatEventTime(event.eventStartsAt)} + + )} +
+
+ +
+ {event.isComplete ? ( + + + Scored + + ) : ( + + Pending + + )} + +
+
+ ))} +
+ + )} + + + ); +} + export default function AdminDashboard({ loaderData }: Route.ComponentProps) { - const { stats } = loaderData; + const { stats, upcomingEvents, today, tomorrow } = loaderData; + + // Serialize dates to strings for the client component + const serializedEvents: DashboardEvent[] = upcomingEvents.map((e) => ({ + ...e, + eventStartsAt: e.eventStartsAt ? new Date(e.eventStartsAt).toISOString() : null, + completedAt: e.completedAt ? new Date(e.completedAt).toISOString() : null, + })); return (
@@ -89,6 +308,11 @@ export default function AdminDashboard({ loaderData }: Route.ComponentProps) {
+ {/* Games to Score widget — full width */} +
+ +
+