feat: (ui) settings drawers

web/src/pages/DesignSystem.tsx

@@ -11,10 +11,13 @@ import { TestimonialCard } from "../components/testimonial-card";
 import { StatCard } from "../components/stat-card";
 import { LootdropCard } from "../components/lootdrop-card";
 import { Activity, Coins, Flame, Trophy } from "lucide-react";
+import { SettingsDrawer } from "../components/settings-drawer";
 
 import { RecentActivity } from "../components/recent-activity";
 import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
 import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
+import { ActivityChart } from "../components/activity-chart";
+import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
 
 const mockEvents: RecentEvent[] = [
     { type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
@@ -22,6 +25,17 @@ const mockEvents: RecentEvent[] = [
     { type: 'warn', message: 'Failed login attempt', timestamp: new Date(Date.now() - 1000 * 60 * 60), icon: '⚠️' }
 ];
 
+const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) => {
+    const d = new Date();
+    d.setHours(d.getHours() - (23 - i));
+    d.setMinutes(0, 0, 0);
+    return {
+        hour: d.toISOString(),
+        commands: Math.floor(Math.random() * 100) + 20,
+        transactions: Math.floor(Math.random() * 60) + 10
+    };
+});
+
 const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
     type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
     message: `Event #${i + 1} generated for testing scroll behavior`,
@@ -237,7 +251,10 @@ export function DesignSystem() {
                                 <div className="flex items-center gap-2 mb-2">
                                     <Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
                                 </div>
-                                <CardTitle>System Settings</CardTitle>
+                                <div className="flex justify-between items-center">
+                                    <CardTitle>System Settings</CardTitle>
+                                    <SettingsDrawer />
+                                </div>
                             </CardHeader>
                             <CardContent className="space-y-6">
                                 <div className="flex items-center justify-between">
@@ -334,6 +351,19 @@ export function DesignSystem() {
                             />
                         </div>
 
+                        {/* Data Visualization Demo */}
+                        <div className="space-y-4">
+                            <h3 className="text-xl font-semibold text-muted-foreground">Data Visualization</h3>
+                            <div className="grid grid-cols-1 gap-6">
+                                <ActivityChart
+                                    data={mockActivityData}
+                                />
+                                <ActivityChart
+                                // Empty charts (loading state)
+                                />
+                            </div>
+                        </div>
+
                         {/* Game Event Cards Demo */}
                         <div className="space-y-4">
                             <h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>