@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/components/TeamDNAScanner.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  FaMicroscope,
+  FaCircle,
+  FaArrowTrendUp,
+  FaArrowTrendDown,
+} from "react-icons/fa6";
+import { motion } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows } from "../lib/dashboardData";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+function calcStdDev(values: number[]): number {
+  const n = values.length;
+  if (n < 2) return 0;
+  const mean = values.reduce((a, b) => a + b, 0) / n;
+  const sqDiffs = values.map((v) => (v - mean) ** 2);
+  return Math.sqrt(sqDiffs.reduce((a, b) => a + b, 0) / (n - 1));
+}
+
+export default function TeamDNAScanner({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const teams = useMemo(() => {
+    if (!data?.overall?.length) return [];
+    const daily = getPlayedMatchRows(data.daily);
+
+    return data.overall
+      .sort((a, b) => a.rank - b.rank)
+      .slice(0, 8)
+      .map((team, i) => {
+        const scores = daily.map((r) => Number(r[team.name] ?? 0));
+        const avg = scores.length
+          ? scores.reduce((a, b) => a + b, 0) / scores.length
+          : 0;
+        const high = scores.length ? Math.max(...scores) : 0;
+        const low = scores.length ? Math.min(...scores) : 0;
+        const stdDev = calcStdDev(scores);
+        const volatility = avg > 0 ? Math.min(100, (stdDev / avg) * 100) : 0;
+        const consistency = Math.max(0, Math.min(100, 100 - volatility));
+
+        return {
+          name: team.name,
+          rank: team.rank,
+          points: team.points,
+          matches: scores.length,
+          avg: Math.round(avg),
+          high: Math.round(high),
+          low: Math.round(low),
+          volatility: Math.round(volatility),
+          consistency: Math.round(consistency),
+          lastMatch: team.lastMatchPoints ?? scores.at(-1) ?? 0,
+          color: getChartColor(i, 8),
+        };
+      });
+  }, [data]);
+
+  if (!teams.length) {
+    return (
+      <div className="ledger-note py-6 text-center">No DNA data yet...</div>
+    );
+  }
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly overflow-hidden"
+      style={{
+        borderColor: "color-mix(in srgb, var(--marker-blue) 34%, var(--line))",
+        background:
+          "linear-gradient(160deg, color-mix(in srgb, var(--paper) 90%, var(--paper-3) 10%), color-mix(in srgb, var(--paper) 92%, var(--paper-2) 8%))",
+      }}
+    >
+      <div className="mb-3 flex items-center gap-2 border-b border-dashed border-(--border-wobbly)/40 pb-2">
+        <FaMicroscope
+          className="text-lg"
+          style={{ color: "var(--marker-blue)" }}
+        />
+        <span className="font-bold text-lg text-(--ink)">Team DNA Scanner</span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          genetic analysis
+        </span>
+      </div>
+
+      <div className="grid gap-2.5 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+        {teams.map((team, i) => (
+          <motion.div
+            key={team.name}
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.07 }}
+            className="relative rounded-xl border-2 p-3 overflow-hidden"
+            style={{
+              borderColor: `color-mix(in srgb, ${team.color} 34%, var(--line))`,
+              background: `color-mix(in srgb, ${team.color} 5%, var(--paper) 95%)`,
+            }}
+          >
+            <motion.div
+              className="absolute inset-x-0 pointer-events-none"
+              style={{
+                height: 2,
+                background: `linear-gradient(90deg, transparent 0%, ${team.color} 50%, transparent 100%)`,
+                opacity: 0.6,
+                zIndex: 1,
+              }}
+              animate={{ top: ["0%", "100%", "0%"] }}
+              transition={{
+                repeat: Infinity,
+                duration: 3 + (i % 3),
+                ease: "linear",
+                delay: i * 0.3,
+              }}
+            />
+
+            <div className="relative z-10">
+              <div className="mb-2 flex items-center gap-2">
+                <span
+                  className="flex h-8 w-8 items-center justify-center rounded-full text-sm font-black"
+                  style={{
+                    background: `color-mix(in srgb, ${team.color} 30%, var(--paper) 70%)`,
+                    color: "var(--ink)",
+                    border: `1px solid color-mix(in srgb, ${team.color} 50%, var(--line))`,
+                  }}
+                >
+                  #{team.rank}
+                </span>
+                <span className="flex-1 truncate text-base font-bold text-(--ink)">
+                  {team.name}
+                </span>
+                <span className="text-[15px] font-black text-(--ink)">
+                  {team.points.toLocaleString()}
+                </span>
+              </div>
+
+              <div className="grid grid-cols-4 gap-1 mb-2">
+                {[
+                  { label: "Matches", value: team.matches },
+                  { label: "Avg", value: team.avg.toLocaleString() },
+                  { label: "High", value: team.high.toLocaleString() },
+                  { label: "Low", value: team.low.toLocaleString() },
+                ].map((stat) => (
+                  <div
+                    key={stat.label}
+                    className="rounded-lg px-2 py-1.5 text-center"
+                    style={{
+                      background:
+                        "color-mix(in srgb, var(--panel) 40%, transparent)",
+                    }}
+                  >
+                    <p className="text-[10px] font-bold uppercase tracking-wider text-(--ink-faint)">
+                      {stat.label}
+                    </p>
+                    <p className="text-[15px] font-black text-(--ink)">
+                      {stat.value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mb-2">
+                <div className="flex items-center justify-between text-xs text-(--ink-faint) mb-1">
+                  <span>Consistency</span>
+                  <span className="font-bold">{team.consistency}%</span>
+                </div>
+                <div
+                  className="h-1.5 w-full rounded-full overflow-hidden"
+                  style={{
+                    background:
+                      "color-mix(in srgb, var(--panel) 60%, transparent)",
+                  }}
+                >
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: `${team.consistency}%` }}
+                    transition={{ duration: 0.8, delay: i * 0.07 }}
+                    className="h-full rounded-full"
+                    style={{
+                      background:
+                        team.consistency >= 60
+                          ? "var(--marker-green)"
+                          : team.consistency >= 40
+                            ? "var(--marker-yellow)"
+                            : "var(--marker-pink)",
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-bold"
+                  style={{
+                    background:
+                      "color-mix(in srgb, var(--panel) 50%, transparent)",
+                  }}
+                >
+                  <FaCircle
+                    className="text-[6px]"
+                    style={{
+                      color:
+                        team.volatility >= 50
+                          ? "var(--marker-pink)"
+                          : team.volatility >= 30
+                            ? "var(--marker-yellow)"
+                            : "var(--marker-green)",
+                    }}
+                  />
+                  <span className="text-(--ink-faint)">
+                    {team.volatility}% volatility
+                  </span>
+                </div>
+                <div
+                  className="flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-bold"
+                  style={{
+                    background:
+                      "color-mix(in srgb, var(--panel) 50%, transparent)",
+                  }}
+                >
+                  {team.lastMatch >= team.avg ? (
+                    <FaArrowTrendUp className="text-[10px] text-(--marker-green)" />
+                  ) : (
+                    <FaArrowTrendDown className="text-[10px] text-(--marker-pink)" />
+                  )}
+                  <span className="text-(--ink-faint)">
+                    last {team.lastMatch.toLocaleString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/app/components/ThemeToggle.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ThemeMode = "dark" | "light";
+
+const STORAGE_KEY = "ipl:theme";
+
+const getStoredTheme = (): ThemeMode | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return stored === "dark" || stored === "light" ? stored : null;
+  } catch {
+    return null;
+  }
+};
+
+const getPreferredTheme = (): ThemeMode => {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+const getCurrentTheme = (): ThemeMode => {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.dataset.theme === "light" ? "light" : "dark";
+};
+
+const setTheme = (theme: ThemeMode) => {
+  document.documentElement.dataset.theme = theme;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    // ignore
+  }
+};
+
+export default function ThemeToggle() {
+  const [theme, setThemeState] = useState<ThemeMode>(
+    () => getStoredTheme() ?? getCurrentTheme() ?? getPreferredTheme(),
+  );
+
+  useEffect(() => {
+    setTheme(theme);
+  }, [theme]);
+
+  const toggle = () => {
+    const next: ThemeMode = theme === "dark" ? "light" : "dark";
+    setThemeState(next);
+  };
+
+  return (
+    <button
+      type="button"
+      className="theme-toggle"
+      onClick={toggle}
+      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      <span className="theme-toggle-doodle" aria-hidden="true">
+        {theme === "dark" ? "☼" : "☾"}
+      </span>
+      <span className="theme-toggle-copy">
+        <span>{theme === "dark" ? "Flip to light" : "Flip to dark"}</span>
+        <small>{theme === "dark" ? "journal paper" : "chalk notebook"}</small>
+      </span>
+    </button>
+  );
+}

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

@@ -0,0 +1,138 @@
+import { motion } from "framer-motion";
+import { FaUserShield } from "react-icons/fa6";
+import type { OverallChartItem } from "../../types";
+import { getTeamColor, formatLedgerNumber } from "../../utils/dashboard";
+
+interface CaptainBoardProps {
+  teams: OverallChartItem[];
+}
+
+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.
+      </p>
+    );
+  }
+
+  return (
+    <div className="captain-grid">
+      {teams.map((team, index) => {
+        const color = getTeamColor(index, teams.length);
+        return (
+          <motion.div
+            key={team.name}
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.06 }}
+            className="relative"
+          >
+            <article
+              className={`captain-scrap captain-scrap-${index % 3} relative overflow-hidden`}
+              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)`,
+              }}
+            >
+              <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="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>
+                </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>
+              </div>
+            </article>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import TeamPills from "../ui/TeamPills";
+import type { ChartBoardProps } from "../../types/dashboard";
+import { createChartData } from "../../utils/dashboard";
+
+export function ChartBoard({ items, valueLabel, emptyLabel }: ChartBoardProps) {
+  if (!items.length) {
+    return <p className="ledger-note py-6">{emptyLabel ?? "No data yet."}</p>;
+  }
+
+  const chartData = createChartData(items);
+  const leader = chartData.reduce((best, item) =>
+    item.value > best.value ? item : best,
+  );
+
+  return (
+    <div className="space-y-3">
+      <TeamPills items={chartData} max={3} />
+
+      <div
+        className="border px-2 py-3 sm:px-3"
+        style={{
+          height: 380,
+          border: "1.5px solid",
+          borderRadius: `24px ${32 + (chartData.length % 2) * 8}px ${28 + (leader.value % 3) * 6}px 24px`,
+          borderColor: `color-mix(in srgb, ${leader.fill} 36%, var(--line))`,
+          background: `linear-gradient(175deg, color-mix(in srgb, var(--paper) 88%, var(--panel-strong) 12%), color-mix(in srgb, ${leader.fill} 18%, var(--paper-strong) 82%))`,
+          boxShadow: `0 20px 36px color-mix(in srgb, ${leader.fill} 10%, var(--shadow)), inset 0 0 0 1px color-mix(in srgb, var(--chalk) 6%, transparent)`,
+          transform: "rotate(-0.3deg)",
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={chartData}
+            margin={{ top: 14, right: 10, bottom: 56, left: 0 }}
+            barCategoryGap="20%"
+          >
+            <CartesianGrid
+              vertical={false}
+              stroke="color-mix(in srgb, var(--ink) 12%, transparent)"
+              strokeDasharray="4 6"
+            />
+            <XAxis
+              dataKey="label"
+              tickLine={false}
+              axisLine={false}
+              interval={0}
+              tick={({ x, y, payload }) => {
+                const name = String(payload.value);
+                const truncated =
+                  name.length > 14 ? name.slice(0, 13) + "…" : name;
+                const mid = Math.ceil(truncated.length / 2);
+                const line1 = truncated.slice(0, mid);
+                const line2 = truncated.slice(mid);
+                return (
+                  <text
+                    x={x}
+                    y={Number(y) + 6}
+                    fill="var(--ink)"
+                    fontSize={11}
+                    fontWeight={800}
+                    textAnchor="middle"
+                  >
+                    <tspan x={x} dy={0}>
+                      {line1}
+                    </tspan>
+                    {line2 && (
+                      <tspan x={x} dy={12}>
+                        {line2}
+                      </tspan>
+                    )}
+                  </text>
+                );
+              }}
+            />
+            <YAxis
+              tickFormatter={(value) => formatCompactNumber(Number(value))}
+              tickLine={false}
+              axisLine={false}
+              width={48}
+              tick={{ fill: "var(--ink-soft)", fontSize: 11, fontWeight: 700 }}
+            />
+            <Tooltip
+              cursor={{
+                fill: "color-mix(in srgb, var(--marker-yellow) 20%, transparent)",
+              }}
+              contentStyle={{
+                background:
+                  "color-mix(in srgb, var(--paper) 96%, var(--panel-strong) 4%)",
+                border:
+                  "1px solid color-mix(in srgb, var(--ink) 16%, transparent)",
+                borderRadius: "14px",
+                color: "var(--ink)",
+              }}
+              formatter={(value, _name, entry) => {
+                const note =
+                  entry && "payload" in entry && entry.payload
+                    ? String(
+                        (entry.payload as { sublabel?: string }).sublabel ?? "",
+                      )
+                    : "";
+
+                return [
+                  `${formatCompactNumber(Number(value ?? 0))} ${valueLabel}`,
+                  note,
+                ];
+              }}
+              labelFormatter={(label) => `${label}`}
+            />
+            <Bar
+              dataKey="value"
+              radius={[16, 16, 0, 0]}
+              animationDuration={700}
+              strokeWidth={2}
+            >
+              {chartData.map((item) => (
+                <Cell
+                  key={item.label}
+                  fill={item.fill}
+                  stroke={`color-mix(in srgb, ${item.fill} 78%, var(--ink) 22%)`}
+                  opacity={0.96}
+                />
+              ))}
+              <LabelList
+                dataKey="value"
+                position="center"
+                angle={-90}
+                formatter={(value) => String(value ?? "")}
+                style={{ fill: "var(--ink)", fontSize: 11, fontWeight: 800 }}
+              />
+              {items.some((item) => typeof item.difference === "number") && (
+                <LabelList
+                  dataKey="difference"
+                  position="top"
+                  formatter={(value) =>
+                    typeof value === "number"
+                      ? `+${value}`
+                      : String(value ?? "")
+                  }
+                  style={{ fill: "var(--ink)", fontSize: 10, fontWeight: 700 }}
+                />
+              )}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+// Import the formatting function
+import { formatCompactNumber } from "../../utils/dashboard";

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

@@ -0,0 +1,23 @@
+import { FaFire } from "react-icons/fa6";
+import type { LatestBadgeProps } from "../../types/dashboard";
+import { formatLedgerNumber } from "../../utils/dashboard";
+
+export function LatestBadge({ pts, isTop }: LatestBadgeProps) {
+  const color =
+    pts < 200
+      ? "var(--marker-pink)"
+      : pts <= 400
+        ? "var(--marker-orange)"
+        : "var(--marker-green)";
+  return (
+    <span
+      className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-semibold"
+      style={{
+        background: `color-mix(in srgb, ${color} 22%, var(--panel-strong))`,
+      }}
+    >
+      {isTop ? <FaFire className="text-[0.75rem]" style={{ color }} /> : null}
+      <span>{formatLedgerNumber(pts)}</span>
+    </span>
+  );
+}