feat: transfer admin check to middleware and add vertical padding

app/(admin)/layout.tsx

@@ -1,44 +1,36 @@
-import { redirect } from "next/navigation"
-import { headers } from "next/headers"
-import { auth } from "@/lib/auth"
 import { AdminSidebar } from "@/components/admin/admin-sidebar"
 import type { Metadata } from "next"
 
 export const metadata: Metadata = {
-  title: { template: "%s | Admin — DeckyVault", default: "Admin — DeckyVault" },
+    title: {
-  robots: { index: false, follow: false },
+        template: "%s | Admin — DeckyVault",
+        default: "Admin — DeckyVault",
+    },
+    robots: { index: false, follow: false },
 }
 
 export default async function AdminLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode
 }) {
-  const session = await auth.api.getSession({
+    return (
-    headers: await headers(),
+        <section className='w-full flex flex-col gap-8 py-16'>
-  })
+            <div className='px-4 md:px-[10svw]'>
+                <div className='max-w-7xl mx-auto'>
+                    <h1 className='text-2xl sm:text-3xl font-bold'>Admin</h1>
+                    <p className='text-sm text-text/60 mt-1'>
+                        Manage users, hardware, and games
+                    </p>
+                </div>
+            </div>
 
-  if (!session || session.user.role !== "admin") {
+            <div className='px-4 md:px-[10svw]'>
-    redirect("/")
+                <div className='max-w-7xl mx-auto flex flex-col md:flex-row gap-6'>
-  }
+                    <AdminSidebar />
-
+                    <div className='flex-1 min-w-0'>{children}</div>
-  return (
+                </div>
-    <section className="w-full flex flex-col gap-8 pb-16">
+            </div>
-      <div className="px-4 md:px-[10svw]">
+        </section>
-        <div className="max-w-7xl mx-auto">
+    )
-          <h1 className="text-2xl sm:text-3xl font-bold">Admin</h1>
-          <p className="text-sm text-text/60 mt-1">
-            Manage users, hardware, and games
-          </p>
-        </div>
-      </div>
-
-      <div className="px-4 md:px-[10svw]">
-        <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-6">
-          <AdminSidebar />
-          <div className="flex-1 min-w-0">{children}</div>
-        </div>
-      </div>
-    </section>
-  )
 }

app/devices/[slug]/device-detail-client.tsx

@@ -5,442 +5,565 @@ import Link from "next/link"
 import Image from "next/image"
 import { motion } from "motion/react"
 import {
-  Gamepad2Icon,
+    Gamepad2Icon,
-  TrendingUpIcon,
+    TrendingUpIcon,
-  DatabaseIcon,
+    DatabaseIcon,
-  CheckCircleIcon,
+    CheckCircleIcon,
-  ArrowRightIcon,
+    ArrowRightIcon,
-  Loader2,
+    Loader2,
-  RefreshCwIcon,
+    RefreshCwIcon,
-  MonitorIcon,
+    MonitorIcon,
 } from "lucide-react"
 import {
-  EChartWrapper,
+    EChartWrapper,
-  CHART_THEME,
+    CHART_THEME,
-  getDeviceColor,
+    getDeviceColor,
 } from "@/components/charts/EChartWrapper"
 import type { EChartsOption } from "echarts"
 
 interface DeviceInfo {
-  slug: string
+    slug: string
-  name: string
+    name: string
-  deviceType: string
+    deviceType: string
-  image: string | null
+    image: string | null
-  colorIndex: number
+    colorIndex: number
 }
 
 interface UpscalerEntry {
-  upscalerType: string
+    upscalerType: string
-  count: number
+    count: number
-  avgFps: number
+    avgFps: number
 }
 
 interface DeviceStats {
-  slug: string
+    slug: string
-  name: string
+    name: string
-  deviceType: string
+    deviceType: string
-  totalBenchmarks: number
+    totalBenchmarks: number
-  avgFps: number | null
+    avgFps: number | null
-  verifiedCount: number
+    verifiedCount: number
-  gameCount: number
+    gameCount: number
-  boxplot: Array<{
+    boxplot: Array<{
-    gameId: string
+        gameId: string
-    gameTitle: string
+        gameTitle: string
-    min: number
+        min: number
-    q1: number
+        q1: number
-    median: number
+        median: number
-    q3: number
+        q3: number
-    max: number
+        max: number
-    count: number
+        count: number
-  }>
+    }>
-  historical: Array<{
+    historical: Array<{
-    period: string
+        period: string
-    avgFps: number
+        avgFps: number
-    count: number
+        count: number
-  }>
+    }>
-  topGames: Array<{
+    topGames: Array<{
-    gameId: string
+        gameId: string
-    gameTitle: string
+        gameTitle: string
-    headerImage: string | null
+        headerImage: string | null
-    avgFps: number
+        avgFps: number
-    benchmarkCount: number
+        benchmarkCount: number
-  }>
+    }>
-  genreBreakdown: Array<{ genre: string; count: number }>
+    genreBreakdown: Array<{ genre: string; count: number }>
-  protonBreakdown: Array<{ version: string; count: number }>
+    protonBreakdown: Array<{ version: string; count: number }>
-  upscalerBreakdown: UpscalerEntry[]
+    upscalerBreakdown: UpscalerEntry[]
 }
 
 const deviceTypeLabel: Record<string, string> = {
-  handheld: "Handheld",
+    handheld: "Handheld",
-  console: "Console",
+    console: "Console",
 }
 
 const deviceTypeColor: Record<string, string> = {
-  handheld: "text-primary bg-primary/10 border-primary/20",
+    handheld: "text-primary bg-primary/10 border-primary/20",
-  console: "text-secondary bg-secondary/10 border-secondary/20",
+    console: "text-secondary bg-secondary/10 border-secondary/20",
 }
 
 export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
-  const [stats, setStats] = useState<DeviceStats | null>(null)
+    const [stats, setStats] = useState<DeviceStats | null>(null)
-  const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+    const [error, setError] = useState<string | null>(null)
 
