adds access modifiers for each role

src/pages/LeadsListPage.jsx

@@ -3,9 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useTheme } from '../context/ThemeContext';
 import { useMockStore } from '../data/mockStore';
+import { usePermissions } from '../hooks/usePermissions';
+import PermissionGate from '../components/PermissionGate';
 import {
     Plus, Search, MapPin, Phone, Zap, FileText,
-    Clock, User, ChevronRight, Filter,
+    Clock, User, ChevronRight, Filter, Lock,
 } from 'lucide-react';
 
 // ---------------------------------------------------------------------------
@@ -183,6 +185,7 @@ function EmptyState({ isDark, onNewLead }) {
 export default function LeadsListPage() {
     const { theme } = useTheme();
     const { leads } = useMockStore();
+    const { can } = usePermissions();
     const navigate = useNavigate();
     const isDark = theme === 'dark';
 
@@ -214,15 +217,22 @@ export default function LeadsListPage() {
                             {leads.length} total lead{leads.length !== 1 ? 's' : ''}
                         </p>
                     </div>
-                    <button
-                        type="button"
-                        onClick={() => navigate('/emp/fa/leads/new')}
-                        className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-white transition-all active:scale-[0.97] hover:opacity-90 shrink-0"
-                        style={{ backgroundColor: '#3B82F6' }}
-                    >
-                        <Plus size={14} />
-                        New Lead
-                    </button>
+                    {can('leads', 'log') ? (
+                        <button
+                            type="button"
+                            onClick={() => navigate('/emp/fa/leads/new')}
+                            className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-white transition-all active:scale-[0.97] hover:opacity-90 shrink-0"
+                            style={{ backgroundColor: '#3B82F6' }}
+                        >
+                            <Plus size={14} />
+                            New Lead
+                        </button>
+                    ) : (
+                        <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-zinc-400 bg-zinc-200 dark:bg-zinc-800 cursor-not-allowed shrink-0" title="You don't have permission to create leads">
+                            <Lock size={14} />
+                            New Lead
+                        </div>
+                    )}
                 </div>
 
                 {/* --- Search bar --- */}