feat: add public dashboard page with trending, best new releases, and most tested charts

2026-05-09 13:11:27 +08:00
parent 2f4f0250df
commit 2bc6953339
5 changed files with 672 additions and 0 deletions
@@ -0,0 +1,117 @@
+"use client"
+
+import { TrendingUpIcon, SparklesIcon, BarChart3Icon } from "lucide-react"
+import { TrendingGamesChart } from "./trending-games-chart"
+import { BestReleasesChart } from "./best-releases-chart"
+import { MostTestedChart } from "./most-tested-chart"
+
+interface TrendingGame {
+  id: string
+  title: string
+  capsule_image: string | null
+  header_image: string | null
+  playability_status: string | null
+  benchmark_count: number
+  comment_count: number
+  upvote_count: number
+  activity_score: number
+}
+
+interface BestRelease {
+  id: string
+  title: string
+  capsule_image: string | null
+  header_image: string | null
+  release_date: string | null
+  created_at: string | null
+  playability_status: string | null
+  avg_fps: number | null
+  benchmark_count: number
+}
+
+interface MostTestedGame {
+  id: string
+  title: string
+  capsule_image: string | null
+  header_image: string | null
+  playability_status: string | null
+  benchmark_count: number
+}
+
+interface MostReportedGame {
+  id: string
+  title: string
+  capsule_image: string | null
+  header_image: string | null
+  report_count: number
+}
+
+interface DashboardClientProps {
+  trending: TrendingGame[]
+  bestNew: BestRelease[]
+  mostTested: MostTestedGame[]
+  mostReported: MostReportedGame[]
+}
+
+export function DashboardClient({
+  trending,
+  bestNew,
+  mostTested,
+  mostReported,
+}: DashboardClientProps) {
+  return (
+    <main className="w-full max-w-6xl mx-auto px-4 py-6 flex flex-col gap-8">
+      <header>
+        <h1 className="text-2xl md:text-3xl font-bold text-text">
+          Community Dashboard
+        </h1>
+        <p className="text-text/60 mt-1 text-sm md:text-base">
+          Real-time insights from the DeckyVault community — trending games, top
+          performers, and activity highlights.
+        </p>
+      </header>
+
+      {/* Trending Games */}
+      <section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <TrendingUpIcon className="h-5 w-5 text-primary" />
+          <h2 className="text-lg md:text-xl font-semibold text-text">
+            Trending Games (7 days)
+          </h2>
+        </div>
+        <p className="text-text/60 text-sm">
+          Top games by community activity: benchmarks, comments, and upvotes.
+        </p>
+        <TrendingGamesChart games={trending} />
+      </section>
+
+      {/* Best New Releases */}
+      <section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <SparklesIcon className="h-5 w-5 text-accent" />
+          <h2 className="text-lg md:text-xl font-semibold text-text">
+            Best Performing New Releases
+          </h2>
+        </div>
+        <p className="text-text/60 text-sm">
+          Newly added games with the highest average FPS (minimum 3 benchmarks).
+        </p>
+        <BestReleasesChart games={bestNew} />
+      </section>
+
+      {/* Most Tested & Most Reported */}
+      <section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <BarChart3Icon className="h-5 w-5 text-info" />
+          <h2 className="text-lg md:text-xl font-semibold text-text">
+            Most Tested & Most Reported
+          </h2>
+        </div>
+        <p className="text-text/60 text-sm">
+          Games with the most benchmarks submitted and the most open reports.
+        </p>
+        <MostTestedChart mostTested={mostTested} mostReported={mostReported} />
+      </section>
+    </main>
+  )
+}