@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/components/DashboardContent.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  FaArrowTrendUp,
+  FaBolt,
+  FaChartColumn,
+  FaClock,
+  FaMedal,
+  FaRobot,
+  FaTableList,
+  FaTrophy,
+  FaUserShield,
+  FaMicroscope,
+  FaStar,
+  FaGem,
+  FaWandSparkles,
+} from "react-icons/fa6";
+
+// Extracted components
+import {
+  SectionCard,
+  StickyMini,
+  ChartBoard,
+  CaptainBoard,
+  LedgerTable,
+} from "./dashboard";
+
+// Extracted hooks
+import { useDashboardModel } from "../hooks/dashboard";
+
+// Existing components (keeping as-is for now)
+import PerformanceTracker from "./PerformanceTracker";
+import AIRoasting from "./AIRoasting";
+import MatchRecapScroll from "./MatchRecapScroll";
+import TeamPills from "./ui/TeamPills";
+import { DoodleSpinner } from "./ui/DoodleSpinner";
+import FantasyStockTicker from "./FantasyStockTicker";
+import TeamDNAScanner from "./TeamDNAScanner";
+import MatchStoryScrubber from "./MatchStoryScrubber";
+import ColorWave from "./ColorWave";
+import ProgressGlowRings from "./ProgressGlowRings";
+import FireworksBurst from "./FireworksBurst";
+import CrownBattle from "./CrownBattle";
+import ThemeToggle from "./ThemeToggle";
+
+// Utilities
+import { formatDateTime } from "../utils/dashboard";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+// Store
+import { useDashboardStore } from "../store/dashboardStore";
+
+export default function DashboardContent() {
+  const { model, loading, error, lastSyncedAt } = useDashboardModel();
+  const data = useDashboardStore((state) => state.data);
+
+  if (loading && !model) {
+    return (
+      <div className="dashboard-empty-state">
+        <div className="paper-card paper-card-compact paper-card-center">
+          <DoodleSpinner />
+          <p className="scribble-kicker mt-5">scribbling the scorebook...</p>
+          <p className="ledger-note mt-2">
+            Pulling standings, live match notes, and captain doodles.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !model) {
+    return (
+      <div className="dashboard-empty-state">
+        <div className="paper-card paper-card-compact paper-card-center">
+          <p className="section-title">Ink Spill</p>
+          <p className="ledger-note mt-3">{error}</p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="scribble-button mt-5"
+          >
+            Reload the notebook
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!model) {
+    return (
+      <div className="dashboard-empty-state">
+        <div className="paper-card paper-card-compact paper-card-center">
+          <p className="section-title">Blank Page</p>
+          <p className="ledger-note mt-3">
+            The notebook is ready, but no season data has landed yet.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dashboard-page">
+      <motion.section
+        className="paper-hero"
+        initial={{ opacity: 0, y: 18, rotate: -1.2 }}
+        animate={{ opacity: 1, y: 0, rotate: -0.4 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+      >
+        <div className="paper-hero-main">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <span className="scribble-kicker">
+                Pinned above the study desk
+              </span>
+              <h1 className="hero-title">
+                IPL Fantasy
+                <br />
+                <span>Scorebook Scrapbook</span>
+              </h1>
+            </div>
+            <ThemeToggle />
+          </div>
+          <p className="hero-copy">
+            A hand-scribbled wall of live standings, match swings, captain
+            gambles, and season gossip — penciled in, crossed out, and loved.
+          </p>
+          <div className="hero-annotations">
+            <span className="scribble-pill">coffee rings included</span>
+            <span className="scribble-pill scribble-pill-pink">
+              rough edges only
+            </span>
+            <span className="crossed-label">corporate dashboard</span>
+          </div>
+        </div>
+
+        <div className="sticky-stack">
+          <StickyMini
+            title="Leader"
+            value={model.leader.name}
+            note={`${model.leader.points.toLocaleString()} pts`}
+            variant="yellow"
+            icon={FaTrophy}
+          />
+          <StickyMini
+            title={model.liveLabel}
+            value={model.liveLeader?.team ?? "Waiting"}
+            note={
+              model.liveLeader
+                ? `${model.liveLeader.points.toLocaleString()} pts`
+                : "no live row yet"
+            }
+            variant="blue"
+            icon={FaBolt}
+          />
+          <StickyMini
+            title="Updated"
+            value={formatDateTime(lastSyncedAt ?? "")}
+            note={`${model.matchCount} matches inked`}
+            variant="pink"
+            icon={FaClock}
+          />
+        </div>
+
+        <div className="hero-doodles" aria-hidden="true">
+          <span className="doodle-circle doodle-circle-a" />
+          <span className="doodle-circle doodle-circle-b" />
+          <span className="doodle-arrow">look here</span>
+        </div>
+      </motion.section>
+
+      <div className="dashboard-grid">
+        <SectionCard
+          title="Match Recap Scroll"
+          note="latest match results unrolled"
+          className="span-6"
+          index={12}
+          icon={FaChartColumn}
+          accent="var(--accent-amber)"
+        >
+          <div className="mb-3">
+            <TeamPills
+              items={model.liveBars.map((item, i) => ({
+                label: item.label,
+                fill: getChartColor(i, model.liveBars.length),
+              }))}
+              max={3}
+            />
+          </div>
+          <MatchRecapScroll data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Overall Scribble Bars"
+          note="season points for all 8 teams"
+          className="span-6"
+          index={0}
+          icon={FaChartColumn}
+          accent="var(--accent-cyan)"
+        >
+          <ChartBoard items={model.barLeaderboard} valueLabel="pts" />
+        </SectionCard>
+
+        <SectionCard
+          title="Fantasy Stock Market"
+          note="live ticker - points as stock prices"
+          className="span-12"
+          index={13}
+          icon={FaArrowTrendUp}
+          accent="var(--accent-lime)"
+        >
+          <FantasyStockTicker data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Captain Corner"
+          note="full-width captain board with color, role cards, and squad energy"
+          className="span-12"
+          index={2}
+          icon={FaUserShield}
+          accent="var(--accent-lime)"
+        >
+          <CaptainBoard teams={model.captainTeams} />
+        </SectionCard>
+
+        <SectionCard
+          title="Ledger Snapshot"
+          note="color-led table for rank shifts, boosters, efficiency, and transfers"
+          className="span-12"
+          index={3}
+          icon={FaTableList}
+          accent="var(--accent-cyan)"
+        >
+          <LedgerTable rows={model.tableRows} />
+        </SectionCard>
+
+        <SectionCard
+          title="Performance Tracker"
+          note="color race lines across the full season, visible again"
+          className="span-12"
+          index={4}
+          icon={FaArrowTrendUp}
+          accent="var(--accent-blue)"
+        >
+          <PerformanceTracker />
+        </SectionCard>
+
+        <SectionCard
+          title="Margin Notes"
+          note="little facts circled in neon marker"
+          className="span-12"
+          index={6}
+          icon={FaMedal}
+          accent="var(--accent-magenta)"
+        >
+          <div className="gap-to-next-list-compact">
+            {model.normalizedOverall.map((team, idx) => {
+              const gap = team.gapToNext ?? 0;
+              const maxGap = Math.max(
+                ...model.normalizedOverall.map((t) => t.gapToNext ?? 0),
+              );
+              const barWidth = maxGap > 0 ? (gap / maxGap) * 100 : 0;
+              const color = getChartColor(idx, model.normalizedOverall.length);
+              return (
+                <div key={team.name} className="gap-item-single-line">
+                  <div className="gap-badge-mini" style={{ background: color }}>
+                    #{team.rank}
+                  </div>
+                  <div className="gap-team-label">{team.name}</div>
+                  <div className="gap-bar-inline">
+                    <div
+                      className="gap-bar-inline-track"
+                      style={{
+                        background: `color-mix(in srgb, ${color} 12%, var(--panel-strong))`,
+                        border: `1px dashed color-mix(in srgb, ${color} 32%, var(--line))`,
+                      }}
+                    >
+                      <div
+                        className="gap-bar-inline-fill"
+                        style={{
+                          width: `${barWidth}%`,
+                          background: `linear-gradient(90deg, ${color} 0%, color-mix(in srgb, ${color} 70%, var(--panel-strong) 30%))`,
+                          boxShadow: `0 1px 3px color-mix(in srgb, ${color} 40%, transparent)`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="gap-value-mini font-black">
+                    {gap.toLocaleString()}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title="Team DNA Scanner"
+          note="genetic breakdown of every squad"
+          className="span-12"
+          index={15}
+          icon={FaMicroscope}
+          accent="var(--accent-blue)"
+        >
+          <TeamDNAScanner data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Match Story Scrubber"
+          note="drag across the season timeline"
+          className="span-12"
+          index={18}
+          icon={FaClock}
+          accent="var(--accent-blue)"
+        >
+          <MatchStoryScrubber data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Points Color Wave"
+          note="flowing waveform of every team"
+          className="span-12"
+          index={20}
+          icon={FaArrowTrendUp}
+          accent="var(--accent-cyan)"
+        >
+          <ColorWave data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Progress Glow Rings"
+          note="colorful rings — % distance to leader"
+          className="span-12"
+          index={22}
+          icon={FaGem}
+          accent="var(--accent-amber)"
+        >
+          <ProgressGlowRings data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Fireworks Burst"
+          note="click a team to celebrate"
+          className="span-6"
+          index={23}
+          icon={FaWandSparkles}
+          accent="var(--accent-magenta)"
+        >
+          <FireworksBurst data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="Crown Battle"
+          note="top 3 battle for the throne"
+          className="span-6"
+          index={24}
+          icon={FaStar}
+          accent="var(--accent-amber)"
+        >
+          <CrownBattle data={data} />
+        </SectionCard>
+
+        <SectionCard
+          title="AI Roast Corner"
+          note="sarcastic commentary from our digital drama queen"
+          className="span-12"
+          index={7}
+          icon={FaRobot}
+          accent="var(--accent-magenta)"
+        >
+          <AIRoasting data={data} />
+        </SectionCard>
+      </div>
+    </div>
+  );
+}

package/template/app/components/FantasyStockTicker.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useMemo } from "react";
+import { FaArrowTrendUp, FaArrowTrendDown, FaMinus } from "react-icons/fa6";
+import { motion } from "framer-motion";
+import { Line, LineChart, ResponsiveContainer } from "recharts";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows } from "../lib/dashboardData";
+
+export default function FantasyStockTicker({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const stocks = 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) => {
+        const scores = daily
+          .map((r) => Number(r[team.name] ?? 0))
+          .filter((v) => v > 0);
+        const last = team.lastMatchPoints ?? scores.at(-1) ?? 0;
+        const prev = scores.length > 1 ? (scores.at(-2) ?? 0) : 0;
+        const change = last - prev;
+        const changePct = prev > 0 ? ((change / prev) * 100).toFixed(1) : "0.0";
+
+        const sparkData = scores.slice(-10).map((s, i) => ({ v: s, i }));
+
+        return {
+          symbol: team.name
+            .split(" ")
+            .map((w) => w[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 5),
+          name: team.name,
+          price: team.points,
+          change,
+          changePct,
+          rank: team.rank,
+          sparkData,
+          prevPoints: prev,
+        };
+      });
+  }, [data]);
+
+  if (!stocks.length) {
+    return (
+      <div className="ledger-note py-6 text-center">No market data yet...</div>
+    );
+  }
+
+  const tickerItems = [...stocks, ...stocks, ...stocks];
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly overflow-hidden"
+      style={{
+        borderColor: "color-mix(in srgb, var(--marker-green) 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">
+        <span
+          className="text-sm font-bold"
+          style={{ color: "var(--marker-green)" }}
+        >
+          ⟠
+        </span>
+        <span className="font-bold text-sm text-(--ink)">
+          Fantasy Stock Market
+        </span>
+        <span className="text-[8px] text-(--ink-faint) ml-auto">
+          live ticker
+        </span>
+      </div>
+
+      <div className="ticker-window">
+        <motion.div
+          className="ticker-track"
+          animate={{ x: ["0%", "-50%"] }}
+          transition={{ repeat: Infinity, duration: 48, ease: "linear" }}
+          style={{ display: "flex", gap: 12, paddingRight: 12 }}
+        >
+          {tickerItems.map((stock, index) => {
+            const isUp = stock.change > 0;
+            const isDown = stock.change < 0;
+            return (
+              <div
+                key={`${stock.symbol}-${index}`}
+                className="flex shrink-0 items-center gap-3 rounded-xl border-2 p-2.5"
+                style={{
+                  width: 280,
+                  borderColor: isUp
+                    ? "color-mix(in srgb, var(--marker-green) 34%, var(--line))"
+                    : isDown
+                      ? "color-mix(in srgb, var(--marker-pink) 34%, var(--line))"
+                      : "color-mix(in srgb, var(--marker-blue) 24%, var(--line))",
+                  background: isUp
+                    ? "color-mix(in srgb, var(--marker-green) 6%, var(--paper) 94%)"
+                    : isDown
+                      ? "color-mix(in srgb, var(--marker-pink) 6%, var(--paper) 94%)"
+                      : "color-mix(in srgb, var(--paper) 96%, var(--panel) 4%)",
+                }}
+              >
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-[9px] font-black uppercase tracking-wider text-(--ink-faint)">
+                      {stock.symbol}
+                    </span>
+                    <span
+                      className="rounded px-1 py-0.5 text-[8px] font-bold"
+                      style={{
+                        background:
+                          "color-mix(in srgb, var(--panel) 80%, transparent)",
+                        color: "var(--ink-soft)",
+                      }}
+                    >
+                      #{stock.rank}
+                    </span>
+                  </div>
+                  <span className="truncate text-[13px] font-bold text-(--ink) leading-tight">
+                    {stock.name}
+                  </span>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-sm font-black text-(--ink)">
+                      {stock.price.toLocaleString()}
+                    </span>
+                    <span
+                      className={`inline-flex items-center gap-0.5 text-[9px] font-bold ${
+                        isUp
+                          ? "text-(--marker-green)"
+                          : isDown
+                            ? "text-(--marker-pink)"
+                            : "text-(--ink-faint)"
+                      }`}
+                    >
+                      {isUp ? (
+                        <FaArrowTrendUp className="text-[8px]" />
+                      ) : isDown ? (
+                        <FaArrowTrendDown className="text-[8px]" />
+                      ) : (
+                        <FaMinus className="text-[8px]" />
+                      )}
+                      <span>
+                        {isUp ? "+" : ""}
+                        {stock.change.toLocaleString()}
+                      </span>
+                      <span className="text-[7px] opacity-70">
+                        ({isUp ? "+" : ""}
+                        {stock.changePct}%)
+                      </span>
+                    </span>
+                  </div>
+                </div>
+
+                {stock.sparkData.length > 1 && (
+                  <div className="h-9 w-16 shrink-0">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <LineChart data={stock.sparkData}>
+                        <Line
+                          type="natural"
+                          dataKey="v"
+                          stroke={
+                            isUp
+                              ? "var(--marker-green)"
+                              : isDown
+                                ? "var(--marker-pink)"
+                                : "var(--marker-blue)"
+                          }
+                          strokeWidth={2}
+                          dot={false}
+                          isAnimationActive={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </div>
+  );
+}