feat: (ui) leaderboards

web/src/pages/Dashboard.tsx

@@ -5,6 +5,7 @@ import { Badge } from "../components/ui/badge";
 import { StatCard } from "../components/stat-card";
 import { RecentActivity } from "../components/recent-activity";
 import { LootdropCard } from "../components/lootdrop-card";
+import { LeaderboardCard } from "../components/leaderboard-card";
 import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
 import { cn } from "../lib/utils";
 
@@ -153,6 +154,12 @@ export function Dashboard() {
                                 iconClassName="text-destructive"
                             />
                         </div>
+
+                        <LeaderboardCard
+                            data={stats?.leaderboards}
+                            isLoading={!stats}
+                            className="w-full"
+                        />
                     </div>
 
                     {/* Recent Activity */}
@@ -171,7 +178,7 @@ export function Dashboard() {
                         />
                     </div>
                 </div>
-            </main>
-        </div>
+            </main >
+        </div >
     );
 }

web/src/pages/DesignSystem.tsx

@@ -10,10 +10,11 @@ import { SectionHeader } from "../components/section-header";
 import { TestimonialCard } from "../components/testimonial-card";
 import { StatCard } from "../components/stat-card";
 import { LootdropCard } from "../components/lootdrop-card";
-import { Activity, Coins, Flame } from "lucide-react";
+import { Activity, Coins, Flame, Trophy } from "lucide-react";
 
 import { RecentActivity } from "../components/recent-activity";
 import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
+import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
 
 const mockEvents: RecentEvent[] = [
     { type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
@@ -28,6 +29,45 @@ const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => (
     icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
 }));
 
+const mockLeaderboardData: LeaderboardData = {
+    topLevels: [
+        { username: "StellarMage", level: 99 },
+        { username: "MoonWalker", level: 85 },
+        { username: "SunChaser", level: 72 },
+        { username: "NebulaKnight", level: 68 },
+        { username: "CometRider", level: 65 },
+        { username: "VoidWalker", level: 60 },
+        { username: "AstroBard", level: 55 },
+        { username: "StarGazer", level: 50 },
+        { username: "CosmicDruid", level: 45 },
+        { username: "GalaxyGuard", level: 42 }
+    ],
+    topWealth: [
+        { username: "GoldHoarder", balance: "1000000" },
+        { username: "MerchantKing", balance: "750000" },
+        { username: "LuckyLooter", balance: "500000" },
+        { username: "CryptoMiner", balance: "450000" },
+        { username: "MarketMaker", balance: "300000" },
+        { username: "TradeWind", balance: "250000" },
+        { username: "CoinKeeper", balance: "150000" },
+        { username: "GemHunter", balance: "100000" },
+        { username: "DustCollector", balance: "50000" },
+        { username: "BrokeBeginner", balance: "100" }
+    ],
+    topNetWorth: [
+        { username: "MerchantKing", netWorth: "1500000" },
+        { username: "GoldHoarder", netWorth: "1250000" },
+        { username: "LuckyLooter", netWorth: "850000" },
+        { username: "MarketMaker", netWorth: "700000" },
+        { username: "GemHunter", netWorth: "650000" },
+        { username: "CryptoMiner", netWorth: "550000" },
+        { username: "TradeWind", netWorth: "400000" },
+        { username: "CoinKeeper", netWorth: "250000" },
+        { username: "DustCollector", netWorth: "150000" },
+        { username: "BrokeBeginner", netWorth: "5000" }
+    ]
+};
+
 export function DesignSystem() {
     return (
         <div className="min-h-screen bg-aurora-page text-foreground font-outfit">
@@ -341,6 +381,20 @@ export function DesignSystem() {
                             </div>
                         </div>
 
+                        {/* Leaderboard Demo */}
+                        <div className="space-y-4">
+                            <h3 className="text-xl font-semibold text-muted-foreground">Leaderboard Cards</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                                <LeaderboardCard
+                                    isLoading={true}
+                                />
+                                <LeaderboardCard
+                                    data={mockLeaderboardData}
+                                    isLoading={false}
+                                />
+                            </div>
+                        </div>
+
                         {/* Testimonial Cards Demo */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <TestimonialCard