diff --git a/netmanager-app/app/(authenticated)/clients/page.tsx b/netmanager-app/app/(authenticated)/clients/page.tsx index ae10c6142a..b8c0f38088 100644 --- a/netmanager-app/app/(authenticated)/clients/page.tsx +++ b/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'); diff --git a/netmanager-app/app/pageAccess.tsx b/netmanager-app/app/pageAccess.tsx new file mode 100644 index 0000000000..4ca6d4dca3 --- /dev/null +++ b/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 =

( + Component: React.ComponentType

, + requiredPermission: string +): React.FC

=> { + const WithPermission: React.FC

= (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 ; + }; + + return WithPermission; +}; + +export default withPermission;