feat: implement visual analytics and activity charts

web/src/pages/Dashboard.tsx

@@ -7,10 +7,13 @@ import {
 } from "@/components/ui/card";
 import { Activity, Server, Users, Zap } from "lucide-react";
 import { useDashboardStats } from "@/hooks/use-dashboard-stats";
+import { useActivityStats } from "@/hooks/use-activity-stats";
 import { ControlPanel } from "@/components/ControlPanel";
+import { ActivityChart } from "@/components/ActivityChart";
 
 export function Dashboard() {
     const { stats, loading, error } = useDashboardStats();
+    const { data: activityData, loading: activityLoading } = useActivityStats();
 
     if (loading && !stats) {
         return (
@@ -81,6 +84,20 @@ export function Dashboard() {
                 ))}
             </div>
 
+            {/* Activity Chart Section */}
+            <Card className="glass border-white/5 overflow-hidden">
+                <CardHeader className="pb-2">
+                    <CardTitle className="text-xl font-bold flex items-center gap-2">
+                        <div className="h-5 w-1 bg-emerald-500 rounded-full" />
+                        Live Activity Analytics
+                    </CardTitle>
+                    <CardDescription className="text-white/40 font-medium tracking-tight">Hourly command and transaction volume across the network (last 24h)</CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <ActivityChart data={activityData} loading={activityLoading} />
+                </CardContent>
+            </Card>
+
             <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
                 <Card className="col-span-4 glass border-white/5">
                     <CardHeader className="flex flex-row items-start justify-between">