feat: add web vitals tracking script and performance dashboard UI

components/dashboard/PerformanceStats.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { PerformanceStats as Stats } from '@/lib/api/stats'
+
+interface Props {
+  stats: Stats
+}
+
+function MetricCard({ label, value, unit, score }: { label: string, value: number, unit: string, score: 'good' | 'needs-improvement' | 'poor' }) {
+  const colors = {
+    good: 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400 border-green-200 dark:border-green-800',
+    'needs-improvement': 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+    poor: 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border-red-200 dark:border-red-800',
+  }
+
+  return (
+    <div className={`p-4 rounded-lg border ${colors[score]}`}>
+      <div className="text-sm font-medium opacity-80 mb-1">{label}</div>
+      <div className="text-2xl font-bold">
+        {value}
+        <span className="text-sm font-normal ml-1 opacity-70">{unit}</span>
+      </div>
+    </div>
+  )
+}
+
+export default function PerformanceStats({ stats }: Props) {
+  // * Scoring Logic (based on Google Web Vitals)
+  const getScore = (metric: 'lcp' | 'cls' | 'inp', value: number) => {
+    if (metric === 'lcp') return value <= 2500 ? 'good' : value <= 4000 ? 'needs-improvement' : 'poor'
+    if (metric === 'cls') return value <= 0.1 ? 'good' : value <= 0.25 ? 'needs-improvement' : 'poor'
+    if (metric === 'inp') return value <= 200 ? 'good' : value <= 500 ? 'needs-improvement' : 'poor'
+    return 'good'
+  }
+
+  // * If no data, don't show or show placeholder? 
+  // * Showing placeholder with 0s might be confusing if they actually have 0ms latency (impossible)
+  // * But we handle empty stats in parent or pass 0 here.
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">
+        Core Web Vitals
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <MetricCard 
+          label="Largest Contentful Paint (LCP)" 
+          value={Math.round(stats.lcp)} 
+          unit="ms" 
+          score={getScore('lcp', stats.lcp)} 
+        />
+        <MetricCard 
+          label="Cumulative Layout Shift (CLS)" 
+          value={Number(stats.cls.toFixed(3))} 
+          unit="" 
+          score={getScore('cls', stats.cls)} 
+        />
+        <MetricCard 
+          label="Interaction to Next Paint (INP)" 
+          value={Math.round(stats.inp)} 
+          unit="ms" 
+          score={getScore('inp', stats.inp)} 
+        />
+      </div>
+      <div className="mt-4 text-xs text-neutral-500">
+        * Averages calculated from real user sessions. Lower is better.
+      </div>
+    </div>
+  )
+}