commit

netmanager-app/app/(authenticated)/clients/page.tsx

@@ -8,6 +8,7 @@ import { ActivateClientDialog, DeactivateClientDialog } from "./dialogs"
 import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
 import { useToast } from "@/components/ui/use-toast"
 import type { Client } from "@/app/types/clients"
+import withPermission from "@/app/pageAccess"
 
 const formatDate = (dateString: string | undefined): string => {
   if (!dateString) return "N/A"
@@ -151,5 +152,5 @@ const ClientManagement = () => {
   )
 }
 
-export default ClientManagement
+export default withPermission(ClientManagement, 'CREATE_UPDATE_AND_DELETE_NETWORK_DEVICES');
 

netmanager-app/app/pageAccess.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAppSelector } from "@/core/redux/hooks";
+import type { RootState } from "@/core/redux/store";
+
+const withPermission = <P extends object>(
+  Component: React.ComponentType<P>,
+  requiredPermission: string
+): React.FC<P> => {
+  const WithPermission: React.FC<P> = (props) => {
+    const router = useRouter();
+    const currentRole = useAppSelector(
+      (state: RootState) => state.user.currentRole
+    );
+    const [hasPermission, setHasPermission] = useState(false);
+
+    useEffect(() => {
+      if (currentRole) {
+        const permissionExists = currentRole.permissions.includes(
+          requiredPermission
+        );
+        setHasPermission(permissionExists);
+
+        if (!permissionExists) {
+          router.push("/permission-denied");
+        }
+      }
+    }, [currentRole, requiredPermission, router]);
+
+    if (!hasPermission) return null;
+
+    return <Component {...props} />;
+  };
+
+  return WithPermission;
+};
+
+export default withPermission;