@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/lib/teamBadges.ts

@@ -0,0 +1,223 @@
+import type { DailyChartRow, DashboardData } from "../types";
+import { getPlayedMatchRows } from "./dashboardData";
+import { getStdDeviation } from "./utils/getStdDeviation";
+
+export type TeamBadge = {
+  id: string;
+  label: string;
+  description: string;
+};
+
+const HIGH_STREAK_THRESHOLD = 200;
+
+const getHistoricalRows = (daily: DailyChartRow[]) => getPlayedMatchRows(daily);
+
+const getTeamNames = (data: DashboardData) =>
+  Array.from(
+    new Set([
+      ...data.overall.map((team) => team.name),
+      ...data.daily.flatMap((row) => Object.keys(row)),
+    ]),
+  ).filter((key) => key !== "day");
+
+const appendBadge = (
+  map: Record<string, TeamBadge[]>,
+  team: string | undefined,
+  badge: TeamBadge,
+) => {
+  if (!team) {
+    return;
+  }
+
+  const next = map[team] ?? [];
+
+  if (next.some((item) => item.id === badge.id)) {
+    return;
+  }
+
+  map[team] = [...next, badge];
+};
+
+const buildScoreMap = (historicalRows: DailyChartRow[], teamNames: string[]) =>
+  teamNames.reduce<Record<string, number[]>>((acc, team) => {
+    acc[team] = historicalRows
+      .map((row) => (row[team] === undefined ? null : Number(row[team])))
+      .filter((value): value is number => value !== null && Number.isFinite(value));
+
+    return acc;
+  }, {});
+
+const getLongestHotStreak = (scores: number[]) => {
+  let best = 0;
+  let current = 0;
+
+  scores.forEach((score) => {
+    if (score >= HIGH_STREAK_THRESHOLD) {
+      current += 1;
+      best = Math.max(best, current);
+      return;
+    }
+
+    current = 0;
+  });
+
+  return best;
+};
+
+export const buildTeamBadgeMap = (data: DashboardData) => {
+  const badgeMap: Record<string, TeamBadge[]> = {};
+  const historicalRows = getHistoricalRows(data.daily);
+  const teamNames = getTeamNames(data);
+  const scoreMap = buildScoreMap(historicalRows, teamNames);
+
+  const seasonLeader = [...data.overall].sort((a, b) => a.rank - b.rank)[0];
+  appendBadge(badgeMap, seasonLeader?.name, {
+    id: "leader",
+    label: "Leader",
+    description: "Overall points leader",
+  });
+
+  const hottestTeam = [...data.overall].sort(
+    (a, b) => (b.lastMatchPoints ?? 0) - (a.lastMatchPoints ?? 0),
+  )[0];
+  if ((hottestTeam?.lastMatchPoints ?? 0) > 0) {
+    appendBadge(badgeMap, hottestTeam.name, {
+      id: "latest-leader",
+      label: "MVP",
+      description: "Highest latest-match score",
+    });
+  }
+
+  const transferSaver = [...data.overall]
+    .filter((team) => typeof team.transfersLeft === "number")
+    .sort((a, b) => (b.transfersLeft ?? 0) - (a.transfersLeft ?? 0))[0];
+  if (transferSaver) {
+    appendBadge(badgeMap, transferSaver.name, {
+      id: "transfers-left",
+      label: "Saver",
+      description: "Most transfers left in hand",
+    });
+  }
+
+  const biggestRiser = [...data.overall]
+    .filter(
+      (team) =>
+        typeof team.previousRank === "number" &&
+        team.rank < (team.previousRank ?? team.rank),
+    )
+    .sort(
+      (a, b) =>
+        (b.previousRank ?? b.rank) -
+        b.rank -
+        ((a.previousRank ?? a.rank) - a.rank),
+    )[0];
+  if (biggestRiser) {
+    appendBadge(badgeMap, biggestRiser.name, {
+      id: "riser",
+      label: "Riser",
+      description: "Biggest upward move since the last snapshot",
+    });
+  }
+
+  const widestGap = [...data.overall].sort(
+    (a, b) => (b.gapToNext ?? 0) - (a.gapToNext ?? 0),
+  )[0];
+  if ((widestGap?.gapToNext ?? 0) > 0) {
+    appendBadge(badgeMap, widestGap.name, {
+      id: "gap",
+      label: "Gap",
+      description: "Largest cushion to the next rank",
+    });
+  }
+
+  const scoreEntries = teamNames.map((team) => {
+    const scores = scoreMap[team] ?? [];
+    const average =
+      scores.reduce((sum, score) => sum + score, 0) / Math.max(scores.length, 1);
+
+    return {
+      team,
+      scores,
+      max: scores.length ? Math.max(...scores) : 0,
+      zeroCount: scores.filter((score) => score === 0).length,
+      volatility: getStdDeviation(scores),
+      average,
+      streak: getLongestHotStreak(scores),
+    };
+  });
+
+  const duckTeam = [...scoreEntries].sort((a, b) => b.zeroCount - a.zeroCount)[0];
+  if ((duckTeam?.zeroCount ?? 0) > 0) {
+    appendBadge(badgeMap, duckTeam.team, {
+      id: "ducks",
+      label: "Ducks",
+      description: "Most zero-point matches",
+    });
+  }
+
+  const peakTeam = [...scoreEntries].sort((a, b) => b.max - a.max)[0];
+  if ((peakTeam?.max ?? 0) > 0) {
+    appendBadge(badgeMap, peakTeam.team, {
+      id: "peak",
+      label: "Peak",
+      description: "Highest single-match score this season",
+    });
+  }
+
+  const mostConsistent = [...scoreEntries]
+    .filter((entry) => entry.scores.length > 1)
+    .sort((a, b) => a.volatility - b.volatility)[0];
+  if (mostConsistent) {
+    appendBadge(badgeMap, mostConsistent.team, {
+      id: "consistent",
+      label: "Consistent",
+      description: "Lowest match-to-match volatility",
+    });
+  }
+
+  const hotStreakTeam = [...scoreEntries].sort((a, b) => b.streak - a.streak)[0];
+  if ((hotStreakTeam?.streak ?? 0) > 1) {
+    appendBadge(badgeMap, hotStreakTeam.team, {
+      id: "streak",
+      label: "Streak",
+      description: `Longest ${HIGH_STREAK_THRESHOLD}+ point run`,
+    });
+  }
+
+  return badgeMap;
+};
+
+export const buildMatchBadgeMap = (row?: DailyChartRow) => {
+  const badgeMap: Record<string, TeamBadge[]> = {};
+
+  if (!row) {
+    return badgeMap;
+  }
+
+  const teams = Object.keys(row).filter((key) => key !== "day");
+  const entries = teams.map((team) => ({
+    team,
+    points: Number(row[team] ?? 0),
+  }));
+  const leader = [...entries].sort((a, b) => b.points - a.points)[0];
+
+  if (leader) {
+    appendBadge(badgeMap, leader.team, {
+      id: "match-leader",
+      label: "Match leader",
+      description: "Highest score in this match view",
+    });
+  }
+
+  entries
+    .filter((entry) => entry.points === 0)
+    .forEach((entry) => {
+      appendBadge(badgeMap, entry.team, {
+        id: "match-duck",
+        label: "Duck",
+        description: "Zero points in this match view",
+      });
+    });
+
+  return badgeMap;
+};

