adds access modifiers for each role

src/components/PermissionGate.jsx

@@ -0,0 +1,38 @@
+import { usePermissions } from '../hooks/usePermissions';
+
+/**
+ * Conditionally renders children based on org-level permissions.
+ *
+ * Props:
+ *   module   – permission module key (e.g. 'jobs', 'leads', 'financials')
+ *   action   – single action string (e.g. 'view', 'edit', 'delete')
+ *   any      – array of actions; renders if user has ANY of them
+ *   all      – array of actions; renders if user has ALL of them
+ *   fallback – optional element rendered when access is denied
+ *
+ * Usage:
+ *   <PermissionGate module="jobs" action="edit">
+ *     <EditButton />
+ *   </PermissionGate>
+ *
+ *   <PermissionGate module="financials" any={['view', 'edit']} fallback={<LockedBanner />}>
+ *     <FinancialsPanel />
+ *   </PermissionGate>
+ */
+const PermissionGate = ({ module, action, any, all, fallback = null, children }) => {
+    const { can, canAny, canAll } = usePermissions();
+
+    let allowed = false;
+
+    if (action) {
+        allowed = can(module, action);
+    } else if (any) {
+        allowed = canAny(module, any);
+    } else if (all) {
+        allowed = canAll(module, all);
+    }
+
+    return allowed ? children : fallback;
+};
+
+export default PermissionGate;