Add host setup functions and client components

src/pages/admin/(sections)/kpi-hero-section.tsx

@@ -1,23 +1,18 @@
 import StatCard from "../(partials)/stat-card";
-import Sparkline from "../(partials)/sparkline";
-import { HERO_KPI } from "../(data)/dashboard-mock-data";
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
 
-export default function KpiHeroSection() {
+type Props = {
+    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+};
+
+export default function KpiHeroSection({ clients }: Props) {
     return (
         <StatCard
             tier="default"
-            label={HERO_KPI.label}
-            value={HERO_KPI.value}
-            delta={HERO_KPI.delta}
-            deltaTone={HERO_KPI.deltaTone}
-            subtext={HERO_KPI.subtext}
+            label="Total clients"
+            value={String(clients?.length || 0)}
+            subtext="WireGuard peers on this network"
             valueClassName="text-4xl"
-            trailing={
-                <Sparkline
-                    data={HERO_KPI.sparkline}
-                    className="text-secondary dark:text-secondary"
-                />
-            }
         />
     );
-}
+}