package/template/app/lib/upcomingMatches.ts

@@ -0,0 +1,154 @@
+import { matches as fallbackMatches } from "./matches.ts";
+import type { UpcomingMatch as Match } from "./matches.ts";
+
+type UpcomingSource = "remote" | "fallback";
+
+const TEAM_NAME_TO_CODE: Record<string, string> = {
+  "Delhi Capitals": "DC",
+  "Kolkata Knight Riders": "KKR",
+  "Rajasthan Royals": "RR",
+  "Gujarat Titans": "GT",
+  "Chennai Super Kings": "CSK",
+  "Lucknow Super Giants": "LSG",
+  "Royal Challengers Bengaluru": "RCB",
+  "Mumbai Indians": "MI",
+  "Punjab Kings": "PBKS",
+  "Sunrisers Hyderabad": "SRH",
+};
+
+const TEAM_NAMES = Object.keys(TEAM_NAME_TO_CODE);
+const INDIA_OFFSET = "+05:30";
+const businessStandardScheduleUrl = "https://www.business-standard.com/cricket/ipl/schedule";
+const MONTH_PATTERN =
+  "(January|February|March|April|May|June|July|August|September|October|November|December)";
+
+const stripHtml = (html: string) =>
+  html
+    .replace(/<script[\s\S]*?<\/script>/gi, " ")
+    .replace(/<style[\s\S]*?<\/style>/gi, " ")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+const teamCodeFromName = (teamName: string) => TEAM_NAME_TO_CODE[teamName];
+
+const parseDateToIso = (chunk: string) => {
+  const longDate =
+    chunk.match(
+      new RegExp(
+        `(?:\\b(?:Mon|Tue|Wed|Thu|Fri|Sat|Sun)[a-z]*\\s+)?(\\d{1,2})(?:st|nd|rd|th)?\\s+${MONTH_PATTERN}(?:,?\\s*(?:\\d{4})?)?`,
+        "i",
+      ),
+    ) ??
+    chunk.match(
+      new RegExp(
+        `${MONTH_PATTERN}\\s+(\\d{1,2})(?:,?\\s*(?:\\d{4})?)?`,
+        "i",
+      ),
+    );
+
+  const timeMatch = chunk.match(/(\d{1,2}:\d{2})\s*(am|pm)/i);
+
+  if (!longDate || !timeMatch) return null;
+
+  let day: number;
+  let monthName: string;
+
+  if (Number.isNaN(Number(longDate[1]))) {
+    monthName = longDate[1];
+    day = Number(longDate[2]);
+  } else {
+    day = Number(longDate[1]);
+    monthName = longDate[2];
+  }
+
+  const monthIndex = new Date(`2026 ${monthName} 1`).getMonth();
+  if (!Number.isFinite(day) || monthIndex < 0) return null;
+
+  const [time, meridiem] = [timeMatch[1], timeMatch[2].toLowerCase()];
+  const [hourRaw, minuteRaw] = time.split(":").map(Number);
+  const hour24 =
+    meridiem === "pm" && hourRaw !== 12
+      ? hourRaw + 12
+      : meridiem === "am" && hourRaw === 12
+        ? 0
+        : hourRaw;
+  const localIso = `${String(2026)}-${String(monthIndex + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}T${String(hour24).padStart(2, "0")}:${String(minuteRaw).padStart(2, "0")}:00${INDIA_OFFSET}`;
+
+  const parsed = new Date(localIso);
+  return Number.isNaN(parsed.getTime()) ? null : parsed.toISOString();
+};
+
+const parseChunkToMatch = (chunk: string): Match | null => {
+  const idMatch = chunk.match(/Match\s+(\d+)/i);
+  if (!idMatch) return null;
+
+  const isoDate = parseDateToIso(chunk);
+  if (!isoDate) return null;
+
+  const foundTeams = TEAM_NAMES.map((name) => ({
+    name,
+    index: chunk.indexOf(name),
+  }))
+    .filter((entry) => entry.index >= 0)
+    .sort((a, b) => a.index - b.index)
+    .map((entry) => entry.name);
+
+  const team1 = foundTeams[0];
+  const team2 = foundTeams[1];
+
+  if (!team1 || !team2) return null;
+
+  return {
+    id: Number(idMatch[1]),
+    team1: teamCodeFromName(team1),
+    team2: teamCodeFromName(team2),
+    date: isoDate,
+  };
+};
+
+export const parseUpcomingMatches = (html: string): Match[] => {
+  const text = stripHtml(html);
+  const chunks = text.match(/Match\s+\d+[\s\S]*?(?=Match\s+\d+|$)/gi) ?? [];
+
+  return chunks
+    .map(parseChunkToMatch)
+    .filter((match): match is Match => Boolean(match))
+    .sort((a, b) => a.id - b.id);
+};
+
+export const fetchUpcomingMatches = async (): Promise<{
+  matches: Match[];
+  source: UpcomingSource;
+}> => {
+  try {
+    const response = await fetch(businessStandardScheduleUrl, {
+      cache: "no-store",
+      headers: {
+        "user-agent":
+          "Mozilla/5.0 (compatible; IPLDashboard/1.0; +https://example.com)",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Schedule fetch failed (${response.status})`);
+    }
+
+    const html = await response.text();
+    const parsed = parseUpcomingMatches(html);
+
+    if (parsed.length) {
+      return {
+        matches: parsed,
+        source: "remote",
+      };
+    }
+  } catch {
+    // Fall back to the bundled schedule below.
+  }
+
+  return {
+    matches: fallbackMatches,
+    source: "fallback",
+  };
+};

package/template/app/lib/useDb.ts

@@ -0,0 +1,29 @@
+import { MongoClient } from "mongodb";
+import { config } from "./config";
+
+const uri = process.env.MONGODB_URI;
+
+let client: MongoClient;
+let clientPromise: Promise<MongoClient> | undefined;
+
+declare global {
+  var _mongoClientPromise: Promise<MongoClient> | undefined;
+}
+
+if (uri) {
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri);
+    global._mongoClientPromise = client.connect();
+  }
+
+  clientPromise = global._mongoClientPromise;
+}
+
+export default async function getMongoDb() {
+  if (!clientPromise) {
+    return null;
+  }
+
+  const client = await clientPromise;
+  return client.db(config.mongodb.databaseName);
+}

package/template/app/lib/utils/diff.ts

@@ -0,0 +1,24 @@
+// utils/diff.ts
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getDiff(prev: any, next: any, path = ""): Record<string, any> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const diff: Record<string, any> = {};
+
+  for (const key in next) {
+    const newPath = path ? `${path}.${key}` : key;
+
+    if (
+      typeof next[key] === "object" &&
+      next[key] !== null &&
+      typeof prev?.[key] === "object"
+    ) {
+      Object.assign(diff, getDiff(prev[key], next[key], newPath));
+    } else {
+      if (prev?.[key] !== next[key]) {
+        diff[newPath] = next[key];
+      }
+    }
+  }
+
+  return diff;
+}

package/template/app/lib/utils/getChartColor.ts

@@ -0,0 +1,17 @@
+export const getChartColor = (index: number, total: number) => {
+  const safeTotal = Math.max(1, total);
+  const palette = [
+    "#22d3ee",
+    "#f59e0b",
+    "#84cc16",
+    "#ec4899",
+    "#3b82f6",
+    "#f97316",
+    "#a855f7",
+    "#14b8a6",
+    "#ef4444",
+    "#eab308",
+  ];
+
+  return palette[index % Math.min(palette.length, safeTotal)];
+};

package/template/app/lib/utils/getStdDeviation.ts

@@ -0,0 +1,6 @@
+export const getStdDeviation = (values: number[]) => {
+  const mean = values.reduce((s, v) => s + v, 0) / values.length;
+  const variance =
+    values.reduce((s, v) => s + (v - mean) ** 2, 0) / values.length;
+  return Math.sqrt(variance);
+};

package/template/app/lib/utils/time.ts

@@ -0,0 +1,40 @@
+// utils/time.ts
+
+export function formatMatchTime(date: string, timeZone = "Asia/Kolkata") {
+  return new Date(date).toLocaleString("en-IN", {
+    timeZone,
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+    day: "2-digit",
+    month: "short",
+  });
+}
+
+export function getMatchStatus(date: string) {
+  const now = new Date().getTime();
+  const matchTime = new Date(date).getTime();
+
+  const diff = matchTime - now;
+
+  if (diff < -4 * 60 * 60 * 1000) return "ENDED"; // 4h after start
+  if (diff <= 0) return "LIVE";
+  if (diff <= 30 * 60 * 1000) return "STARTING SOON";
+
+  return "UPCOMING";
+}
+
+export function getTimeLeft(date: string) {
+  const now = new Date().getTime();
+  const matchTime = new Date(date).getTime();
+
+  const diff = matchTime - now;
+
+  if (diff <= 0) return "Started";
+
+  const mins = Math.floor(diff / 60000);
+  const hrs = Math.floor(mins / 60);
+
+  if (hrs > 0) return `${hrs}h ${mins % 60}m`;
+  return `${mins}m`;
+}

package/template/app/lib/utils.ts

@@ -0,0 +1,70 @@
+export const trimTeamName = (name: string, maxLength: number = 12): string => {
+  if (name.length <= maxLength) {
+    return name;
+  }
+  return name.slice(0, maxLength) + "...";
+};
+
+export const splitTeamName = (
+  name: string,
+  maxPerLine: number = 8,
+): string[] => {
+  // First trim if too long
+  const trimmed = name.length > 20 ? trimTeamName(name, 15) : name;
+
+  // Split into two lines - try to split at space first
+  if (trimmed.length <= maxPerLine) {
+    return [trimmed, ""];
+  }
+
+  const spaceIndex = trimmed.lastIndexOf(" ", maxPerLine);
+  if (spaceIndex > 0) {
+    return [trimmed.slice(0, spaceIndex), trimmed.slice(spaceIndex + 1)];
+  }
+
+  // No space found, split at maxPerLine
+  return [trimmed.slice(0, maxPerLine), trimmed.slice(maxPerLine)];
+};
+
+export const formatCompactNumber = (
+  value?: number,
+  options: {
+    threshold?: number;
+    maximumFractionDigits?: number;
+  } = {},
+): string => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return "-";
+  }
+
+  const {
+    threshold = 10000,
+    maximumFractionDigits = 1,
+  } = options;
+
+  const abs = Math.abs(value);
+  if (abs < threshold) {
+    return value.toLocaleString("en-IN", {
+      maximumFractionDigits: value % 1 === 0 ? 0 : maximumFractionDigits,
+    });
+  }
+
+  const compact = [
+    { unit: "k", size: 1_000 },
+    { unit: "m", size: 1_000_000 },
+    { unit: "b", size: 1_000_000_000 },
+  ]
+    .filter(({ size }) => abs >= size)
+    .at(-1);
+
+  if (!compact) {
+    return value.toLocaleString("en-IN", {
+      maximumFractionDigits: value % 1 === 0 ? 0 : maximumFractionDigits,
+    });
+  }
+
+  const scaled = value / compact.size;
+  const rounded = Number(scaled.toFixed(maximumFractionDigits));
+
+  return `${rounded}${compact.unit}`;
+};

package/template/app/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import DashboardContent from "./components/DashboardContent";
+import LiveMatchTicker from "./components/LiveMatchTicker";
+
+export default function Home() {
+  return (
+    <main className="dashboard-shell relative min-h-screen overflow-hidden text-ink">
+      <div className="scrapbook-topbar">
+        <LiveMatchTicker />
+      </div>
+      <DashboardContent />
+    </main>
+  );
+}

package/template/app/store/dashboardStore.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { create } from "zustand";
+import type { DashboardData } from "../types";
+import { readDashboardCache, writeDashboardCache } from "../hooks/dashboardCache";
+
+import { config } from "../lib/config.ts";
+
+export const DASHBOARD_SYNC_INTERVAL_MS = config.dashboard.syncIntervalMs;
+
+type State = {
+  data: DashboardData | null;
+  loading: boolean;
+  error: string | null;
+  lastSyncedAt: string | null;
+  hydrateFromCache: () => void;
+  fetchDashboard: () => Promise<void>;
+};
+
+export const useDashboardStore = create<State>((set) => ({
+  data: null,
+  loading: true,
+  error: null,
+  lastSyncedAt: null,
+
+  hydrateFromCache: () => {
+    const cached = readDashboardCache();
+
+    if (cached?.data) {
+      set({
+        data: cached.data,
+        loading: false,
+        error: null,
+        lastSyncedAt: cached.cachedAt,
+      });
+    }
+  },
+
+  fetchDashboard: async () => {
+    const hasData = Boolean(useDashboardStore.getState().data);
+
+    if (!hasData) {
+      set({ loading: true, error: null });
+    } else {
+      set({ error: null });
+    }
+
+    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" }),
+      ]);
+
+      if (!dashboardResponse.ok) {
+        throw new Error(`Dashboard fetch failed (${dashboardResponse.status})`);
+      }
+
+      const json = (await dashboardResponse.json()) as DashboardData;
+      const transfers = transfersResponse.ok
+        ? ((await transfersResponse.json()) as DashboardData["transfers"])
+        : undefined;
+
+      set({
+        data: {
+          ...json,
+          transfers,
+        },
+        loading: false,
+        error: null,
+        lastSyncedAt: new Date().toISOString(),
+      });
+      writeDashboardCache({
+        ...json,
+        transfers,
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Fetch failed";
+
+      set({
+        error: message,
+        loading: false,
+      });
+    }
+  },
+}));