@vatvaghool/create-ipl-dashboard 0.1.6 → 0.1.13

package/README.md

@@ -6,7 +6,7 @@ Scaffold a full-featured IPL fantasy cricket dashboard in seconds.
 npx @vatvaghool/create-ipl-dashboard my-league
 ```
 
-Follow the prompts to enter your MongoDB URI, fantasy league URL, and team names — then get a ready-to-run Next.js dashboard with standings charts, performance trackers, AI roasts, and more.
+Follow the prompts to enter your fantasy league URL, collection name, and team names — the database is pre-configured, so you don't need to provide a MongoDB URI. You get a ready-to-run Next.js dashboard with standings charts, performance trackers, AI roasts, and more.
 
 ## Usage
 
@@ -26,10 +26,14 @@ npx @vatvaghool/create-ipl-dashboard [project-name] [options]
 
 | Prompt | Description |
 |--------|-------------|
-| MongoDB URI | Your MongoDB connection string (or leave blank for file-based fallback) |
+| Project name | Directory to scaffold into |
 | League URL | The fantasy.iplt20.com league page URL |
+| Collection name | MongoDB collection to store this league's data (e.g. `ipl_2025_office_league`) |
+| League name | Display name for your league |
 | Teams | Team names (and optional owners) in your league |
 
+The database connection (`MONGODB_URI`) is hardcoded — you only need to specify which collection each league should use.
+
 If `--scrape` is provided, the CLI attempts to extract team names from the league page HTML. If that fails, it falls back to manual entry.
 
 ## Screenshots
@@ -69,7 +73,7 @@ A full Next.js 16 project with:
 - **AI roasting** — generated commentary in multiple languages
 - **Stock ticker** — fantasy stocks with sparklines
 - **Live updates** — bookmarklet or Playwright scraper for live sync
-- **MongoDB persistence** — optional, with file-based fallback for dev
+- **MongoDB persistence** — auto-configured database connection
 
 ## Quick start after scaffold
 
@@ -93,9 +97,39 @@ Open http://localhost:3000 to see your dashboard.
 The CLI:
 
 1. Copies a pre-built Next.js app template
-2. Writes your `.env` with MongoDB URI and league URL
+2. Writes your `.env` with the pre-configured `MONGODB_URI`, `COLLECTION_NAME`, league URL, and league name
 3. Generates `app/data/teams.ts` with your team roster
-4. Creates a placeholder `app/data/match-points.ts` (auto-populates as you sync)
-5. Installs dependencies
+4. Generates `app/data/league.ts` with league metadata
+5. Creates a placeholder `app/data/match-points.ts` (auto-populates as you sync)
+6. Installs dependencies
+7. Runs `seed:league` to create a **document in your specified collection** in the pre-configured database, storing league metadata (name, URL, teams, timestamps)
+
+Each league gets its own collection — run `create-ipl-dashboard` again with a different collection name to add another league.
 
 The template includes all dashboard components, API endpoints, scrapers, and tests from the [ipl-dashboard](https://github.com/anomalyco/ipl-dashboard) project.
+
+---
+
+## Next Steps
+
+### Adding more leagues
+
+```bash
+npx @vatvaghool/create-ipl-dashboard another-league
+```
+
+Provide a different collection name (e.g. `ipl_2025_friends_league`) and the new league will be stored in its own collection — data stays fully isolated.
+
+### Viewing seeded data
+
+Connect to the MongoDB instance with any MongoDB client. Each league appears as a separate collection containing a document with `type: "league"` and all the metadata (name, URL, teams, timestamps).
+
+### Production deployment
+
+```bash
+cd my-league
+npm run build
+npx vercel --prod
+```
+
+Set `IPL_POST_SECRET` in your Vercel dashboard. The `MONGODB_URI` and `COLLECTION_NAME` are already configured in the scaffolded `.env`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vatvaghool/create-ipl-dashboard",
-  "version": "0.1.6",
+  "version": "0.1.13",
   "description": "Scaffold an IPL fantasy cricket dashboard project",
   "type": "module",
   "bin": {

package/src/index.mjs

@@ -3,10 +3,12 @@
 import { join } from "node:path";
 import { existsSync } from "node:fs";
 import { mkdir } from "node:fs/promises";
-import { getProjectName, getMongoUri, getLeagueUrl, getTeams, close } from "./prompts.mjs";
+import { getProjectName, getLeagueUrl, getCollectionName, getLeagueName, getTeams, close } from "./prompts.mjs";
 import { scaffoldProject } from "./scaffold.mjs";
 import { scrapeTeamsFromUrl } from "./scraper.mjs";
 
+const MONGODB_URI = "mongodb+srv://admin:admin@cricket.ptjjrub.mongodb.net/?appName=cricket";
+
 function printHelp(exitCode) {
   console.log(`
   create-ipl-dashboard [project-name] [options]
