fix: list users views in users page

src/screens/APIUtils/APIUtils.res

@@ -496,8 +496,16 @@ let useGetURL = () => {
     | USER_MANAGEMENT_V2 => {
         let userUrl = `user`
         switch userRoleTypes {
-        | USER_LIST => `${userUrl}/user/v2/list`
-        | ROLE_LIST => `${userUrl}/role/v2/list`
+        | USER_LIST =>
+          switch queryParamerters {
+          | Some(queryParams) => `${userUrl}/user/v2/list?${queryParams}`
+          | None => `${userUrl}/user/v2/list`
+          }
+        | ROLE_LIST =>
+          switch queryParamerters {
+          | Some(queryParams) => `${userUrl}/role/v2/list?${queryParams}`
+          | None => `${userUrl}/role/v2/list`
+          }
         | _ => ""
         }
       }

src/screens/Hooks/OMPSwitchHooks.res

@@ -137,7 +137,6 @@ let useInternalSwitch = () => {
   let orgSwitch = useOrgSwitch()
   let merchSwitch = useMerchantSwitch()
   let profileSwitch = useProfileSwitch()
-  let showToast = ToastState.useShowToast()
 
   let {userInfo: {orgId: currentOrgId}} = React.useContext(UserInfoProvider.defaultContext)
 
@@ -158,9 +157,34 @@ let useInternalSwitch = () => {
     } catch {
     | Exn.Error(e) => {
         let err = Exn.message(e)->Option.getOr("Failed to switch!")
-        showToast(~message=err, ~toastType=ToastError)
         Exn.raiseError(err)
       }
     }
   }
 }
+
+let useOMPData = () => {
+  open OMPSwitchUtils
+  let merchantList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.merchantListAtom)
+  let orgList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.orgListAtom)
+  let profileList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.profileListAtom)
+  let {userInfo} = React.useContext(UserInfoProvider.defaultContext)
+
+  let getList: unit => OMPSwitchTypes.ompList = _ => {
+    {
+      orgList,
+      merchantList,
+      profileList,
+    }
+  }
+
+  let getNameForId = entityType =>
+    switch entityType {
+    | #Organization => currentOMPName(orgList, userInfo.orgId)
+    | #Merchant => currentOMPName(merchantList, userInfo.merchantId)
+    | #Profile => currentOMPName(profileList, userInfo.profileId)
+    | _ => ""
+    }
+
+  (getList, getNameForId)
+}

src/screens/OMPSwitch/OMPSwitchTypes.res

@@ -5,3 +5,9 @@ type opmView = {
   entity: UserInfoTypes.entity,
 }
 type ompViews = array<opmView>
+
+type ompList = {
+  orgList: array<ompListTypes>,
+  merchantList: array<ompListTypes>,
+  profileList: array<ompListTypes>,
+}

src/screens/UserManagement/UserRevamp/ListRoles.res

@@ -1,5 +1,5 @@
 @react.component
