From 37de6787bf0e8cb50144e9c7f5c5b059a3f206fa Mon Sep 17 00:00:00 2001
From: Chris Parsons <chrisparsons1127@gmail.com>
Date: Sun, 12 Oct 2025 21:54:49 -0700
Subject: [PATCH] feat: add admin routes and checkbox component for sports
 management

---
 app/components/ui/badge.tsx                   |  46 +++
 app/components/ui/checkbox.tsx                |  30 ++
 app/components/ui/table.tsx                   | 114 ++++++
 app/components/ui/textarea.tsx                |  18 +
 app/routes.ts                                 |  17 +
 app/routes/admin._index.tsx                   | 170 ++++++++
 app/routes/admin.data-sync.tsx                | 376 +++++++++++++++++
 app/routes/admin.participants.tsx             |  37 ++
 .../admin.sports-seasons.$id.participants.tsx | 207 ++++++++++
 app/routes/admin.sports-seasons.$id.tsx       | 309 ++++++++++++++
 app/routes/admin.sports-seasons.new.tsx       | 221 ++++++++++
 app/routes/admin.sports-seasons.tsx           | 126 ++++++
 app/routes/admin.sports.new.tsx               | 155 +++++++
 app/routes/admin.sports.tsx                   | 106 +++++
 app/routes/admin.templates.$id.tsx            | 381 ++++++++++++++++++
 app/routes/admin.templates.new.tsx            | 144 +++++++
 app/routes/admin.templates.tsx                | 108 +++++
 app/routes/admin.tsx                          |  78 ++++
 app/routes/api.admin.export-sports-data.ts    |  21 +
 app/utils/sports-data-sync.server.ts          | 334 +++++++++++++++
 package-lock.json                             |  31 ++
 package.json                                  |   1 +
 22 files changed, 3030 insertions(+)
 create mode 100644 app/components/ui/badge.tsx
 create mode 100644 app/components/ui/checkbox.tsx
 create mode 100644 app/components/ui/table.tsx
 create mode 100644 app/components/ui/textarea.tsx
 create mode 100644 app/routes/admin._index.tsx
 create mode 100644 app/routes/admin.data-sync.tsx
 create mode 100644 app/routes/admin.participants.tsx
 create mode 100644 app/routes/admin.sports-seasons.$id.participants.tsx
 create mode 100644 app/routes/admin.sports-seasons.$id.tsx
 create mode 100644 app/routes/admin.sports-seasons.new.tsx
 create mode 100644 app/routes/admin.sports-seasons.tsx
 create mode 100644 app/routes/admin.sports.new.tsx
 create mode 100644 app/routes/admin.sports.tsx
 create mode 100644 app/routes/admin.templates.$id.tsx
 create mode 100644 app/routes/admin.templates.new.tsx
 create mode 100644 app/routes/admin.templates.tsx
 create mode 100644 app/routes/admin.tsx
 create mode 100644 app/routes/api.admin.export-sports-data.ts
 create mode 100644 app/utils/sports-data-sync.server.ts

diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
new file mode 100644
index 0000000..465ecc8
--- /dev/null
+++ b/app/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "app/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
new file mode 100644
index 0000000..8c9e905
--- /dev/null
+++ b/app/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "app/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
new file mode 100644
index 0000000..1770fc1
--- /dev/null
+++ b/app/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "app/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
new file mode 100644
index 0000000..9236690
--- /dev/null
+++ b/app/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "app/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/app/routes.ts b/app/routes.ts
index 10d1fe0..372c11f 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -8,4 +8,21 @@ export default [
   route("api/webhooks/clerk", "routes/api/webhooks/clerk.ts"),
   route("user-profile", "routes/user-profile.tsx"),
   route("how-to-play", "routes/how-to-play.tsx"),
+  
+  // Admin routes
+  route("admin", "routes/admin.tsx", [
+    index("routes/admin._index.tsx"),
+    route("sports", "routes/admin.sports.tsx"),
+    route("sports/new", "routes/admin.sports.new.tsx"),
+    route("sports-seasons", "routes/admin.sports-seasons.tsx"),
+    route("sports-seasons/new", "routes/admin.sports-seasons.new.tsx"),
+    route("sports-seasons/:id", "routes/admin.sports-seasons.$id.tsx"),
+    route("sports-seasons/:id/participants", "routes/admin.sports-seasons.$id.participants.tsx"),
+    route("participants", "routes/admin.participants.tsx"),
+    route("templates", "routes/admin.templates.tsx"),
+    route("templates/new", "routes/admin.templates.new.tsx"),
+    route("templates/:id", "routes/admin.templates.$id.tsx"),
+    route("data-sync", "routes/admin.data-sync.tsx"),
+  ]),
+  route("api/admin/export-sports-data", "routes/api.admin.export-sports-data.ts"),
 ] satisfies RouteConfig;
