116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import { Link } from "react-router";
|
|
import type { Route } from "./+types/admin.leagues";
|
|
|
|
import { listLeaguesWithStatus } from "~/models/league";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "~/components/ui/table";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import type { SeasonStatus } from "~/models/season";
|
|
|
|
export function meta(): Route.MetaDescriptors {
|
|
return [{ title: "Leagues — Brackt Admin" }];
|
|
}
|
|
|
|
export async function loader() {
|
|
const leagues = await listLeaguesWithStatus();
|
|
return { leagues };
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: SeasonStatus | null }) {
|
|
if (!status) {
|
|
return <Badge variant="outline" className="text-muted-foreground">No Season</Badge>;
|
|
}
|
|
switch (status) {
|
|
case "pre_draft":
|
|
return <Badge variant="secondary">Pre-Draft</Badge>;
|
|
case "draft":
|
|
return (
|
|
<Badge className="border-amber-300 text-amber-700 dark:border-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30" variant="outline">
|
|
Drafting
|
|
</Badge>
|
|
);
|
|
case "active":
|
|
return (
|
|
<Badge className="border-green-300 text-green-700 dark:border-green-700 dark:text-green-400 bg-green-50 dark:bg-green-950/30" variant="outline">
|
|
Active
|
|
</Badge>
|
|
);
|
|
case "completed":
|
|
return <Badge variant="outline">Completed</Badge>;
|
|
}
|
|
}
|
|
|
|
export default function AdminLeagues({ loaderData }: Route.ComponentProps) {
|
|
const { leagues } = loaderData;
|
|
|
|
return (
|
|
<div className="p-4 md:p-8">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold">Leagues</h1>
|
|
<p className="text-muted-foreground text-sm mt-1">{leagues.length} total leagues</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>All Leagues</CardTitle>
|
|
<CardDescription>Every league in the system with their current season status.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>League Name</TableHead>
|
|
<TableHead>Season Year</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Created</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{leagues.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={4} className="text-center text-muted-foreground py-8">
|
|
No leagues found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{leagues.map((league) => (
|
|
<TableRow key={league.id}>
|
|
<TableCell className="font-medium">
|
|
<Link
|
|
to={`/leagues/${league.id}`}
|
|
className="hover:underline text-foreground"
|
|
>
|
|
{league.name}
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{league.currentSeasonYear ?? "—"}
|
|
</TableCell>
|
|
<TableCell>
|
|
<StatusBadge status={league.currentSeasonStatus} />
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{new Date(league.createdAt).toLocaleDateString()}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|