From ce3c88ec541e8b7013b26b5fab8cb0036e62242d Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Thu, 30 Apr 2026 20:48:28 +0800
Subject: [PATCH] feat(manage): add dashboard overview and charts components

- DashboardOverview: stat cards, top contributors, playability distribution,
  and Steam sync health sections
- DashboardCharts: placeholder for future ECharts integration
---
 components/manage/dashboard-charts.tsx   |   7 +
 components/manage/dashboard-overview.tsx | 211 +++++++++++++++++++++++
 2 files changed, 218 insertions(+)
 create mode 100644 components/manage/dashboard-charts.tsx
 create mode 100644 components/manage/dashboard-overview.tsx

diff --git a/components/manage/dashboard-charts.tsx b/components/manage/dashboard-charts.tsx
new file mode 100644
index 0000000..998abea
--- /dev/null
+++ b/components/manage/dashboard-charts.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+// Future: ECharts integration for trends over time
+// For now, the overview stats are sufficient
+export function DashboardCharts() {
+  return null;
+}
diff --git a/components/manage/dashboard-overview.tsx b/components/manage/dashboard-overview.tsx
new file mode 100644
index 0000000..e1cc294
--- /dev/null
+++ b/components/manage/dashboard-overview.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Gamepad2,
+  BarChart3,
+  Users,
+  AlertTriangle,
+  MessageSquarePlus,
+  TrendingUp,
+  Shield,
+  ShieldX,
+  ShieldCheck,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DashboardStats {
+  overview: {
+    totalGames: number;
+    totalBenchmarks: number;
+    totalUsers: number;
+    pendingReports: number;
+    pendingSuggestions: number;
+  };
+  recent: {
+    benchmarksLast30Days: number;
+    gamesLast30Days: number;
+  };
+  topContributors: Array<{
+    userId: string;
+    name: string;
+    count: number;
+  }>;
+  syncHealth: Record<string, number>;
+  gamesBySource: Record<string, number>;
+  playabilityDistribution: Record<string, number>;
+}
+
+export function DashboardOverview() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/dashboard/stats")
+      .then((res) => res.json())
+      .then((data) => {
+        setStats(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <div className="animate-pulse h-64 rounded-lg bg-zinc-800" />;
+  }
+
+  if (!stats) return null;
+
+  const statCards = [
+    {
+      label: "Total Games",
+      value: stats.overview.totalGames,
+      icon: Gamepad2,
+      color: "text-blue-400",
+    },
+    {
+      label: "Total Benchmarks",
+      value: stats.overview.totalBenchmarks,
+      icon: BarChart3,
+      color: "text-green-400",
+    },
+    {
+      label: "Total Users",
+      value: stats.overview.totalUsers,
+      icon: Users,
+      color: "text-purple-400",
+    },
+    {
+      label: "Pending Reports",
+      value: stats.overview.pendingReports,
+      icon: AlertTriangle,
+      color: "text-red-400",
+      highlight: stats.overview.pendingReports > 0,
+    },
+    {
+      label: "Pending Suggestions",
+      value: stats.overview.pendingSuggestions,
+      icon: MessageSquarePlus,
+      color: "text-amber-400",
+      highlight: stats.overview.pendingSuggestions > 0,
+    },
+    {
+      label: "Benchmarks (30d)",
+      value: stats.recent.benchmarksLast30Days,
+      icon: TrendingUp,
+      color: "text-emerald-400",
+    },
+    {
+      label: "New Games (30d)",
+      value: stats.recent.gamesLast30Days,
+      icon: Gamepad2,
+      color: "text-cyan-400",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Stat Cards */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-7">
+        {statCards.map((card) => {
+          const Icon = card.icon;
+          return (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-lg border bg-zinc-900 p-4",
+                card.highlight ? "border-amber-500/30" : "border-zinc-800"
+              )}
+            >
+              <div className="mb-2 flex items-center gap-2">
+                <Icon className={cn("h-4 w-4", card.color)} />
+                <span className="text-xs text-zinc-500">{card.label}</span>
+              </div>
+              <p className="text-2xl font-bold">{card.value.toLocaleString()}</p>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Grid: Top Contributors + Playability Distribution */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Top Contributors */}
+        <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+          <h3 className="mb-4 font-semibold">Top Contributors</h3>
+          <div className="space-y-2">
+            {stats.topContributors.slice(0, 5).map((contributor, i) => (
+              <div
+                key={contributor.userId}
+                className="flex items-center justify-between rounded-md bg-zinc-800/50 px-3 py-2"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-zinc-500">#{i + 1}</span>
+                  <span className="text-sm">{contributor.name}</span>
+                </div>
+                <span className="text-sm font-medium text-zinc-400">
+                  {contributor.count} entries
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Playability Distribution */}
+        <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+          <h3 className="mb-4 font-semibold">Playability Distribution</h3>
+          <div className="space-y-2">
+            {Object.entries(stats.playabilityDistribution).map(([status, count]) => {
+              const config: Record<string, { label: string; color: string }> = {
+                great: { label: "Plays Great", color: "bg-emerald-500" },
+                playable: { label: "Playable", color: "bg-blue-500" },
+                needs_tweaks: { label: "Needs Tweaks", color: "bg-amber-500" },
+                unplayable: { label: "Unplayable", color: "bg-red-500" },
+                unknown: { label: "Unknown", color: "bg-zinc-500" },
+              };
+              const c = config[status] ?? config.unknown;
+
+              return (
+                <div key={status} className="flex items-center gap-3">
+                  <span className={cn("h-3 w-3 rounded-full", c.color)} />
+                  <span className="flex-1 text-sm">{c.label}</span>
+                  <span className="text-sm font-medium">{count}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Sync Health */}
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+        <h3 className="mb-4 font-semibold">Steam Sync Health</h3>
+        <div className="flex gap-4">
+          {Object.entries(stats.syncHealth).map(([status, count]) => {
+            const icons: Record<string, typeof Shield> = {
+              synced: ShieldCheck,
+              failed: ShieldX,
+              pending: Shield,
+            };
+            const colors: Record<string, string> = {
+              synced: "text-green-400",
+              failed: "text-red-400",
+              pending: "text-yellow-400",
+            };
+            const Icon = icons[status] ?? Shield;
+            const color = colors[status] ?? "text-zinc-400";
+
+            return (
+              <div key={status} className="flex items-center gap-2">
+                <Icon className={cn("h-5 w-5", color)} />
+                <div>
+                  <p className="text-lg font-bold">{count}</p>
+                  <p className="text-xs capitalize text-zinc-500">{status}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}