@@ -59,8 +61,9 @@ async function main() {
 
   await mkdir(projectPath, { recursive: true });
 
-  const mongoUri = await getMongoUri();
   const leagueUrl = await getLeagueUrl();
+  const collectionName = await getCollectionName();
+  const leagueName = await getLeagueName();
   let teams;
 
   if (flags.scrape && leagueUrl) {
@@ -78,7 +81,7 @@ async function main() {
 
   close();
 
-  await scaffoldProject(projectPath, { mongoUri, leagueUrl, teams, skipInstall: flags.skipInstall });
+  await scaffoldProject(projectPath, { mongoUri: MONGODB_URI, leagueUrl, collectionName, leagueName, teams, skipInstall: flags.skipInstall });
 
   console.log("");
   console.log("  Next steps:");

package/src/prompts.mjs

@@ -33,20 +33,28 @@ export async function getProjectName(args) {
   return (await prompt("Project name: ")).trim() || "ipl-dashboard";
 }
 
-export async function getMongoUri() {
+export async function getLeagueUrl() {
   if (!isTTY) {
     await consumeAllLines();
     return (pipedLines[promptIndex++] || "").trim();
   }
-  return (await prompt("MongoDB URI (or press Enter to skip, can be set later): ")).trim();
+  return (await prompt("IPL fantasy league URL (or press Enter to skip, can be set later): ")).trim();
 }
 
-export async function getLeagueUrl() {
+export async function getCollectionName() {
   if (!isTTY) {
     await consumeAllLines();
-    return (pipedLines[promptIndex++] || "").trim();
+    return (pipedLines[promptIndex++] || "league_data").trim();
   }
-  return (await prompt("IPL fantasy league URL (or press Enter to skip, can be set later): ")).trim();
+  return (await prompt("MongoDB collection name for league data (e.g. ipl_2025_office_league): ")).trim() || "league_data";
+}
+
+export async function getLeagueName() {
+  if (!isTTY) {
+    await consumeAllLines();
+    return (pipedLines[promptIndex++] || "My IPL League").trim();
+  }
+  return (await prompt("League name (e.g. Office Fantasy League): ")).trim() || "My IPL League";
 }
 
 export async function getTeams() {

package/src/scaffold.mjs

@@ -8,7 +8,10 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const PACKAGE_ROOT = join(__dirname, "..");
 const TEMPLATE_DIR = join(PACKAGE_ROOT, "template");
 
-export async function scaffoldProject(projectPath, { mongoUri, leagueUrl, teams, skipInstall = false }) {
+export async function scaffoldProject(
+  projectPath,
+  { mongoUri, leagueUrl, collectionName, leagueName, teams, skipInstall = false },
+) {
   console.log(`\nCreating project at ${projectPath}...`);
 
   await mkdir(projectPath, { recursive: true });
@@ -19,36 +22,71 @@ export async function scaffoldProject(projectPath, { mongoUri, leagueUrl, teams,
     console.log("  (no template directory found, generating from scratch)");
   }
 
-  // Remove monorepo-specific files not needed in scaffolded project
-  for (const f of ["AGENTS.md", "tsconfig.tsbuildinfo", "tsconfig.buildinfo", "package-lock.json"]) {
-    try { await rm(join(projectPath, f)); } catch {}
+  for (const f of [
+    "AGENTS.md",
+    "tsconfig.tsbuildinfo",
+    "tsconfig.buildinfo",
+    "package-lock.json",
+  ]) {
+    try {
+      await rm(join(projectPath, f));
+    } catch {}
   }
 
-  await writeEnvFile(projectPath, { mongoUri, leagueUrl });
+  await writeEnvFile(projectPath, {
+    mongoUri,
+    leagueUrl,
+    collectionName,
+    leagueName,
+  });
   await writeTeamData(projectPath, teams);
+  await writeLeagueData(projectPath, { leagueName, leagueUrl, teams });
   await writeMatchPointsPlaceholder(projectPath);
   await updatePackageJson(projectPath);
 
-  // Remove monorepo's live snapshots (they're specific to original league)
-  for (const f of ["app/api/ipl/live-snapshot.json", "app/api/ipl/transfers/live-snapshot.json"]) {
-    try { await rm(join(projectPath, f)); } catch {}
+  for (const f of [
+    "app/api/ipl/live-snapshot.json",
+    "app/api/ipl/transfers/live-snapshot.json",
+  ]) {
+    try {
+      await rm(join(projectPath, f));
+    } catch {}
   }
 
   if (!skipInstall) {
     console.log("  Running npm install...");
     execSync("npm install", { cwd: projectPath, stdio: "inherit" });
+
+    if (mongoUri && leagueName) {
+      console.log("  Seeding league metadata into MongoDB...");
+      try {
+        execSync(`npm run seed:league -- "${leagueName}" "${collectionName}"`, {
+          cwd: projectPath,
+          stdio: "inherit",
+        });
+      } catch {
+        console.log("  League seed skipped (MongoDB may not be reachable yet)");
+      }
+    }
   } else {
-    console.log("  Skipping npm install (run manually: cd <project> && npm install)");
+    console.log(
+      "  Skipping npm install (run manually: cd <project> && npm install)",
+    );
   }
 
   console.log("\n  Done! Your project is ready at:", projectPath);
 }
 
-async function writeEnvFile(projectPath, { mongoUri, leagueUrl }) {
+async function writeEnvFile(
+  projectPath,
+  { mongoUri, leagueUrl, collectionName, leagueName },
+) {
   const envPath = join(projectPath, ".env");
   const lines = [
     `MONGODB_URI=${mongoUri || ""}`,
+    `COLLECTION_NAME=${collectionName || "league_data"}`,
     `IPL_LEAGUE_URL=${leagueUrl || ""}`,
+    `IPL_LEAGUE_NAME=${leagueName || ""}`,
     `IPL_POST_SECRET=`,
     ``,
     `IPL_API_BASE_URL=http://localhost:3000`,
@@ -100,6 +138,32 @@ for (const team of TEAMS) {
   await writeFile(join(dir, "teams.ts"), content);
 }
 
+async function writeLeagueData(projectPath, { leagueName, leagueUrl, teams }) {
+  const dir = join(projectPath, "app/data");
+  await mkdir(dir, { recursive: true });
+
+  const teamEntries = teams
+    .map((t) => `  { id: ${t.id}, name: "${t.name}", owner: "${t.owner}" }`)
+    .join(",\n");
+
+  const content = `export type LeagueInfo = {
+  name: string;
+  leagueUrl: string;
+  teams: Array<{ id: number; name: string; owner: string }>;
+};
+
+export const leagueInfo: LeagueInfo = {
+  name: "${leagueName || ""}",
+  leagueUrl: "${leagueUrl || ""}",
+  teams: [
+${teamEntries},
+  ],
+};
+`;
+
+  await writeFile(join(dir, "league.ts"), content);
+}
+
 async function writeMatchPointsPlaceholder(projectPath) {
   const dir = join(projectPath, "app/data");
   await mkdir(dir, { recursive: true });
@@ -124,6 +188,7 @@ async function updatePackageJson(projectPath) {
     pkg.name = "ipl-dashboard";
     pkg.private = false;
     delete pkg.scripts?.["generate:template"];
+    pkg.scripts["seed:league"] = "node scripts/seed-league.mjs";
     await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
   } catch {}
 }

package/template/README.md

@@ -67,7 +67,7 @@ Open http://localhost:3000
 | **StickyMini** | `components/dashboard/StickyMini.tsx` | Compact stat card with title, value, note, and color-coded icon |
 | **SectionCard** | `components/dashboard/SectionCard.tsx` | Animated motion-section wrapper with title, note, accent color, and staggered entrance |
 | **ChartBoard** | `components/dashboard/ChartBoard.tsx` | Recharts bar chart for team data with pill tags and tooltips |
-| **CaptainBoard** | `components/dashboard/CaptainBoard.tsx` | Displays captain/vice-captain picks per team with shield icons |
+| **CaptainBoard** | `components/dashboard/CaptainBoard.tsx` | All playing players with points as TeamPills badges, C/VC highlighted |
 | **LedgerTable** | `components/dashboard/LedgerTable.tsx` | Full standings table with colors, boosters, rank arrows, and formatted points |
 | **LatestBadge** | `components/dashboard/LatestBadge.tsx` | Color-coded pill badge for points (pink <200, orange 200-400, green >400) |
 
@@ -105,7 +105,7 @@ Open http://localhost:3000
 | `/api/ipl` | GET | Full dashboard payload used by the UI |
 | `/api/ipl?format=snapshot` | GET | Raw normalized snapshot only |
 | `/api/ipl` | POST | Ingest a leaderboard snapshot |
-| `/api/ipl/transfers` | GET | Transfer/booster snapshot for all teams |
+| `/api/ipl/transfers` | GET | Transfer/booster snapshot for all teams (fetched once on mount, not on poll) |
 | `/api/ipl/transfers` | POST | Ingest a single team transfer record |
 | `/api/ipl/upcoming-matches` | GET | Upcoming match schedule |
 | `/api/ops/status` | GET | Health/monitoring endpoint |

package/template/app/components/dashboard/CaptainBoard.tsx

@@ -1,5 +1,4 @@
 import { motion } from "framer-motion";
-import { FaUserShield } from "react-icons/fa6";
 import type { OverallChartItem } from "../../types";
 import { getTeamColor, formatLedgerNumber } from "../../utils/dashboard";
 
@@ -7,12 +6,81 @@ interface CaptainBoardProps {
   teams: OverallChartItem[];
 }
 
+function PlayerPill({
+  player,
+  isCaptain,
+  isViceCaptain,
+  color,
+  index,
+}: {
+  player: { name: string; points?: number };
+  isCaptain: boolean;
+  isViceCaptain: boolean;
+  color: string;
+  index: number;
+}) {
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 border px-2.5 py-1 text-[11px] font-bold leading-tight"
+      style={{
+        color: "var(--ink)",
+        border: "1.5px solid",
+        borderRadius: `999px ${920 + (index % 3) * 28}px ${980 - (index % 3) * 24}px 999px`,
+        borderColor: isCaptain
+          ? `color-mix(in srgb, #ec4899 50%, var(--line))`
+          : isViceCaptain
+            ? `color-mix(in srgb, #3b82f6 50%, var(--line))`
+            : `color-mix(in srgb, ${color} 35%, var(--line))`,
+        background: isCaptain
+          ? `color-mix(in srgb, #ec4899 18%, var(--panel-strong))`
+          : isViceCaptain
+            ? `color-mix(in srgb, #3b82f6 18%, var(--panel-strong))`
+            : `color-mix(in srgb, ${color} 14%, var(--panel-strong))`,
+        boxShadow: `1.5px 2px 0 color-mix(in srgb, ${color} 22%, var(--shadow))`,
+        transform: `rotate(${index % 2 === 0 ? -0.4 : 0.3}deg)`,
+        fontFamily: "var(--font-note), cursive",
+      }}
+    >
+      {typeof player.points === "number" && (
+        <span
+          className="font-mono text-[10px] font-black tabular-nums"
+          style={{ color: "var(--ink-soft)" }}
+        >
+          {formatLedgerNumber(player.points)}
+        </span>
+      )}
+      <span className="max-w-[80px] truncate">{player.name}</span>
+      {isCaptain && (
+        <span
+          className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[8px] font-black leading-none"
+          style={{
+            background: `color-mix(in srgb, #ec4899 50%, var(--panel-strong))`,
+            color: "var(--ink)",
+          }}
+        >
+          C
+        </span>
+      )}
+      {isViceCaptain && !isCaptain && (
+        <span
+          className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[8px] font-black leading-none"
+          style={{
+            background: `color-mix(in srgb, #3b82f6 50%, var(--panel-strong))`,
+            color: "var(--ink)",
+          }}
+        >
+          VC
+        </span>
+      )}
+    </span>
+  );
+}
+
 export function CaptainBoard({ teams }: CaptainBoardProps) {
   if (!teams.length) {
     return (
       <p className="ledger-note py-6">
-        Captain and vice-captain picks will appear when squad snapshots are
-        available.
+        Squad snapshots will appear when match data is available.
       </p>
     );
   }
@@ -21,114 +89,65 @@ export function CaptainBoard({ teams }: CaptainBoardProps) {
     <div className="captain-grid">
       {teams.map((team, index) => {
         const color = getTeamColor(index, teams.length);
+        const players = (team.players ?? []).filter((p) => typeof p.points === "number");
+        const captainName = team.captain?.name;
+        const viceCaptainName = team.viceCaptain?.name;
         return (
           <motion.div
             key={team.name}
-            initial={{ opacity: 0, y: 16 }}
+            initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.06 }}
-            className="relative"
+            transition={{ delay: index * 0.05 }}
           >
             <article
-              className={`captain-scrap captain-scrap-${index % 3} relative overflow-hidden`}
+              className="relative overflow-hidden rounded-xl p-3"
               style={{
-                borderColor: `color-mix(in srgb, ${color} 44%, var(--line))`,
-                background: `color-mix(in srgb, ${color} 8%, var(--panel) 92%)`,
-                boxShadow: `0 0 18px color-mix(in srgb, ${color} 20%, transparent)`,
+                border: `1.5px solid color-mix(in srgb, ${color} 40%, var(--line))`,
+                background: `color-mix(in srgb, ${color} 7%, var(--panel) 93%)`,
               }}
             >
-              <motion.div
-                className="absolute inset-0 rounded-xl pointer-events-none"
-                style={{
-                  background: `radial-gradient(circle at 50% 0%, color-mix(in srgb, ${color} 20%, transparent) 0%, transparent 70%)`,
-                }}
-                animate={{ opacity: [0.3, 0.7, 0.3] }}
-                transition={{
-                  repeat: Infinity,
-                  duration: 2.5 + (index % 3),
-                  ease: "easeInOut",
-                  delay: index * 0.2,
-                }}
-              />
-
-              <motion.div
-                className="absolute -inset-0.5 rounded-xl pointer-events-none"
-                style={{
-                  border: `2px solid ${color}`,
-                  opacity: 0.5,
-                }}
-                animate={{
-                  opacity: [0.2, 0.6, 0.2],
-                  filter: ["blur(3px)", "blur(7px)", "blur(3px)"],
-                }}
-                transition={{
-                  repeat: Infinity,
-                  duration: 2,
-                  ease: "easeInOut",
-                  delay: index * 0.15,
-                }}
-              />
+              <div className="flex items-center justify-between mb-2.5">
+                <p
+                  className="text-[13px] font-black leading-none"
+                  style={{ color: "var(--ink)" }}
+                >
+                  #{team.rank} {team.name}
+                </p>
+                <span
+                  className="text-[10px] font-black tabular-nums"
+                  style={{ color: "var(--ink-soft)" }}
+                >
+                  {players.length} plyrs
+                </span>
+              </div>
 
-              <div className="relative z-10">
-                <div className="captain-top">
-                  <div>
-                    <p
-                      className="captain-team compact"
-                      style={{ color: "var(--ink)" }}
-                    >
-                      #{team.rank} {team.name}
-                    </p>
-                  </div>
-                  <div className="captain-icon">
-                    <FaUserShield className="text-base" style={{ color }} />
-                  </div>
+              {players.length > 0 ? (
+                <div className="flex flex-wrap gap-1.5">
+                  {players.map((player, pi) => (
+                    <PlayerPill
+                      key={player.name}
+                      player={player}
+                      isCaptain={player.name === captainName}
+                      isViceCaptain={player.name === viceCaptainName}
+                      color={color}
+                      index={pi}
+                    />
+                  ))}
                 </div>
-
-                <div className="captain-players compact-grid">
-                  <div className="captain-role">
-                    <span
-                      className="captain-badge captain-badge-pink"
-                      style={{
-                        boxShadow: `0 0 8px color-mix(in srgb, #ec4899 30%, transparent)`,
-                      }}
-                    >
-                      C
-                    </span>
-                    <div>
-                      <p className="captain-player">
-                        {team.captain?.name ?? "TBD"}
-                      </p>
-                      {typeof team.captain?.points === "number" && (
-                        <p className="captain-player-sub">
-                          {formatLedgerNumber(team.captain.points)}
-                          <span className="captain-player-sub-pts"> pts</span>
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <div className="captain-role">
-                    <span
-                      className="captain-badge captain-badge-blue"
-                      style={{
-                        boxShadow: `0 0 8px color-mix(in srgb, #3b82f6 30%, transparent)`,
-                      }}
-                    >
-                      VC
-                    </span>
-                    <div>
-                      <p className="captain-player">
-                        {team.viceCaptain?.name ?? "TBD"}
-                      </p>
-                      {typeof team.viceCaptain?.points === "number" && (
-                        <p className="captain-player-sub">
-                          {formatLedgerNumber(team.viceCaptain.points)}
-                          <span className="captain-player-sub-pts"> pts</span>
-                        </p>
-                      )}
-                    </div>
-                  </div>
+              ) : (
+                <div className="flex flex-wrap gap-1.5">
+                  <span
+                    className="inline-flex items-center gap-1.5 border px-2.5 py-1 text-[11px] font-bold"
+                    style={{
+                      color: "var(--ink-soft)",
+                      border: "1.5px dashed var(--line)",
+                      borderRadius: 9999,
+                    }}
+                  >
+                    No players with points yet
+                  </span>
                 </div>
-              </div>
+              )}
             </article>
           </motion.div>
         );

package/template/app/globals.css

@@ -564,17 +564,13 @@ select {
 }
 
 .leader-list,
-.insight-grid,
-.captain-grid {
+.insight-grid {
   display: grid;
   gap: 0.8rem;
 }
 .leader-list {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.captain-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
 .hover-jitter {
   transition:
     transform 180ms ease,
@@ -883,15 +879,9 @@ select {
 }
 
 .captain-grid {
+  display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.captain-scrap {
-  border: 1px solid var(--line);
-  padding: 0.85rem;
-  min-height: 6.2rem;
-  border-radius: 18px;
-  background: color-mix(in srgb, var(--panel) 96%, white 4%);
+  gap: 0.75rem;
 }
 
 @media (min-width: 1280px) {
@@ -900,97 +890,6 @@ select {
   }
 }
 
-.captain-scrap-0,
-.captain-scrap-1,
-.captain-scrap-2 {
-  transform: none;
-}
-
-.captain-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-.captain-team.compact {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 700;
-}
-
-.captain-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  background: color-mix(in srgb, white 92%, var(--panel) 8%);
-}
-
-.captain-players.compact-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.6rem;
-  margin-top: 0.85rem;
-}
-
-.captain-role {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.captain-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 999px;
-  font-family: var(--font-note), cursive;
-  font-size: 0.8rem;
-  font-weight: 800;
-  flex-shrink: 0;
-}
-
-.captain-badge-pink {
-  background: color-mix(in srgb, var(--marker-pink) 44%, var(--panel-strong));
-  border: 1.5px solid color-mix(in srgb, var(--marker-pink) 60%, var(--line));
-  color: var(--ink);
-}
-
-.captain-badge-blue {
-  background: color-mix(in srgb, var(--marker-blue) 44%, var(--panel-strong));
-  border: 1.5px solid color-mix(in srgb, var(--marker-blue) 60%, var(--line));
-  color: var(--ink);
-}
-
-.captain-player {
-  margin: 0;
-  font-size: 0.88rem;
-  font-weight: 700;
-  line-height: 1.25;
-  color: var(--ink);
-}
-
-.captain-player-sub {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 800;
-  color: var(--ink);
-  letter-spacing: 0.02em;
-}
-
-.captain-player-sub-pts {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--ink-soft);
-  letter-spacing: 0.06em;
-}
-
 .ledger-shell {
   overflow-x: auto;
   border: 1.5px dashed var(--line);

package/template/app/hooks/useDashboardData.ts

@@ -9,6 +9,7 @@ import {
 export function useDashboardData() {
   const hydrateFromCache = useDashboardStore((state) => state.hydrateFromCache);
   const fetchDashboard = useDashboardStore((state) => state.fetchDashboard);
+  const fetchTransfers = useDashboardStore((state) => state.fetchTransfers);
   const data = useDashboardStore((state) => state.data);
   const loading = useDashboardStore((state) => state.loading);
   const error = useDashboardStore((state) => state.error);
@@ -16,13 +17,14 @@ export function useDashboardData() {
   useEffect(() => {
     hydrateFromCache();
     void fetchDashboard();
+    void fetchTransfers();
 
     const interval = window.setInterval(() => {
       void fetchDashboard();
     }, DASHBOARD_SYNC_INTERVAL_MS);
 
     return () => window.clearInterval(interval);
-  }, [fetchDashboard, hydrateFromCache]);
+  }, [fetchDashboard, fetchTransfers, hydrateFromCache]);
 
   return { data, loading, error };
 }

package/template/app/store/dashboardStore.ts

@@ -13,8 +13,10 @@ type State = {
   loading: boolean;
   error: string | null;
   lastSyncedAt: string | null;
+  hasFetchedTransfers: boolean;
   hydrateFromCache: () => void;
   fetchDashboard: () => Promise<void>;
+  fetchTransfers: () => Promise<void>;
 };
 
 export const useDashboardStore = create<State>((set) => ({
@@ -22,6 +24,7 @@ export const useDashboardStore = create<State>((set) => ({
   loading: true,
   error: null,
   lastSyncedAt: null,
+  hasFetchedTransfers: false,
 
   hydrateFromCache: () => {
     const cached = readDashboardCache();
@@ -46,24 +49,21 @@ export const useDashboardStore = create<State>((set) => ({
     }
 
     try {
-      const [dashboardResponse, transfersResponse] = await Promise.all([
-        fetch(`/api/ipl?t=${Date.now()}`, { cache: "no-store" }),
-        fetch(`/api/ipl/transfers?t=${Date.now()}`, { cache: "no-store" }),
-      ]);
+      const response = await fetch(`/api/ipl?t=${Date.now()}`, {
+        cache: "no-store",
+      });
 
-      if (!dashboardResponse.ok) {
-        throw new Error(`Dashboard fetch failed (${dashboardResponse.status})`);
+      if (!response.ok) {
+        throw new Error(`Dashboard fetch failed (${response.status})`);
       }
 
-      const json = (await dashboardResponse.json()) as DashboardData;
-      const transfers = transfersResponse.ok
-        ? ((await transfersResponse.json()) as DashboardData["transfers"])
-        : undefined;
+      const json = (await response.json()) as DashboardData;
+      const currentData = useDashboardStore.getState().data;
 
       set({
         data: {
           ...json,
-          transfers,
+          transfers: currentData?.transfers,
         },
         loading: false,
         error: null,
@@ -71,7 +71,7 @@ export const useDashboardStore = create<State>((set) => ({
       });
       writeDashboardCache({
         ...json,
-        transfers,
+        transfers: currentData?.transfers,
       });
     } catch (err) {
       const message = err instanceof Error ? err.message : "Fetch failed";
@@ -82,4 +82,33 @@ export const useDashboardStore = create<State>((set) => ({
       });
     }
   },
+
+  fetchTransfers: async () => {
+    const { hasFetchedTransfers } = useDashboardStore.getState();
+    if (hasFetchedTransfers) return;
+
+    try {
+      const response = await fetch(`/api/ipl/transfers?t=${Date.now()}`, {
+        cache: "no-store",
+      });
+
+      if (!response.ok) return;
+
+      const transfers =
+        (await response.json()) as DashboardData["transfers"];
+      const currentData = useDashboardStore.getState().data;
+
+      if (currentData) {
+        set({
+          data: { ...currentData, transfers },
+          hasFetchedTransfers: true,
+        });
+        writeDashboardCache({ ...currentData, transfers });
+      } else {
+        set({ hasFetchedTransfers: true });
+      }
+    } catch {
+      set({ hasFetchedTransfers: true });
+    }
+  },
 }));

package/template/scripts/seed-league.mjs

@@ -0,0 +1,91 @@
+import { readFileSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, "..");
+
+try {
+  process.loadEnvFile(join(ROOT, ".env"));
+} catch {
+  // env vars may already be set
+}
+
+function sanitizeCollectionName(name) {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9_]/g, "_")
+    .replace(/_+/g, "_")
+    .replace(/^_|_$/g, "")
+    .slice(0, 100) || "league";
+}
+
+async function main() {
+  const leagueName = process.argv[2] || process.env.IPL_LEAGUE_NAME?.trim();
+  if (!leagueName) {
+    console.log("No league name provided. Pass as argument or set IPL_LEAGUE_NAME.");
+    process.exit(1);
+  }
+
+  const collectionName = process.argv[3] || process.env.COLLECTION_NAME?.trim() || sanitizeCollectionName(leagueName);
+
+  const uri = process.env.MONGODB_URI;
+  if (!uri) {
+    console.log("MONGODB_URI not set. Skipping league seed.");
+    return;
+  }
+
+  const leagueUrl = process.env.IPL_LEAGUE_URL?.trim();
+
+  let teams = [];
+  const leagueDataPath = join(ROOT, "app/data/league.ts");
+  if (existsSync(leagueDataPath)) {
+    try {
+      const content = readFileSync(leagueDataPath, "utf8");
+      const match = content.match(/teams:\s*\[([\s\S]*?)\],/);
+      if (match) {
+        const entries = [...match[1].matchAll(/\{\s*id:\s*(\d+),\s*name:\s*"([^"]+)",\s*owner:\s*"([^"]+)"\s*\}/g)];
+        teams = entries.map(([, id, name, owner]) => ({
+          id: Number(id),
+          name,
+          owner,
+        }));
+      }
+    } catch {
+      // fallback
+    }
+  }
+
+  const { MongoClient } = await import("mongodb");
+  const client = new MongoClient(uri);
+
+  try {
+    await client.connect();
+    const db = client.db();
+    const collection = db.collection(collectionName);
+
+    const doc = {
+      type: "league",
+      name: leagueName,
+      leagueUrl: leagueUrl || "",
+      teams,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    await collection.updateOne(
+      { type: "league" },
+      { $set: doc },
+      { upsert: true },
+    );
+
+    console.log(`League "${leagueName}" seeded in collection "${collectionName}" with ${teams.length} team(s).`);
+  } finally {
+    await client.close();
+  }
+}
+
+main().catch((err) => {
+  console.error("Failed to seed league:", err.message);
+  process.exitCode = 1;
+});