-let make = () => {
+let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => {
   open APIUtils
   open ListRolesTableEntity
   let getURL = useGetURL()
@@ -18,7 +18,9 @@ let make = () => {
         ~entityName=USER_MANAGEMENT_V2,
         ~methodType=Get,
         ~userRoleTypes=ROLE_LIST,
-        ~queryParamerters=Some("groups=true"),
+        ~queryParamerters=userModuleEntity == #Default
+          ? None
+          : Some(`entity_type=${(userModuleEntity :> string)->String.toLowerCase}`),
       )
       let res = await fetchDetails(userDataURL)
       let rolesData = res->LogicUtils.getArrayDataFromJson(itemToObjMapperForRoles)
@@ -32,7 +34,7 @@ let make = () => {
   React.useEffect(() => {
     getRolesAvailable()->ignore
     None
-  }, [])
+  }, [userModuleEntity])
 
   <div className="relative mt-5 flex flex-col gap-6">
     <PageLoaderWrapper screenState={screenStateRoles}>

src/screens/UserManagement/UserRevamp/ListUsers.res

@@ -1,7 +1,7 @@
 open ListUserTableEntity
 
 @react.component
-let make = () => {
+let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => {
   open APIUtils
   open LogicUtils
   let getURL = useGetURL()
@@ -21,6 +21,9 @@ let make = () => {
         ~entityName=USER_MANAGEMENT_V2,
         ~methodType=Get,
         ~userRoleTypes=USER_LIST,
+        ~queryParamerters=userModuleEntity == #Default
+          ? None
+          : Some(`entity_type=${(userModuleEntity :> string)->String.toLowerCase}`),
       )
       let res = await fetchDetails(userDataURL)
       let userData = res->getArrayDataFromJson(itemToObjMapperForUser)
@@ -35,7 +38,7 @@ let make = () => {
   React.useEffect(() => {
     getUserData()->ignore
     None
-  }, [])
+  }, [userModuleEntity])
 
   let filterLogicForUsers = ReactDebounce.useDebounced(ob => {
     let (searchText, arr) = ob
@@ -53,7 +56,7 @@ let make = () => {
   }, ~wait=200)
 
   <PageLoaderWrapper screenState={screenStateUsers}>
-    <div className="relative mt-5 w-full">
+    <div className="relative mt-5 w-full flex flex-col gap-12">
       <div className="absolute right-0 z-10">
         <ACLButton
           access={userPermissionJson.usersManage}

src/screens/UserManagement/UserRevamp/UserManagementHelper.res

@@ -207,3 +207,59 @@ module SwitchMerchantForUserAction = {
     />
   }
 }
+
+module UserOmpView = {
+  @react.component
+  let make = (
+    ~views: array<UserManagementTypes.ompViewType>,
+    ~userModuleEntity: UserManagementTypes.userModuleTypes,
+    ~setUserModuleEntity,
+  ) => {
+    let (_, getNameForId) = OMPSwitchHooks.useOMPData()
+
+    let cssBasedOnIndex = index => {
+      if index == 0 {
+        "rounded-l-md"
+      } else if index == views->Array.length - 1 {
+        "rounded-r-md"
+      } else {
+        ""
+      }
+    }
+
+    let getName = entityType => {
+      let name = getNameForId(entityType)
+      name->String.length > 10
+        ? name
+          ->String.substring(~start=0, ~end=10)
+          ->String.concat("...")
+        : name
+    }
+
+    let onChange = entity => {
+      setUserModuleEntity(_ => entity)
+    }
+
+    let labelBasedOnEntity: UserManagementTypes.ompViewType => string = value =>
+      switch value.entity {
+      | #Default => value.label
+      | _ => `${value.label} (${value.entity->getName})`
+      }
+
+    <div className="flex">
+      <div className="flex h-fit">
+        {views
+        ->Array.mapWithIndex((value, index) => {
+          let selectedStyle = userModuleEntity == value.entity ? `bg-blue-200` : ""
+
+          <div
+            onClick={_ => onChange(value.entity)->ignore}
+            className={`text-sm py-2 px-3 ${selectedStyle} border text-blue-500 border-blue-500 ${index->cssBasedOnIndex} cursor-pointer`}>
+            {`${value->labelBasedOnEntity}`->React.string}
+          </div>
+        })
+        ->React.array}
+      </div>
+    </div>
+  }
+}

src/screens/UserManagement/UserRevamp/UserManagementLanding.res

@@ -1,20 +1,34 @@
 @react.component
 let make = () => {
+  let {checkUserEntity} = React.useContext(UserInfoProvider.defaultContext)
+  let (
+    userModuleEntity: UserManagementTypes.userModuleTypes,
+    setUserModuleEntity,
+  ) = React.useState(_ => #Default)
+
   let tabList: array<Tabs.tab> = [
     {
       title: "Users",
-      renderContent: () => <ListUsers />,
+      renderContent: () => <ListUsers userModuleEntity />,
     },
     {
       title: "Roles",
-      renderContent: () => <ListRoles />,
+      renderContent: () => <ListRoles userModuleEntity />,
     },
   ]
 
   <div className="flex flex-col overflow-y-scroll">
-    <PageUtils.PageHeading
-      title={"Team management"} subTitle="Manage user roles and invite members of your organisation"
-    />
+    <div className="flex justify-between items-center">
+      <PageUtils.PageHeading
+        title={"Team management"}
+        subTitle="Manage user roles and invite members of your organisation"
+      />
+      <UserManagementHelper.UserOmpView
+        views={UserManagementUtils.getUserManagementViewValues(~checkUserEntity)}
+        userModuleEntity
+        setUserModuleEntity
+      />
+    </div>
     <div className="relative">
       <Tabs
         tabs=tabList

src/screens/UserManagement/CommonUtils/UserManagementTypes.res → src/screens/UserManagement/UserRevamp/UserManagementTypes.res

@@ -78,3 +78,10 @@ type allSelectionType = [#All_Merchants | #All_Profiles]
 type userActionType = SwitchUser | ManageUser | NoActionAccess
 
 type userStatusTypes = Active | InviteSent | None
+
+type userModuleTypes = [UserInfoTypes.entity | #Default]
+
+type ompViewType = {
+  label: string,
+  entity: userModuleTypes,
+}

src/screens/UserManagement/CommonUtils/UserManagementUtils.res → src/screens/UserManagement/UserRevamp/UserManagementUtils.res

@@ -145,3 +145,32 @@ let tabIndeToVariantMapper = index => {
   | _ => RolesTab
   }
 }
+
+let getUserManagementViewValues = (~checkUserEntity) => {
+  open UserManagementTypes
+
+  let org = {
+    label: "Organization",
+    entity: #Organization,
+  }
+  let merchant = {
+    label: "Merchant",
+    entity: #Merchant,
+  }
+  let profile = {
+    label: "Profile",
+    entity: #Profile,
+  }
+  let default = {
+    label: "My Team",
+    entity: #Default,
+  }
+
+  if checkUserEntity([#Organization]) {
+    [default, org, merchant, profile]
+  } else if checkUserEntity([#Merchant]) {
+    [default, merchant, profile]
+  } else {
+    [default]
+  }
+}