From ba1e5c1885176642779d5a6447cb23fce2e03bc0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 18 Jan 2026 17:52:53 +0100
Subject: [PATCH] feat: add web vitals tracking script and performance
 dashboard UI

---
 app/sites/[id]/page.tsx                   | 10 ++++
 components/dashboard/PerformanceStats.tsx | 70 +++++++++++++++++++++++
 lib/api/stats.ts                          |  7 +++
 3 files changed, 87 insertions(+)
 create mode 100644 components/dashboard/PerformanceStats.tsx

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index d0e4206..0e0e308 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -14,6 +14,7 @@ import TopReferrers from '@/components/dashboard/TopReferrers'
 import Locations from '@/components/dashboard/Locations'
 import TechSpecs from '@/components/dashboard/TechSpecs'
 import Chart from '@/components/dashboard/Chart'
+import PerformanceStats from '@/components/dashboard/PerformanceStats'
 
 export default function SiteDashboardPage() {
   const params = useParams()
@@ -38,6 +39,7 @@ export default function SiteDashboardPage() {
   const [os, setOS] = useState<any[]>([])
   const [devices, setDevices] = useState<any[]>([])
   const [screenResolutions, setScreenResolutions] = useState<any[]>([])
+  const [performance, setPerformance] = useState<{ lcp: number, cls: number, inp: number }>({ lcp: 0, cls: 0, inp: 0 })
   const [dateRange, setDateRange] = useState(getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
@@ -109,6 +111,7 @@ export default function SiteDashboardPage() {
       setOS(Array.isArray(data.os) ? data.os : [])
       setDevices(Array.isArray(data.devices) ? data.devices : [])
       setScreenResolutions(Array.isArray(data.screen_resolutions) ? data.screen_resolutions : [])
+      setPerformance(data.performance || { lcp: 0, cls: 0, inp: 0 })
     } catch (error: any) {
       toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
     } finally {
@@ -213,6 +216,13 @@ export default function SiteDashboardPage() {
         />
       </div>
 
+      {/* Performance Stats */}
+      {performance.lcp > 0 && (
+        <div className="mb-8">
+          <PerformanceStats stats={performance} />
+        </div>
+      )}
+
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
         <ContentStats 
           topPages={topPages} 
diff --git a/components/dashboard/PerformanceStats.tsx b/components/dashboard/PerformanceStats.tsx
new file mode 100644
index 0000000..aacc945
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/lib/api/stats.ts b/lib/api/stats.ts
index 555455c..a4ea5d3 100644
--- a/lib/api/stats.ts
+++ b/lib/api/stats.ts
@@ -19,6 +19,12 @@ export interface ScreenResolutionStat {
   pageviews: number
 }
 
+export interface PerformanceStats {
+  lcp: number
+  cls: number
+  inp: number
+}
+
 export interface TopReferrer {
   referrer: string
   pageviews: number
@@ -190,6 +196,7 @@ export interface DashboardData {
   os: OSStat[]
   devices: DeviceStat[]
   screen_resolutions: ScreenResolutionStat[]
+  performance?: PerformanceStats
 }
 
 export async function getDashboard(siteId: string, startDate?: string, endDate?: string, limit = 10, interval?: string): Promise<DashboardData> {