Frontend user roles integration

src/frontend/src/components/home/HomePageFilters.tsx

@@ -6,13 +6,15 @@ import { HomeActions } from '@/store/slices/HomeSlice';
 import Switch from '@/components/common/Switch';
 import Searchbar from '@/components/common/SearchBar';
 import Button from '@/components/common/Button2';
+import { useCreateProjectAccess } from '@/hooks/usePermissions';
 
 type homePageFiltersPropType = {
   searchText: string;
   onSearch: (data: string) => void;
 };
 
 const HomePageFilters = ({ searchText, onSearch }: homePageFiltersPropType) => {
+  const createProjectAccess = useCreateProjectAccess();
   const dispatch = useAppDispatch();
 
   const showMapStatus = useAppSelector((state) => state.home.showMapStatus);
@@ -36,12 +38,14 @@ const HomePageFilters = ({ searchText, onSearch }: homePageFiltersPropType) => {
             onCheckedChange={() => dispatch(HomeActions.SetShowMapStatus(!showMapStatus))}
           />
         </div>
-        <Link to={'/create-project'}>
-          <Button variant="primary-red">
-            <AssetModules.AddIcon className="!fmtm-text-[1.125rem]" />
-            <p>New Project</p>
-          </Button>
-        </Link>
+        {createProjectAccess && (
+          <Link to={'/create-project'}>
+            <Button variant="primary-red">
+              <AssetModules.AddIcon className="!fmtm-text-[1.125rem]" />
+              <p>New Project</p>
+            </Button>
+          </Link>
+        )}
       </div>
     </div>
   );

src/frontend/src/hooks/usePermissions.ts

@@ -0,0 +1,22 @@
+import { user_roles } from '@/types/enums';
+import CoreModules from '@/shared/CoreModules';
+
+// ADMIN-ONLY
+export function useAdminAccess() {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return !!authDetails && authDetails?.role === user_roles.ADMIN;
+}
+
+// PROJECT-LEVEL
+export function useCreateProjectAccess() {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return authDetails?.role === user_roles.ADMIN || !!authDetails?.orgs_managed;
+}
+
+// ORGANIZATION-LEVEL
+export function useEditOrganizationAccess(id: number) {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return (
+    authDetails?.role === user_roles.ADMIN || (authDetails?.orgs_managed && authDetails?.orgs_managed?.includes(id))
+  );
+}

src/frontend/src/utilities/PrimaryAppBar.tsx

@@ -19,9 +19,10 @@ import {
   DropdownMenuItem,
 } from '@/components/common/Dropdown';
 import Button from '@/components/common/Button2';
-import { user_roles } from '@/types/enums';
+import { useAdminAccess } from '@/hooks/usePermissions';
 
 export default function PrimaryAppBar() {
+  const adminAccess = useAdminAccess();
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -95,7 +96,7 @@ export default function PrimaryAppBar() {
                 align="center"
                 sideOffset={10}
               >
-                {authDetails && authDetails?.role === user_roles['ADMIN'] && (
+                {adminAccess && (
                   <Link to="/manage/user">
                     <DropdownMenuItem>Manage User</DropdownMenuItem>
                   </Link>

src/frontend/src/views/ApproveOrganization.tsx

@@ -2,8 +2,13 @@ import React from 'react';
 import ApproveOrganizationHeader from '@/components/ApproveOrganization/ApproveOrganizationHeader';
 import OrganizationForm from '@/components/ApproveOrganization/OrganizationForm';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
+import { useAdminAccess } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const ApproveOrganization = () => {
+  const adminAccess = useAdminAccess();
+  if (!adminAccess) return <NoAccessComponent />;
+
   useDocumentTitle('Approve Organization');
   return (
     <div className="fmtm-bg-[#F5F5F5]">

src/frontend/src/views/CreateEditOrganization.tsx

@@ -5,11 +5,17 @@ import ConsentDetailsForm from '@/components/CreateEditOrganization/ConsentDetai
 import CreateEditOrganizationForm from '@/components/CreateEditOrganization/CreateEditOrganizationForm';
 import { OrganisationAction } from '@/store/slices/organisationSlice';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
+import { useEditOrganizationAccess } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const CreateEditOrganization = () => {
   const params = CoreModules.useParams();
   const dispatch = useAppDispatch();
   const organizationId: string = params.id;
+  const editOrganizationAccess = useEditOrganizationAccess(+organizationId);
+
+  if (organizationId && !editOrganizationAccess) return <NoAccessComponent />;
+
   const consentApproval = useAppSelector((state) => state.organisation.consentApproval);
 
   useEffect(() => {

src/frontend/src/views/CreateNewProject.tsx

@@ -11,8 +11,13 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
 import Prompt from '@/hooks/Prompt';
+import { useCreateProjectAccess } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const CreateNewProject = () => {
+  const createProjectAccess = useCreateProjectAccess();
+  if (!createProjectAccess) return <NoAccessComponent />;
+
   const location = useLocation();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();

src/frontend/src/views/ManageUsers.tsx

@@ -8,6 +8,8 @@ import { user_roles } from '@/types/enums';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import Searchbar from '@/components/common/SearchBar';
 import useDebouncedInput from '@/hooks/useDebouncedInput';
+import { useAdminAccess } from '@/hooks/usePermissions';
+import NoAccessComponent from './NoAccessComponent';
 
 const VITE_API_URL = import.meta.env.VITE_API_URL;
 
@@ -19,6 +21,9 @@ const roleLabel = {
 };
 
 const ManageUsers = () => {
+  const adminAccess = useAdminAccess();
+  if (!adminAccess) return <NoAccessComponent />;
+
   const dispatch = useAppDispatch();
   const userListLoading = useAppSelector((state) => state.user.userListLoading);
   const userList = useAppSelector((state) => state.user.userList);

src/frontend/src/views/NoAccessComponent.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NoAccessComponent = () => {
+  return <div>Access Denied</div>;
+};
+
+export default NoAccessComponent;