-  const deviceColor = getDeviceColor(device.colorIndex)
+    const deviceColor = getDeviceColor(device.colorIndex)
 
-  async function fetchStats() {
+    async function fetchStats() {
-    setLoading(true)
+        setLoading(true)
-    setError(null)
+        setError(null)
-    try {
+        try {
-      const res = await fetch(`/api/hardware/${device.slug}/stats`)
+            const res = await fetch(`/api/hardware/${device.slug}/stats`)
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json()
+            const data = await res.json()
-      setStats(data)
+            setStats(data)
-    } catch (err) {
+        } catch (err) {
-      console.error("Failed to fetch device stats:", err)
+            console.error("Failed to fetch device stats:", err)
-      setError("Failed to load device statistics. Please try again.")
+            setError("Failed to load device statistics. Please try again.")
-    } finally {
+        } finally {
-      setLoading(false)
+            setLoading(false)
+        }
     }
-  }
 
-  useEffect(() => {
+    useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+        // eslint-disable-next-line react-hooks/set-state-in-effect
-    fetchStats()
+        fetchStats()
-  }, [device.slug]) // eslint-disable-line react-hooks/exhaustive-deps
+    }, [device.slug]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const historicalOption = useMemo<EChartsOption>(() => {
+    const historicalOption = useMemo<EChartsOption>(() => {
-    if (!stats || stats.historical.length === 0) return {}
+        if (!stats || stats.historical.length === 0) return {}
-    return {
+        return {
-      tooltip: {
+            tooltip: {
-        trigger: "axis",
+                trigger: "axis",
-        backgroundColor: "#1a1020",
+                backgroundColor: "#1a1020",
-        borderColor: CHART_THEME.border,
+                borderColor: CHART_THEME.border,
-        textStyle: { color: CHART_THEME.text },
+                textStyle: { color: CHART_THEME.text },
-      },
-      grid: { left: 50, right: 20, top: 10, bottom: 30 },
-      xAxis: {
-        type: "category",
-        data: stats.historical.map((h) => h.period),
-        axisLine: { lineStyle: { color: CHART_THEME.border } },
-        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
-      },
-      yAxis: {
-        type: "value",
-        axisLine: { lineStyle: { color: CHART_THEME.border } },
-        splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
-        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
-      },
-      series: [
-        {
-          type: "line",
-          data: stats.historical.map((h) => h.avgFps),
-          smooth: true,
-          lineStyle: { color: deviceColor, width: 2 },
-          areaStyle: {
-            color: {
-              type: "linear",
-              x: 0, y: 0, x2: 0, y2: 1,
-              colorStops: [
-                { offset: 0, color: deviceColor + "40" },
-                { offset: 1, color: deviceColor + "05" },
-              ],
             },
-          },
+            grid: { left: 50, right: 20, top: 10, bottom: 30 },
-          symbol: "circle",
+            xAxis: {
-          symbolSize: 4,
+                type: "category",
-          itemStyle: { color: deviceColor },
+                data: stats.historical.map((h) => h.period),
-        },
+                axisLine: { lineStyle: { color: CHART_THEME.border } },
-      ],
+                axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
-    }
-  }, [stats, deviceColor])
-
-  const boxplotOption = useMemo<EChartsOption>(() => {
-    if (!stats || stats.boxplot.length === 0) return {}
-    return {
-      tooltip: {
-        trigger: "item",
-        backgroundColor: "#1a1020",
-        borderColor: CHART_THEME.border,
-        textStyle: { color: CHART_THEME.text },
-      },
-      grid: { left: 80, right: 20, top: 10, bottom: 40 },
-      xAxis: {
-        type: "category",
-        data: stats.boxplot.map((b) => b.gameTitle),
-        axisLine: { lineStyle: { color: CHART_THEME.border } },
-        axisLabel: { color: CHART_THEME.textMuted, fontSize: 10, rotate: 30 },
-      },
-      yAxis: {
-        type: "value",
-        name: "FPS",
-        axisLine: { lineStyle: { color: CHART_THEME.border } },
-        splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
-        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
-        nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
-      },
-      series: [
-        {
-          type: "boxplot",
-          data: stats.boxplot.map((b) => [b.min, b.q1, b.median, b.q3, b.max]),
-          itemStyle: { color: deviceColor + "30", borderColor: deviceColor },
-        },
-      ],
-    }
-  }, [stats, deviceColor])
-
-  const genreOption = useMemo<EChartsOption>(() => {
-    if (!stats || stats.genreBreakdown.length === 0) return {}
-    return {
-      tooltip: {
-        trigger: "item",
-        backgroundColor: "#1a1025",
-        borderColor: CHART_THEME.border,
-        textStyle: { color: CHART_THEME.text },
-      },
-      series: [
-        {
-          type: "pie",
-          radius: ["40%", "70%"],
-          center: ["50%", "50%"],
-          data: stats.genreBreakdown.map((g, i) => ({
-            name: g.genre,
-            value: g.count,
-            itemStyle: {
-              color: CHART_THEME.deviceColors[i % CHART_THEME.deviceColors.length],
             },
-          })),
+            yAxis: {
-          label: { color: CHART_THEME.textMuted, fontSize: 10 },
+                type: "value",
-          emphasis: {
+                axisLine: { lineStyle: { color: CHART_THEME.border } },
-            itemStyle: { shadowBlur: 10, shadowColor: "rgba(0,0,0,0.5)" },
+                splitLine: {
-          },
+                    lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
-        },
+                },
-      ],
+                axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
-    }
+            },
-  }, [stats])
+            series: [
+                {
+                    type: "line",
+                    data: stats.historical.map((h) => h.avgFps),
+                    smooth: true,
+                    lineStyle: { color: deviceColor, width: 2 },
+                    areaStyle: {
+                        color: {
+                            type: "linear",
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                { offset: 0, color: deviceColor + "40" },
+                                { offset: 1, color: deviceColor + "05" },
+                            ],
+                        },
+                    },
+                    symbol: "circle",
+                    symbolSize: 4,
+                    itemStyle: { color: deviceColor },
+                },
+            ],
+        }
+    }, [stats, deviceColor])
 
-  return (
+    const boxplotOption = useMemo<EChartsOption>(() => {
-    <section className="w-full flex flex-col gap-8 pb-16">
+        if (!stats || stats.boxplot.length === 0) return {}
-      {/* Hero Header */}
+        return {
-      <motion.div
+            tooltip: {
-        initial={{ opacity: 0, y: 12 }}
+                trigger: "item",
-        animate={{ opacity: 1, y: 0 }}
+                backgroundColor: "#1a1020",
-        transition={{ duration: 0.4 }}
+                borderColor: CHART_THEME.border,
-        className="px-4 md:px-[10svw]"
+                textStyle: { color: CHART_THEME.text },
-      >
+            },
-        <div className="max-w-7xl mx-auto">
+            grid: { left: 80, right: 20, top: 10, bottom: 40 },
-          <div className="flex items-center gap-4 mb-2">
+            xAxis: {
-            <div
+                type: "category",
-              className="flex items-center justify-center h-14 w-14 rounded-xl shrink-0"
+                data: stats.boxplot.map((b) => b.gameTitle),
-              style={{ background: `${deviceColor}15` }}
+                axisLine: { lineStyle: { color: CHART_THEME.border } },
+                axisLabel: {
+                    color: CHART_THEME.textMuted,
+                    fontSize: 10,
+                    rotate: 30,
+                },
+            },
+            yAxis: {
+                type: "value",
+                name: "FPS",
+                axisLine: { lineStyle: { color: CHART_THEME.border } },
+                splitLine: {
+                    lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
+                },
+                axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
+                nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
+            },
+            series: [
+                {
+                    type: "boxplot",
+                    data: stats.boxplot.map((b) => [
+                        b.min,
+                        b.q1,
+                        b.median,
+                        b.q3,
+                        b.max,
+                    ]),
+                    itemStyle: {
+                        color: deviceColor + "30",
+                        borderColor: deviceColor,
+                    },
+                },
+            ],
+        }
+    }, [stats, deviceColor])
+
+    const genreOption = useMemo<EChartsOption>(() => {
+        if (!stats || stats.genreBreakdown.length === 0) return {}
+        return {
+            tooltip: {
+                trigger: "item",
+                backgroundColor: "#1a1025",
+                borderColor: CHART_THEME.border,
+                textStyle: { color: CHART_THEME.text },
+            },
+            series: [
+                {
+                    type: "pie",
+                    radius: ["40%", "70%"],
+                    center: ["50%", "50%"],
+                    data: stats.genreBreakdown.map((g, i) => ({
+                        name: g.genre,
+                        value: g.count,
+                        itemStyle: {
+                            color: CHART_THEME.deviceColors[
+                                i % CHART_THEME.deviceColors.length
+                            ],
+                        },
+                    })),
+                    label: { color: CHART_THEME.textMuted, fontSize: 10 },
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowColor: "rgba(0,0,0,0.5)",
+                        },
+                    },
+                },
+            ],
+        }
+    }, [stats])
+
+    return (
+        <section className='w-full flex flex-col gap-8 py-16'>
+            {/* Hero Header */}
+            <motion.div
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4 }}
+                className='px-4 md:px-[10svw]'
             >
