feat: implement site statistics fetching and display in SiteList component

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>
+  )
+}