9480501932
All checks were successful
🚀 Deploy / 🧪 Test (pull_request) Successful in 3m12s
🚀 Deploy / ʦ🔍 Typecheck & Lint (pull_request) Successful in 1m24s
🚀 Deploy / 🐳 Build (pull_request) Has been skipped
🚀 Deploy / 🚀 Deploy (pull_request) Has been skipped
🚀 Deploy / 🧪 Test (push) Successful in 3m27s
🚀 Deploy / ʦ🔍 Typecheck & Lint (push) Successful in 1m25s
🚀 Deploy / 🐳 Build (push) Successful in 1m14s
🚀 Deploy / 🚀 Deploy (push) Successful in 14s
Make a "major" (golf/tennis/CS2) scored once on its canonical tournament and fan out to every linked sports_season window and league. Fan-out & completion (app/services/sync-tournament-results.ts): - syncTournamentResults now marks each synced window's event complete (gated by markComplete), recalculates affected leagues, and counts recalc failures so a stale league can't hide behind a "completed" badge - syncMajorFromPrimaryEvent promotes a primary window's derived results to canonical tournament_results (deleting rows for dropped placements) and fans out to siblings; fanOutMajorIfPrimary guards on the primary - placement removals now propagate (stale rows reset to filler) Primary-event model (scoring_events.is_primary, migration 0122): - getPrimaryEventForTournament / isReadOnlySibling / ensurePrimaryEvent / setPrimaryEvent; event creation auto-seeds a primary for bracket majors; "Make primary" button on the tournament page - per-window event/bracket/cs2 pages are read-only for non-primary linked events (not-participating stays editable) Tennis Grand Slam bracket (tennis_128 template + TEMPLATE_ROUND_CONFIG): - bracket-scored qualifying major via the existing bracket pipeline - simulator conditions in-progress EV on the real bracket (honoring completed matches, walkover for withdrawals), QP derived from config, round structure read from the template; CS2 + tennis share resolveStructureSource Backfill (scripts/backfill-major-linking.ts): one-time idempotent reconcile of existing majors (link orphans, designate primary, promote canonical, sync). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
869 lines
38 KiB
TypeScript
869 lines
38 KiB
TypeScript
import { Form, Link } from "react-router";
|
||
import type { Route } from "./+types/admin.sports-seasons.$id.events.$eventId";
|
||
|
||
import { loader, action } from "./admin.sports-seasons.$id.events.$eventId.server";
|
||
import { Button } from "~/components/ui/button";
|
||
import { Input } from "~/components/ui/input";
|
||
import { Label } from "~/components/ui/label";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "~/components/ui/card";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "~/components/ui/select";
|
||
import { Badge } from "~/components/ui/badge";
|
||
import { ArrowLeft, Trophy, CheckCircle2, Pencil, Trash2, Brackets, Save } from "lucide-react";
|
||
import { getEventTypeLabel } from "~/models/scoring-event";
|
||
import { isBracketMajor } from "~/lib/event-utils";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "~/components/ui/table";
|
||
import { useState, useEffect } from "react";
|
||
import { format } from "date-fns";
|
||
import { localDateTimeToUtcIso } from "~/lib/date-utils";
|
||
import { BatchResultEntry } from "~/components/BatchResultEntry";
|
||
|
||
export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
|
||
return [{ title: `${data?.event?.name ?? "Event"} — ${data?.sportsSeason?.name ?? "Sports Season"} - Brackt Admin` }];
|
||
}
|
||
|
||
export { loader, action };
|
||
|
||
function EditEventCard({ event }: { event: { name: string; eventDate?: string | null; eventStartsAt?: Date | string | null } }) {
|
||
// Keep the UTC ISO value for the hidden field (safe for SSR)
|
||
const [eventStartsAtUtc, setEventStartsAtUtc] = useState(
|
||
event.eventStartsAt ? new Date(event.eventStartsAt).toISOString() : ""
|
||
);
|
||
// Compute the display value client-side only — format() uses the runtime timezone,
|
||
// so running it on the server would pre-fill the wrong time for non-UTC admins.
|
||
const [displayValue, setDisplayValue] = useState("");
|
||
useEffect(() => {
|
||
if (event.eventStartsAt) {
|
||
setDisplayValue(format(new Date(event.eventStartsAt), "yyyy-MM-dd'T'HH:mm"));
|
||
}
|
||
}, [event.eventStartsAt]);
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Edit Event</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Form method="post" className="space-y-4">
|
||
<input type="hidden" name="intent" value="update-event" />
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">Name</Label>
|
||
<Input id="name" name="name" defaultValue={event.name} required />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="eventStartsAtLocal">Event Date & Time (Optional)</Label>
|
||
<Input
|
||
id="eventStartsAtLocal"
|
||
type="datetime-local"
|
||
value={displayValue}
|
||
onChange={(e) => {
|
||
setDisplayValue(e.target.value);
|
||
setEventStartsAtUtc(localDateTimeToUtcIso(e.target.value) ?? "");
|
||
}}
|
||
/>
|
||
<input type="hidden" name="eventStartsAt" value={eventStartsAtUtc} />
|
||
</div>
|
||
<Button type="submit" variant="outline">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
Save Changes
|
||
</Button>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
export default function EventResults({
|
||
loaderData,
|
||
actionData,
|
||
}: Route.ComponentProps) {
|
||
const { sportsSeason, event, participants, results, participantResults, seasonResults, notParticipatingIds, isReadOnlySibling, canonicalTournamentId } = loaderData;
|
||
const [hasChanges, setHasChanges] = useState(false);
|
||
|
||
// Banner shown on read-only sibling events: scoring lives on the canonical
|
||
// tournament page, and results fan out here automatically.
|
||
const readOnlySiblingBanner = isReadOnlySibling ? (
|
||
<div className="bg-amber-500/15 text-amber-500 border border-amber-500/30 px-4 py-3 rounded-md text-sm mb-4">
|
||
This event is part of a shared major. Scoring is done once on the{" "}
|
||
<Link
|
||
to={`/admin/tournaments/${canonicalTournamentId}`}
|
||
className="underline font-medium"
|
||
>
|
||
tournament page
|
||
</Link>{" "}
|
||
and fans out to every window automatically — the controls here are read-only.
|
||
</div>
|
||
) : null;
|
||
|
||
const isBracketEvent = event.eventType === "playoff_game" || isBracketMajor(sportsSeason.sport?.simulatorType);
|
||
|
||
// Create a map of participants with results for easy lookup
|
||
const participantResultsMap = new Map(
|
||
results.map((r: { seasonParticipant: { id: string } }) => [r.seasonParticipant.id, r])
|
||
);
|
||
|
||
// Get participants without results (and not marked as DNP)
|
||
const participantsWithoutResults = participants.filter(
|
||
(p: { id: string }) => !participantResultsMap.has(p.id) && !notParticipatingIds.has(p.id)
|
||
);
|
||
|
||
// Sort results by placement, excluding DNP rows (those are shown in the DNP card)
|
||
const sortedResults = [...results]
|
||
.filter((r: { notParticipating?: boolean | null }) => !r.notParticipating)
|
||
.toSorted((a, b) => (a.placement || 999) - (b.placement || 999));
|
||
|
||
// Map of participantId → result ID for DNP rows (needed for unmark action)
|
||
const dnpResultIdMap = new Map<string, string>(
|
||
results
|
||
.filter((r: { notParticipating?: boolean | null; seasonParticipant: { id: string } }) => r.notParticipating)
|
||
.map((r: { id: string; seasonParticipant: { id: string } }) => [r.seasonParticipant.id, r.id])
|
||
);
|
||
|
||
// Create a map of season results for easy lookup
|
||
const seasonResultsMap = seasonResults
|
||
? new Map(
|
||
seasonResults.map((r: { participantId: string }) => [r.participantId, r])
|
||
)
|
||
: new Map();
|
||
|
||
// Non-scoring events have a simple view — edit name/date and toggle updated status
|
||
if (event.eventType === "schedule_event") {
|
||
const isPast = event.eventStartsAt
|
||
? new Date(event.eventStartsAt) < new Date()
|
||
: event.eventDate !== null && event.eventDate !== undefined && String(event.eventDate).slice(0, 10) < new Date().toISOString().split("T")[0];
|
||
|
||
return (
|
||
<div className="p-8">
|
||
<div className="max-w-2xl">
|
||
<div className="mb-6">
|
||
<Button variant="ghost" size="sm" asChild className="mb-2">
|
||
<Link to={`/admin/sports-seasons/${sportsSeason.id}/events`}>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
Back to Events
|
||
</Link>
|
||
</Button>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">{event.name}</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
{sportsSeason.sport.name} — {sportsSeason.name} • Non-Scoring
|
||
</p>
|
||
</div>
|
||
{event.isComplete ? (
|
||
<Badge variant="default" className="bg-emerald-500">
|
||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||
Updated
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="outline">
|
||
{isPast ? "Results Pending" : "Upcoming"}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{actionData?.error && (
|
||
<div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm mb-4">
|
||
{actionData.error}
|
||
</div>
|
||
)}
|
||
{actionData?.success && (
|
||
<div className="bg-emerald-500/15 text-emerald-400 px-4 py-3 rounded-md text-sm mb-4">
|
||
{actionData.success}
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4">
|
||
<EditEventCard event={event} />
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Scoring Status</CardTitle>
|
||
<CardDescription>
|
||
{event.isComplete
|
||
? "This event has been noted as updated in standings."
|
||
: isPast
|
||
? "This event has passed — mark it once standings have been updated."
|
||
: "This event hasn't occurred yet."}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{event.isComplete ? (
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="uncomplete" />
|
||
<Button type="submit" variant="outline" size="sm">
|
||
Mark as Not Updated
|
||
</Button>
|
||
</Form>
|
||
) : (
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="complete" />
|
||
<Button type="submit" size="sm">
|
||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||
Mark as Updated
|
||
</Button>
|
||
</Form>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="p-8">
|
||
<div className="max-w-4xl">
|
||
{readOnlySiblingBanner}
|
||
<div className="mb-6">
|
||
<Button variant="ghost" size="sm" asChild className="mb-2">
|
||
<Link to={`/admin/sports-seasons/${sportsSeason.id}/events`}>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
Back to Events
|
||
</Link>
|
||
</Button>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">{event.name}</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
{sportsSeason.sport.name} - {sportsSeason.name} •{" "}
|
||
{getEventTypeLabel(event.eventType)}
|
||
{event.playoffRound && ` • ${event.playoffRound}`}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{isBracketEvent && (
|
||
<Button variant="outline" asChild>
|
||
<Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}/bracket`}>
|
||
<Brackets className="mr-2 h-4 w-4" />
|
||
Manage Bracket
|
||
</Link>
|
||
</Button>
|
||
)}
|
||
{sportsSeason.sport?.simulatorType === "cs2_major_qualifying_points" && (
|
||
<Button variant="outline" asChild>
|
||
<Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}/cs2-setup`}>
|
||
<Brackets className="mr-2 h-4 w-4" />
|
||
CS2 Stage Setup
|
||
</Link>
|
||
</Button>
|
||
)}
|
||
{event.isComplete ? (
|
||
<Badge variant="default" className="bg-emerald-500">
|
||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||
Completed
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="secondary">In Progress</Badge>
|
||
)}
|
||
{event.isQualifyingEvent && (
|
||
<Badge variant="outline" className="border-amber-500 text-amber-600">
|
||
Qualifying Event
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{/* Edit Event Name/Date */}
|
||
<EditEventCard event={event} />
|
||
|
||
{actionData?.error && (
|
||
<div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
|
||
{actionData.error}
|
||
</div>
|
||
)}
|
||
{actionData?.success && (
|
||
<div className="bg-emerald-500/15 text-emerald-400 px-4 py-3 rounded-md text-sm">
|
||
{actionData.success}
|
||
</div>
|
||
)}
|
||
|
||
{/* Debug info and manual QP processing for completed major tournaments */}
|
||
{event.isComplete && event.eventType === "major_tournament" && (
|
||
<Card className="border-electric/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-electric">
|
||
Event Processing Status
|
||
</CardTitle>
|
||
<CardDescription>
|
||
<div className="space-y-1 font-mono text-xs">
|
||
<div>Event Type: {event.eventType}</div>
|
||
<div>Is Qualifying Event: {event.isQualifyingEvent ? 'Yes' : 'No'}</div>
|
||
<div>Sports Season Pattern: {sportsSeason.scoringPattern || 'not set'}</div>
|
||
<div>Results Count: {results.length}</div>
|
||
</div>
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{!event.isQualifyingEvent && (
|
||
<div className="space-y-2">
|
||
<p className="text-sm text-muted-foreground">
|
||
This event needs to be marked as a qualifying event to award qualifying points.
|
||
</p>
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="mark-qualifying" />
|
||
<Button type="submit" variant="outline">
|
||
Mark as Qualifying Event
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
)}
|
||
{event.isQualifyingEvent && (
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="process-qp" />
|
||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||
<Trophy className="mr-2 h-4 w-4" />
|
||
Process/Reprocess Qualifying Points
|
||
</Button>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Season Standings Table for final_standings events */}
|
||
{event.eventType === "final_standings" && !event.isComplete && (
|
||
<>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Season Standings Tracker</CardTitle>
|
||
<CardDescription>
|
||
Enter championship points for each participant. Positions are automatically calculated based on points (highest = 1st).
|
||
When the season ends, mark this event as complete to assign fantasy points to the top 8.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Form method="post" className="space-y-4">
|
||
<input type="hidden" name="intent" value="update-standings" />
|
||
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>Participant</TableHead>
|
||
<TableHead className="text-right">Championship Points</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{participants.map((participant: { id: string; name: string }) => {
|
||
const result = seasonResultsMap.get(participant.id);
|
||
const currentPoints = result?.currentPoints || "";
|
||
|
||
return (
|
||
<TableRow key={participant.id}>
|
||
<TableCell className="font-medium">
|
||
{participant.name}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<Input
|
||
type="number"
|
||
name={`points-${participant.id}`}
|
||
defaultValue={currentPoints}
|
||
placeholder="e.g., 250"
|
||
step="0.01"
|
||
min="0"
|
||
className="w-32 ml-auto"
|
||
onChange={() => setHasChanges(true)}
|
||
/>
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
|
||
<div className="flex justify-between items-center pt-4">
|
||
<p className="text-sm text-muted-foreground">
|
||
{hasChanges
|
||
? "You have unsaved changes"
|
||
: "Update standings after each race/event during the season"}
|
||
</p>
|
||
<Button type="submit">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
Save Standings
|
||
</Button>
|
||
</div>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Complete Season Button */}
|
||
<Card className="border-amber-accent/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-amber-accent">
|
||
<Trophy className="inline mr-2 h-5 w-5" />
|
||
Finalize Season
|
||
</CardTitle>
|
||
<CardDescription>
|
||
When the season is complete, mark this event as complete to:
|
||
<ul className="list-disc list-inside mt-2 space-y-1">
|
||
<li>Convert the top 8 participants (by position) to fantasy placements 1-8</li>
|
||
<li>Award fantasy points based on league scoring rules</li>
|
||
<li>Update all league standings</li>
|
||
</ul>
|
||
<p className="mt-2 font-semibold text-orange-600 dark:text-orange-400">
|
||
⚠️ Make sure all standings are saved before completing
|
||
</p>
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="complete" />
|
||
<Button type="submit" variant="default" className="bg-orange-600 hover:bg-orange-700">
|
||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||
Mark Season Complete & Assign Fantasy Points
|
||
</Button>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
)}
|
||
|
||
{/* Not Participating — mark known withdrawals before the event runs */}
|
||
{event.isQualifyingEvent && event.eventType === "major_tournament" && !event.isComplete && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Not Participating</CardTitle>
|
||
<CardDescription>
|
||
Mark participants who will not compete in this event (e.g. injury withdrawal).
|
||
The simulator will exclude them from this event's draw when calculating EV.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{/* Currently marked DNP */}
|
||
{notParticipatingIds.size > 0 && (
|
||
<div>
|
||
<p className="text-sm font-medium mb-2">Marked as not participating:</p>
|
||
<div className="space-y-1">
|
||
{participants
|
||
.filter((p: { id: string }) => notParticipatingIds.has(p.id))
|
||
.map((p: { id: string; name: string }) => (
|
||
<div key={p.id} className="flex items-center justify-between py-1">
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="outline" className="text-xs border-red-400 text-red-500">DNP</Badge>
|
||
<span className="text-sm">{p.name}</span>
|
||
</div>
|
||
<Form method="post" className="inline">
|
||
<input type="hidden" name="intent" value="unmark-not-participating" />
|
||
<input type="hidden" name="resultId" value={dnpResultIdMap.get(p.id) ?? ""} />
|
||
<Button type="submit" size="sm" variant="outline">
|
||
Remove
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Mark a participant as DNP */}
|
||
{participantsWithoutResults.length > 0 && (
|
||
<Form method="post" className="flex items-end gap-2">
|
||
<input type="hidden" name="intent" value="mark-not-participating" />
|
||
<div className="flex-1 space-y-1">
|
||
<Label htmlFor="dnp-participant">Participant</Label>
|
||
<Select name="participantId" required>
|
||
<SelectTrigger id="dnp-participant">
|
||
<SelectValue placeholder="Select participant" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{participantsWithoutResults.map((p: { id: string; name: string }) => (
|
||
<SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<Button type="submit" variant="outline">
|
||
Mark Not Participating
|
||
</Button>
|
||
</Form>
|
||
)}
|
||
|
||
{notParticipatingIds.size === 0 && participantsWithoutResults.length === 0 && (
|
||
<p className="text-sm text-muted-foreground">All participants already have results entered.</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Batch Paste Results — primary entry for qualifying events */}
|
||
{event.isQualifyingEvent && event.eventType !== "final_standings" && !isBracketEvent && !event.isComplete && (
|
||
<BatchResultEntry
|
||
participants={participants}
|
||
sportsSeasonId={sportsSeason.id}
|
||
existingResultParticipantIds={
|
||
new Set(results.map((r: { seasonParticipant: { id: string } }) => r.seasonParticipant.id))
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{/* Regular Result Entry for other event types */}
|
||
{event.eventType !== "final_standings" && !isBracketEvent && !event.isComplete && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Add Result</CardTitle>
|
||
<CardDescription>
|
||
Enter the placement for a participant in this event
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Form method="post" className="space-y-4">
|
||
<input type="hidden" name="intent" value="add-result" />
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="participantId">Participant</Label>
|
||
<Select name="participantId" required>
|
||
<SelectTrigger id="participantId">
|
||
<SelectValue placeholder="Select participant" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{participantsWithoutResults.length === 0 ? (
|
||
<div className="p-2 text-sm text-muted-foreground">
|
||
All participants have results
|
||
</div>
|
||
) : (
|
||
participantsWithoutResults.map((participant: { id: string; name: string }) => (
|
||
<SelectItem
|
||
key={participant.id}
|
||
value={participant.id}
|
||
>
|
||
{participant.name}
|
||
</SelectItem>
|
||
))
|
||
)}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="placement">Placement</Label>
|
||
<Input
|
||
id="placement"
|
||
name="placement"
|
||
type="number"
|
||
min="1"
|
||
max="100"
|
||
placeholder="e.g., 1"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
type="submit"
|
||
className="w-full"
|
||
disabled={participantsWithoutResults.length === 0}
|
||
>
|
||
<Trophy className="mr-2 h-4 w-4" />
|
||
Add Result
|
||
</Button>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Manual QP Processing Button (for existing events) */}
|
||
{event.isComplete &&
|
||
event.eventType === "major_tournament" &&
|
||
sportsSeason.scoringPattern === "qualifying_points" &&
|
||
results.length > 0 && (
|
||
<Card className="border-amber-200 dark:border-amber-800">
|
||
<CardHeader>
|
||
<CardTitle className="text-amber-600 dark:text-amber-400">
|
||
Process Qualifying Points
|
||
</CardTitle>
|
||
<CardDescription>
|
||
This event is complete but qualifying points haven't been awarded yet.
|
||
Click below to award QP based on the results entered.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="process-qp" />
|
||
<Button type="submit" className="bg-amber-600 hover:bg-amber-700">
|
||
<Trophy className="mr-2 h-4 w-4" />
|
||
Award Qualifying Points Now
|
||
</Button>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Current Results - Hide for bracket events since they use the bracket */}
|
||
{!isBracketEvent && (
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle>Results</CardTitle>
|
||
<CardDescription>
|
||
{results.length} of {participants.length} participants have
|
||
results
|
||
</CardDescription>
|
||
</div>
|
||
{!event.isComplete && results.length > 0 && event.eventType !== "final_standings" && (
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="complete" />
|
||
<Button type="submit" variant="outline" size="sm">
|
||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||
Mark Event Complete
|
||
</Button>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{sortedResults.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground">
|
||
No results added yet. Add results using the form above.
|
||
</p>
|
||
) : (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-24">Placement</TableHead>
|
||
<TableHead>Participant</TableHead>
|
||
{event.isQualifyingEvent && event.isComplete && (
|
||
<TableHead className="w-32 text-right">QP Awarded</TableHead>
|
||
)}
|
||
{!event.isComplete && <TableHead className="w-32">Actions</TableHead>}
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{sortedResults.map((result) => (
|
||
<TableRow key={result.id}>
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
{result.placement === 1 && (
|
||
<span className="text-xl">🥇</span>
|
||
)}
|
||
{result.placement === 2 && (
|
||
<span className="text-xl">🥈</span>
|
||
)}
|
||
{result.placement === 3 && (
|
||
<span className="text-xl">🥉</span>
|
||
)}
|
||
<span className="font-semibold">
|
||
{result.placement}
|
||
</span>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>{result.seasonParticipant.name}</TableCell>
|
||
{event.isQualifyingEvent && event.isComplete && (
|
||
<TableCell className="text-right">
|
||
{result.qualifyingPointsAwarded ? (
|
||
<span className="font-semibold text-amber-600 dark:text-amber-400">
|
||
{parseFloat(result.qualifyingPointsAwarded).toFixed(2)} QP
|
||
</span>
|
||
) : (
|
||
<span className="text-muted-foreground">0 QP</span>
|
||
)}
|
||
</TableCell>
|
||
)}
|
||
{!event.isComplete && (
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
<Form method="post" className="inline">
|
||
<input type="hidden" name="intent" value="update-result" />
|
||
<input type="hidden" name="resultId" value={result.id} />
|
||
<Input
|
||
type="number"
|
||
name="placement"
|
||
defaultValue={result.placement || ""}
|
||
min="1"
|
||
max="100"
|
||
className="w-16 h-8 text-sm"
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.currentTarget.form?.requestSubmit();
|
||
}
|
||
}}
|
||
/>
|
||
<Button type="submit" size="sm" variant="ghost" className="h-8 w-8 p-0">
|
||
<Pencil className="h-3 w-3" />
|
||
</Button>
|
||
</Form>
|
||
<Form method="post" className="inline">
|
||
<input type="hidden" name="intent" value="delete-result" />
|
||
<input type="hidden" name="resultId" value={result.id} />
|
||
<Button
|
||
type="submit"
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||
onClick={(e) => {
|
||
if (!confirm(`Delete result for ${result.seasonParticipant.name}?`)) {
|
||
e.preventDefault();
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 className="h-3 w-3" />
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
</TableCell>
|
||
)}
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Bracket Explanation Card for Bracket Events */}
|
||
{isBracketEvent && !participantResults?.length && (
|
||
<Card className="border-electric/30 bg-electric/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-electric">
|
||
<Brackets className="inline mr-2 h-5 w-5" />
|
||
Bracket Event
|
||
</CardTitle>
|
||
<CardDescription className="text-electric">
|
||
This is a bracket/playoff event. Results are managed through the bracket interface.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3 text-sm">
|
||
<p>To complete this event:</p>
|
||
<ol className="list-decimal list-inside space-y-2 ml-2">
|
||
<li>Click "Manage Bracket" above to set match winners</li>
|
||
<li>Once all matches are complete, click "Finalize Bracket"</li>
|
||
<li>Fantasy placements and points will appear below automatically</li>
|
||
</ol>
|
||
<div className="pt-3">
|
||
<Button variant="outline" asChild>
|
||
<Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}/bracket`}>
|
||
<Brackets className="mr-2 h-4 w-4" />
|
||
Go to Bracket Manager
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Participant Results with Fantasy Points */}
|
||
{participantResults && participantResults.length > 0 && (
|
||
<Card className={isBracketEvent ? "border-emerald-500/30" : ""}>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className={isBracketEvent ? "text-emerald-400" : ""}>
|
||
{isBracketEvent ? (
|
||
<>
|
||
<Trophy className="inline mr-2 h-5 w-5" />
|
||
Fantasy Points Awarded (from Bracket)
|
||
</>
|
||
) : (
|
||
"Fantasy Points Awarded"
|
||
)}
|
||
</CardTitle>
|
||
<CardDescription>
|
||
{isBracketEvent
|
||
? `${participantResults.length} participants assigned placements from bracket results`
|
||
: "Points calculated from bracket placements (sorted by position)"
|
||
}
|
||
</CardDescription>
|
||
</div>
|
||
{isBracketEvent && event.isComplete && (
|
||
<Badge variant="default" className="bg-emerald-500">
|
||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||
Bracket Finalized
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-32">Final Position</TableHead>
|
||
<TableHead>Participant</TableHead>
|
||
<TableHead className="w-32 text-right">Fantasy Points</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{[...participantResults]
|
||
.toSorted((a: { finalPosition?: number | null }, b: { finalPosition?: number | null }) => {
|
||
const posA = a.finalPosition ?? 999;
|
||
const posB = b.finalPosition ?? 999;
|
||
return posA - posB;
|
||
})
|
||
.map((result) => (
|
||
<TableRow key={result.id}>
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
{result.finalPosition === 1 && (
|
||
<span className="text-xl">🥇</span>
|
||
)}
|
||
{result.finalPosition === 2 && (
|
||
<span className="text-xl">🥈</span>
|
||
)}
|
||
{result.finalPosition === 3 && (
|
||
<span className="text-xl">🥉</span>
|
||
)}
|
||
<span className="font-semibold">
|
||
{result.finalPosition === 0 ? (
|
||
<span className="text-muted-foreground">Early Elimination</span>
|
||
) : (
|
||
`${result.finalPosition}${
|
||
result.finalPosition === 1
|
||
? "st"
|
||
: result.finalPosition === 2
|
||
? "nd"
|
||
: result.finalPosition === 3
|
||
? "rd"
|
||
: "th"
|
||
}`
|
||
)}
|
||
</span>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>{result.participant?.name}</TableCell>
|
||
<TableCell className="text-right font-semibold">
|
||
{result.qualifyingPoints ? (
|
||
<span className={result.qualifyingPoints === "0.00" ? "text-muted-foreground" : "text-emerald-400"}>
|
||
{parseFloat(result.qualifyingPoints).toFixed(2)} pts
|
||
</span>
|
||
) : (
|
||
<span className="text-muted-foreground">-</span>
|
||
)}
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|