adds access modifiers for each role

src/pages/LeaderboardPage.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useMemo } from 'react';
 import { useMockStore } from '../data/mockStore';
-import { Trophy, TrendingUp, DollarSign, Target, Calendar, Medal, ArrowUpRight, Crown } from 'lucide-react';
+import { Trophy, TrendingUp, DollarSign, Target, Calendar, Medal, ArrowUpRight, Crown, ShieldOff } from 'lucide-react';
 import { SpotlightCard } from '../components/SpotlightCard';
 import AnimatedNumber from '../components/AnimatedNumber';
+import { usePermissions } from '../hooks/usePermissions';
 
 const LeaderboardPage = () => {
     const { users, salesHistory } = useMockStore();
+    const { can } = usePermissions();
     const [timeframe, setTimeframe] = useState('month'); // 'week', 'month', 'custom'
     const [metric, setMetric] = useState('revenue'); // 'revenue', 'volume', 'winRate'
 
@@ -108,6 +110,20 @@ const LeaderboardPage = () => {
         );
     };
 
+    if (!can('leaderboard', 'view')) {
+        return (
+            <div className="min-h-full flex items-center justify-center p-8">
+                <div className="text-center space-y-4 max-w-md">
+                    <div className="mx-auto w-16 h-16 rounded-2xl bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
+                        <ShieldOff size={28} className="text-zinc-400" />
+                    </div>
+                    <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Access Restricted</h2>
+                    <p className="text-sm text-zinc-500">You don't have permission to view the Leaderboard. Contact your org admin for access.</p>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div className="min-h-full p-8 max-w-7xl mx-auto space-y-8 pb-20">
             {/* Header */}