From 2aedc656d76e0a63c51623fd3e0ef5944a20290e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Feb 2026 00:20:54 +0100
Subject: [PATCH] feat: implement site statistics fetching and display in
 SiteList component

---
 app/page.tsx                       |  44 ++++++-
 components/dashboard/Chart.tsx     |  46 +------
 components/dashboard/Sparkline.tsx |  50 +++++++
 components/sites/SiteList.tsx      | 202 +++++++++++++++++------------
 4 files changed, 215 insertions(+), 127 deletions(-)
 create mode 100644 components/dashboard/Sparkline.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 02d85b4..3eb2f7f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,6 +6,8 @@ import { motion } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
 import { listSites, deleteSite, type Site } from '@/lib/api/sites'
+import { getStats, getDailyStats } from '@/lib/api/stats'
+import type { Stats, DailyStat } from '@/lib/api/stats'
 import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
@@ -97,10 +99,13 @@ function ComparisonSection() {
 }
 
 
+type SiteStatsMap = Record<string, { stats: Stats; dailyStats: DailyStat[] }>
+
 export default function HomePage() {
   const { user, loading: authLoading } = useAuth()
   const [sites, setSites] = useState<Site[]>([])
   const [sitesLoading, setSitesLoading] = useState(true)
+  const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
   const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
   const [subscriptionLoading, setSubscriptionLoading] = useState(false)
   const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
@@ -112,6 +117,37 @@ export default function HomePage() {
     }
   }, [user])
 