-              {device.image ? (
+                <div className='max-w-7xl mx-auto'>
-                <Image
+                    <div className='flex items-center gap-4 mb-2'>
-                  src={device.image}
+                        <div
-                  alt={device.name}
+                            className='flex items-center justify-center h-14 w-14 rounded-xl shrink-0'
-                  width={56}
+                            style={{ background: `${deviceColor}15` }}
-                  height={56}
+                        >
-                  className="object-contain"
+                            {device.image ? (
-                />
+                                <Image
-              ) : (
+                                    src={device.image}
-                <Gamepad2Icon className="h-7 w-7" style={{ color: deviceColor }} />
+                                    alt={device.name}
-              )}
+                                    width={56}
-            </div>
+                                    height={56}
-            <div>
+                                    className='object-contain'
-              <h1 className="text-2xl sm:text-3xl font-bold">{device.name}</h1>
+                                />
-              <div className="flex items-center gap-2 mt-1">
+                            ) : (
-                <span
+                                <Gamepad2Icon
-                  className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border capitalize ${
+                                    className='h-7 w-7'
-                    deviceTypeColor[device.deviceType] || "text-text/50 bg-text/5 border-border"
+                                    style={{ color: deviceColor }}
-                  }`}
+                                />
-                >
+                            )}
-                  <Gamepad2Icon className="h-3 w-3" />
+                        </div>
-                  {deviceTypeLabel[device.deviceType] || device.deviceType}
+                        <div>
-                </span>
+                            <h1 className='text-2xl sm:text-3xl font-bold'>
-                {stats && stats.verifiedCount > 0 && (
+                                {device.name}
-                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                            </h1>
-                    <CheckCircleIcon className="h-3 w-3" />
+                            <div className='flex items-center gap-2 mt-1'>
-                    {stats.verifiedCount} verified
+                                <span
-                  </span>
+                                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border capitalize ${
-                )}
+                                        deviceTypeColor[device.deviceType] ||
-              </div>
+                                        "text-text/50 bg-text/5 border-border"
-            </div>
+                                    }`}
-          </div>
+                                >
-          <p className="text-sm text-text/60">Performance benchmarks and statistics</p>
+                                    <Gamepad2Icon className='h-3 w-3' />
-        </div>
+                                    {deviceTypeLabel[device.deviceType] ||
-      </motion.div>
+                                        device.deviceType}
-
+                                </span>
-      {/* Overview Stats */}
+                                {stats && stats.verifiedCount > 0 && (
-      {stats && !loading && (
+                                    <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20'>
-        <motion.div
+                                        <CheckCircleIcon className='h-3 w-3' />
-          initial={{ opacity: 0, y: 12 }}
+                                        {stats.verifiedCount} verified
-          animate={{ opacity: 1, y: 0 }}
+                                    </span>
-          transition={{ duration: 0.4, delay: 0.05 }}
+                                )}
-          className="px-4 md:px-[10svw]"
-        >
-          <div className="max-w-7xl mx-auto flex flex-wrap gap-4">
-            <StatCard icon={DatabaseIcon} label="Total Benchmarks" value={String(stats.totalBenchmarks)} />
-            <StatCard icon={TrendingUpIcon} label="Average FPS" value={stats.avgFps !== null ? String(stats.avgFps) : "—"} />
-            <StatCard icon={MonitorIcon} label="Games Tested" value={String(stats.gameCount)} />
-            <StatCard icon={CheckCircleIcon} label="Verified" value={String(stats.verifiedCount)} />
-          </div>
-        </motion.div>
-      )}
-
-      {/* Loading */}
-      {loading && (
-        <div className="flex items-center justify-center py-16">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        </div>
-      )}
-
-      {/* Error State */}
-      {error && !loading && (
-        <div className="px-4 md:px-[10svw]">
-          <div className="max-w-7xl mx-auto text-center py-16 text-text/40">
-            <Gamepad2Icon className="h-10 w-10 mx-auto mb-3" />
-            <p className="text-text/60 mb-4">{error}</p>
-            <button
-              onClick={fetchStats}
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer"
-            >
-              <RefreshCwIcon className="h-4 w-4" />
-              Retry
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Charts */}
-      {stats && !loading && !error && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, delay: 0.1 }}
-          className="px-4 md:px-[10svw]"
-        >
-          <div className="max-w-7xl mx-auto flex flex-col gap-6">
-            {stats.historical.length > 0 && (
-              <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                <h3 className="text-sm font-medium text-text/80 mb-2">Historical Performance</h3>
-                <EChartWrapper option={historicalOption} height={280} />
-              </div>
-            )}
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              {stats.boxplot.length > 0 && (
-                <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                  <h3 className="text-sm font-medium text-text/80 mb-2">FPS Distribution by Game</h3>
-                  <EChartWrapper option={boxplotOption} height={300} />
-                </div>
-              )}
-              {stats.genreBreakdown.length > 0 && (
-                <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                  <h3 className="text-sm font-medium text-text/80 mb-2">Genre Breakdown</h3>
-                  <EChartWrapper option={genreOption} height={300} />
-                </div>
-              )}
-            </div>
-
-            {(stats.protonBreakdown.length > 0 || stats.upscalerBreakdown.length > 0) && (
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                {stats.protonBreakdown.length > 0 && (
-                  <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                    <h3 className="text-sm font-medium text-text/80 mb-3">Proton Version Distribution</h3>
-                    <div className="space-y-2">
-                      {stats.protonBreakdown.map((p) => (
-                        <div key={p.version} className="flex items-center justify-between text-sm">
-                          <span className="text-text/70">{p.version}</span>
-                          <div className="flex items-center gap-2">
-                            <div className="w-24 h-1.5 rounded-full bg-text/10 overflow-hidden">
-                              <div
-                                className="h-full rounded-full bg-primary"
-                                style={{ width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%` }}
-                              />
                             </div>
-                            <span className="text-text/50 text-xs">{p.count}</span>
-                          </div>
                         </div>
-                      ))}
                     </div>
-                  </div>
+                    <p className='text-sm text-text/60'>
-                )}
+                        Performance benchmarks and statistics
-                {stats.upscalerBreakdown.length > 0 && (
+                    </p>
-                  <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                    <h3 className="text-sm font-medium text-text/80 mb-3">Upscaler Performance</h3>
-                    <div className="space-y-2">
-                      {stats.upscalerBreakdown.map((f) => (
-                        <div key={f.upscalerType} className="flex items-center justify-between text-sm">
-                          <span className="text-text/70 capitalize">
-                            {f.upscalerType === "none" ? "Native" : f.upscalerType.toUpperCase()}
-                          </span>
-                          <div className="flex items-center gap-2">
-                            <span className="text-text/80 font-medium tabular-nums">{f.avgFps} FPS</span>
-                            <span className="text-text/40 text-xs">({f.count})</span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {stats.topGames.length > 0 && (
-              <div className="rounded-xl border border-border bg-text/[0.03] p-4">
-                <h3 className="text-sm font-medium text-text/80 mb-3">Top Games by Average FPS</h3>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
-                  {stats.topGames.slice(0, 8).map((game, i) => (
-                    <Link
-                      key={game.gameId}
-                      href={`/game/${game.gameId}`}
-                      className="flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group"
-                    >
-                      <div className="text-lg font-bold tabular-nums w-6" style={{ color: deviceColor }}>
-                        {i + 1}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-sm font-medium truncate group-hover:text-primary transition-colors">
-                          {game.gameTitle}
-                        </p>
-                        <div className="flex items-center gap-2 text-xs text-text/50">
-                          <span className="text-green-400 font-medium">{game.avgFps} FPS</span>
-                          <span>{game.benchmarkCount} runs</span>
-                        </div>
-                      </div>
-                      <ArrowRightIcon className="h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0" />
-                    </Link>
-                  ))}
                 </div>
-              </div>
+            </motion.div>
+
+            {/* Overview Stats */}
+            {stats && !loading && (
+                <motion.div
+                    initial={{ opacity: 0, y: 12 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, delay: 0.05 }}
+                    className='px-4 md:px-[10svw]'
+                >
+                    <div className='max-w-7xl mx-auto flex flex-wrap gap-4'>
+                        <StatCard
+                            icon={DatabaseIcon}
+                            label='Total Benchmarks'
+                            value={String(stats.totalBenchmarks)}
+                        />
+                        <StatCard
+                            icon={TrendingUpIcon}
+                            label='Average FPS'
+                            value={
+                                stats.avgFps !== null
+                                    ? String(stats.avgFps)
+                                    : "—"
+                            }
+                        />
+                        <StatCard
+                            icon={MonitorIcon}
+                            label='Games Tested'
+                            value={String(stats.gameCount)}
+                        />
+                        <StatCard
+                            icon={CheckCircleIcon}
+                            label='Verified'
+                            value={String(stats.verifiedCount)}
+                        />
+                    </div>
+                </motion.div>
             )}
-          </div>
-        </motion.div>
-      )}
 
-      {/* Empty state */}
+            {/* Loading */}
-      {stats && !loading && !error && stats.totalBenchmarks === 0 && (
+            {loading && (
-        <div className="max-w-7xl mx-auto px-4 md:px-[10svw]">
+                <div className='flex items-center justify-center py-16'>
-          <div className="text-center py-16 text-text/40">
+                    <Loader2 className='h-8 w-8 animate-spin text-primary' />
-            <Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
+                </div>
-            <p>No benchmark data yet for this device</p>
+            )}
-            <p className="text-sm mt-1">Data will appear as benchmarks are submitted</p>
+
-          </div>
+            {/* Error State */}
+            {error && !loading && (
+                <div className='px-4 md:px-[10svw]'>
+                    <div className='max-w-7xl mx-auto text-center py-16 text-text/40'>
+                        <Gamepad2Icon className='h-10 w-10 mx-auto mb-3' />
+                        <p className='text-text/60 mb-4'>{error}</p>
+                        <button
+                            onClick={fetchStats}
+                            className='inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer'
+                        >
+                            <RefreshCwIcon className='h-4 w-4' />
+                            Retry
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Charts */}
+            {stats && !loading && !error && (
+                <motion.div
+                    initial={{ opacity: 0, y: 12 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, delay: 0.1 }}
+                    className='px-4 md:px-[10svw]'
+                >
+                    <div className='max-w-7xl mx-auto flex flex-col gap-6'>
+                        {stats.historical.length > 0 && (
+                            <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                <h3 className='text-sm font-medium text-text/80 mb-2'>
+                                    Historical Performance
+                                </h3>
+                                <EChartWrapper
+                                    option={historicalOption}
+                                    height={280}
+                                />
+                            </div>
+                        )}
+
+                        <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
+                            {stats.boxplot.length > 0 && (
+                                <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                    <h3 className='text-sm font-medium text-text/80 mb-2'>
+                                        FPS Distribution by Game
+                                    </h3>
+                                    <EChartWrapper
+                                        option={boxplotOption}
+                                        height={300}
+                                    />
+                                </div>
+                            )}
+                            {stats.genreBreakdown.length > 0 && (
+                                <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                    <h3 className='text-sm font-medium text-text/80 mb-2'>
+                                        Genre Breakdown
+                                    </h3>
+                                    <EChartWrapper
+                                        option={genreOption}
+                                        height={300}
+                                    />
+                                </div>
+                            )}
+                        </div>
+
+                        {(stats.protonBreakdown.length > 0 ||
+                            stats.upscalerBreakdown.length > 0) && (
+                            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
+                                {stats.protonBreakdown.length > 0 && (
+                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                        <h3 className='text-sm font-medium text-text/80 mb-3'>
+                                            Proton Version Distribution
+                                        </h3>
+                                        <div className='space-y-2'>
+                                            {stats.protonBreakdown.map((p) => (
+                                                <div
+                                                    key={p.version}
+                                                    className='flex items-center justify-between text-sm'
+                                                >
+                                                    <span className='text-text/70'>
+                                                        {p.version}
+                                                    </span>
+                                                    <div className='flex items-center gap-2'>
+                                                        <div className='w-24 h-1.5 rounded-full bg-text/10 overflow-hidden'>
+                                                            <div
+                                                                className='h-full rounded-full bg-primary'
+                                                                style={{
+                                                                    width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%`,
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <span className='text-text/50 text-xs'>
+                                                            {p.count}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                                {stats.upscalerBreakdown.length > 0 && (
+                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                        <h3 className='text-sm font-medium text-text/80 mb-3'>
+                                            Upscaler Performance
+                                        </h3>
+                                        <div className='space-y-2'>
+                                            {stats.upscalerBreakdown.map(
+                                                (f) => (
+                                                    <div
+                                                        key={f.upscalerType}
+                                                        className='flex items-center justify-between text-sm'
+                                                    >
+                                                        <span className='text-text/70 capitalize'>
+                                                            {f.upscalerType ===
+                                                            "none"
+                                                                ? "Native"
+                                                                : f.upscalerType.toUpperCase()}
+                                                        </span>
+                                                        <div className='flex items-center gap-2'>
+                                                            <span className='text-text/80 font-medium tabular-nums'>
+                                                                {f.avgFps} FPS
+                                                            </span>
+                                                            <span className='text-text/40 text-xs'>
+                                                                ({f.count})
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                ),
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {stats.topGames.length > 0 && (
+                            <div className='rounded-xl border border-border bg-text/3 p-4'>
+                                <h3 className='text-sm font-medium text-text/80 mb-3'>
+                                    Top Games by Average FPS
+                                </h3>
+                                <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'>
+                                    {stats.topGames
+                                        .slice(0, 8)
+                                        .map((game, i) => (
+                                            <Link
+                                                key={game.gameId}
+                                                href={`/game/${game.gameId}`}
+                                                className='flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group'
+                                            >
+                                                <div
+                                                    className='text-lg font-bold tabular-nums w-6'
+                                                    style={{
+                                                        color: deviceColor,
+                                                    }}
+                                                >
+                                                    {i + 1}
+                                                </div>
+                                                <div className='min-w-0 flex-1'>
+                                                    <p className='text-sm font-medium truncate group-hover:text-primary transition-colors'>
+                                                        {game.gameTitle}
+                                                    </p>
+                                                    <div className='flex items-center gap-2 text-xs text-text/50'>
+                                                        <span className='text-green-400 font-medium'>
+                                                            {game.avgFps} FPS
+                                                        </span>
+                                                        <span>
+                                                            {
+                                                                game.benchmarkCount
+                                                            }{" "}
+                                                            runs
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <ArrowRightIcon className='h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0' />
+                                            </Link>
+                                        ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </motion.div>
+            )}
+
+            {/* Empty state */}
+            {stats && !loading && !error && stats.totalBenchmarks === 0 && (
+                <div className='max-w-7xl mx-auto px-4 md:px-[10svw]'>
+                    <div className='text-center py-16 text-text/40'>
+                        <Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
+                        <p>No benchmark data yet for this device</p>
+                        <p className='text-sm mt-1'>
+                            Data will appear as benchmarks are submitted
+                        </p>
+                    </div>
+                </div>
+            )}
+        </section>
+    )
+}
+
+function StatCard({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ElementType
+    label: string
+    value: string
+}) {
+    return (
+        <div className='flex items-center gap-3 p-4 rounded-xl border border-border bg-text/3 min-w-40'>
+            <div className='flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary'>
+                <Icon className='h-4 w-4' />
+            </div>
+            <div className='flex flex-col'>
+                <span className='text-xs text-text/50'>{label}</span>
+                <span className='text-lg font-semibold tabular-nums'>
+                    {value}
+                </span>
+            </div>
         </div>
-      )}
+    )
-    </section>
-  )
-}
-
-function StatCard({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-3 p-4 rounded-xl border border-border bg-text/[0.03] min-w-[160px]">
-      <div className="flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary">
-        <Icon className="h-4 w-4" />
-      </div>
-      <div className="flex flex-col">
-        <span className="text-xs text-text/50">{label}</span>
-        <span className="text-lg font-semibold tabular-nums">{value}</span>
-      </div>
-    </div>
-  )
 }

app/devices/page-client.tsx

@@ -5,241 +5,257 @@ import Link from "next/link"
 import Image from "next/image"
 import { motion } from "motion/react"
 import {
-  Gamepad2Icon,
+    Gamepad2Icon,
-  TrendingUpIcon,
+    TrendingUpIcon,
-  DatabaseIcon,
+    DatabaseIcon,
-  ArrowRightIcon,
+    ArrowRightIcon,
-  MonitorIcon,
+    MonitorIcon,
-  CheckCircleIcon,
+    CheckCircleIcon,
 } from "lucide-react"
 import { getDeviceColor } from "@/components/charts/EChartWrapper"
 
 export interface DeviceStats {
-  slug: string
+    slug: string
-  name: string
+    name: string
-  deviceType: string
+    deviceType: string
-  image: string | null
+    image: string | null
-  sortOrder: number
+    sortOrder: number
-  colorIndex: number
+    colorIndex: number
-  totalBenchmarks: number
+    totalBenchmarks: number
-  avgFps: number | null
+    avgFps: number | null
-  gameCount: number
+    gameCount: number
-  verifiedCount: number
+    verifiedCount: number
-  bestGame: {
+    bestGame: {
-    id: string
+        id: string
-    title: string
+        title: string
-    headerImage: string | null
+        headerImage: string | null
-    fpsAvg: number
+        fpsAvg: number
-  } | null
+    } | null
 }
 
 const deviceTypeLabel: Record<string, string> = {
-  handheld: "Handheld",
+    handheld: "Handheld",
-  console: "Console",
+    console: "Console",
 }
 
 const deviceTypeColor: Record<string, string> = {
-  handheld: "text-primary bg-primary/10 border-primary/20",
+    handheld: "text-primary bg-primary/10 border-primary/20",
-  console: "text-secondary bg-secondary/10 border-secondary/20",
+    console: "text-secondary bg-secondary/10 border-secondary/20",
 }
 
 type FilterType = "all" | "handheld" | "console"
 
 const filterOptions: { id: FilterType; label: string }[] = [
-  { id: "all", label: "All" },
+    { id: "all", label: "All" },
-  { id: "handheld", label: "Handheld" },
+    { id: "handheld", label: "Handheld" },
-  { id: "console", label: "Console" },
+    { id: "console", label: "Console" },
 ]
 
 export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
-  const [activeFilter, setActiveFilter] = useState<FilterType>("all")
+    const [activeFilter, setActiveFilter] = useState<FilterType>("all")
 
-  const filteredDevices =
+    const filteredDevices =
-    activeFilter === "all"
+        activeFilter === "all"
-      ? devices
+            ? devices
-      : devices.filter((d) => d.deviceType === activeFilter)
+            : devices.filter((d) => d.deviceType === activeFilter)
+
+    if (devices.length === 0) {
+        return (
+            <div className='max-w-7xl mx-auto px-4 md:px-[10svw] py-8'>
+                <div className='text-center py-16 text-text/40'>
+                    <Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
+                    <p>No devices found</p>
+                    <p className='text-sm mt-1'>
+                        Benchmark data will appear as devices are added
+                    </p>
+                </div>
+            </div>
+        )
+    }
 
-  if (devices.length === 0) {
     return (
-      <div className="max-w-7xl mx-auto px-4 md:px-[10svw] py-8">
+        <section className='w-full flex flex-col gap-8 py-16'>
-        <div className="text-center py-16 text-text/40">
+            {/* Hero Header */}
-          <Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
-          <p>No devices found</p>
-          <p className="text-sm mt-1">
-            Benchmark data will appear as devices are added
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <section className="w-full flex flex-col gap-8 pb-16">
-      {/* Hero Header */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4 }}
-        className="px-4 md:px-[10svw]"
-      >
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-2xl sm:text-3xl font-bold">Devices</h1>
-          <p className="text-sm text-text/60 mt-1">
-            Browse benchmark data for handheld and console devices
-          </p>
-        </div>
-      </motion.div>
-
-      {/* Filter Tabs */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4, delay: 0.05 }}
-        className="px-4 md:px-[10svw]"
-      >
-        <div className="max-w-7xl mx-auto">
-          <div className="flex items-center gap-2">
-            {filterOptions.map((opt) => (
-              <button
-                key={opt.id}
-                onClick={() => setActiveFilter(opt.id)}
-                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors cursor-pointer ${
-                  activeFilter === opt.id
-                    ? "bg-primary/10 text-primary border border-primary/30"
-                    : "text-text/50 hover:text-text/70 hover:bg-text/5 border border-transparent"
-                }`}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Device Grid */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4, delay: 0.1 }}
-        className="px-4 md:px-[10svw]"
-      >
-        <div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredDevices.map((device, i) => (
             <motion.div
-              key={device.slug}
+                initial={{ opacity: 0, y: 12 }}
-              initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
-              animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4 }}
-              transition={{
+                className='px-4 md:px-[10svw]'
-                duration: 0.3,
-                delay: Math.min(0.05 * i, 0.5),
-              }}
             >
-              <Link
+                <div className='max-w-7xl mx-auto'>
-                href={`/devices/${device.slug}`}
+                    <h1 className='text-2xl sm:text-3xl font-bold'>Devices</h1>
-                className="block rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group overflow-hidden"
+                    <p className='text-sm text-text/60 mt-1'>
-              >
+                        Browse benchmark data for handheld and console devices
-                {/* Image / Icon Header */}
+                    </p>
-                <div
-                  className="relative h-28 flex items-center justify-center"
-                  style={{
-                    background: `${getDeviceColor(device.colorIndex)}08`,
-                  }}
-                >
-                  {device.image ? (
-                    <Image
-                      src={device.image}
-                      alt={device.name}
-                      fill
-                      className="object-contain p-4"
-                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                    />
-                  ) : (
-                    <Gamepad2Icon
-                      className="h-12 w-12"
-                      style={{
-                        color: getDeviceColor(device.colorIndex),
-                        opacity: 0.6,
-                      }}
-                    />
-                  )}
                 </div>
-
-                {/* Card Body */}
-                <div className="p-5">
-                  {/* Name & Type */}
-                  <div className="flex items-start justify-between gap-2 mb-3">
-                    <div>
-                      <h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
-                        {device.name}
-                      </h2>
-                      <span
-                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border capitalize mt-1 ${
-                          deviceTypeColor[device.deviceType] ||
-                          "text-text/50 bg-text/5 border-border"
-                        }`}
-                      >
-                        <Gamepad2Icon className="h-2.5 w-2.5" />
-                        {deviceTypeLabel[device.deviceType] || device.deviceType}
-                      </span>
-                    </div>
-                    <ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" />
-                  </div>
-
-                  {/* Stats Row */}
-                  <div className="grid grid-cols-4 gap-2 mt-4">
-                    <div className="flex flex-col items-center text-center">
-                      <DatabaseIcon className="h-3.5 w-3.5 text-primary mb-1" />
-                      <span className="text-base font-bold tabular-nums">
-                        {device.totalBenchmarks}
-                      </span>
-                      <span className="text-[9px] text-text/50">Benchmarks</span>
-                    </div>
-                    <div className="flex flex-col items-center text-center">
-                      <TrendingUpIcon className="h-3.5 w-3.5 text-green-400 mb-1" />
-                      <span className="text-base font-bold tabular-nums">
-                        {device.avgFps !== null ? device.avgFps : "—"}
-                      </span>
-                      <span className="text-[9px] text-text/50">Avg FPS</span>
-                    </div>
-                    <div className="flex flex-col items-center text-center">
-                      <MonitorIcon className="h-3.5 w-3.5 text-accent mb-1" />
-                      <span className="text-base font-bold tabular-nums">
-                        {device.gameCount}
-                      </span>
-                      <span className="text-[9px] text-text/50">Games</span>
-                    </div>
-                    <div className="flex flex-col items-center text-center">
-                      <CheckCircleIcon className="h-3.5 w-3.5 text-blue-400 mb-1" />
-                      <span className="text-base font-bold tabular-nums">
-                        {device.verifiedCount}
-                      </span>
-                      <span className="text-[9px] text-text/50">Verified</span>
-                    </div>
-                  </div>
-
-                  {/* Best game */}
-                  {device.bestGame && (
-                    <div className="mt-3 pt-3 border-t border-border text-xs text-text/50">
-                      Top:{" "}
-                      <span className="text-text/80 font-medium">
-                        {device.bestGame.title}
-                      </span>{" "}
-                      · {device.bestGame.fpsAvg} FPS
-                    </div>
-                  )}
-                </div>
-              </Link>
             </motion.div>
-          ))}
-        </div>
 
-        {filteredDevices.length === 0 && devices.length > 0 && (
+            {/* Filter Tabs */}
-          <div className="text-center py-12 text-text/40">
+            <motion.div
-            <Gamepad2Icon className="h-8 w-8 mx-auto mb-2" />
+                initial={{ opacity: 0, y: 12 }}
-            <p>No {activeFilter} devices found</p>
+                animate={{ opacity: 1, y: 0 }}
-          </div>
+                transition={{ duration: 0.4, delay: 0.05 }}
-        )}
+                className='px-4 md:px-[10svw]'
-      </motion.div>
+            >
-    </section>
+                <div className='max-w-7xl mx-auto'>
-  )
+                    <div className='flex items-center gap-2'>
+                        {filterOptions.map((opt) => (
+                            <button
+                                key={opt.id}
+                                onClick={() => setActiveFilter(opt.id)}
+                                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors cursor-pointer ${
+                                    activeFilter === opt.id
+                                        ? "bg-primary/10 text-primary border border-primary/30"
+                                        : "text-text/50 hover:text-text/70 hover:bg-text/5 border border-transparent"
+                                }`}
+                            >
+                                {opt.label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </motion.div>
+
+            {/* Device Grid */}
+            <motion.div
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, delay: 0.1 }}
+                className='px-4 md:px-[10svw]'
+            >
+                <div className='max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
+                    {filteredDevices.map((device, i) => (
+                        <motion.div
+                            key={device.slug}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{
+                                duration: 0.3,
+                                delay: Math.min(0.05 * i, 0.5),
+                            }}
+                        >
+                            <Link
+                                href={`/devices/${device.slug}`}
+                                className='block rounded-xl border border-border bg-text/3 hover:border-primary/30 transition-colors group overflow-hidden'
+                            >
+                                {/* Image / Icon Header */}
+                                <div
+                                    className='relative h-28 flex items-center justify-center'
+                                    style={{
+                                        background: `${getDeviceColor(device.colorIndex)}08`,
+                                    }}
+                                >
+                                    {device.image ? (
+                                        <Image
+                                            src={device.image}
+                                            alt={device.name}
+                                            fill
+                                            className='object-contain p-4'
+                                            sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
+                                        />
+                                    ) : (
+                                        <Gamepad2Icon
+                                            className='h-12 w-12'
+                                            style={{
+                                                color: getDeviceColor(
+                                                    device.colorIndex,
+                                                ),
+                                                opacity: 0.6,
+                                            }}
+                                        />
+                                    )}
+                                </div>
+
+                                {/* Card Body */}
+                                <div className='p-5'>
+                                    {/* Name & Type */}
+                                    <div className='flex items-start justify-between gap-2 mb-3'>
+                                        <div>
+                                            <h2 className='text-lg font-semibold group-hover:text-primary transition-colors'>
+                                                {device.name}
+                                            </h2>
+                                            <span
+                                                className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border capitalize mt-1 ${
+                                                    deviceTypeColor[
+                                                        device.deviceType
+                                                    ] ||
+                                                    "text-text/50 bg-text/5 border-border"
+                                                }`}
+                                            >
+                                                <Gamepad2Icon className='h-2.5 w-2.5' />
+                                                {deviceTypeLabel[
+                                                    device.deviceType
+                                                ] || device.deviceType}
+                                            </span>
+                                        </div>
+                                        <ArrowRightIcon className='h-5 w-5 text-text/20 group-hover:text-primary transition-colors' />
+                                    </div>
+
+                                    {/* Stats Row */}
+                                    <div className='grid grid-cols-4 gap-2 mt-4'>
+                                        <div className='flex flex-col items-center text-center'>
+                                            <DatabaseIcon className='h-3.5 w-3.5 text-primary mb-1' />
+                                            <span className='text-base font-bold tabular-nums'>
+                                                {device.totalBenchmarks}
+                                            </span>
+                                            <span className='text-[9px] text-text/50'>
+                                                Benchmarks
+                                            </span>
+                                        </div>
+                                        <div className='flex flex-col items-center text-center'>
+                                            <TrendingUpIcon className='h-3.5 w-3.5 text-green-400 mb-1' />
+                                            <span className='text-base font-bold tabular-nums'>
+                                                {device.avgFps !== null
+                                                    ? device.avgFps
+                                                    : "—"}
+                                            </span>
+                                            <span className='text-[9px] text-text/50'>
+                                                Avg FPS
+                                            </span>
+                                        </div>
+                                        <div className='flex flex-col items-center text-center'>
+                                            <MonitorIcon className='h-3.5 w-3.5 text-accent mb-1' />
+                                            <span className='text-base font-bold tabular-nums'>
+                                                {device.gameCount}
+                                            </span>
+                                            <span className='text-[9px] text-text/50'>
+                                                Games
+                                            </span>
+                                        </div>
+                                        <div className='flex flex-col items-center text-center'>
+                                            <CheckCircleIcon className='h-3.5 w-3.5 text-blue-400 mb-1' />
+                                            <span className='text-base font-bold tabular-nums'>
+                                                {device.verifiedCount}
+                                            </span>
+                                            <span className='text-[9px] text-text/50'>
+                                                Verified
+                                            </span>
+                                        </div>
+                                    </div>
+
+                                    {/* Best game */}
+                                    {device.bestGame && (
+                                        <div className='mt-3 pt-3 border-t border-border text-xs text-text/50'>
+                                            Top:{" "}
+                                            <span className='text-text/80 font-medium'>
+                                                {device.bestGame.title}
+                                            </span>{" "}
+                                            · {device.bestGame.fpsAvg} FPS
+                                        </div>
+                                    )}
+                                </div>
+                            </Link>
+                        </motion.div>
+                    ))}
+                </div>
+
+                {filteredDevices.length === 0 && devices.length > 0 && (
+                    <div className='text-center py-12 text-text/40'>
+                        <Gamepad2Icon className='h-8 w-8 mx-auto mb-2' />
+                        <p>No {activeFilter} devices found</p>
+                    </div>
+                )}
+            </motion.div>
+        </section>
+    )
 }

lib/routes.ts

@@ -7,11 +7,10 @@ export const routes = [
         title: "Search",
         href: "/search",
     },
-    // TODO: Add back when games page is implemented
+    {
-    // {
+        title: "Games",
-    //     title: "Games",
+        href: "/games",
-    //     href: "/games",
+    },
-    // },
     // TODO: Add back when compare page is implemented
     // {
     //     title: "Compare",

proxy.ts

@@ -9,11 +9,14 @@ const authRoutes = [
     "/reset-password",
 ]
 
+const adminRoutes = ["/admin"]
+
 export async function proxy(req: NextRequest) {
     const path = req.nextUrl.pathname
     const isAuthRoute = authRoutes.some((route) => path.startsWith(route))
+    const isAdminRoute = adminRoutes.some((route) => path.startsWith(route))
 
-    if (!isAuthRoute) {
+    if (!isAuthRoute && !isAdminRoute) {
         return NextResponse.next()
     }
 
@@ -33,6 +36,15 @@ export async function proxy(req: NextRequest) {
         headers: req.headers,
     })
 
+    // Admin routes: require an admin session
+    if (isAdminRoute) {
+        if (!session || session.user.role !== "admin") {
+            return NextResponse.redirect(new URL("/", req.url))
+        }
+        return NextResponse.next()
+    }
+
+    // Auth routes: redirect authenticated users away
     if (session) {
         return NextResponse.redirect(new URL("/", req.url))
     }