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/Button';
+import { useHasManagedAnyOrganization } from '@/hooks/usePermissions';
 
 type homePageFiltersPropType = {
   searchText: string;
   onSearch: (data: string) => void;
 };
 
 const HomePageFilters = ({ searchText, onSearch }: homePageFiltersPropType) => {
+  const hasManagedAnyOrganization = useHasManagedAnyOrganization();
   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>
+        {hasManagedAnyOrganization && (
+          <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,26 @@
+import { project_roles, user_roles } from '@/types/enums';
+import CoreModules from '@/shared/CoreModules';
+
+export function useIsAdmin() {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return authDetails?.role === user_roles.ADMIN;
+}
+
+export function useHasManagedAnyOrganization() {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  const orgs_managed = authDetails?.orgs_managed || [];
+  return authDetails?.role === user_roles.ADMIN || orgs_managed?.length > 0;
+}
+
+export function useIsOrganizationAdmin(id: number) {
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return (
+    authDetails?.role === user_roles.ADMIN || (authDetails?.orgs_managed && authDetails?.orgs_managed?.includes(id))
+  );
+}
+
+export function useIsProjectManager(id: string | number) {
+  console.log('checking');
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  return authDetails?.role === user_roles.ADMIN || authDetails?.project_roles?.[id] === project_roles.PROJECT_MANAGER;
+}

src/frontend/src/types/enums.ts

@@ -39,6 +39,14 @@ export enum user_roles {
   ADMIN = 'ADMIN',
 }
 
+export enum project_roles {
+  MAPPER = 'MAPPER',
+  VALIDATOR = 'VALIDATOR',
+  FIELD_MANAGER = 'FIELD_MANAGER',
+  PROJECT_MANAGER = 'PROJECT_MANAGER',
+  ASSOCIATE_PROJECT_MANAGER = 'ASSOCIATE_PROJECT_MANAGER',
+}
+
 export type NewGeomTypes = {
   POINT: 'POINT';
   POLYGON: 'POLYGON';

src/frontend/src/utilities/PrimaryAppBar.tsx

@@ -18,10 +18,11 @@ import {
   DropdownMenuPortal,
   DropdownMenuItem,
 } from '@/components/common/Dropdown';
+import { useIsAdmin } from '@/hooks/usePermissions';
 import Button from '@/components/common/Button';
-import { user_roles } from '@/types/enums';
 
 export default function PrimaryAppBar() {
+  const isAdmin = useIsAdmin();
   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'] && (
+                {isAdmin && (
                   <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 { useIsAdmin } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const ApproveOrganization = () => {
+  const isAdmin = useIsAdmin();
+  if (!isAdmin) 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 { useIsOrganizationAdmin } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const CreateEditOrganization = () => {
   const params = CoreModules.useParams();
   const dispatch = useAppDispatch();
   const organizationId: string = params.id;
+  const isOrganizationAdmin = useIsOrganizationAdmin(+organizationId);
+
+  if (organizationId && !isOrganizationAdmin) 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 { useHasManagedAnyOrganization } from '@/hooks/usePermissions';
+import NoAccessComponent from '@/views/NoAccessComponent';
 
 const CreateNewProject = () => {
+  const hasManagedAnyOrganization = useHasManagedAnyOrganization();
+  if (!hasManagedAnyOrganization) 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 { useIsAdmin } 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 isAdmin = useIsAdmin();
+  if (!isAdmin) 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;