+  useEffect(() => {
+    if (sites.length === 0) {
+      setSiteStats({})
+      return
+    }
+    let cancelled = false
+    const today = new Date().toISOString().split('T')[0]
+    const start7d = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+    const load = async () => {
+      const results = await Promise.allSettled(
+        sites.map(async (site) => {
+          const [statsRes, dailyRes] = await Promise.all([
+            getStats(site.id, today, today),
+            getDailyStats(site.id, start7d, today, 'day'),
+          ])
+          return { siteId: site.id, stats: statsRes, dailyStats: dailyRes ?? [] }
+        })
+      )
+      if (cancelled) return
+      const map: SiteStatsMap = {}
+      for (const r of results) {
+        if (r.status === 'fulfilled') {
+          map[r.value.siteId] = { stats: r.value.stats, dailyStats: r.value.dailyStats }
+        }
+      }
+      setSiteStats(map)
+    }
+    load()
+    return () => { cancelled = true }
+  }, [sites])
+
   useEffect(() => {
     if (typeof window === 'undefined') return
     if (localStorage.getItem('pulse_welcome_completed') === 'true') setShowFinishSetupBanner(false)
@@ -370,7 +406,11 @@ export default function HomePage() {
         </div>
         <div className="rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
           <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">--</p>
+          <p className="text-2xl font-bold text-neutral-900 dark:text-white">
+            {sites.length === 0 || Object.keys(siteStats).length < sites.length
+              ? '--'
+              : Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
+          </p>
         </div>
         <div className="rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
           <p className="text-sm text-brand-orange">Plan & usage</p>
@@ -456,7 +496,7 @@ export default function HomePage() {
       )}
 
       {(sitesLoading || sites.length > 0) && (
-        <SiteList sites={sites} loading={sitesLoading} onDelete={handleDelete} />
+        <SiteList sites={sites} siteStats={siteStats} loading={sitesLoading} onDelete={handleDelete} />
       )}
     </div>
   )
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 355090f..792f2de 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -14,6 +14,7 @@ import {
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
 import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
+import Sparkline from './Sparkline'
 import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 
@@ -208,51 +209,6 @@ function getTrendContext(dateRange: { start: string; end: string }): string {
   return `vs previous ${days} days`
 }
 
-// * Mini sparkline SVG for KPI cards
-function Sparkline({
-  data,
-  dataKey,
-  color,
-  width = 56,
-  height = 20,
-}: {
-  data: Array<Record<string, unknown>>
-  dataKey: string
-  color: string
-  width?: number
-  height?: number
-}) {
-  if (!data.length) return null
-  const values = data.map((d) => Number(d[dataKey] ?? 0))
-  const max = Math.max(...values, 1)
-  const min = Math.min(...values, 0)
-  const range = max - min || 1
-  const padding = 2
-  const w = width - padding * 2
-  const h = height - padding * 2
-
-  const points = values.map((v, i) => {
-    const x = padding + (i / Math.max(values.length - 1, 1)) * w
-    const y = padding + h - ((v - min) / range) * h
-    return `${x},${y}`
-  })
-
-  const pathD = points.length > 1 ? `M ${points.join(' L ')}` : `M ${points[0]} L ${points[0]}`
-
-  return (
-    <svg width={width} height={height} className="flex-shrink-0" aria-hidden>
-      <path
-        d={pathD}
-        fill="none"
-        stroke={color}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
 export default function Chart({ 
   data, 
   prevData, 
diff --git a/components/dashboard/Sparkline.tsx b/components/dashboard/Sparkline.tsx
new file mode 100644
index 0000000..f87a203
--- /dev/null
+++ b/components/dashboard/Sparkline.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+/**
+ * Mini sparkline SVG for KPI cards.
+ * Renders a line chart from an array of data points.
+ */
+export default function Sparkline({
+  data,
+  dataKey,
+  color,
+  width = 56,
+  height = 20,
+}: {
+  /** Array of objects with numeric values (e.g. DailyStat with visitors, pageviews) */
+  data: ReadonlyArray<object>
+  dataKey: string
+  color: string
+  width?: number
+  height?: number
+}) {
+  if (!data.length) return null
+  const values = data.map((d) => Number((d as Record<string, unknown>)[dataKey] ?? 0))
+  const max = Math.max(...values, 1)
+  const min = Math.min(...values, 0)
+  const range = max - min || 1
+  const padding = 2
+  const w = width - padding * 2
+  const h = height - padding * 2
+
+  const points = values.map((v, i) => {
+    const x = padding + (i / Math.max(values.length - 1, 1)) * w
+    const y = padding + h - ((v - min) / range) * h
+    return `${x},${y}`
+  })
+
+  const pathD = points.length > 1 ? `M ${points.join(' L ')}` : `M ${points[0]} L ${points[0]}`
+
+  return (
+    <svg width={width} height={height} className="flex-shrink-0" aria-hidden>
+      <path
+        d={pathD}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index b88004f..13eb50d 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -2,17 +2,124 @@
 
 import Link from 'next/link'
 import { Site } from '@/lib/api/sites'
+import type { Stats, DailyStat } from '@/lib/api/stats'
+import { formatNumber } from '@ciphera-net/ui'
 import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
+import Sparkline from '@/components/dashboard/Sparkline'
+
+export type SiteStatsMap = Record<string, { stats: Stats; dailyStats: DailyStat[] }>
 
 interface SiteListProps {
   sites: Site[]
+  siteStats: SiteStatsMap
   loading: boolean
   onDelete: (id: string) => void
 }
 
-export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
+interface SiteCardProps {
+  site: Site
+  stats: Stats | null
+  dailyStats: DailyStat[]
+  statsLoading: boolean
+  onDelete: (id: string) => void
+  canDelete: boolean
+}
+
+function SiteCard({ site, stats, dailyStats, statsLoading, onDelete, canDelete }: SiteCardProps) {
+  const visitors24h = stats?.visitors ?? 0
+  const pageviews = stats?.pageviews ?? 0
+  const hasChartData = dailyStats.length > 0
+  const sparklineColor = 'var(--color-brand-orange)'
+
+  return (
+    <div className="group relative flex flex-col rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900">
+      {/* Header: Icon + Name + Live Status */}
+      <div className="flex items-start justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <div className="h-12 w-12 overflow-hidden rounded-lg border border-neutral-100 bg-neutral-50 p-1 dark:border-neutral-800 dark:bg-neutral-800">
+            <img
+              src={`https://www.google.com/s2/favicons?domain=${site.domain}&sz=64`}
+              alt={site.name}
+              className="h-full w-full object-contain"
+            />
+          </div>
+          <div>
+            <h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
+            <div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
+              {site.domain}
+              <a
+                href={`https://${site.domain}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <ExternalLinkIcon className="h-3 w-3" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+          Active
+        </div>
+      </div>
+
+      {/* Mini Stats Grid + KPI Chart */}
+      <div className="mb-6 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
+        <div className="grid grid-cols-2 gap-4 mb-3">
+          <div>
+            <p className="text-xs text-neutral-500">Visitors (24h)</p>
+            <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
+              {statsLoading ? '--' : formatNumber(visitors24h)}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-neutral-500">Pageviews</p>
+            <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
+              {statsLoading ? '--' : formatNumber(pageviews)}
+            </p>
+          </div>
+        </div>
+        {hasChartData && (
+          <div className="flex items-center gap-2 pt-2 border-t border-neutral-200 dark:border-neutral-700">
+            <Sparkline data={dailyStats} dataKey="visitors" color={sparklineColor} width={120} height={32} />
+            <span className="text-xs text-neutral-500">7d visitors</span>
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="mt-auto flex gap-2">
+        <Link href={`/sites/${site.id}`} className="flex-1">
+          <Button variant="primary" className="w-full justify-center text-sm">
+            <BarChartIcon className="w-4 h-4" />
+            View Dashboard
+          </Button>
+        </Link>
+        {canDelete && (
+          <button
+            type="button"
+            onClick={() => onDelete(site.id)}
+            className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+            title="Delete Site"
+          >
+            <SettingsIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function SiteList({ sites, siteStats, loading, onDelete }: SiteListProps) {
   const { user } = useAuth()
+  const canDelete = user?.role === 'owner' || user?.role === 'admin'
 
   if (loading) {
     return (
@@ -40,85 +147,20 @@ export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
 
   return (
     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      {sites.map((site) => (
-        <div
-          key={site.id}
-          className="group relative flex flex-col rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900"
-        >
-          {/* Header: Icon + Name + Live Status */}
-          <div className="flex items-start justify-between mb-6">
-            <div className="flex items-center gap-4">
-              {/* Auto-fetch favicon */}
-              <div className="h-12 w-12 overflow-hidden rounded-lg border border-neutral-100 bg-neutral-50 p-1 dark:border-neutral-800 dark:bg-neutral-800">
-                <img 
-                  src={`https://www.google.com/s2/favicons?domain=${site.domain}&sz=64`} 
-                  alt={site.name}
-                  className="h-full w-full object-contain"
-                />
-              </div>
-              <div>
-                <h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
-                <div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
-                  {site.domain}
-                  <a 
-                    href={`https://${site.domain}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <ExternalLinkIcon className="h-3 w-3" />
-                  </a>
-                </div>
-              </div>
-            </div>
-            
-            {/* "Live" Indicator */}
-            <div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-              </span>
-              Active
-            </div>
-          </div>
-
-          {/* Mini Stats Grid */}
-          <div className="mb-6 grid grid-cols-2 gap-4 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
-            <div>
-              <p className="text-xs text-neutral-500">Visitors (24h)</p>
-              <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">--</p>
-            </div>
-            <div>
-              <p className="text-xs text-neutral-500">Pageviews</p>
-              <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">--</p>
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="mt-auto flex gap-2">
-            <Link
-              href={`/sites/${site.id}`}
-              className="flex-1"
-            >
-              <Button variant="primary" className="w-full justify-center text-sm">
-                <BarChartIcon className="w-4 h-4" />
-                View Dashboard
-              </Button>
-            </Link>
-            {(user?.role === 'owner' || user?.role === 'admin') && (
-              <button
-                type="button"
-                onClick={() => onDelete(site.id)}
-                className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
-                title="Delete Site"
-              >
-                <SettingsIcon className="h-4 w-4" />
-              </button>
-            )}
-          </div>
-        </div>
-      ))}
+      {sites.map((site) => {
+        const data = siteStats[site.id]
+        return (
+          <SiteCard
+            key={site.id}
+            site={site}
+            stats={data?.stats ?? null}
+            dailyStats={data?.dailyStats ?? []}
+            statsLoading={!data}
+            onDelete={onDelete}
+            canDelete={canDelete}
+          />
+        )
+      })}
 
       {/* Resources Card */}
       <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-300 bg-neutral-50 p-6 text-center dark:border-neutral-700 dark:bg-neutral-900/50">