@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/components/MatchStoryScrubber.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { FaBackwardStep, FaForwardStep, FaClock } from "react-icons/fa6";
+import { Bar, BarChart, Cell, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { motion, AnimatePresence } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows, parseMatchId } from "../lib/dashboardData";
+import { formatCompactNumber } from "../lib/utils";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+type MatchSnapshot = {
+  id: number;
+  label: string;
+  entries: { team: string; points: number; fill: string }[];
+  leader: string;
+  leaderPts: number;
+  totalPoints: number;
+};
+
+export default function MatchStoryScrubber({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const snapshots = useMemo(() => {
+    if (!data?.overall?.length) return [];
+    const daily = getPlayedMatchRows(data.daily);
+    const teamOrder = [...data.overall].sort((a, b) => a.rank - b.rank).map((t) => t.name);
+
+    const results: MatchSnapshot[] = daily
+      .map((row) => {
+        const id = parseMatchId(row.day);
+        if (typeof id !== "number") return null;
+
+        const entries = teamOrder
+          .map((name, i) => ({
+            team: name,
+            points: Number(row[name] ?? 0),
+            fill: getChartColor(i, teamOrder.length),
+          }))
+          .filter((e) => e.points > 0);
+
+        if (!entries.length) return null;
+
+        const sorted = [...entries].sort((a, b) => b.points - a.points);
+        return {
+          id,
+          label: `Match ${id}`,
+          entries,
+          leader: sorted[0].team,
+          leaderPts: sorted[0].points,
+          totalPoints: entries.reduce((s, e) => s + e.points, 0),
+        };
+      })
+      .filter((m): m is MatchSnapshot => m !== null)
+      .sort((a, b) => a.id - b.id);
+
+    return results;
+  }, [data]);
+
+  const totalCumulatives = useMemo(() => {
+    if (!snapshots.length) return [];
+    const map = new Map<string, number>();
+    return snapshots.map((m) => {
+      m.entries.forEach((e) => {
+        map.set(e.team, (map.get(e.team) ?? 0) + e.points);
+      });
+      return [...map.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map(([team, pts]) => ({ team, pts }));
+    });
+  }, [snapshots]);
+
+  const [currentIdx, setCurrentIdx] = useState(snapshots.length - 1);
+
+  if (!snapshots.length) {
+    return <div className="ledger-note py-6 text-center">No match data yet...</div>;
+  }
+
+  const current = snapshots[currentIdx];
+  const cumulatives = totalCumulatives[currentIdx];
+  const progress = snapshots.length > 1 ? currentIdx / (snapshots.length - 1) : 0;
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly"
+      style={{
+        borderColor: "color-mix(in srgb, var(--marker-blue) 34%, var(--line))",
+        background:
+          "linear-gradient(180deg, 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">
+        <FaClock className="text-lg" style={{ color: "var(--marker-blue)" }} />
+        <span className="font-bold font-(--font-note) text-lg text-(--ink)">
+          Match Story Scrubber
+        </span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          drag to relive the season
+        </span>
+      </div>
+
+      <div className="mb-3 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => setCurrentIdx(Math.max(0, currentIdx - 1))}
+          disabled={currentIdx === 0}
+          className="rounded-lg border p-2 text-[15px] disabled:opacity-30 hover-jitter"
+          style={{
+            borderColor: "color-mix(in srgb, var(--marker-blue) 30%, var(--line))",
+            background: "color-mix(in srgb, var(--panel) 60%, transparent)",
+            color: "var(--ink)",
+          }}
+        >
+          <FaBackwardStep />
+        </button>
+
+        <div className="flex-1 relative h-6">
+          <input
+            type="range"
+            min={0}
+            max={snapshots.length - 1}
+            value={currentIdx}
+            onChange={(e) => setCurrentIdx(Number(e.target.value))}
+            className="w-full h-full cursor-pointer opacity-0 absolute inset-0 z-10"
+          />
+          <div
+            className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-1.5 rounded-full"
+            style={{ background: "color-mix(in srgb, var(--panel) 60%, transparent)" }}
+          >
+            <motion.div
+              className="h-full rounded-full"
+              style={{
+                background: "var(--marker-blue)",
+                width: `${progress * 100}%`,
+              }}
+              layout
+            />
+          </div>
+          <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-0.5 pointer-events-none">
+            {snapshots.filter((_, i) => i % Math.max(1, Math.floor(snapshots.length / 6)) === 0).map((m) => (
+              <span
+                key={m.id}
+                className="text-[9px] font-bold text-(--ink-faint) -translate-y-3"
+              >
+                M{m.id}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setCurrentIdx(Math.min(snapshots.length - 1, currentIdx + 1))}
+          disabled={currentIdx === snapshots.length - 1}
+          className="rounded-lg border p-2 text-[15px] disabled:opacity-30 hover-jitter"
+          style={{
+            borderColor: "color-mix(in srgb, var(--marker-blue) 30%, var(--line))",
+            background: "color-mix(in srgb, var(--panel) 60%, transparent)",
+            color: "var(--ink)",
+          }}
+        >
+          <FaForwardStep />
+        </button>
+      </div>
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={current.id}
+          initial={{ opacity: 0, x: 30 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -30 }}
+          transition={{ duration: 0.25 }}
+        >
+          <div
+            className="rounded-xl border p-3 mb-3"
+            style={{
+              borderColor: "color-mix(in srgb, var(--marker-yellow) 24%, var(--line))",
+              background: "color-mix(in srgb, var(--marker-yellow) 6%, var(--paper) 94%)",
+            }}
+          >
+            <div className="flex items-center justify-between gap-2 text-base mb-2">
+              <span className="font-black text-(--ink)">{current.label}</span>
+              <span className="text-(--ink-faint)">
+                <span className="font-bold text-(--marker-green)">{current.leader}</span> leads with{" "}
+                {formatCompactNumber(current.leaderPts)} pts
+              </span>
+            </div>
+
+            <div>
+              <ResponsiveContainer width="100%" height={120}>
+                <BarChart
+                  data={current.entries}
+                  margin={{ top: 4, right: 4, bottom: 14, left: 0 }}
+                  barCategoryGap="15%"
+                >
+                  <XAxis
+                    dataKey="team"
+                    tickLine={false}
+                    axisLine={false}
+                    interval={0}
+                    tick={({ x, y, payload }) => (
+                      <text
+                        x={x}
+                        y={Number(y) + 6}
+                        fill="var(--ink)"
+                        fontSize={12}
+                        fontWeight={700}
+                        textAnchor="end"
+                        transform={`rotate(-35, ${x}, ${y})`}
+                      >
+                        {String(payload.value).length > 10
+                          ? String(payload.value).slice(0, 9) + "…"
+                          : String(payload.value)}
+                      </text>
+                    )}
+                  />
+                  <YAxis hide />
+                  <Bar dataKey="points" radius={[4, 4, 0, 0]} animationDuration={300}>
+                    {current.entries.map((e) => (
+                      <Cell key={e.team} fill={e.fill} opacity={0.85} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+
+          {cumulatives && (
+            <div
+              className="rounded-xl border p-2.5"
+              style={{
+                borderColor: "color-mix(in srgb, var(--marker-blue) 20%, var(--line))",
+                background: "color-mix(in srgb, var(--panel) 40%, transparent)",
+              }}
+            >
+              <p className="text-sm font-bold text-(--ink-faint) uppercase tracking-wider mb-1.5">
+                Cumulative Standings
+              </p>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-1">
+                {cumulatives.slice(0, 8).map((c, i) => (
+                  <div
+                    key={c.team}
+                    className="flex items-center gap-1.5 rounded-lg px-1.5 py-1"
+                    style={{
+                      background: "color-mix(in srgb, var(--paper) 80%, var(--panel) 20%)",
+                    }}
+                  >
+                    <span
+                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-black"
+                      style={{
+                        background: `color-mix(in srgb, ${getChartColor(i, 8)} 30%, var(--paper) 70%)`,
+                        color: "var(--ink)",
+                      }}
+                    >
+                      {i + 1}
+                    </span>
+                    <span className="truncate text-xs font-semibold text-(--ink) flex-1">
+                      {c.team}
+                    </span>
+                    <span className="text-xs font-black text-(--ink-soft)">
+                      {formatCompactNumber(c.pts)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/template/app/components/PerformanceTracker.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { DailyChartRow } from "../types";
+import { getPlayedMatchRows, parseMatchId } from "../lib/dashboardData";
+import { getChartColor } from "../lib/utils/getChartColor";
+import { useDashboardStore } from "../store/dashboardStore";
+import { DashboardChartFrame } from "./ui/DashboardChartFrame";
+
+const formatMatchTick = (value: string) => {
+  const parsed = parseMatchId(value);
+  return typeof parsed === "number" ? `M${parsed}` : value;
+};
+
+export default function PerformanceTracker() {
+  const data = useDashboardStore((state) => state.data);
+
+  const { chartData, teams } = useMemo(() => {
+    if (!data?.daily?.length) {
+      return { chartData: [] as DailyChartRow[], teams: [] as string[] };
+    }
+
+    const filteredData = getPlayedMatchRows(data.daily);
+    const names = Array.from(
+      new Set(filteredData.flatMap((row) => Object.keys(row))),
+    ).filter((key) => key !== "day");
+
+    const cumulativeData = filteredData.reduce<DailyChartRow[]>(
+      (acc, row, index) => {
+        const previous = acc[index - 1] ?? { day: "" };
+        const cumulativeRow: DailyChartRow = { day: row.day };
+
+        names.forEach((team) => {
+          const current = Number(row[team] ?? 0);
+          const previousTotal = Number(previous[team] ?? 0);
+          cumulativeRow[team] = previousTotal + current;
+        });
+
+        acc.push(cumulativeRow);
+        return acc;
+      },
+      [],
+    );
+
+    return { chartData: cumulativeData, teams: names };
+  }, [data]);
+
+  if (!chartData.length || !teams.length) {
+    return (
+      <p className="ledger-note py-6">No performance data available yet.</p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <DashboardChartFrame chartHeight={380} isMobile={false}>
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart
+            data={chartData}
+            margin={{ top: 18, right: 26, bottom: 16, left: 4 }}
+          >
+            <CartesianGrid
+              stroke="color-mix(in srgb, var(--ink) 10%, transparent)"
+              strokeDasharray="4 6"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="day"
+              tickFormatter={formatMatchTick}
+              tickLine={false}
+              axisLine={false}
+              tick={{ fill: "var(--ink)", fontSize: 11, fontWeight: 700 }}
+            />
+            <YAxis
+              tickFormatter={(value) => Number(value).toLocaleString()}
+              tickLine={false}
+              axisLine={false}
+              width={52}
+              tick={{ fill: "var(--ink-soft)", fontSize: 11, fontWeight: 700 }}
+            />
+            <Tooltip
+              contentStyle={{
+                background: "color-mix(in srgb, var(--paper) 96%, white 4%)",
+                border:
+                  "1px solid color-mix(in srgb, var(--ink) 16%, transparent)",
+                borderRadius: "14px",
+                color: "var(--ink)",
+              }}
+              formatter={(value) =>
+                `${Number(value ?? 0).toLocaleString()} pts`
+              }
+              labelFormatter={(label) =>
+                `Match ${formatMatchTick(String(label)).replace("M", "")}`
+              }
+            />
+            <Legend
+              verticalAlign="top"
+              height={30}
+              wrapperStyle={{
+                fontSize: "11px",
+                fontWeight: 800,
+                color: "var(--ink)",
+              }}
+            />
+            {teams.map((team, index) => (
+              <Line
+                key={team}
+                type="natural"
+                dataKey={team}
+                stroke={getChartColor(index, teams.length)}
+                strokeWidth={3}
+                dot={false}
+                activeDot={false}
+                legendType="circle"
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </DashboardChartFrame>
+    </div>
+  );
+}

package/template/app/components/ProgressGlowRings.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useMemo } from "react";
+import { FaCrown, FaStar, FaBolt, FaRocket, FaGem, FaFire, FaShield, FaFlag } from "react-icons/fa6";
+import { motion } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows } from "../lib/dashboardData";
+import { formatCompactNumber } from "../lib/utils";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+const ringIcons = [FaCrown, FaStar, FaGem, FaRocket, FaBolt, FaFire, FaShield, FaFlag];
+
+const R = 40;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+
+export default function ProgressGlowRings({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const teams = useMemo(() => {
+    if (!data?.overall?.length) return [];
+    const daily = getPlayedMatchRows(data.daily);
+    const sorted = [...data.overall].sort((a, b) => a.rank - b.rank);
+    const leaderPts = sorted[0].points;
+
+    return sorted.slice(0, 8).map((team, i) => {
+      const scores = daily
+        .map((r) => Number(r[team.name] ?? 0))
+        .filter((v) => v > 0);
+      const avg = scores.length
+        ? scores.reduce((a, b) => a + b, 0) / scores.length
+        : 0;
+      const pct = leaderPts > 0 ? (team.points / leaderPts) * 100 : 0;
+      const Icon = ringIcons[i % ringIcons.length];
+      return {
+        name: team.name,
+        rank: team.rank,
+        points: team.points,
+        pct: Math.min(pct, 100),
+        avg: Math.round(avg),
+        color: getChartColor(i, 8),
+        Icon,
+        lastMatch: team.lastMatchPoints ?? scores.at(-1) ?? 0,
+      };
+    });
+  }, [data]);
+
+  if (!teams.length) {
+    return <div className="ledger-note py-6 text-center">No data yet...</div>;
+  }
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly"
+      style={{
+        borderColor: "color-mix(in srgb, var(--accent-amber) 34%, var(--line))",
+        background:
+          "linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, var(--accent-amber) 12%), 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">
+        <FaGem className="text-lg" style={{ color: "var(--accent-amber)" }} />
+        <span className="font-bold font-(--font-note) text-lg text-(--ink)">
+          Progress Glow Rings
+        </span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          % of leader
+        </span>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {teams.map((t, i) => (
+          <motion.div
+            key={t.name}
+            initial={{ opacity: 0, scale: 0.7 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: i * 0.07, type: "spring", stiffness: 120 }}
+            className="flex flex-col items-center rounded-xl border-2 p-3"
+            style={{
+              borderColor: `color-mix(in srgb, ${t.color} 30%, var(--line))`,
+              background: `color-mix(in srgb, ${t.color} 6%, var(--paper) 94%)`,
+            }}
+          >
+            <div className="relative w-24 h-24">
+              <svg viewBox="0 0 100 100" className="w-full h-full -rotate-90">
+                <circle
+                  cx={50}
+                  cy={50}
+                  r={R}
+                  fill="none"
+                  stroke={`color-mix(in srgb, ${t.color} 12%, transparent)`}
+                  strokeWidth={8}
+                />
+                <motion.circle
+                  cx={50}
+                  cy={50}
+                  r={R}
+                  fill="none"
+                  stroke={t.color}
+                  strokeWidth={8}
+                  strokeLinecap="round"
+                  strokeDasharray={CIRCUMFERENCE}
+                  initial={{ strokeDashoffset: CIRCUMFERENCE }}
+                  animate={{ strokeDashoffset: CIRCUMFERENCE - (t.pct / 100) * CIRCUMFERENCE }}
+                  transition={{ duration: 1.2, delay: i * 0.07 + 0.2, ease: "easeOut" }}
+                />
+              </svg>
+
+              <motion.div
+                className="absolute inset-0 flex items-center justify-center"
+                animate={{ scale: [1, 1.06, 1] }}
+                transition={{ repeat: Infinity, duration: 3, ease: "easeInOut", delay: i * 0.2 }}
+              >
+                <div
+                  className="flex h-10 w-10 items-center justify-center rounded-full"
+                  style={{
+                    background: `color-mix(in srgb, ${t.color} 18%, var(--paper) 82%)`,
+                    boxShadow: `0 0 16px color-mix(in srgb, ${t.color} 25%, transparent)`,
+                  }}
+                >
+                  <t.Icon className="text-lg" style={{ color: t.color }} />
+                </div>
+              </motion.div>
+            </div>
+
+            <div className="mt-2 w-full text-center">
+              <div className="flex items-center justify-center gap-1">
+                <span
+                  className="rounded px-2 py-1 text-[10px] font-black"
+                  style={{
+                    background: `color-mix(in srgb, ${t.color} 22%, var(--panel) 78%)`,
+                    color: "var(--ink)",
+                  }}
+                >
+                  #{t.rank}
+                </span>
+                <span className="truncate text-sm font-bold text-(--ink) max-w-[100px]">
+                  {t.name}
+                </span>
+              </div>
+              <p className="text-lg font-black mt-0.5" style={{ color: t.color }}>
+                {formatCompactNumber(t.points)}
+              </p>
+              <div className="flex items-center justify-center gap-2 mt-1">
+                <span className="text-xs font-bold text-(--ink-faint)">
+                  {t.pct.toFixed(0)}%
+                </span>
+                <span className="text-[10px] text-(--ink-faint)">avg {formatCompactNumber(t.avg)}</span>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}