diff --git a/app/routes/admin._index.tsx b/app/routes/admin._index.tsx
new file mode 100644
index 0000000..47fd018
--- /dev/null
+++ b/app/routes/admin._index.tsx
@@ -0,0 +1,170 @@
+import { Link } from "react-router";
+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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Trophy, Calendar, FolderKanban, ArrowRight } from "lucide-react";
+
+export async function loader() {
+  const [sports, sportsSeasons, templates] = await Promise.all([
+    findAllSports(),
+    findAllSportsSeasons(),
+    findAllSeasonTemplates(),
+  ]);
+
+  return {
+    stats: {
+      sportsCount: sports.length,
+      sportsSeasonsCount: sportsSeasons.length,
+      templatesCount: templates.length,
+    },
+  };
+}
+
+export default function AdminDashboard({ loaderData }: Route.ComponentProps) {
+  const { stats } = loaderData;
+
+  return (
+    <div className="p-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+        <p className="text-muted-foreground mt-2">
+          Manage sports, seasons, participants, and templates
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3 mb-8">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Sports</CardTitle>
+            <Trophy className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.sportsCount}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Active sports in the system
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Sports Seasons
+            </CardTitle>
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.sportsSeasonsCount}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Across all sports
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Templates</CardTitle>
+            <FolderKanban className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.templatesCount}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Season templates available
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>Common administrative tasks</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <Button variant="outline" className="w-full justify-between" asChild>
+              <Link to="/admin/sports/new">
+                Create New Sport
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+            <Button variant="outline" className="w-full justify-between" asChild>
+              <Link to="/admin/sports-seasons/new">
+                Create Sports Season
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+            <Button variant="outline" className="w-full justify-between" asChild>
+              <Link to="/admin/templates/new">
+                Create Season Template
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Getting Started</CardTitle>
+            <CardDescription>Set up your sports system</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-start space-x-3">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                1
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Create Sports</p>
+                <p className="text-xs text-muted-foreground">
+                  Add sports like NFL, NBA, Golf, etc.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                2
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Create Sports Seasons</p>
+                <p className="text-xs text-muted-foreground">
+                  Add specific seasons for each sport
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                3
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Add Participants</p>
+                <p className="text-xs text-muted-foreground">
+                  Add teams or players to each sports season
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                4
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Create Templates</p>
+                <p className="text-xs text-muted-foreground">
+                  Bundle sports seasons into templates for leagues
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.data-sync.tsx b/app/routes/admin.data-sync.tsx
new file mode 100644
index 0000000..30501ff
--- /dev/null
+++ b/app/routes/admin.data-sync.tsx
@@ -0,0 +1,376 @@
+import { useState } from "react";
+import type { Route } from "./+types/admin.data-sync";
+import { findAllSports } from "~/models/sport";
+import { findAllSportsSeasons } from "~/models/sports-season";
+import { findAllSeasonTemplates } from "~/models/season-template";
+import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Download, Upload, AlertTriangle, Database } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+
+export async function loader() {
+  const [sports, sportsSeasons, templates] = await Promise.all([
+    findAllSports(),
+    findAllSportsSeasons(),
+    findAllSeasonTemplates(),
+  ]);
+
+  return {
+    stats: {
+      sportsCount: sports.length,
+      sportsSeasonsCount: sportsSeasons.length,
+      templatesCount: templates.length,
+    },
+  };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
+
+  if (intent === "export") {
+    // Export will be handled client-side via download
+    return { success: true };
+  }
+
+  if (intent === "import") {
+    const mode = formData.get("mode") as "merge" | "replace";
+    const fileData = formData.get("fileData") as string;
+
+    if (!fileData) {
+      return { error: "No file data provided" };
+    }
+
+    try {
+      // Import the data (we'll create a server-side function for this)
+      const { importSportsDataFromJSON } = await import("~/utils/sports-data-sync.server");
+      const result = await importSportsDataFromJSON(fileData, mode);
+      
+      return { 
+        success: true, 
+        message: `Import complete! Created: ${result.created}, Updated: ${result.updated}, Skipped: ${result.skipped}` 
+      };
+    } catch (error) {
+      console.error("Import error:", error);
+      return { error: error instanceof Error ? error.message : "Import failed" };
+    }
+  }
+
+  return { error: "Invalid intent" };
+}
+
+export default function DataSync({ loaderData, actionData }: Route.ComponentProps) {
+  const { stats } = loaderData;
+  const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      const response = await fetch("/api/admin/export-sports-data");
+      const data = await response.json();
+      
+      // Create download
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `sports-data-export-${new Date().toISOString().split("T")[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Export failed:", error);
+      alert("Export failed. Please try again.");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+
+  const handleImport = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!selectedFile) {
+      alert("Please select a file first");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = async (event) => {
+      const fileData = event.target?.result as string;
+      
+      const formData = new FormData();
+      formData.append("intent", "import");
+      formData.append("mode", importMode);
+      formData.append("fileData", fileData);
+
+      // Submit via form
+      const form = document.createElement("form");
+      form.method = "POST";
+      form.style.display = "none";
+      
+      const intentInput = document.createElement("input");
+      intentInput.name = "intent";
+      intentInput.value = "import";
+      form.appendChild(intentInput);
+
+      const modeInput = document.createElement("input");
+      modeInput.name = "mode";
+      modeInput.value = importMode;
+      form.appendChild(modeInput);
+
+      const dataInput = document.createElement("input");
+      dataInput.name = "fileData";
+      dataInput.value = fileData;
+      form.appendChild(dataInput);
+
+      document.body.appendChild(form);
+      form.submit();
+    };
+
+    reader.readAsText(selectedFile);
+  };
+
+  return (
+    <div className="p-8">
+      <div className="max-w-4xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Data Sync</h1>
+          <p className="text-muted-foreground mt-1">
+            Import and export sports data between environments
+          </p>
+        </div>
+
+        {actionData?.success && (
+          <div className="bg-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm mb-6">
+            {actionData.message || "Operation completed successfully!"}
+          </div>
+        )}
+
+        {actionData?.error && (
+          <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm mb-6">
+            {actionData.error}
+          </div>
+        )}
+
+        <div className="grid gap-6 md:grid-cols-3 mb-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Sports</CardTitle>
+              <Database className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.sportsCount}</div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Sports Seasons</CardTitle>
+              <Database className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.sportsSeasonsCount}</div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Templates</CardTitle>
+              <Database className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.templatesCount}</div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Export Data</CardTitle>
+              <CardDescription>
+                Download all sports data as a JSON file
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                This will export all sports, sports seasons, participants, and season templates.
+              </p>
+              
+              <Button
+                onClick={handleExport}
+                disabled={isExporting}
+                className="w-full"
+              >
+                <Download className="mr-2 h-4 w-4" />
+                {isExporting ? "Exporting..." : "Export Data"}
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Import Data</CardTitle>
+              <CardDescription>
+                Upload a JSON file to import sports data
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="file">Select File</Label>
+                <input
+                  id="file"
+                  type="file"
+                  accept=".json"
+                  onChange={handleFileChange}
+                  className="block w-full text-sm text-muted-foreground
+                    file:mr-4 file:py-2 file:px-4
+                    file:rounded-md file:border-0
+                    file:text-sm file:font-semibold
+                    file:bg-primary file:text-primary-foreground
+                    hover:file:bg-primary/90"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Import Mode</Label>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant={importMode === "merge" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setImportMode("merge")}
+                  >
+                    Merge
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={importMode === "replace" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setImportMode("replace")}
+                  >
+                    Replace
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {importMode === "merge"
+                    ? "Updates existing records and adds new ones (safe)"
+                    : "Deletes all existing data and recreates from file (destructive)"}
+                </p>
+              </div>
+
+              {importMode === "replace" ? (
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      disabled={!selectedFile}
+                      variant="destructive"
+                      className="w-full"
+                    >
+                      <Upload className="mr-2 h-4 w-4" />
+                      Import Data (Replace)
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle className="flex items-center gap-2">
+                        <AlertTriangle className="h-5 w-5 text-destructive" />
+                        Are you absolutely sure?
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will <strong>delete all existing sports data</strong> and replace it
+                        with the data from the file. This action cannot be undone.
+                        <br /><br />
+                        This includes:
+                        <ul className="list-disc list-inside mt-2">
+                          <li>All sports</li>
+                          <li>All sports seasons</li>
+                          <li>All participants</li>
+                          <li>All season templates</li>
+                        </ul>
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={handleImport}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      >
+                        Yes, Replace All Data
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              ) : (
+                <Button
+                  onClick={handleImport}
+                  disabled={!selectedFile}
+                  className="w-full"
+                >
+                  <Upload className="mr-2 h-4 w-4" />
+                  Import Data (Merge)
+                </Button>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card className="mt-6 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:border-blue-800">
+          <CardHeader>
+            <CardTitle className="text-blue-900 dark:text-blue-100">How It Works</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-blue-800 dark:text-blue-200 space-y-3">
+            <div>
+              <strong>Export:</strong> Downloads all sports data as a JSON file that you can
+              save, version control, or transfer to another environment.
+            </div>
+            <div>
+              <strong>Import (Merge):</strong> Updates existing records and adds new ones.
+              Safe to use - won't delete anything.
+            </div>
+            <div>
+              <strong>Import (Replace):</strong> Deletes all existing sports data and recreates
+              it from the file. Use this for a clean slate.
+            </div>
+            <div className="pt-2 border-t border-blue-200 dark:border-blue-800">
+              <strong>Typical workflow:</strong>
+              <ol className="list-decimal list-inside mt-1 space-y-1">
+                <li>Export data from development</li>
+                <li>Download the JSON file</li>
+                <li>Upload it to production</li>
+                <li>Import using merge mode</li>
+              </ol>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.participants.tsx b/app/routes/admin.participants.tsx
new file mode 100644
index 0000000..7140075
--- /dev/null
+++ b/app/routes/admin.participants.tsx
@@ -0,0 +1,37 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Users } from "lucide-react";
+
+export default function AdminParticipants() {
+  return (
+    <div className="p-8">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold">Participants</h1>
+        <p className="text-muted-foreground mt-1">
+          Manage teams and players across all sports seasons
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Participants Management</CardTitle>
+          <CardDescription>Coming soon</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-12">
+            <Users className="mx-auto h-12 w-12 text-muted-foreground" />
+            <h3 className="mt-4 text-lg font-semibold">Under Construction</h3>
+            <p className="text-muted-foreground mt-2">
+              Participant management interface will be available soon
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports-seasons.$id.participants.tsx b/app/routes/admin.sports-seasons.$id.participants.tsx
new file mode 100644
index 0000000..944aa17
--- /dev/null
+++ b/app/routes/admin.sports-seasons.$id.participants.tsx
@@ -0,0 +1,207 @@
+import { Form, Link } from "react-router";
+import type { Route } from "./+types/admin.sports-seasons.$id.participants";
+import { findSportsSeasonById } from "~/models/sports-season";
+import { 
+  findParticipantsBySportsSeasonId, 
+  createParticipant,
+  deleteParticipant 
+} from "~/models/participant";
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Plus, Trash2, ArrowLeft } from "lucide-react";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const sportsSeason = await findSportsSeasonById(params.id);
+  
+  if (!sportsSeason) {
+    throw new Response("Sports season not found", { status: 404 });
+  }
+
+  const participants = await findParticipantsBySportsSeasonId(params.id);
+
+  // Type assertion since we know the sport relation is included
+  return { 
+    sportsSeason: sportsSeason as typeof sportsSeason & { sport: { id: string; name: string; type: string; slug: string } }, 
+    participants 
+  };
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
+
+  if (intent === "delete") {
+    const participantId = formData.get("participantId");
+    if (typeof participantId === "string") {
+      await deleteParticipant(participantId);
+    }
+    return { success: true };
+  }
+
+  // Add participant
+  const name = formData.get("name");
+  const shortName = formData.get("shortName");
+
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Participant name is required" };
+  }
+
+  try {
+    await createParticipant({
+      sportsSeasonId: params.id,
+      name: name.trim(),
+      shortName: typeof shortName === "string" && shortName.trim() ? shortName.trim() : null,
+      externalId: null,
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error creating participant:", error);
+    return { error: "Failed to add participant. Please try again." };
+  }
+}
+
+export default function ManageParticipants({ loaderData, actionData }: Route.ComponentProps) {
+  const { sportsSeason, participants } = loaderData;
+
+  return (
+    <div className="p-8">
+      <div className="max-w-4xl">
+        <div className="mb-6">
+          <Button variant="ghost" size="sm" asChild className="mb-2">
+            <Link to={`/admin/sports-seasons/${sportsSeason.id}`}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Sports Season
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold">Manage Participants</h1>
+          <p className="text-muted-foreground mt-1">
+            {sportsSeason.sport.name} - {sportsSeason.name}
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Add Participant</CardTitle>
+              <CardDescription>
+                Add a {sportsSeason.sport.type === "team" ? "team" : "player"} to this season
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form method="post" className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">
+                    {sportsSeason.sport.type === "team" ? "Team" : "Player"} Name
+                  </Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    placeholder={sportsSeason.sport.type === "team" ? "e.g., Kansas City Chiefs" : "e.g., Tiger Woods"}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="shortName">Short Name (Optional)</Label>
+                  <Input
+                    id="shortName"
+                    name="shortName"
+                    type="text"
+                    placeholder={sportsSeason.sport.type === "team" ? "e.g., KC" : "e.g., T. Woods"}
+                  />
+                </div>
+
+                {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-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
+                    Participant added successfully!
+                  </div>
+                )}
+
+                <Button type="submit" className="w-full">
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Participant
+                </Button>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>All Participants</CardTitle>
+              <CardDescription>
+                {participants.length} {participants.length === 1 ? "participant" : "participants"} total
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {participants.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-8">
+                  No participants yet. Add your first {sportsSeason.sport.type === "team" ? "team" : "player"}.
+                </p>
+              ) : (
+                <div className="max-h-[500px] overflow-y-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Short Name</TableHead>
+                        <TableHead className="w-[50px]"></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {participants.map((participant) => (
+                        <TableRow key={participant.id}>
+                          <TableCell className="font-medium">{participant.name}</TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {participant.shortName || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Form method="post">
+                              <input type="hidden" name="intent" value="delete" />
+                              <input type="hidden" name="participantId" value={participant.id} />
+                              <Button
+                                type="submit"
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </Form>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports-seasons.$id.tsx b/app/routes/admin.sports-seasons.$id.tsx
new file mode 100644
index 0000000..6e3d0c6
--- /dev/null
+++ b/app/routes/admin.sports-seasons.$id.tsx
@@ -0,0 +1,309 @@
+import { Form, Link, redirect, useNavigate } from "react-router";
+import type { Route } from "./+types/admin.sports-seasons.$id";
+import { findSportsSeasonById, updateSportsSeason, deleteSportsSeason } from "~/models/sports-season";
+import { findParticipantsBySportsSeasonId } from "~/models/participant";
+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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import { Trash2, Users } from "lucide-react";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const sportsSeason = await findSportsSeasonById(params.id);
+  
+  if (!sportsSeason) {
+    throw new Response("Sports season not found", { status: 404 });
+  }
+
+  const participants = await findParticipantsBySportsSeasonId(params.id);
+
+  // Type assertion since we know the sport relation is included
+  return { 
+    sportsSeason: sportsSeason as typeof sportsSeason & { sport: { id: string; name: string; type: string; slug: string } }, 
+    participants 
+  };
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
+
+  if (intent === "delete") {
+    await deleteSportsSeason(params.id);
+    return redirect("/admin/sports-seasons");
+  }
+
+  // Update
+  const name = formData.get("name");
+  const year = formData.get("year");
+  const startDate = formData.get("startDate");
+  const endDate = formData.get("endDate");
+  const status = formData.get("status");
+  const scoringType = formData.get("scoringType");
+
+  // Validation
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Season name is required" };
+  }
+
+  if (typeof year !== "string") {
+    return { error: "Year is required" };
+  }
+
+  const yearNum = parseInt(year, 10);
+  if (isNaN(yearNum) || yearNum < 2000 || yearNum > 2100) {
+    return { error: "Year must be between 2000 and 2100" };
+  }
+
+  if (status !== "upcoming" && status !== "active" && status !== "completed") {
+    return { error: "Invalid status" };
+  }
+
+  if (scoringType !== "playoffs" && scoringType !== "regular_season" && scoringType !== "majors") {
+    return { error: "Invalid scoring type" };
+  }
+
+  try {
+    await updateSportsSeason(params.id, {
+      name: name.trim(),
+      year: yearNum,
+      startDate: typeof startDate === "string" && startDate ? startDate : null,
+      endDate: typeof endDate === "string" && endDate ? endDate : null,
+      status,
+      scoringType,
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error updating sports season:", error);
+    return { error: "Failed to update sports season. Please try again." };
+  }
+}
+
+export default function EditSportsSeason({ loaderData, actionData }: Route.ComponentProps) {
+  const { sportsSeason, participants } = loaderData;
+  const navigate = useNavigate();
+
+  return (
+    <div className="p-8">
+      <div className="max-w-2xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Edit Sports Season</h1>
+          <p className="text-muted-foreground mt-1">
+            {sportsSeason.sport.name} - {sportsSeason.name}
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Sports Season Details</CardTitle>
+              <CardDescription>
+                Update the information for this sports season
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form method="post" className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Season Name</Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    defaultValue={sportsSeason.name}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="year">Year</Label>
+                  <Input
+                    id="year"
+                    name="year"
+                    type="number"
+                    min="2000"
+                    max="2100"
+                    defaultValue={sportsSeason.year}
+                    required
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="startDate">Start Date (Optional)</Label>
+                    <Input
+                      id="startDate"
+                      name="startDate"
+                      type="date"
+                      defaultValue={sportsSeason.startDate || ""}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="endDate">End Date (Optional)</Label>
+                    <Input
+                      id="endDate"
+                      name="endDate"
+                      type="date"
+                      defaultValue={sportsSeason.endDate || ""}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="status">Status</Label>
+                  <Select name="status" defaultValue={sportsSeason.status} required>
+                    <SelectTrigger id="status">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="upcoming">Upcoming</SelectItem>
+                      <SelectItem value="active">Active</SelectItem>
+                      <SelectItem value="completed">Completed</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="scoringType">Scoring Type</Label>
+                  <Select name="scoringType" defaultValue={sportsSeason.scoringType} required>
+                    <SelectTrigger id="scoringType">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="playoffs">Playoffs</SelectItem>
+                      <SelectItem value="regular_season">Regular Season</SelectItem>
+                      <SelectItem value="majors">Majors</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {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-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
+                    Sports season updated successfully!
+                  </div>
+                )}
+
+                <div className="flex gap-4">
+                  <Button type="submit" className="flex-1">
+                    Save Changes
+                  </Button>
+                  <Button type="button" variant="outline" asChild>
+                    <Link to="/admin/sports-seasons">Cancel</Link>
+                  </Button>
+                </div>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Participants</CardTitle>
+                  <CardDescription>
+                    {participants.length} {participants.length === 1 ? "participant" : "participants"}
+                  </CardDescription>
+                </div>
+                <Button
+                  size="sm"
+                  onClick={() => navigate(`/admin/sports-seasons/${sportsSeason.id}/participants`)}
+                >
+                  <Users className="mr-2 h-4 w-4" />
+                  Manage Participants
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {participants.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No participants added yet. Add teams or players to this season.
+                </p>
+              ) : (
+                <div className="space-y-2">
+                  {participants.slice(0, 5).map((participant) => (
+                    <div key={participant.id} className="text-sm">
+                      {participant.name}
+                    </div>
+                  ))}
+                  {participants.length > 5 && (
+                    <p className="text-sm text-muted-foreground">
+                      And {participants.length - 5} more...
+                    </p>
+                  )}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="border-destructive">
+            <CardHeader>
+              <CardTitle className="text-destructive">Danger Zone</CardTitle>
+              <CardDescription>
+                Permanently delete this sports season
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="destructive">
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete Sports Season
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will permanently delete the sports season "{sportsSeason.name}" and all
+                      associated participants and results. This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <Form method="post">
+                      <input type="hidden" name="intent" value="delete" />
+                      <AlertDialogAction type="submit" className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                        Delete
+                      </AlertDialogAction>
+                    </Form>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports-seasons.new.tsx b/app/routes/admin.sports-seasons.new.tsx
new file mode 100644
index 0000000..1487b69
--- /dev/null
+++ b/app/routes/admin.sports-seasons.new.tsx
@@ -0,0 +1,221 @@
+import { Form, Link, redirect } from "react-router";
+import type { Route } from "./+types/admin.sports-seasons.new";
+import { createSportsSeason } from "~/models/sports-season";
+import { findAllSports } from "~/models/sport";
+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";
+
+export async function loader() {
+  const sports = await findAllSports();
+  return { sports };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const sportId = formData.get("sportId");
+  const name = formData.get("name");
+  const year = formData.get("year");
+  const startDate = formData.get("startDate");
+  const endDate = formData.get("endDate");
+  const status = formData.get("status");
+  const scoringType = formData.get("scoringType");
+
+  // Validation
+  if (typeof sportId !== "string" || !sportId) {
+    return { error: "Sport is required" };
+  }
+
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Season name is required" };
+  }
+
+  if (typeof year !== "string") {
+    return { error: "Year is required" };
+  }
+
+  const yearNum = parseInt(year, 10);
+  if (isNaN(yearNum) || yearNum < 2000 || yearNum > 2100) {
+    return { error: "Year must be between 2000 and 2100" };
+  }
+
+  if (status !== "upcoming" && status !== "active" && status !== "completed") {
+    return { error: "Invalid status" };
+  }
+
+  if (scoringType !== "playoffs" && scoringType !== "regular_season" && scoringType !== "majors") {
+    return { error: "Invalid scoring type" };
+  }
+
+  try {
+    await createSportsSeason({
+      sportId,
+      name: name.trim(),
+      year: yearNum,
+      startDate: typeof startDate === "string" && startDate ? startDate : null,
+      endDate: typeof endDate === "string" && endDate ? endDate : null,
+      status,
+      scoringType,
+    });
+
+    return redirect("/admin/sports-seasons");
+  } catch (error) {
+    console.error("Error creating sports season:", error);
+    return { error: "Failed to create sports season. Please try again." };
+  }
+}
+
+export default function NewSportsSeason({ loaderData, actionData }: Route.ComponentProps) {
+  const { sports } = loaderData;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="p-8">
+      <div className="max-w-2xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Create New Sports Season</h1>
+          <p className="text-muted-foreground mt-1">
+            Add a new season for a sport
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sports Season Details</CardTitle>
+            <CardDescription>
+              Enter the information for the new sports season
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form method="post" className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="sportId">Sport</Label>
+                <Select name="sportId" required>
+                  <SelectTrigger id="sportId">
+                    <SelectValue placeholder="Select a sport" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {sports.map((sport) => (
+                      <SelectItem key={sport.id} value={sport.id}>
+                        {sport.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {sports.length === 0 && (
+                  <p className="text-sm text-muted-foreground">
+                    No sports available. <Link to="/admin/sports/new" className="underline">Create a sport first</Link>.
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="name">Season Name</Label>
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  placeholder="e.g., 2025 NFL Playoffs, 2025 PGA Tour"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="year">Year</Label>
+                <Input
+                  id="year"
+                  name="year"
+                  type="number"
+                  min="2000"
+                  max="2100"
+                  defaultValue={currentYear}
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="startDate">Start Date (Optional)</Label>
+                  <Input
+                    id="startDate"
+                    name="startDate"
+                    type="date"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="endDate">End Date (Optional)</Label>
+                  <Input
+                    id="endDate"
+                    name="endDate"
+                    type="date"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="status">Status</Label>
+                <Select name="status" defaultValue="upcoming" required>
+                  <SelectTrigger id="status">
+                    <SelectValue placeholder="Select status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="upcoming">Upcoming</SelectItem>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="completed">Completed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="scoringType">Scoring Type</Label>
+                <Select name="scoringType" required>
+                  <SelectTrigger id="scoringType">
+                    <SelectValue placeholder="Select scoring type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="playoffs">Playoffs</SelectItem>
+                    <SelectItem value="regular_season">Regular Season</SelectItem>
+                    <SelectItem value="majors">Majors</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-sm text-muted-foreground">
+                  Playoffs: Team sports playoffs. Regular Season: Full season standings. Majors: Individual sport majors.
+                </p>
+              </div>
+
+              {actionData?.error && (
+                <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
+                  {actionData.error}
+                </div>
+              )}
+
+              <div className="flex gap-4">
+                <Button type="submit" className="flex-1">
+                  Create Sports Season
+                </Button>
+                <Button type="button" variant="outline" asChild>
+                  <Link to="/admin/sports-seasons">Cancel</Link>
+                </Button>
+              </div>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports-seasons.tsx b/app/routes/admin.sports-seasons.tsx
new file mode 100644
index 0000000..8f77d27
--- /dev/null
+++ b/app/routes/admin.sports-seasons.tsx
@@ -0,0 +1,126 @@
+import { Link } from "react-router";
+import type { Route } from "./+types/admin.sports-seasons";
+import { findAllSportsSeasons } from "~/models/sports-season";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Plus, Calendar } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Badge } from "~/components/ui/badge";
+
+export async function loader() {
+  const sportsSeasons = await findAllSportsSeasons();
+  // Type assertion since we know the sport relation is included from the model
+  return { sportsSeasons: sportsSeasons as Array<typeof sportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }> };
+}
+
+export default function AdminSportsSeasons({ loaderData }: Route.ComponentProps) {
+  const { sportsSeasons } = loaderData;
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Sports Seasons</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage sports seasons across all sports
+          </p>
+        </div>
+        <Button asChild>
+          <Link to="/admin/sports-seasons/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Add Sports Season
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Sports Seasons</CardTitle>
+          <CardDescription>
+            {sportsSeasons.length} {sportsSeasons.length === 1 ? "season" : "seasons"} total
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {sportsSeasons.length === 0 ? (
+            <div className="text-center py-12">
+              <Calendar className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-semibold">No sports seasons yet</h3>
+              <p className="text-muted-foreground mt-2">
+                Get started by creating your first sports season
+              </p>
+              <Button className="mt-4" asChild>
+                <Link to="/admin/sports-seasons/new">
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Sports Season
+                </Link>
+              </Button>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Sport</TableHead>
+                  <TableHead>Year</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Scoring Type</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sportsSeasons.map((season) => (
+                  <TableRow key={season.id}>
+                    <TableCell className="font-medium">{season.name}</TableCell>
+                    <TableCell>{season.sport.name}</TableCell>
+                    <TableCell>{season.year}</TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          season.status === "active"
+                            ? "default"
+                            : season.status === "completed"
+                            ? "secondary"
+                            : "outline"
+                        }
+                      >
+                        {season.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground capitalize">
+                      {season.scoringType.replace("_", " ")}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex items-center justify-end gap-2">
+                        <Button variant="ghost" size="sm" asChild>
+                          <Link to={`/admin/sports-seasons/${season.id}/participants`}>
+                            Participants
+                          </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" asChild>
+                          <Link to={`/admin/sports-seasons/${season.id}`}>Edit</Link>
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports.new.tsx b/app/routes/admin.sports.new.tsx
new file mode 100644
index 0000000..2a52a48
--- /dev/null
+++ b/app/routes/admin.sports.new.tsx
@@ -0,0 +1,155 @@
+import { Form, Link, redirect } from "react-router";
+import type { Route } from "./+types/admin.sports.new";
+import { createSport } from "~/models/sport";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+
+export async function action({ request }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const name = formData.get("name");
+  const type = formData.get("type");
+  const slug = formData.get("slug");
+  const description = formData.get("description");
+
+  // Validation
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Sport name is required" };
+  }
+
+  if (type !== "team" && type !== "individual") {
+    return { error: "Sport type must be either 'team' or 'individual'" };
+  }
+
+  if (typeof slug !== "string" || !slug.trim()) {
+    return { error: "Slug is required" };
+  }
+
+  // Validate slug format (lowercase, hyphens only)
+  if (!/^[a-z0-9-]+$/.test(slug)) {
+    return { error: "Slug must contain only lowercase letters, numbers, and hyphens" };
+  }
+
+  try {
+    await createSport({
+      name: name.trim(),
+      type,
+      slug: slug.trim(),
+      description: typeof description === "string" ? description.trim() : null,
+    });
+
+    return redirect("/admin/sports");
+  } catch (error) {
+    console.error("Error creating sport:", error);
+    return { error: "Failed to create sport. The slug might already exist." };
+  }
+}
+
+export default function NewSport({ actionData }: Route.ComponentProps) {
+  return (
+    <div className="p-8">
+      <div className="max-w-2xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Create New Sport</h1>
+          <p className="text-muted-foreground mt-1">
+            Add a new sport to the system
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sport Details</CardTitle>
+            <CardDescription>
+              Enter the information for the new sport
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form method="post" className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="name">Sport Name</Label>
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  placeholder="e.g., NFL, NBA, Golf - Men's"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="type">Type</Label>
+                <Select name="type" required>
+                  <SelectTrigger id="type">
+                    <SelectValue placeholder="Select sport type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="team">Team Sport</SelectItem>
+                    <SelectItem value="individual">Individual Sport</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-sm text-muted-foreground">
+                  Team sports have teams, individual sports have players
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="slug">Slug</Label>
+                <Input
+                  id="slug"
+                  name="slug"
+                  type="text"
+                  placeholder="e.g., nfl, nba, golf-mens"
+                  pattern="[a-z0-9-]+"
+                  required
+                />
+                <p className="text-sm text-muted-foreground">
+                  URL-friendly identifier (lowercase, hyphens only)
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description (Optional)</Label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  placeholder="Brief description of the sport"
+                  rows={3}
+                />
+              </div>
+
+              {actionData?.error && (
+                <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
+                  {actionData.error}
+                </div>
+              )}
+
+              <div className="flex gap-4">
+                <Button type="submit" className="flex-1">
+                  Create Sport
+                </Button>
+                <Button type="button" variant="outline" asChild>
+                  <Link to="/admin/sports">Cancel</Link>
+                </Button>
+              </div>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.sports.tsx b/app/routes/admin.sports.tsx
new file mode 100644
index 0000000..fee245b
--- /dev/null
+++ b/app/routes/admin.sports.tsx
@@ -0,0 +1,106 @@
+import { Link } from "react-router";
+import type { Route } from "./+types/admin.sports";
+import { findAllSports } from "~/models/sport";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Plus, Trophy } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Badge } from "~/components/ui/badge";
+
+export async function loader() {
+  const sports = await findAllSports();
+  return { sports };
+}
+
+export default function AdminSports({ loaderData }: Route.ComponentProps) {
+  const { sports } = loaderData;
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Sports</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage all sports in the system
+          </p>
+        </div>
+        <Button asChild>
+          <Link to="/admin/sports/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Add Sport
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Sports</CardTitle>
+          <CardDescription>
+            {sports.length} {sports.length === 1 ? "sport" : "sports"} total
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {sports.length === 0 ? (
+            <div className="text-center py-12">
+              <Trophy className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-semibold">No sports yet</h3>
+              <p className="text-muted-foreground mt-2">
+                Get started by creating your first sport
+              </p>
+              <Button className="mt-4" asChild>
+                <Link to="/admin/sports/new">
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Sport
+                </Link>
+              </Button>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Slug</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sports.map((sport) => (
+                  <TableRow key={sport.id}>
+                    <TableCell className="font-medium">{sport.name}</TableCell>
+                    <TableCell>
+                      <Badge variant={sport.type === "team" ? "default" : "secondary"}>
+                        {sport.type}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {sport.slug}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="sm" asChild>
+                        <Link to={`/admin/sports/${sport.id}`}>Edit</Link>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/routes/admin.templates.$id.tsx b/app/routes/admin.templates.$id.tsx
new file mode 100644
index 0000000..fecbcf1
--- /dev/null
+++ b/app/routes/admin.templates.$id.tsx
@@ -0,0 +1,381 @@
+import { Form, Link, redirect } from "react-router";
+import { useState } from "react";
+import type { Route } from "./+types/admin.templates.$id";
+import { 
+  findSeasonTemplateWithSportsSeasons,
+  updateSeasonTemplate,
+  deleteSeasonTemplate,
+  setSeasonTemplateActive
+} from "~/models/season-template";
+import {
+  addSportToTemplate,
+  removeSportFromTemplate,
+  updateSeasonTemplateSport
+} from "~/models/season-template-sport";
+import { findAllSportsSeasons } from "~/models/sports-season";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import { Trash2, Plus, X } from "lucide-react";
+import { Badge } from "~/components/ui/badge";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const template = await findSeasonTemplateWithSportsSeasons(params.id);
+  
+  if (!template) {
+    throw new Response("Template not found", { status: 404 });
+  }
+
+  const allSportsSeasons = await findAllSportsSeasons();
+
+  // Type assertion since we know the sport relation is included
+  return { 
+    template, 
+    allSportsSeasons: allSportsSeasons as Array<typeof allSportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }> 
+  };
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
+
+  if (intent === "delete") {
+    await deleteSeasonTemplate(params.id);
+    return redirect("/admin/templates");
+  }
+
+  if (intent === "toggle-active") {
+    const isActive = formData.get("isActive") === "true";
+    await setSeasonTemplateActive(params.id, isActive);
+    return { success: true };
+  }
+
+  if (intent === "add-sport") {
+    const sportsSeasonId = formData.get("sportsSeasonId");
+    const isRequired = formData.get("isRequired") === "on";
+    
+    if (typeof sportsSeasonId === "string") {
+      await addSportToTemplate(params.id, sportsSeasonId, isRequired);
+    }
+    return { success: true };
+  }
+
+  if (intent === "remove-sport") {
+    const sportsSeasonId = formData.get("sportsSeasonId");
+    
+    if (typeof sportsSeasonId === "string") {
+      await removeSportFromTemplate(params.id, sportsSeasonId);
+    }
+    return { success: true };
+  }
+
+  if (intent === "toggle-required") {
+    const sportsSeasonId = formData.get("sportsSeasonId");
+    const isRequired = formData.get("isRequired") === "true";
+    
+    if (typeof sportsSeasonId === "string") {
+      await updateSeasonTemplateSport(params.id, sportsSeasonId, isRequired);
+    }
+    return { success: true };
+  }
+
+  // Update template
+  const name = formData.get("name");
+  const year = formData.get("year");
+  const description = formData.get("description");
+
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Template name is required" };
+  }
+
+  if (typeof year !== "string") {
+    return { error: "Year is required" };
+  }
+
+  const yearNum = parseInt(year, 10);
+  if (isNaN(yearNum) || yearNum < 2000 || yearNum > 2100) {
+    return { error: "Year must be between 2000 and 2100" };
+  }
+
+  try {
+    await updateSeasonTemplate(params.id, {
+      name: name.trim(),
+      year: yearNum,
+      description: typeof description === "string" && description.trim() ? description.trim() : null,
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error updating template:", error);
+    return { error: "Failed to update template. Please try again." };
+  }
+}
+
+export default function EditTemplate({ loaderData, actionData }: Route.ComponentProps) {
+  const { template, allSportsSeasons } = loaderData;
+  const [selectedSportId, setSelectedSportId] = useState("");
+  const [isRequired, setIsRequired] = useState(true);
+
+  const includedSeasonIds = new Set(
+    template.seasonTemplateSports.map((s) => s.sportsSeasonId)
+  );
+
+  const availableSportsSeasons = allSportsSeasons.filter(
+    (s) => !includedSeasonIds.has(s.id)
+  );
+
+  return (
+    <div className="p-8">
+      <div className="max-w-4xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Edit Template</h1>
+          <p className="text-muted-foreground mt-1">{template.name}</p>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Template Details</CardTitle>
+              <CardDescription>Update the template information</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form method="post" className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Template Name</Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    defaultValue={template.name}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="year">Year</Label>
+                  <Input
+                    id="year"
+                    name="year"
+                    type="number"
+                    min="2000"
+                    max="2100"
+                    defaultValue={template.year}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="description">Description (Optional)</Label>
+                  <Textarea
+                    id="description"
+                    name="description"
+                    defaultValue={template.description || ""}
+                    rows={3}
+                  />
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Form method="post">
+                    <input type="hidden" name="intent" value="toggle-active" />
+                    <input type="hidden" name="isActive" value={(!template.isActive).toString()} />
+                    <Button
+                      type="submit"
+                      variant={template.isActive ? "outline" : "default"}
+                      size="sm"
+                    >
+                      {template.isActive ? "Set Inactive" : "Set Active"}
+                    </Button>
+                  </Form>
+                  <Badge variant={template.isActive ? "default" : "secondary"}>
+                    {template.isActive ? "Active" : "Inactive"}
+                  </Badge>
+                </div>
+
+                {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-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
+                    Template updated successfully!
+                  </div>
+                )}
+
+                <div className="flex gap-4">
+                  <Button type="submit" className="flex-1">
+                    Save Changes
+                  </Button>
+                  <Button type="button" variant="outline" asChild>
+                    <Link to="/admin/templates">Cancel</Link>
+                  </Button>
+                </div>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Sports Seasons</CardTitle>
+              <CardDescription>
+                Add sports seasons to this template
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {template.seasonTemplateSports.length > 0 && (
+                <div className="space-y-2">
+                  {template.seasonTemplateSports.map((templateSport) => (
+                    <div
+                      key={templateSport.id}
+                      className="flex items-center justify-between p-3 border rounded-lg"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div>
+                          <p className="font-medium">
+                            {templateSport.sportsSeason.sport.name} - {templateSport.sportsSeason.name}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {templateSport.sportsSeason.year} • {templateSport.sportsSeason.scoringType.replace("_", " ")}
+                          </p>
+                        </div>
+                        <Badge variant={templateSport.isRequired ? "default" : "outline"}>
+                          {templateSport.isRequired ? "Required" : "Optional"}
+                        </Badge>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Form method="post">
+                          <input type="hidden" name="intent" value="toggle-required" />
+                          <input type="hidden" name="sportsSeasonId" value={templateSport.sportsSeasonId} />
+                          <input type="hidden" name="isRequired" value={(!templateSport.isRequired).toString()} />
+                          <Button type="submit" variant="ghost" size="sm">
+                            Toggle
+                          </Button>
+                        </Form>
+                        <Form method="post">
+                          <input type="hidden" name="intent" value="remove-sport" />
+                          <input type="hidden" name="sportsSeasonId" value={templateSport.sportsSeasonId} />
+                          <Button
+                            type="submit"
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive"
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </Form>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {availableSportsSeasons.length > 0 ? (
+                <Form method="post" className="flex gap-2">
+                  <input type="hidden" name="intent" value="add-sport" />
+                  <Select
+                    name="sportsSeasonId"
+                    value={selectedSportId}
+                    onValueChange={setSelectedSportId}
+                    required
+                  >
+                    <SelectTrigger className="flex-1">
+                      <SelectValue placeholder="Select a sports season" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableSportsSeasons.map((season) => (
+                        <SelectItem key={season.id} value={season.id}>
+                          {season.sport.name} - {season.name} ({season.year})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="isRequired"
+                      name="isRequired"
+                      checked={isRequired}
+                      onCheckedChange={(checked) => setIsRequired(checked === true)}
+                    />
+                    <Label htmlFor="isRequired" className="text-sm">Required</Label>
+                  </div>
+                  <Button type="submit">
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </Form>
+              ) : (
+                <p className="text-sm text-muted-foreground text-center py-4">
+                  All available sports seasons have been added
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="border-destructive">
+            <CardHeader>
+              <CardTitle className="text-destructive">Danger Zone</CardTitle>
+              <CardDescription>
+                Permanently delete this template
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="destructive">
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete Template
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will permanently delete the template "{template.name}".
+                      This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <Form method="post">
+                      <input type="hidden" name="intent" value="delete" />
+                      <AlertDialogAction type="submit" className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                        Delete
+                      </AlertDialogAction>
+                    </Form>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.templates.new.tsx b/app/routes/admin.templates.new.tsx
new file mode 100644
index 0000000..acdbcee
--- /dev/null
+++ b/app/routes/admin.templates.new.tsx
@@ -0,0 +1,144 @@
+import { Form, Link, redirect } from "react-router";
+import type { Route } from "./+types/admin.templates.new";
+import { createSeasonTemplate } from "~/models/season-template";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+
+export async function action({ request }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const name = formData.get("name");
+  const year = formData.get("year");
+  const description = formData.get("description");
+
+  // Validation
+  if (typeof name !== "string" || !name.trim()) {
+    return { error: "Template name is required" };
+  }
+
+  if (typeof year !== "string") {
+    return { error: "Year is required" };
+  }
+
+  const yearNum = parseInt(year, 10);
+  if (isNaN(yearNum) || yearNum < 2000 || yearNum > 2100) {
+    return { error: "Year must be between 2000 and 2100" };
+  }
+
+  try {
+    const template = await createSeasonTemplate({
+      name: name.trim(),
+      year: yearNum,
+      description: typeof description === "string" && description.trim() ? description.trim() : null,
+      isActive: true,
+    });
+
+    return redirect(`/admin/templates/${template.id}`);
+  } catch (error) {
+    console.error("Error creating template:", error);
+    return { error: "Failed to create template. Please try again." };
+  }
+}
+
+export default function NewTemplate({ actionData }: Route.ComponentProps) {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="p-8">
+      <div className="max-w-2xl">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Create Season Template</h1>
+          <p className="text-muted-foreground mt-1">
+            Bundle sports seasons together for league commissioners
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Template Details</CardTitle>
+            <CardDescription>
+              Create a template that commissioners can use when setting up their leagues
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form method="post" className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="name">Template Name</Label>
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  placeholder="e.g., 2025 Full Season, 2025 Playoffs Only"
+                  required
+                />
+                <p className="text-sm text-muted-foreground">
+                  A descriptive name that commissioners will see
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="year">Year</Label>
+                <Input
+                  id="year"
+                  name="year"
+                  type="number"
+                  min="2000"
+                  max="2100"
+                  defaultValue={currentYear}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description (Optional)</Label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  placeholder="Describe what sports seasons are included in this template"
+                  rows={3}
+                />
+              </div>
+
+              {actionData?.error && (
+                <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
+                  {actionData.error}
+                </div>
+              )}
+
+              <div className="flex gap-4">
+                <Button type="submit" className="flex-1">
+                  Create Template
+                </Button>
+                <Button type="button" variant="outline" asChild>
+                  <Link to="/admin/templates">Cancel</Link>
+                </Button>
+              </div>
+            </Form>
+          </CardContent>
+        </Card>
+
+        <Card className="mt-6 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:border-blue-800">
+          <CardHeader>
+            <CardTitle className="text-blue-900 dark:text-blue-100">Next Steps</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-blue-800 dark:text-blue-200">
+            <p>After creating the template, you'll be able to:</p>
+            <ul className="list-disc list-inside mt-2 space-y-1">
+              <li>Add sports seasons to the template</li>
+              <li>Mark which sports are required vs optional</li>
+              <li>Set the number of flex spots</li>
+            </ul>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/admin.templates.tsx b/app/routes/admin.templates.tsx
new file mode 100644
index 0000000..dcfeac1
--- /dev/null
+++ b/app/routes/admin.templates.tsx
@@ -0,0 +1,108 @@
+import { Link } from "react-router";
+import type { Route } from "./+types/admin.templates";
+import { findAllSeasonTemplates } from "~/models/season-template";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Plus, FolderKanban } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Badge } from "~/components/ui/badge";
+
+export async function loader() {
+  const templates = await findAllSeasonTemplates();
+  return { templates };
+}
+
+export default function AdminTemplates({ loaderData }: Route.ComponentProps) {
+  const { templates } = loaderData;
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Season Templates</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage season templates for league commissioners
+          </p>
+        </div>
+        <Button asChild>
+          <Link to="/admin/templates/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Template
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Templates</CardTitle>
+          <CardDescription>
+            {templates.length} {templates.length === 1 ? "template" : "templates"} total
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {templates.length === 0 ? (
+            <div className="text-center py-12">
+              <FolderKanban className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-semibold">No templates yet</h3>
+              <p className="text-muted-foreground mt-2">
+                Create your first season template to bundle sports seasons
+              </p>
+              <Button className="mt-4" asChild>
+                <Link to="/admin/templates/new">
+                  <Plus className="mr-2 h-4 w-4" />
+                  Create Template
+                </Link>
+              </Button>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Year</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {templates.map((template) => (
+                  <TableRow key={template.id}>
+                    <TableCell className="font-medium">{template.name}</TableCell>
+                    <TableCell>{template.year}</TableCell>
+                    <TableCell>
+                      <Badge variant={template.isActive ? "default" : "secondary"}>
+                        {template.isActive ? "Active" : "Inactive"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground max-w-md truncate">
+                      {template.description || "-"}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="sm" asChild>
+                        <Link to={`/admin/templates/${template.id}`}>Edit</Link>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx
new file mode 100644
index 0000000..ae56268
--- /dev/null
+++ b/app/routes/admin.tsx
@@ -0,0 +1,78 @@
+import { Link, Outlet, redirect } from "react-router";
+import { getAuth } from "@clerk/react-router/server";
+import type { Route } from "./+types/admin";
+import { isUserAdminByClerkId } from "~/models/user";
+import { Button } from "~/components/ui/button";
+import {
+  LayoutDashboard,
+  Trophy,
+  Calendar,
+  FolderKanban,
+  RefreshCw,
+} from "lucide-react";
+
+export async function loader(args: Route.LoaderArgs) {
+  const { userId } = await getAuth(args);
+
+  if (!userId) {
+    throw redirect("/");
+  }
+
+  const isAdmin = await isUserAdminByClerkId(userId);
+  if (!isAdmin) {
+    throw redirect("/");
+  }
+
+  return { isAdmin };
+}
+
+export default function AdminLayout() {
+  return (
+    <div className="flex min-h-screen">
+      {/* Sidebar */}
+      <aside className="w-64 border-r bg-muted/40">
+        <div className="flex h-16 items-center border-b px-6">
+          <h2 className="text-lg font-semibold">Admin Panel</h2>
+        </div>
+        <nav className="space-y-1 p-4">
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin">
+              <LayoutDashboard className="mr-2 h-4 w-4" />
+              Dashboard
+            </Link>
+          </Button>
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin/sports">
+              <Trophy className="mr-2 h-4 w-4" />
+              Sports
+            </Link>
+          </Button>
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin/sports-seasons">
+              <Calendar className="mr-2 h-4 w-4" />
+              Sports Seasons
+            </Link>
+          </Button>
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin/templates">
+              <FolderKanban className="mr-2 h-4 w-4" />
+              Season Templates
+            </Link>
+          </Button>
+          <div className="border-t my-2" />
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin/data-sync">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Data Sync
+            </Link>
+          </Button>
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
diff --git a/app/routes/api.admin.export-sports-data.ts b/app/routes/api.admin.export-sports-data.ts
new file mode 100644
index 0000000..dc91107
--- /dev/null
+++ b/app/routes/api.admin.export-sports-data.ts
@@ -0,0 +1,21 @@
+import { getAuth } from "@clerk/react-router/server";
+import type { Route } from "./+types/api.admin.export-sports-data";
+import { isUserAdminByClerkId } from "~/models/user";
+import { exportSportsDataToJSON } from "~/utils/sports-data-sync.server";
+
+export async function loader(args: Route.LoaderArgs) {
+  const { userId } = await getAuth(args);
+
+  if (!userId) {
+    throw new Response("Unauthorized", { status: 401 });
+  }
+
+  const isAdmin = await isUserAdminByClerkId(userId);
+  if (!isAdmin) {
+    throw new Response("Forbidden", { status: 403 });
+  }
+
+  const data = await exportSportsDataToJSON();
+
+  return Response.json(data);
+}
diff --git a/app/utils/sports-data-sync.server.ts b/app/utils/sports-data-sync.server.ts
new file mode 100644
index 0000000..bfd5ddd
--- /dev/null
+++ b/app/utils/sports-data-sync.server.ts
@@ -0,0 +1,334 @@
+import { database } from "~/database/context";
+import * as schema from "~/database/schema";
+import { eq, and } from "drizzle-orm";
+
+interface ExportData {
+  version: string;
+  exportedAt: string;
+  sports: Array<{
+    name: string;
+    type: string;
+    slug: string;
+    description: string | null;
+  }>;
+  sportsSeasons: Array<{
+    sportSlug: string;
+    name: string;
+    year: number;
+    startDate: string | null;
+    endDate: string | null;
+    status: string;
+    scoringType: string;
+  }>;
+  participants: Array<{
+    sportSlug: string;
+    seasonName: string;
+    seasonYear: number;
+    name: string;
+    shortName: string | null;
+    externalId: string | null;
+  }>;
+  seasonTemplates: Array<{
+    name: string;
+    year: number;
+    description: string | null;
+    isActive: boolean;
+    sports: Array<{
+      sportSlug: string;
+      seasonName: string;
+      seasonYear: number;
+      isRequired: boolean;
+    }>;
+  }>;
+}
+
+export async function exportSportsDataToJSON(): Promise<ExportData> {
+  const db = database();
+
+  // Export sports
+  const sports = await db.query.sports.findMany({
+    orderBy: (sports, { asc }) => [asc(sports.name)],
+  });
+
+  // Export sports seasons with sport relation
+  const sportsSeasons = await db.query.sportsSeasons.findMany({
+    with: {
+      sport: true,
+    },
+    orderBy: (sportsSeasons, { desc, asc }) => [
+      desc(sportsSeasons.year),
+      asc(sportsSeasons.name),
+    ],
+  });
+
+  // Export participants with relations
+  const participants = await db.query.participants.findMany({
+    with: {
+      sportsSeason: {
+        with: {
+          sport: true,
+        },
+      },
+    },
+    orderBy: (participants, { asc }) => [asc(participants.name)],
+  });
+
+  // Export season templates with sports
+  const seasonTemplates = await db.query.seasonTemplates.findMany({
+    with: {
+      seasonTemplateSports: {
+        with: {
+          sportsSeason: {
+            with: {
+              sport: true,
+            },
+          },
+        },
+      },
+    },
+    orderBy: (templates, { desc }) => [desc(templates.year)],
+  });
+
+  // Build export data structure
+  return {
+    version: "1.0",
+    exportedAt: new Date().toISOString(),
+    sports: sports.map((sport) => ({
+      name: sport.name,
+      type: sport.type,
+      slug: sport.slug,
+      description: sport.description,
+    })),
+    sportsSeasons: sportsSeasons.map((season) => ({
+      sportSlug: season.sport.slug,
+      name: season.name,
+      year: season.year,
+      startDate: season.startDate,
+      endDate: season.endDate,
+      status: season.status,
+      scoringType: season.scoringType,
+    })),
+    participants: participants.map((participant) => ({
+      sportSlug: participant.sportsSeason.sport.slug,
+      seasonName: participant.sportsSeason.name,
+      seasonYear: participant.sportsSeason.year,
+      name: participant.name,
+      shortName: participant.shortName,
+      externalId: participant.externalId,
+    })),
+    seasonTemplates: seasonTemplates.map((template) => ({
+      name: template.name,
+      year: template.year,
+      description: template.description,
+      isActive: template.isActive,
+      sports: template.seasonTemplateSports.map((ts) => ({
+        sportSlug: ts.sportsSeason.sport.slug,
+        seasonName: ts.sportsSeason.name,
+        seasonYear: ts.sportsSeason.year,
+        isRequired: ts.isRequired,
+      })),
+    })),
+  };
+}
+
+export async function importSportsDataFromJSON(
+  jsonData: string,
+  mode: "merge" | "replace" = "merge"
+): Promise<{ created: number; updated: number; skipped: number }> {
+  const db = database();
+  const importData: ExportData = JSON.parse(jsonData);
+
+  let created = 0;
+  let updated = 0;
+  let skipped = 0;
+
+  if (mode === "replace") {
+    // Delete in reverse order of dependencies
+    await db.delete(schema.seasonTemplateSports);
+    await db.delete(schema.seasonTemplates);
+    await db.delete(schema.participantResults);
+    await db.delete(schema.participants);
+    await db.delete(schema.seasonSports);
+    await db.delete(schema.sportsSeasons);
+    await db.delete(schema.sports);
+  }
+
+  // Track created IDs for relationships
+  const sportIdMap = new Map<string, string>();
+  const sportsSeasonIdMap = new Map<string, string>();
+
+  // Import sports
+  for (const sport of importData.sports) {
+    const existing = await db.query.sports.findFirst({
+      where: eq(schema.sports.slug, sport.slug),
+    });
+
+    if (existing) {
+      if (mode === "merge") {
+        await db
+          .update(schema.sports)
+          .set({
+            name: sport.name,
+            type: sport.type as "team" | "individual",
+            description: sport.description,
+          })
+          .where(eq(schema.sports.slug, sport.slug));
+        sportIdMap.set(sport.slug, existing.id);
+        updated++;
+      }
+    } else {
+      const [createdSport] = await db
+        .insert(schema.sports)
+        .values({
+          name: sport.name,
+          type: sport.type as "team" | "individual",
+          slug: sport.slug,
+          description: sport.description,
+        })
+        .returning();
+      sportIdMap.set(sport.slug, createdSport.id);
+      created++;
+    }
+  }
+
+  // Import sports seasons
+  for (const season of importData.sportsSeasons) {
+    const sportId = sportIdMap.get(season.sportSlug);
+    if (!sportId) {
+      skipped++;
+      continue;
+    }
+
+    const existing = await db.query.sportsSeasons.findFirst({
+      where: and(
+        eq(schema.sportsSeasons.sportId, sportId),
+        eq(schema.sportsSeasons.name, season.name),
+        eq(schema.sportsSeasons.year, season.year)
+      ),
+    });
+
+    const seasonKey = `${season.sportSlug}:${season.name}:${season.year}`;
+
+    if (existing) {
+      if (mode === "merge") {
+        await db
+          .update(schema.sportsSeasons)
+          .set({
+            startDate: season.startDate,
+            endDate: season.endDate,
+            status: season.status as "upcoming" | "active" | "completed",
+            scoringType: season.scoringType as "playoffs" | "regular_season" | "majors",
+          })
+          .where(eq(schema.sportsSeasons.id, existing.id));
+        sportsSeasonIdMap.set(seasonKey, existing.id);
+        updated++;
+      }
+    } else {
+      const [createdSeason] = await db
+        .insert(schema.sportsSeasons)
+        .values({
+          sportId,
+          name: season.name,
+          year: season.year,
+          startDate: season.startDate,
+          endDate: season.endDate,
+          status: season.status as "upcoming" | "active" | "completed",
+          scoringType: season.scoringType as "playoffs" | "regular_season" | "majors",
+        })
+        .returning();
+      sportsSeasonIdMap.set(seasonKey, createdSeason.id);
+      created++;
+    }
+  }
+
+  // Import participants
+  for (const participant of importData.participants) {
+    const seasonKey = `${participant.sportSlug}:${participant.seasonName}:${participant.seasonYear}`;
+    const sportsSeasonId = sportsSeasonIdMap.get(seasonKey);
+
+    if (!sportsSeasonId) {
+      skipped++;
+      continue;
+    }
+
+    const existing = await db.query.participants.findFirst({
+      where: and(
+        eq(schema.participants.sportsSeasonId, sportsSeasonId),
+        eq(schema.participants.name, participant.name)
+      ),
+    });
+
+    if (!existing) {
+      await db.insert(schema.participants).values({
+        sportsSeasonId,
+        name: participant.name,
+        shortName: participant.shortName,
+        externalId: participant.externalId,
+      });
+      created++;
+    } else {
+      skipped++;
+    }
+  }
+
+  // Import season templates
+  for (const template of importData.seasonTemplates) {
+    const existing = await db.query.seasonTemplates.findFirst({
+      where: and(
+        eq(schema.seasonTemplates.name, template.name),
+        eq(schema.seasonTemplates.year, template.year)
+      ),
+    });
+
+    let templateId: string;
+
+    if (existing) {
+      if (mode === "merge") {
+        await db
+          .update(schema.seasonTemplates)
+          .set({
+            description: template.description,
+            isActive: template.isActive,
+          })
+          .where(eq(schema.seasonTemplates.id, existing.id));
+        templateId = existing.id;
+        updated++;
+
+        // Remove existing template sports to re-add them
+        await db
+          .delete(schema.seasonTemplateSports)
+          .where(eq(schema.seasonTemplateSports.templateId, templateId));
+      } else {
+        continue;
+      }
+    } else {
+      const [createdTemplate] = await db
+        .insert(schema.seasonTemplates)
+        .values({
+          name: template.name,
+          year: template.year,
+          description: template.description,
+          isActive: template.isActive,
+        })
+        .returning();
+      templateId = createdTemplate.id;
+      created++;
+    }
+
+    // Add template sports
+    for (const templateSport of template.sports) {
+      const seasonKey = `${templateSport.sportSlug}:${templateSport.seasonName}:${templateSport.seasonYear}`;
+      const sportsSeasonId = sportsSeasonIdMap.get(seasonKey);
+
+      if (sportsSeasonId) {
+        await db.insert(schema.seasonTemplateSports).values({
+          templateId,
+          sportsSeasonId,
+          isRequired: templateSport.isRequired,
+        });
+      }
+    }
+  }
+
+  return { created, updated, skipped };
+}
diff --git a/package-lock.json b/package-lock.json
index 3a9cb41..0c92a7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "dependencies": {
         "@clerk/react-router": "^2.1.0",
         "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -1769,6 +1770,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
diff --git a/package.json b/package.json
index e9ef630..b06b789 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@clerk/react-router": "^2.1.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.14",