npm - @itilite/iui-user-management - Versions diffs - 0.4.202 → 0.4.204 - Mend

@itilite/iui-user-management 0.4.202 → 0.4.204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.modern.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUISearch, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
 import React, { useState, useEffect, useRef, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
@@ -9,9 +9,14 @@ import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import moment from 'moment';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { useHistory } from 'react-router-dom';
-import { withStyles } from '@material-ui/core/styles';
+import { useHistory, useLocation } from 'react-router-dom';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
 import Switch from '@material-ui/core/Switch';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import Button from '@material-ui/core/Button';
+import { Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, Box } from '@material-ui/core';
+import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -64,7 +69,6 @@ var _Pact = /*#__PURE__*/function () {
   };
   return _Pact;
 }();
 function _settle(pact, state, value) {
   if (!pact.s) {
     if (value instanceof _Pact) {
@@ -93,7 +97,6 @@ function _settle(pact, state, value) {
 function _isSettledPact(thenable) {
   return thenable instanceof _Pact && thenable.s & 1;
 }
 function _forTo(array, body, check) {
   var i = -1,
     pact,
@@ -125,7 +128,6 @@ function _forTo(array, body, check) {
 }
 var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
 var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 function _catch(body, recover) {
   try {
     var result = body();
@@ -144,17 +146,11 @@ function r(e) {
   var t,
     f,
     n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) {
-    e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (t in e) {
-    e[t] && (n && (n += " "), n += t);
-  }
+  if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
   return n;
 }
 function clsx() {
-  for (var e, t, f = 0, n = ""; f < arguments.length;) {
-    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
-  }
+  for (var e, t, f = 0, n = ""; f < arguments.length;) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
@@ -358,12 +354,24 @@ var userAddEditUrl = {
   approversSearch: function approversSearch() {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/company-approvers";
   },
+  _approversSearch: function _approversSearch() {
+    return "api/v1/user-management/users/single-user/transfer-approver-role?";
+  },
   preSignedUrl: function preSignedUrl() {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/presigned-url";
   },
   editUser: function editUser(userId) {
     return "api/v1/user-management/users/" + userId;
   },
+  primaryAdmin: function primaryAdmin(userId) {
+    return "api/v1/user-management/mark-primary/" + userId;
+  },
+  resetPasswordForUserApi: function resetPasswordForUserApi() {
+    return "account/auth/password-reset/";
+  },
+  resendInviteForUserApi: function resendInviteForUserApi() {
+    return "api/v1/user-management/resend-welcome-email";
+  },
   deletePaymentCard: function deletePaymentCard(pmId, vendorId) {
     return env.getPaymentUrl() + "/api/v1/card/delete/" + pmId + "/" + vendorId + "/1";
   },
@@ -436,15 +444,23 @@ var userPanelUrl = {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?action=delete&table=" + tableName;
   },
   getUnit: function getUnit(tableName, length, sort) {
-    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&order=" + sort;
+    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&ordering=" + sort;
   },
   getPaginationUnit: function getPaginationUnit(tableName, length, page, sort) {
-    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&page=" + page + "&order=" + sort;
+    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&page=" + page + "&ordering=" + sort;
   },
   moveUnit: function moveUnit() {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/transfer-users";
   }
 };
+var departmentUrl = {
+  departmentUrl: function departmentUrl() {
+    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/department";
+  },
+  getDepartmentHead: function getDepartmentHead(departmentId, page) {
+    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/department/" + departmentId + "/users?page=" + page;
+  }
+};
 var api = configs.api;
 var NAoptionConfig = {
@@ -454,7 +470,6 @@ var NAoptionConfig = {
   },
   applyFor: ['employee_level', 'department']
 };
 var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref) {
   var page = _ref.page,
     tabelName = _ref.tabelName,
@@ -590,28 +605,20 @@ var currencyLoadOptions = function currencyLoadOptions(search, loadedOptions, _r
 var approversOptions = function approversOptions(search, loadedOptions, _ref4) {
   var page = _ref4.page,
     product = _ref4.product,
-    userId = _ref4.userId,
-    placeholder = _ref4.placeholder;
+    userId = _ref4.userId;
   try {
     return Promise.resolve(_catch(function () {
-      return Promise.resolve(api.get(userAddEditUrl.approversSearch() + "?page=" + page + "&product=" + product + "&search=" + search + "&user_id=" + userId).then(function (res) {
+      return Promise.resolve(api.get(userAddEditUrl._approversSearch() + "user_id=" + userId + "&page=" + page).then(function (res) {
         return res.data;
       })).then(function (response) {
         var mappedValue = response.results.map(function (item) {
           return {
-            value: item.approver.email,
-            label: item.approver.email,
+            value: item.email,
+            label: item.email,
             type: 'detailed',
-            data: item.approver
+            data: item
           };
         });
-        if (page === 1) {
-          var placeholderLbl = {
-            value: '',
-            label: placeholder
-          };
-          mappedValue.unshift(placeholderLbl);
-        }
         return {
           options: mappedValue,
           hasMore: !!response.next,
@@ -651,7 +658,6 @@ var countryOptions = function countryOptions(search, loadedOptions, _ref5) {
             label: item[tabelName]
           };
         });
         return {
           options: mappedValue,
           hasMore: !!response.next,
@@ -675,6 +681,46 @@ var countryOptions = function countryOptions(search, loadedOptions, _ref5) {
     return Promise.reject(e);
   }
 };
+var departmentHeadOptions = function departmentHeadOptions(search, loadedOptions, _ref6) {
+  var page = _ref6.page,
+    departmentId = _ref6.departmentId;
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(api.get(departmentUrl.getDepartmentHead(departmentId, page) + "&search=" + search).then(function (res) {
+        return res.data;
+      })).then(function (response) {
+        var mappedValue = response.results.map(function (item) {
+          return {
+            value: item.id,
+            label: item.first_name + ' ' + item.last_name,
+            type: 'detailed',
+            data: item
+          };
+        });
+        console.log(response.next);
+        return {
+          options: mappedValue,
+          hasMore: !!response.next,
+          additional: {
+            page: page + 1,
+            departmentId: departmentId
+          }
+        };
+      });
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
+        additional: {
+          page: 1,
+          departmentId: departmentId
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 var UserRole = function UserRole(_ref) {
   var _ref$list = _ref.list,
@@ -753,7 +799,6 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
   if (userTags.length) {
     res.user_tags = userTags;
   }
   if (payload.productAccess.travel) {
     var _payload$passportInfo, _payload$passportInfo2, _payload$passportInfo3, _payload$passportInfo4, _payload$membershipIn, _payload$uploadedFile;
     res.approvers.travel = [];
@@ -765,14 +810,12 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
         });
       }
     }
     if (payload.travelFYI && payload.travelFYI.value) {
       res.approvers.travel.push({
         email: payload.travelFYI.value,
         sequence: 'fyi'
       });
     }
     res.user_travel_info = {
       passport_issue_country: payload !== null && payload !== void 0 && (_payload$passportInfo = payload.passportInfoInput) !== null && _payload$passportInfo !== void 0 && (_payload$passportInfo2 = _payload$passportInfo.passport_issue_country) !== null && _payload$passportInfo2 !== void 0 && _payload$passportInfo2.value ? payload.passportInfoInput.passport_issue_country.value : null,
       nationality: payload !== null && payload !== void 0 && (_payload$passportInfo3 = payload.passportInfoInput) !== null && _payload$passportInfo3 !== void 0 && (_payload$passportInfo4 = _payload$passportInfo3.nationality) !== null && _payload$passportInfo4 !== void 0 && _payload$passportInfo4.value ? payload.passportInfoInput.nationality.value : null,
@@ -811,7 +854,6 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
       res.files = [];
     }
   }
   if (payload.productAccess.expense) {
     res.approvers.expense = [];
     for (var _key2 in payload.expenseApproversInput) {
@@ -822,7 +864,6 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
         });
       }
     }
     if (payload.expenseFYI && payload.expenseFYI.value) {
       res.approvers.expense.push({
         email: payload.expenseFYI.value,
@@ -930,7 +971,6 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
           });
         }
       }
       if (payload.travelFYI && payload.travelFYI.value) {
         res.fields.approvers.travel.push({
           email: payload.travelFYI.value,
@@ -1007,7 +1047,6 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
       res.fields.user_travel_info.redress_number = payload.secureTravelInputInfo.redress_number || null;
     }
   }
   if (payload.productAccess.expense) {
     if (!env$1.isProfilePage()) {
       res.fields.approvers.expense = [];
@@ -1019,7 +1058,6 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
           });
         }
       }
       if (payload.expenseFYI && payload.expenseFYI.value) {
         res.fields.approvers.expense.push({
           email: payload.expenseFYI.value,
@@ -1059,12 +1097,6 @@ var setUserActiveStatus = function setUserActiveStatus(payload) {
     payload: payload
   };
 };
-var setBulkDeactivatedUsers = function setBulkDeactivatedUsers(payload) {
-  return {
-    type: SET_BULK_DEACTIVATED_USERS,
-    payload: payload
-  };
-};
 var showDataFetchingStatus = function showDataFetchingStatus(payload) {
   return {
     type: SHOW_LOADER$1,
@@ -1125,36 +1157,25 @@ var exportUsers = function exportUsers(payload) {
     });
   };
 };
-var deActivateUsers = function deActivateUsers(ids) {
-  return function (dispatch) {
-    return new Promise(function (resolve, reject) {
-      api$1.post("" + userListUrl.bulkDeactivate(), {
-        user_ids: ids
-      }).then(function (res) {
-        dispatch(setBulkDeactivatedUsers(ids));
-        IUIToastMessageService.sNotify(ids.length + ' Users deactivated successfully');
-        resolve();
-      })["catch"](function (err) {
-        if (!err.response.data.status) {
-          IUIToastMessageService.warningNotify(err.response.data.message);
-          reject(err);
-          return;
-        }
-        reject(err);
-      });
-    });
-  };
-};
 var updateTabValue = function updateTabValue(tabId) {
   return {
     type: SET_TAB_VALUE,
     payload: tabId
   };
 };
-var updateActiveStatus = function updateActiveStatus(activateVal, id) {
+var updateActiveStatus = function updateActiveStatus(activateVal, id, roleTransfer, newApproverUserId) {
+  if (roleTransfer === void 0) {
+    roleTransfer = false;
+  }
+  var _payload = {
+    role_transfer: roleTransfer
+  };
+  if (roleTransfer) {
+    _payload['new_approver_user_id'] = newApproverUserId;
+  }
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$1.get(userListUrl.updateActiveStatus + 'user_id=' + id + '&activate=' + activateVal).then(function (res) {
+      api$1.put(userListUrl.updateActiveStatus + "user_id=" + id + "&activate=" + activateVal, _payload).then(function (res) {
         dispatch(setUserActiveStatus({
           is_active: activateVal !== 0,
           id: id
@@ -1251,7 +1272,6 @@ var fetchRenderFileds = function fetchRenderFileds() {
           var _res$data;
           IUIToastMessageService$1.warningNotify((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.message) || 'Opps, Something went wrong.');
           dispatch(stopLoader());
-          reject();
         }
       })["catch"](function (err) {
         reject(err);
@@ -1325,6 +1345,35 @@ var addTravelApproverField = function addTravelApproverField() {
     });
   };
 };
+var addManagerApproverField = function addManagerApproverField() {
+  return function (dispatch, getState) {
+    return new Promise(function (resolve, reject) {
+      api$2.post(userAddEditUrl.approverField(), {
+        label: 'Manager'
+      }).then(function (res) {
+        dispatch(setTravelApproverField({
+          id: 7,
+          label: 'Manager',
+          name: 'manager',
+          required: false,
+          type: 'async_select',
+          fullWidth: false,
+          visibility: true,
+          sequence: res.data.sequence,
+          placeholder: 'Select manager',
+          loadOption: approversOptions
+        }));
+        resolve();
+      })["catch"](function (err) {
+        var _err$response3, _err$response3$data;
+        if (err !== null && err !== void 0 && (_err$response3 = err.response) !== null && _err$response3 !== void 0 && (_err$response3$data = _err$response3.data) !== null && _err$response3$data !== void 0 && _err$response3$data.message) {
+          IUIToastMessageService$1.warningNotify(err.response.data.message);
+        }
+        reject(err);
+      });
+    });
+  };
+};
 var addExpenseApproverField = function addExpenseApproverField() {
   return function (dispatch, getState) {
     return new Promise(function (resolve, reject) {
@@ -1356,8 +1405,8 @@ var addExpenseApproverField = function addExpenseApproverField() {
         }));
         resolve();
       })["catch"](function (err) {
-        var _err$response3, _err$response3$data;
-        if (err !== null && err !== void 0 && (_err$response3 = err.response) !== null && _err$response3 !== void 0 && (_err$response3$data = _err$response3.data) !== null && _err$response3$data !== void 0 && _err$response3$data.message) {
+        var _err$response4, _err$response4$data;
+        if (err !== null && err !== void 0 && (_err$response4 = err.response) !== null && _err$response4 !== void 0 && (_err$response4$data = _err$response4.data) !== null && _err$response4$data !== void 0 && _err$response4$data.message) {
           IUIToastMessageService$1.warningNotify(err.response.data.message);
         }
         reject(err);
@@ -1375,8 +1424,8 @@ var editApproverLabel = function editApproverLabel(payload) {
         dispatch(payload.product === 'travel' ? setEditedTravelApproverField(payload) : setEditedExpenseApproverField(payload));
         resolve();
       })["catch"](function (err) {
-        var _err$response4, _err$response4$data;
-        if (err !== null && err !== void 0 && (_err$response4 = err.response) !== null && _err$response4 !== void 0 && (_err$response4$data = _err$response4.data) !== null && _err$response4$data !== void 0 && _err$response4$data.message) {
+        var _err$response5, _err$response5$data;
+        if (err !== null && err !== void 0 && (_err$response5 = err.response) !== null && _err$response5 !== void 0 && (_err$response5$data = _err$response5.data) !== null && _err$response5$data !== void 0 && _err$response5$data.message) {
           IUIToastMessageService$1.warningNotify(err.response.data.message);
         }
         reject(err);
@@ -1394,16 +1443,14 @@ var createUser = function createUser(payload) {
         } else {
           if (res.data.errors && typeof res.data.errors === 'object') {
             reject(res.data.errors);
-            return;
           } else if (!Object.keys(res.data.errors).length) {
             IUIToastMessageService$1.warningNotify(res.data.message);
           }
-          reject();
         }
       })["catch"](function (err) {
-        var _err$response5;
+        var _err$response6;
         var error = 'Opps, Something went error.';
-        if (err !== null && err !== void 0 && (_err$response5 = err.response) !== null && _err$response5 !== void 0 && _err$response5.data) {
+        if (err !== null && err !== void 0 && (_err$response6 = err.response) !== null && _err$response6 !== void 0 && _err$response6.data) {
           if (err.response.data.errors && typeof err.response.data.errors === 'object' && Object.keys(err.response.data.errors).length) {
             reject(err.response.data.errors);
             return;
@@ -1444,17 +1491,13 @@ var uploadSingleDocumnet = function uploadSingleDocumnet(payload) {
     });
   };
 };
 var uploadFileToS3 = function uploadFileToS3(presignedPostData, file) {
   return new Promise(function (resolve, reject) {
     var formData = new FormData();
     Object.keys(presignedPostData.fields).forEach(function (key) {
       formData.append(key, presignedPostData.fields[key]);
     });
     formData.append('file', file);
     axios.post(presignedPostData.url, formData, {
       headers: {
         'Content-Type': 'multipart/form-data'
@@ -1481,6 +1524,24 @@ var fetchUserDetails = function fetchUserDetails(payload) {
     });
   };
 };
+var makePrimaryAdmin = function makePrimaryAdmin(payload) {
+  return function (dispatch) {
+    return new Promise(function (resolve, reject) {
+      api$2.put(userAddEditUrl.primaryAdmin(payload.userId)).then(function (res) {
+        if (res) {
+          IUIToastMessageService$1.sNotify(res.data.message);
+          resolve();
+        } else {
+          reject(res);
+        }
+      })["catch"](function (err) {
+        var _err$response7, _err$response7$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response7 = err.response) === null || _err$response7 === void 0 ? void 0 : (_err$response7$data = _err$response7.data) === null || _err$response7$data === void 0 ? void 0 : _err$response7$data.message) || 'Opps, Something went wrong.');
+        reject(err);
+      });
+    });
+  };
+};
 var undoneSignUpRejection = function undoneSignUpRejection(userId) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
@@ -1493,8 +1554,29 @@ var undoneSignUpRejection = function undoneSignUpRejection(userId) {
         }));
         resolve();
       })["catch"](function (err) {
-        var _err$response6, _err$response6$data;
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response6 = err.response) === null || _err$response6 === void 0 ? void 0 : (_err$response6$data = _err$response6.data) === null || _err$response6$data === void 0 ? void 0 : _err$response6$data.message) || 'Opps, Something went wrong.');
+        var _err$response8, _err$response8$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response8 = err.response) === null || _err$response8 === void 0 ? void 0 : (_err$response8$data = _err$response8.data) === null || _err$response8$data === void 0 ? void 0 : _err$response8$data.message) || 'Opps, Something went wrong.');
+        reject(err);
+      });
+    });
+  };
+};
+var resetPasswordForUser = function resetPasswordForUser(data) {
+  return function (dispatch) {
+    return new Promise(function (resolve, reject) {
+      api$2.post("" + userAddEditUrl.resetPasswordForUserApi(), {
+        email: data.email
+      }).then(function (res) {
+        IUIToastMessageService$1.sNotify("The link to reset the password has been sent to the user's email address. Check your \"junk mail\" or \"spam\" folders in case it's not received.");
+        resolve();
+      })["catch"](function (err) {
+        var _err$response9, _err$response9$data;
+        if (!(err !== null && err !== void 0 && (_err$response9 = err.response) !== null && _err$response9 !== void 0 && (_err$response9$data = _err$response9.data) !== null && _err$response9$data !== void 0 && _err$response9$data.status)) {
+          var _err$response10, _err$response10$data, _err$response10$data$;
+          IUIToastMessageService$1.errNotify(err === null || err === void 0 ? void 0 : (_err$response10 = err.response) === null || _err$response10 === void 0 ? void 0 : (_err$response10$data = _err$response10.data) === null || _err$response10$data === void 0 ? void 0 : (_err$response10$data$ = _err$response10$data.message) === null || _err$response10$data$ === void 0 ? void 0 : _err$response10$data$.email[0]);
+          reject(err);
+          return;
+        }
         reject(err);
       });
     });
@@ -1514,9 +1596,9 @@ var updateUser = function updateUser(payload, userId, inputChangeLog) {
           reject(res.data.errors);
         }
       })["catch"](function (err) {
-        var _err$response7;
+        var _err$response13;
         var error = 'Opps, Something went error.';
-        if (err !== null && err !== void 0 && (_err$response7 = err.response) !== null && _err$response7 !== void 0 && _err$response7.data) {
+        if (err !== null && err !== void 0 && (_err$response13 = err.response) !== null && _err$response13 !== void 0 && _err$response13.data) {
           if (err.response.data.errors && typeof err.response.data.errors === 'object' && Object.keys(err.response.data.errors).length) {
             reject(err.response.data.errors);
             return;
@@ -1563,8 +1645,8 @@ var deletePaymentCard = function deletePaymentCard(payload) {
           reject(res);
         }
       })["catch"](function (err) {
-        var _err$response8, _err$response8$data;
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response8 = err.response) === null || _err$response8 === void 0 ? void 0 : (_err$response8$data = _err$response8.data) === null || _err$response8$data === void 0 ? void 0 : _err$response8$data.message) || 'Opps, Something went wrong.');
+        var _err$response14, _err$response14$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response14 = err.response) === null || _err$response14 === void 0 ? void 0 : (_err$response14$data = _err$response14.data) === null || _err$response14$data === void 0 ? void 0 : _err$response14$data.message) || 'Opps, Something went wrong.');
         reject(err);
       })["finally"](function () {
         dispatch(stopLoader());
@@ -1599,8 +1681,8 @@ var setDefaultPaymentCard = function setDefaultPaymentCard(payload) {
           reject(res);
         }
       })["catch"](function (err) {
-        var _err$response9, _err$response9$data;
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response9 = err.response) === null || _err$response9 === void 0 ? void 0 : (_err$response9$data = _err$response9.data) === null || _err$response9$data === void 0 ? void 0 : _err$response9$data.message) || 'Opps, Something went wrong.');
+        var _err$response15, _err$response15$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response15 = err.response) === null || _err$response15 === void 0 ? void 0 : (_err$response15$data = _err$response15.data) === null || _err$response15$data === void 0 ? void 0 : _err$response15$data.message) || 'Opps, Something went wrong.');
         reject(err);
       })["finally"](function () {
         dispatch(stopLoader());
@@ -1623,8 +1705,8 @@ var verifyUserInfo = function verifyUserInfo(userId) {
           reject(res);
         }
       })["catch"](function (err) {
-        var _err$response10, _err$response10$data;
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response10 = err.response) === null || _err$response10 === void 0 ? void 0 : (_err$response10$data = _err$response10.data) === null || _err$response10$data === void 0 ? void 0 : _err$response10$data.message) || 'Opps, Unable to fetch user info.');
+        var _err$response16, _err$response16$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response16 = err.response) === null || _err$response16 === void 0 ? void 0 : (_err$response16$data = _err$response16.data) === null || _err$response16$data === void 0 ? void 0 : _err$response16$data.message) || 'Opps, Unable to fetch user info.');
         setTimeout(function () {
           window.history.back();
         }, 1000);
@@ -1636,11 +1718,11 @@ var verifyUserInfo = function verifyUserInfo(userId) {
 var submitAddModalData = function submitAddModalData(tableName, data) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$2.post(userAddEditUrl.dropdownList() + ("?action=add&table=" + tableName), data).then(function (res) {
+      api$2.post(tableName === 'department' ? departmentUrl.departmentUrl() : userAddEditUrl.dropdownList() + ("?action=add&table=" + tableName), data).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
-        var _err$response11, _err$response11$data;
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response11 = err.response) === null || _err$response11 === void 0 ? void 0 : (_err$response11$data = _err$response11.data) === null || _err$response11$data === void 0 ? void 0 : _err$response11$data.message) || 'Opps, Something went wrong.');
+        var _err$response17, _err$response17$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response17 = err.response) === null || _err$response17 === void 0 ? void 0 : (_err$response17$data = _err$response17.data) === null || _err$response17$data === void 0 ? void 0 : _err$response17$data.message) || 'Opps, Something went wrong.');
         dispatch(stopLoader());
       });
     });
@@ -1650,7 +1732,6 @@ var rejectUserVerification = function rejectUserVerification(userId) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
       api$2.get(userAddEditUrl.rejectUserVerification(userId)).then(function (res) {
-        console.log(res);
         if (res.data.status === true) {
           resolve(res.data);
         } else {
@@ -1659,9 +1740,8 @@ var rejectUserVerification = function rejectUserVerification(userId) {
           reject(res);
         }
       })["catch"](function (err) {
-        var _err$response12, _err$response12$data;
-        console.log(err);
-        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response12 = err.response) === null || _err$response12 === void 0 ? void 0 : (_err$response12$data = _err$response12.data) === null || _err$response12$data === void 0 ? void 0 : _err$response12$data.message) || 'Opps, Unable to reject user.');
+        var _err$response18, _err$response18$data;
+        IUIToastMessageService$1.warningNotify((err === null || err === void 0 ? void 0 : (_err$response18 = err.response) === null || _err$response18 === void 0 ? void 0 : (_err$response18$data = _err$response18.data) === null || _err$response18$data === void 0 ? void 0 : _err$response18$data.message) || 'Opps, Unable to reject user.');
         reject(err);
       });
     });
@@ -1674,6 +1754,7 @@ var OPEN_DIALOG = 'OPEN_DIALOG';
 var CLOSE_DIALOG = 'CLOSE_DIALOG';
 var FETCH_USERPANEL_DATA = 'FETCH_USERPANEL_DATA';
 var UNASSIGNED_USERS = 'Not assigned';
+var FETCH_DEPARTMENT_USERS_DATA = 'FETCH_DEPARTMENT_USERS_DATA';
 var api$3 = configs.api;
 var IUIToastMessageService$2 = services.IUIToastMessageService;
@@ -1720,18 +1801,17 @@ var getUserPanalData = function getUserPanalData(params) {
     });
   };
 };
 var addRecord = function addRecord(tableName, data, getParam) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$3.post(userPanelUrl.addUnit(tableName), data).then(function (res) {
+      api$3.post(tableName === 'department' ? departmentUrl.departmentUrl() : userPanelUrl.addUnit(tableName), data).then(function (res) {
         dispatch(getUserPanalData(getParam));
         dispatch(closeDialog());
         resolve(res);
       })["catch"](function (err) {
-        var _err$response2, _err$response2$data;
+        var _err$response3, _err$response3$data;
         dispatch(userPanelStopLoader());
-        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.message) || 'Opps, Something went wrong.');
+        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.message) || 'Opps, Something went wrong.');
       });
     });
   };
@@ -1745,25 +1825,37 @@ var deleteRecord = function deleteRecord(tableName, id, getParam) {
         dispatch(userPanelStopLoader());
         resolve();
       })["catch"](function (err) {
-        var _err$response3, _err$response3$data;
-        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.message) || 'Opps, Something went wrong.');
+        var _err$response4, _err$response4$data;
+        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.message) || 'Opps, Something went wrong.');
         dispatch(userPanelStopLoader());
       });
     });
   };
 };
-var editRecord = function editRecord(tableName, data, getParam) {
+var editRecord = function editRecord(tableName, data, getParam, optionalParams) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$3.post(userPanelUrl.editUnit(tableName), data).then(function (res) {
-        dispatch(getUserPanalData(getParam));
-        dispatch(closeDialog());
-        resolve();
-      })["catch"](function (err) {
-        var _err$response4, _err$response4$data;
-        dispatch(userPanelStopLoader());
-        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.message) || 'Opps, Something went wrong.');
-      });
+      if (tableName === 'department') {
+        api$3.put(departmentUrl.departmentUrl() + "/" + optionalParams, data).then(function (res) {
+          dispatch(getUserPanalData(getParam));
+          dispatch(closeDialog());
+          resolve();
+        })["catch"](function (err) {
+          var _err$response5, _err$response5$data;
+          dispatch(userPanelStopLoader());
+          IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.message) || 'Opps, Something went wrong.');
+        });
+      } else {
+        api$3.post(userPanelUrl.editUnit(tableName), data).then(function (res) {
+          dispatch(getUserPanalData(getParam));
+          dispatch(closeDialog());
+          resolve();
+        })["catch"](function (err) {
+          var _err$response6, _err$response6$data;
+          dispatch(userPanelStopLoader());
+          IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response6 = err.response) === null || _err$response6 === void 0 ? void 0 : (_err$response6$data = _err$response6.data) === null || _err$response6$data === void 0 ? void 0 : _err$response6$data.message) || 'Opps, Something went wrong.');
+        });
+      }
     });
   };
 };
@@ -1775,8 +1867,8 @@ var moveRecord = function moveRecord(tableName, data, getParam) {
         dispatch(closeDialog());
         resolve(res);
       })["catch"](function (err) {
-        var _err$response5, _err$response5$data;
-        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.message) || 'Opps, Something went wrong.');
+        var _err$response7, _err$response7$data;
+        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response7 = err.response) === null || _err$response7 === void 0 ? void 0 : (_err$response7$data = _err$response7.data) === null || _err$response7$data === void 0 ? void 0 : _err$response7$data.message) || 'Opps, Something went wrong.');
       });
     });
   };
@@ -2264,7 +2356,6 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
       setOpenEditAproverModalFlag(false);
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: (styles.headingPadding)
@@ -2412,8 +2503,7 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     headerText: "Edit approver field",
     cancelLabel: "Cancel",
     submitLabel: "Save",
-    submitHandler: handleEditAproverLabel
-    ,
+    submitHandler: handleEditAproverLabel,
     width: "420px",
     modalBodyStyle: {
       maxHeight: '600px',
@@ -2969,7 +3059,7 @@ var workInfo = [{
   },
   disableText: 'Please get in touch with your administrator to change this value.'
 }, {
-  id: 7,
+  id: 9,
   label: 'Base location',
   name: 'base_location',
   required: false,
@@ -2994,7 +3084,7 @@ var workInfo = [{
   },
   disableText: 'Please get in touch with your administrator to change this value.'
 }, {
-  id: 7,
+  id: 10,
   label: 'Default currency',
   name: 'currency',
   required: false,
@@ -3008,7 +3098,7 @@ var workInfo = [{
   tooltip: 'This only changes the currency for this user',
   disableText: 'Please get in touch with your administrator to change this value.'
 }, {
-  id: 8,
+  id: 11,
   empty: true
 }];
 var products = [{
@@ -3378,6 +3468,7 @@ var userAddPageFormLabels = {
     business_unit: 'Business unit',
     department: 'Department',
     designation: 'Designation',
+    manager: 'Manager',
     base_location: 'Base location',
     currency: 'Default currency'
   },
@@ -3802,7 +3893,6 @@ var reducer$1 = function reducer(state, action) {
             _userListInfo.results[i].is_active = action.payload.is_active;
           }
         });
         var _deactivatedUsers = _userListInfo.results.length > 0 ? _userListInfo.results.filter(function (val) {
           return !val.is_active;
         }).map(function (obj) {
@@ -3825,7 +3915,6 @@ var reducer$1 = function reducer(state, action) {
             }
           });
         });
         var _deactivatedUsers2 = _userListInfo2.results.length > 0 ? _userListInfo2.results.filter(function (val) {
           return !val.is_active;
         }).map(function (obj) {
@@ -3879,6 +3968,7 @@ var initialState$2 = {
     previous: null,
     results: []
   },
+  deptUsers: [],
   loading: false
 };
 var reducer$2 = function reducer(state, action) {
@@ -3948,6 +4038,12 @@ var reducer$2 = function reducer(state, action) {
           loading: false
         });
       }
+    case FETCH_DEPARTMENT_USERS_DATA:
+      {
+        return _extends({}, state, {
+          deptUsers: action.payload
+        });
+      }
     default:
       return state;
   }
@@ -4134,8 +4230,7 @@ var rootReducer = combineReducers({
   customFields: reducer$5
 });
-var store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)
-));
+var store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
 function withStore(Component) {
   function WrappedComponent(props) {
@@ -4678,8 +4773,7 @@ function AddPanelDialog(_ref) {
     flexDirection: "column",
     padding: "8px 20px"
   }, /*#__PURE__*/React.createElement(IUIInput, {
-    label: name + " name"
-    ,
+    label: name + " name",
     name: "name",
     defaultValue: "",
     onValueChange: onValueChange,
@@ -4728,6 +4822,7 @@ var UserAddEdit = function UserAddEdit(props) {
     isILadmin = _useSelector2.isILadmin,
     companyName = _useSelector2.companyName;
   var history = useHistory();
+  var location = useLocation();
   var _useState = useState({
       travel: false,
       expense: false
@@ -4763,7 +4858,6 @@ var UserAddEdit = function UserAddEdit(props) {
     }
     setProductAccess(_productAccess);
   };
   var _useState2 = useState({
       first_name: '',
       last_name: '',
@@ -4984,8 +5078,19 @@ var UserAddEdit = function UserAddEdit(props) {
   var onAddModalClose = function onAddModalClose() {
     setAddModalData(_extends({}, defaultAddModalData));
   };
+  useEffect(function () {
+    var _location$state, _location$state2;
+    if (location !== null && location !== void 0 && (_location$state = location.state) !== null && _location$state !== void 0 && _location$state.id && location !== null && location !== void 0 && (_location$state2 = location.state) !== null && _location$state2 !== void 0 && _location$state2.name) {
+      var _location$state3, _location$state4;
+      setEmployeeInfoInput(_extends({}, employeeInfoInput, {
+        department: {
+          value: location === null || location === void 0 ? void 0 : (_location$state3 = location.state) === null || _location$state3 === void 0 ? void 0 : _location$state3.id,
+          label: location === null || location === void 0 ? void 0 : (_location$state4 = location.state) === null || _location$state4 === void 0 ? void 0 : _location$state4.name
+        }
+      }));
+    }
+  }, []);
   var onModalOpen = function onModalOpen(e, id) {
-    console.log('onModalOpen', e, id);
     var title = '';
     if (id === 'entity') {
       title = 'Entity';
@@ -5010,23 +5115,42 @@ var UserAddEdit = function UserAddEdit(props) {
       }));
     } else {
       dispatch(showLoader());
-      dispatch(submitAddModalData(addModalData.id, {
-        names: [validatedValue]
-      })).then(function (res) {
-        var _extends2;
+      var dataObj;
+      if (addModalData.id === 'department') {
+        dataObj = {
+          name: validatedValue,
+          department_head_id: null
+        };
+      } else {
+        dataObj = {
+          names: [validatedValue]
+        };
+      }
+      dispatch(submitAddModalData(addModalData.id, dataObj)).then(function (res) {
+        var _extends4;
         setAddModalData(_extends({}, addModalData, {
           isOpen: false
         }));
         IUIToastMessageService$4.sNotify(addModalData.title + " added successfully.");
         var tempKey = addModalData.id === 'employee_level' ? 'emp_level' : addModalData.id;
-        setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends2 = {}, _extends2[tempKey] = {
-          value: res.data.value,
-          label: res.data.label
-        }, _extends2)));
+        if (addModalData.id === 'department') {
+          var _extends2;
+          setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends2 = {}, _extends2[tempKey] = {
+            value: res.data.result.id,
+            label: res.data.result.name
+          }, _extends2)));
+        } else {
+          var _extends3;
+          setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends3 = {}, _extends3[tempKey] = {
+            value: res.data.value,
+            label: res.data.label
+          }, _extends3)));
+        }
+        updateInputChangeLog(_extends({}, inputChangeLog, (_extends4 = {}, _extends4[tempKey] = true, _extends4)));
         asyncSelectRefs.current[tempKey].current.blur();
         clearCacheForAsyncDropdown(function (prevState) {
-          var _extends3;
-          return _extends({}, prevState, (_extends3 = {}, _extends3[tempKey] = prevState[tempKey] + 1, _extends3));
+          var _extends5;
+          return _extends({}, prevState, (_extends5 = {}, _extends5[tempKey] = prevState[tempKey] + 1, _extends5));
         });
         dispatch(stopLoader());
       });
@@ -5043,10 +5167,10 @@ var UserAddEdit = function UserAddEdit(props) {
   };
   var onPersonalInfoChange = function onPersonalInfoChange(args) {
     try {
-      var _temp6 = function _temp6() {
+      var _temp5 = function _temp5() {
         if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-          var _extends4;
-          updateInputChangeLog(_extends({}, inputChangeLog, (_extends4 = {}, _extends4[_name] = true, _extends4)));
+          var _extends6;
+          updateInputChangeLog(_extends({}, inputChangeLog, (_extends6 = {}, _extends6[_name] = true, _extends6)));
         }
       };
       var _name = args._name,
@@ -5057,7 +5181,7 @@ var UserAddEdit = function UserAddEdit(props) {
         _errorMsg = _args$_errorMsg === void 0 ? '' : _args$_errorMsg,
         _args$_obj = args._obj,
         _obj = _args$_obj === void 0 ? {} : _args$_obj;
-      var _temp7 = function () {
+      var _temp4 = function () {
         if (_name === 'contact_number') {
           setPersonalInfoInput(_extends({}, personalInfoInput, {
             contact_number: _value.trim(),
@@ -5068,14 +5192,14 @@ var UserAddEdit = function UserAddEdit(props) {
           updateError('country_code', _isError, _errorMsg);
           updateError('contact_country_code', _isError, _errorMsg);
         } else {
-          var _temp8 = function _temp8() {
-            var _extends5;
-            setPersonalInfoInput(_extends({}, personalInfoInput, (_extends5 = {}, _extends5[_name] = _value, _extends5)));
+          var _temp3 = function _temp3() {
+            var _extends7;
+            setPersonalInfoInput(_extends({}, personalInfoInput, (_extends7 = {}, _extends7[_name] = _value, _extends7)));
             updateError(_name, _isError, _errorMsg);
           };
-          var _temp9 = function () {
+          var _temp2 = function () {
             if (_name === 'profile_pic') {
-              var _temp10 = function () {
+              var _temp = function () {
                 if (_obj.isUpload) {
                   return Promise.resolve(uploadDocs(_value, _name)).then(function (docsData) {
                     _value = _value.map(function (_val) {
@@ -5106,28 +5230,32 @@ var UserAddEdit = function UserAddEdit(props) {
                   setProfilePicDelete([].concat(profilePicDelete, _deletedFiles));
                 }
               }();
-              if (_temp10 && _temp10.then) return _temp10.then(function () {});
+              if (_temp && _temp.then) return _temp.then(function () {});
             }
           }();
-          return _temp9 && _temp9.then ? _temp9.then(_temp8) : _temp8(_temp9);
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
         }
       }();
-      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var onEmployeeInfoChange = function onEmployeeInfoChange(args) {
-    var _extends6;
+    var _extends8;
     var _name = args._name,
       _value = args._value,
       _isError = args._isError,
       _errorMsg = args._errorMsg;
-    setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends6 = {}, _extends6[_name] = _value, _extends6)));
+    console.log({
+      _name: _name,
+      _value: _value
+    });
+    setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends8 = {}, _extends8[_name] = _value, _extends8)));
     updateError(_name, _isError, _errorMsg);
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends7;
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends7 = {}, _extends7[_name] = true, _extends7)));
+      var _extends9;
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends9 = {}, _extends9[_name] = true, _extends9)));
     }
   };
   var getUserTagTypeId = function getUserTagTypeId(name) {
@@ -5137,9 +5265,9 @@ var UserAddEdit = function UserAddEdit(props) {
     return tag.id;
   };
   var onUserTagTypeChange = function onUserTagTypeChange(args) {
-    var _extends8;
+    var _extends10;
     var e = args._event;
-    setUserTagType(_extends({}, userTagType, (_extends8 = {}, _extends8[e.target.name] = userTagType[e.target.name] ? false : getUserTagTypeId(e.target.name), _extends8)));
+    setUserTagType(_extends({}, userTagType, (_extends10 = {}, _extends10[e.target.name] = userTagType[e.target.name] ? false : getUserTagTypeId(e.target.name), _extends10)));
     if (Object.hasOwnProperty.call(inputChangeLog, 'userTagType')) {
       updateInputChangeLog(_extends({}, inputChangeLog, {
         userTagType: true
@@ -5147,30 +5275,27 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   };
   var onCustomFieldsChange = function onCustomFieldsChange(_ref2) {
-    var _extends9;
+    var _extends11;
     var _name = _ref2._name,
       _value = _ref2._value;
-    setCustomFieldsInput(_extends({}, customFieldsInput, (_extends9 = {}, _extends9[_name] = _value, _extends9)));
+    setCustomFieldsInput(_extends({}, customFieldsInput, (_extends11 = {}, _extends11[_name] = _value, _extends11)));
   };
   var onTravelApproversInputChange = function onTravelApproversInputChange(_ref3) {
-    var _extends10;
+    var _extends12;
     var _name = _ref3._name,
       _value = _ref3._value;
-    setTravelApproversInput(_extends({}, travelApproversInput, (_extends10 = {}, _extends10[_name] = _value, _extends10)));
+    console.log(_name, _value, 'travel');
+    setTravelApproversInput(_extends({}, travelApproversInput, (_extends12 = {}, _extends12[_name] = _value, _extends12)));
   };
   var onExpenseApproversInputChange = function onExpenseApproversInputChange(_ref4) {
-    var _extends11;
+    var _extends13;
     var _name = _ref4._name,
       _value = _ref4._value;
-    setExpenseApproversInput(_extends({}, expenseApproversInput, (_extends11 = {}, _extends11[_name] = _value, _extends11)));
+    setExpenseApproversInput(_extends({}, expenseApproversInput, (_extends13 = {}, _extends13[_name] = _value, _extends13)));
   };
   var onMemInfoInputChange = function onMemInfoInputChange(index, key, val) {
     var _membershipInfoInput = [].concat(membershipInfoInput);
-    if (_membershipInfoInput[index].membership_type === 'flight' && key === 'name') {
-      _membershipInfoInput[index][key] = val.label;
-    } else {
-      _membershipInfoInput[index][key] = val;
-    }
+    _membershipInfoInput[index][key] = val;
     _membershipInfoInput[index].isEditMode = isEditMode;
     setMembershipInfoInput(_membershipInfoInput);
   };
@@ -5200,39 +5325,39 @@ var UserAddEdit = function UserAddEdit(props) {
     setMembershipInfoInput(_membershipInfoInputTemp);
   };
   var travelPreferenceOnChange = function travelPreferenceOnChange(args) {
-    var _extends12;
+    var _extends14;
     var _name = args._name,
       _value = args._value,
       _isError = args._isError,
       _errorMsg = args._errorMsg;
-    settravelPreferenceInfo(_extends({}, travelPreferenceInfo, (_extends12 = {}, _extends12[_name] = _value, _extends12)));
+    settravelPreferenceInfo(_extends({}, travelPreferenceInfo, (_extends14 = {}, _extends14[_name] = _value, _extends14)));
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends13;
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends13 = {}, _extends13[_name] = true, _extends13)));
+      var _extends15;
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends15 = {}, _extends15[_name] = true, _extends15)));
     }
     updateError(_name, _isError, _errorMsg);
   };
   var onSecureTraveelerInfoInputChange = function onSecureTraveelerInfoInputChange(args) {
-    var _extends14;
+    var _extends16;
     var _name = args._name,
       _value = args._value,
       _isError = args._isError,
       _errorMsg = args._errorMsg;
-    setSecureTravelInputInfo(_extends({}, secureTravelInputInfo, (_extends14 = {}, _extends14[_name] = _value, _extends14)));
+    setSecureTravelInputInfo(_extends({}, secureTravelInputInfo, (_extends16 = {}, _extends16[_name] = _value, _extends16)));
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends15;
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends15 = {}, _extends15[_name] = true, _extends15)));
+      var _extends17;
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends17 = {}, _extends17[_name] = true, _extends17)));
     }
     updateError(_name, _isError, _errorMsg);
   };
   var onPassportInfoInputChange = function onPassportInfoInputChange(args) {
     try {
-      var _temp14 = function _temp14() {
-        var _extends16;
-        setPassportInfoInput(_extends({}, passportInfoInput, (_extends16 = {}, _extends16[_name] = _value, _extends16)));
+      var _temp8 = function _temp8() {
+        var _extends18;
+        setPassportInfoInput(_extends({}, passportInfoInput, (_extends18 = {}, _extends18[_name] = _value, _extends18)));
         if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-          var _extends17;
-          updateInputChangeLog(_extends({}, inputChangeLog, (_extends17 = {}, _extends17[_name] = true, _extends17)));
+          var _extends19;
+          updateInputChangeLog(_extends({}, inputChangeLog, (_extends19 = {}, _extends19[_name] = true, _extends19)));
         }
         updateError(_name, _isError, _errorMsg);
       };
@@ -5270,9 +5395,9 @@ var UserAddEdit = function UserAddEdit(props) {
         }
         return Promise.resolve();
       }
-      var _temp15 = function () {
+      var _temp7 = function () {
         if (_name === 'passport_photo' || _name === 'travel_docs') {
-          var _temp16 = function () {
+          var _temp6 = function () {
             if (_obj.isUpload) {
               var checkAlreadyUploadedFiles = uploadedFiles.filter(function (_file) {
                 if (_name === 'passport_photo') {
@@ -5316,10 +5441,10 @@ var UserAddEdit = function UserAddEdit(props) {
               setFilesForDelete([].concat(filesForDelete, _deletedFiles));
             }
           }();
-          if (_temp16 && _temp16.then) return _temp16.then(function () {});
+          if (_temp6 && _temp6.then) return _temp6.then(function () {});
         }
       }();
-      return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(_temp14) : _temp14(_temp15));
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -5338,8 +5463,8 @@ var UserAddEdit = function UserAddEdit(props) {
       return _errorArray;
     });
     setErrorMsgs(function (prevState) {
-      var _extends18;
-      return _extends({}, prevState, (_extends18 = {}, _extends18[_name] = _errorMsg, _extends18));
+      var _extends20;
+      return _extends({}, prevState, (_extends20 = {}, _extends20[_name] = _errorMsg, _extends20));
     });
   };
   var dispatch = useDispatch();
@@ -5598,7 +5723,6 @@ var UserAddEdit = function UserAddEdit(props) {
               required: true
             }
           }));
           var _productAccess = _extends({}, productAccess);
           renderFields.products.forEach(function (product) {
             _productAccess[product.name] = true;
@@ -5646,7 +5770,7 @@ var UserAddEdit = function UserAddEdit(props) {
   }, [renderFields.expenseApprovers]);
   var uploadDocs = function uploadDocs(docToUpload, type) {
     try {
-      var _temp19 = function _temp19() {
+      var _temp10 = function _temp10() {
         setUploadedFiles([].concat(uploadedFiles, data));
         dispatch(stopLoader());
         return data;
@@ -5662,12 +5786,12 @@ var UserAddEdit = function UserAddEdit(props) {
           userID: editUserId
         });
       });
-      var _temp20 = _forTo(docs, function (i) {
+      var _temp9 = _forTo(docs, function (i) {
         return Promise.resolve(dispatch(uploadSingleDocumnet(docs[i]))).then(function (res) {
           data.push(res);
         });
       });
-      return Promise.resolve(_temp20 && _temp20.then ? _temp20.then(_temp19) : _temp19(_temp20));
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -5795,8 +5919,7 @@ var UserAddEdit = function UserAddEdit(props) {
           }
           _errorMsgs.passport_issue_date = '';
         }
-        if (passportInfoInput.passport_photo.length === 0 && userTravelInfo.file_name === false &&
-        fieldsVisibility.user_travel_info.file_name !== 2) {
+        if (passportInfoInput.passport_photo.length === 0 && userTravelInfo.file_name === false && fieldsVisibility.user_travel_info.file_name !== 2) {
           _isError = true;
           if (_errorArray.indexOf('passport_photo') === -1) {
             _errorArray.push('passport_photo');
@@ -5808,8 +5931,7 @@ var UserAddEdit = function UserAddEdit(props) {
           }
           _errorMsgs.passport_photo = '';
         }
-        if (passportInfoInput.travel_docs.length === 0 && userTravelInfo.file_name === false &&
-        fieldsVisibility.user_travel_info.file_name !== 2) {
+        if (passportInfoInput.travel_docs.length === 0 && userTravelInfo.file_name === false && fieldsVisibility.user_travel_info.file_name !== 2) {
           _isError = true;
           if (_errorArray.indexOf('travel_docs') === -1) {
             _errorArray.push('travel_docs');
@@ -5825,27 +5947,28 @@ var UserAddEdit = function UserAddEdit(props) {
       if (_isError) {
         setErrorArray(_errorArray);
         setErrorMsgs(_errorMsgs);
-        for (var _key3 in _errorMsgs) {
+        var _loop = function _loop() {
           if (Object.hasOwnProperty.call(_errorMsgs, _key3)) {
             if (_errorMsgs[_key3]) {
-              var _ret = function () {
-                if (_key3 in passportInfoInput || _key3 in travelPreferenceInfo || _key3 in secureTravelInputInfo) {
-                  setAdditionalInfoFlag('open');
-                }
-                var el = document.getElementById(_key3 === 'country_code' || _key3 === 'contact_country_code' ? 'contact_number' : _key3);
-                if (el) {
-                  setTimeout(function () {
-                    el.scrollIntoView({
-                      behavior: 'smooth',
-                      block: 'center'
-                    });
-                  }, 500);
-                  return "break";
-                }
-              }();
-              if (_ret === "break") break;
+              if (_key3 in passportInfoInput || _key3 in travelPreferenceInfo || _key3 in secureTravelInputInfo) {
+                setAdditionalInfoFlag('open');
+              }
+              var el = document.getElementById(_key3 === 'country_code' || _key3 === 'contact_country_code' ? 'contact_number' : _key3);
+              if (el) {
+                setTimeout(function () {
+                  el.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                  });
+                }, 500);
+                return "break";
+              }
             }
           }
+        };
+        for (var _key3 in _errorMsgs) {
+          var _ret = _loop();
+          if (_ret === "break") break;
         }
         return Promise.resolve();
       }
@@ -5859,6 +5982,8 @@ var UserAddEdit = function UserAddEdit(props) {
             var _config$routes2, _config$routes2$users, _config$routes2$users2;
             (config === null || config === void 0 ? void 0 : (_config$routes2 = config.routes) === null || _config$routes2 === void 0 ? void 0 : (_config$routes2$users = _config$routes2.users) === null || _config$routes2$users === void 0 ? void 0 : (_config$routes2$users2 = _config$routes2$users.list) === null || _config$routes2$users2 === void 0 ? void 0 : _config$routes2$users2.path) && history.push(config.routes.users.list.path);
           }
+          setFilesForDelete([]);
+          setProfilePicDelete([]);
         })["catch"](function (err) {
           if (typeof err === 'object') {
             if (err.country_code) {
@@ -5873,27 +5998,28 @@ var UserAddEdit = function UserAddEdit(props) {
             }
             setErrorArray(Object.keys(err));
             setErrorMsgs(err);
-            for (var _key4 in err) {
+            var _loop2 = function _loop2() {
               if (Object.hasOwnProperty.call(err, _key4)) {
                 if (err[_key4]) {
-                  var _ret2 = function () {
-                    if (_key4 in passportInfoInput || _key4 in travelPreferenceInfo || _key4 in secureTravelInputInfo) {
-                      setAdditionalInfoFlag('open');
-                    }
-                    var el = document.getElementById(_key4 === 'country_code' || _key4 === 'contact_country_code' ? 'contact_number' : _key4);
-                    if (el) {
-                      setTimeout(function () {
-                        el.scrollIntoView({
-                          behavior: 'smooth',
-                          block: 'center'
-                        });
-                      }, 500);
-                      return "break";
-                    }
-                  }();
-                  if (_ret2 === "break") break;
+                  if (_key4 in passportInfoInput || _key4 in travelPreferenceInfo || _key4 in secureTravelInputInfo) {
+                    setAdditionalInfoFlag('open');
+                  }
+                  var el = document.getElementById(_key4 === 'country_code' || _key4 === 'contact_country_code' ? 'contact_number' : _key4);
+                  if (el) {
+                    setTimeout(function () {
+                      el.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                      });
+                    }, 500);
+                    return "break";
+                  }
                 }
               }
+            };
+            for (var _key4 in err) {
+              var _ret2 = _loop2();
+              if (_ret2 === "break") break;
             }
           } else if (typeof err === 'string') {
             IUIToastMessageService$4.warningNotify(err);
@@ -5922,27 +6048,28 @@ var UserAddEdit = function UserAddEdit(props) {
             }
             setErrorArray(Object.keys(err));
             setErrorMsgs(err);
-            for (var _key5 in err) {
+            var _loop3 = function _loop3() {
               if (Object.hasOwnProperty.call(err, _key5)) {
                 if (err[_key5]) {
-                  var _ret3 = function () {
-                    if (_key5 in passportInfoInput || _key5 in travelPreferenceInfo || _key5 in secureTravelInputInfo) {
-                      setAdditionalInfoFlag('open');
-                    }
-                    var el = document.getElementById(_key5 === 'country_code' || _key5 === 'contact_country_code' ? 'contact_number' : _key5);
-                    if (el) {
-                      setTimeout(function () {
-                        el.scrollIntoView({
-                          behavior: 'smooth',
-                          block: 'center'
-                        });
-                      }, 500);
-                      return "break";
-                    }
-                  }();
-                  if (_ret3 === "break") break;
+                  if (_key5 in passportInfoInput || _key5 in travelPreferenceInfo || _key5 in secureTravelInputInfo) {
+                    setAdditionalInfoFlag('open');
+                  }
+                  var el = document.getElementById(_key5 === 'country_code' || _key5 === 'contact_country_code' ? 'contact_number' : _key5);
+                  if (el) {
+                    setTimeout(function () {
+                      el.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                      });
+                    }, 500);
+                    return "break";
+                  }
                 }
               }
+            };
+            for (var _key5 in err) {
+              var _ret3 = _loop3();
+              if (_ret3 === "break") break;
             }
           } else if (typeof err === 'string') {
             IUIToastMessageService$4.warningNotify(err);
@@ -5967,8 +6094,7 @@ var UserAddEdit = function UserAddEdit(props) {
           window.location.href = config.routes.profile.redirectUrl.cancel;
         }
       }
-    }
-    else {
+    } else {
       var _config$routes4, _config$routes4$users, _config$routes4$users2;
       (config === null || config === void 0 ? void 0 : (_config$routes4 = config.routes) === null || _config$routes4 === void 0 ? void 0 : (_config$routes4$users = _config$routes4.users) === null || _config$routes4$users === void 0 ? void 0 : (_config$routes4$users2 = _config$routes4$users.list) === null || _config$routes4$users2 === void 0 ? void 0 : _config$routes4$users2.path) && history.push(config.routes.users.list.path);
     }
@@ -6001,7 +6127,6 @@ var UserAddEdit = function UserAddEdit(props) {
               var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
               return dt.getDate() + " " + months[dt.getMonth()] + " " + dt.getFullYear();
             }(),
             gender: function () {
               if (res.gender === 'male') return 'Male';else if (res.gender === 'female') return 'Female';else if (res.gender === 'others') return 'Others';else return '';
             }()
@@ -6046,7 +6171,6 @@ var UserAddEdit = function UserAddEdit(props) {
             }()
           });
         });
         if (res.client_admin) {
           setTravelApproversInput(function (prevState) {
             var nextState = _extends({}, prevState);
@@ -6080,7 +6204,6 @@ var UserAddEdit = function UserAddEdit(props) {
       });
     }
   };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles.UUIUserManagementAddEdit
@@ -6097,8 +6220,7 @@ var UserAddEdit = function UserAddEdit(props) {
     className: styles.breadcrumb
   }, /*#__PURE__*/React.createElement(IUIBreadCrumb, {
     breadCrumbs: [{
-      href:
-      config.routes.users.list.path,
+      href: config.routes.users.list.path,
       label: 'Users',
       hasLink: true
     }]
@@ -6167,6 +6289,9 @@ var UserAddEdit = function UserAddEdit(props) {
     if (!p.visibility) {
       return null;
     }
+    if (p.name === 'profile_pic' && config.env.isExpenseProduct) {
+      return null;
+    }
     return /*#__PURE__*/React.createElement(IUIGrid, {
       item: true,
       sm: 12,
@@ -6319,6 +6444,9 @@ var UserAddEdit = function UserAddEdit(props) {
     addFields: function addFields() {
       return dispatch(addTravelApproverField());
     },
+    addManager: function addManager() {
+      return dispatch(addManagerApproverField);
+    },
     onRoleChange: function onRoleChange(_ref5) {
       var _value = _ref5._value;
       return setTravelRole(_value);
@@ -6360,6 +6488,9 @@ var UserAddEdit = function UserAddEdit(props) {
     addFields: function addFields() {
       return dispatch(addExpenseApproverField());
     },
+    addManager: function addManager() {
+      return dispatch(addManagerApproverField);
+    },
     onRoleChange: function onRoleChange(_ref6) {
       var _value = _ref6._value;
       return setExpenseRole(_value);
@@ -6539,17 +6670,13 @@ var uploadBulkUsersFile = function uploadBulkUsersFile(payload) {
     });
   };
 };
 var uploadFileToS3$1 = function uploadFileToS3(presignedPostData, file) {
   return new Promise(function (resolve, reject) {
     var formData = new FormData();
     Object.keys(presignedPostData.fields).forEach(function (key) {
       formData.append(key, presignedPostData.fields[key]);
     });
     formData.append('file', file);
     axios.post(presignedPostData.url, formData, {
       headers: {
         'Content-Type': 'multipart/form-data'
@@ -6666,7 +6793,7 @@ var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   };
 };
-var styles$5 = {"UUIUserManagementList":"_3WNHx","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
+var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","deactivateAlert":"_3hvWz","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -6735,7 +6862,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
           file: doc
         });
       });
-      var _temp2 = _forTo(docs, function (i) {
+      var _temp = _forTo(docs, function (i) {
         return Promise.resolve(dispatch(uploadBulkUsersFile(docs[i]))).then(function (res) {
           return Promise.resolve(dispatch(validateUploadedFile(res.user_file_name)).then(function (validatedRes) {
             if (validatedRes.data.status) {
@@ -6775,7 +6902,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
           })).then(function () {});
         });
       });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -6950,7 +7077,6 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     setOpenImportUsersModal(false);
     handleImportPagenavigation(jobId);
   };
   var handleDownloadRecords = function handleDownloadRecords(type) {
     try {
       setDownlStatus(true);
@@ -7926,6 +8052,120 @@ var BulkDownloadIcon = function BulkDownloadIcon(props) {
   }));
 };
+var classes = {"containedBtn":"_2A4_u","customMiniBox":"_QGIKG","muiBtn":"_3iFbO","outlinedBtn":"_3lQYD","menuList":"_1C8bJ","menuListContainer":"_1N83W","menuItemContainer":"_3VtcE","menuItemtext":"_2xqnU","subTxt":"_3CVzX"};
+var DropdownBtn = function DropdownBtn(props) {
+  var _clsx;
+  var _props$buttonText = props.buttonText,
+    buttonText = _props$buttonText === void 0 ? '' : _props$buttonText,
+    _props$disableRipple = props.disableRipple,
+    disableRipple = _props$disableRipple === void 0 ? true : _props$disableRipple,
+    _props$onClickHandler = props.onClickHandler,
+    onClickHandler = _props$onClickHandler === void 0 ? function () {} : _props$onClickHandler,
+    _props$menuListInfo = props.menuListInfo,
+    menuListInfo = _props$menuListInfo === void 0 ? [] : _props$menuListInfo,
+    _props$endIcon = props.endIcon,
+    endIcon = _props$endIcon === void 0 ? /*#__PURE__*/React.createElement(ExpandMoreIcon, {
+      width: "10",
+      height: "10"
+    }) : _props$endIcon,
+    _props$outlinedBtn = props.outlinedBtn,
+    outlinedBtn = _props$outlinedBtn === void 0 ? true : _props$outlinedBtn,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'auto-center' : _props$placement,
+    className = props.className,
+    menuListClass = props.menuListClass;
+  var _React$useState = React.useState(false),
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
+  var anchorRef = React.useRef(null);
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  };
+  var handleClose = function handleClose(event) {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+    onClickHandler(event);
+  };
+  var handleListKeyDown = function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  var handleMenuClick = function handleMenuClick(val) {
+    setOpen(false);
+    if (val.disable) return false;
+    if (val.handler && typeof val.handler === 'function') val.handler();
+  };
+  var prevOpen = React.useRef(open);
+  React.useEffect(function () {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+    prevOpen.current = open;
+  }, [open]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    endIcon: endIcon,
+    className: clsx(classes.muiBtn, className, (_clsx = {}, _clsx[classes.outlinedBtn] = outlinedBtn, _clsx)),
+    disableRipple: disableRipple,
+    variant: "outlined",
+    ref: anchorRef,
+    "aria-controls": open ? 'menu-list-grow' : undefined,
+    "aria-haspopup": "true",
+    onClick: handleToggle
+  }, buttonText), /*#__PURE__*/React.createElement(Popper, {
+    open: open,
+    anchorEl: anchorRef.current,
+    role: undefined,
+    transition: true,
+    disablePortal: true,
+    style: {
+      zIndex: '9'
+    },
+    placement: placement
+  }, function (_ref) {
+    var _clsx2;
+    var TransitionProps = _ref.TransitionProps,
+      placement = _ref.placement;
+    return /*#__PURE__*/React.createElement(Grow, _extends({}, TransitionProps, {
+      style: {
+        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+      }
+    }), /*#__PURE__*/React.createElement(Paper, {
+      className: classes.menuListContainer,
+      elevation: 0
+    }, /*#__PURE__*/React.createElement(ClickAwayListener, {
+      onClickAway: handleClose
+    }, /*#__PURE__*/React.createElement(MenuList, {
+      autoFocusItem: open,
+      className: clsx(classes.menuList, (_clsx2 = {}, _clsx2[classes.outlinedBtn] = outlinedBtn, _clsx2), menuListClass),
+      id: "menu-list-grow",
+      onKeyDown: function onKeyDown(e) {
+        return handleListKeyDown(e);
+      }
+    }, menuListInfo.map(function (val, _i) {
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        onClick: function onClick() {
+          return handleMenuClick(val);
+        },
+        key: _i,
+        className: clsx(classes.menuItemContainer, val.disable && 'iui__cursor-not-allowed'),
+        disableRipple: true
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: clsx(classes.menuItemtext, val && val.disable && 'iui__opacity--60')
+      }, val.label), val.subText && /*#__PURE__*/React.createElement(IUITypography, {
+        variant: "subtitle2",
+        className: clsx(classes.menuItemtext, classes.subTxt)
+      }, val.subText));
+    })))));
+  }));
+};
 var AntSwitch = withStyles(function (theme) {
   return {
     root: {
@@ -7976,6 +8216,10 @@ var StickyHeadTable = function StickyHeadTable(props) {
     selected = props.selected,
     _props$handleSingleCh = props.handleSingleCheckBoxClick,
     handleSingleCheckBoxClick = _props$handleSingleCh === void 0 ? function () {} : _props$handleSingleCh,
+    _props$onResetPasswor = props.onResetPasswordHandler,
+    onResetPasswordHandler = _props$onResetPasswor === void 0 ? function () {} : _props$onResetPasswor,
+    _props$toggleInviteMo = props.toggleInviteModal,
+    toggleInviteModal = _props$toggleInviteMo === void 0 ? function () {} : _props$toggleInviteMo,
     orderBy = props.orderBy,
     order = props.order,
     _props$onRequestSort = props.onRequestSort,
@@ -7984,11 +8228,30 @@ var StickyHeadTable = function StickyHeadTable(props) {
     onSearchHandler = _props$onSearchHandle === void 0 ? function () {} : _props$onSearchHandle,
     _props$onEditHandler = props.onEditHandler,
     onEditHandler = _props$onEditHandler === void 0 ? function () {} : _props$onEditHandler,
+    _props$onPrimaryAdmin = props.onPrimaryAdminHandler,
+    onPrimaryAdminHandler = _props$onPrimaryAdmin === void 0 ? function () {} : _props$onPrimaryAdmin,
     _props$isDataFetching = props.isDataFetching,
     isDataFetching = _props$isDataFetching === void 0 ? false : _props$isDataFetching,
     _props$disableRowChec = props.disableRowCheckbox,
     disableRowCheckbox = _props$disableRowChec === void 0 ? false : _props$disableRowChec,
-    searchValue = props.searchValue;
+    searchValue = props.searchValue,
+    _props$isILadmin = props.isILadmin,
+    isILadmin = _props$isILadmin === void 0 ? false : _props$isILadmin;
+  var useStyles = makeStyles(function (theme) {
+    return {
+      tooltip: {
+        background: '#1F2937',
+        fontSize: '14px',
+        color: '#ffffff',
+        padding: '12px 16px',
+        borderRadius: '6px'
+      },
+      arrow: {
+        color: '#1F2937'
+      }
+    };
+  });
+  var classes = useStyles();
   var columns = [{
     id: 'first_name',
     label: 'Name',
@@ -7999,8 +8262,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIProfileBox, {
         firstName: row.first_name,
         lastName: row.last_name,
-        isLetterAvatar:
-        row.profile_pic && row.profile_pic.presigned_url ? false : true,
+        isLetterAvatar: !(row.profile_pic && row.profile_pic.presigned_url),
         primaryText: row.first_name + ' ' + row.last_name,
         secondaryText: row.email,
         letterAvatarTextColor: "black",
@@ -8009,10 +8271,31 @@ var StickyHeadTable = function StickyHeadTable(props) {
         profilePath: row === null || row === void 0 ? void 0 : (_row$profile_pic = row.profile_pic) === null || _row$profile_pic === void 0 ? void 0 : _row$profile_pic.presigned_url
       }));
     }
+  }, {
+    id: 'first_name',
+    label: '',
+    minWidth: 60,
+    sortable: false,
+    cell: function cell(row) {
+      return /*#__PURE__*/React.createElement(IUIBox, {
+        component: "div",
+        width: 60
+      }, row && row.has_visited === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+        title: "This user hasn't logged on to the platform yet",
+        arrow: true,
+        classes: {
+          arrow: classes.arrow,
+          tooltip: classes.tooltip
+        },
+        placement: "top-start"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: clsx(styles$5.tooltipText)
+      }, "Invited")) : null);
+    }
   }, {
     id: 'emp_info__department__name',
     label: 'Department',
-    minWidth: 100,
+    minWidth: 80,
     sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
@@ -8025,7 +8308,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
   }, {
     id: 'productusermapping__role',
     label: 'Product roles',
-    minWidth: 170,
+    minWidth: 125,
     sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
@@ -8061,7 +8344,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
   }, {
     id: 'status',
     label: 'Status',
-    minWidth: 190,
+    minWidth: 160,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIFormGroup, null, /*#__PURE__*/React.createElement(IUITypography, {
         component: "div",
@@ -8087,15 +8370,55 @@ var StickyHeadTable = function StickyHeadTable(props) {
   }, {
     id: 'actions',
     label: 'Actions',
-    minWidth: 170,
+    minWidth: 70,
     align: 'left',
     cell: function cell(row) {
-      return /*#__PURE__*/React.createElement(IUIButton, {
-        buttonText: "Edit",
-        onClick: function onClick() {
+      var options = [{
+        label: 'Edit details',
+        handler: function handler() {
           return onEditHandler(row.id);
         }
-      });
+      }];
+      if (row && row.has_visited && row.is_active) {
+        options.push({
+          label: 'Reset password',
+          handler: function handler() {
+            return onResetPasswordHandler(row.email);
+          }
+        });
+      } else if (row && row.is_active) {
+        options.push({
+          label: 'Resend invite',
+          handler: function handler() {
+            return toggleInviteModal(row.id, 'single');
+          }
+        });
+      }
+      if (isILadmin) {
+        options.push({
+          label: 'Make primary admin',
+          handler: function handler() {
+            return onPrimaryAdminHandler(row.id);
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginLeft: '50px'
+        }
+      }, /*#__PURE__*/React.createElement(DropdownBtn, {
+        buttonText: /*#__PURE__*/React.createElement(MoreHorizIcon, {
+          fontSize: "medium",
+          color: "#6B7280"
+        }),
+        disableRipple: false,
+        menuListInfo: options,
+        menuListClass: "menuClass",
+        endIcon: null,
+        outlinedBtn: false,
+        className: "threedotMenuBtn",
+        placement: "bottom-end"
+      }));
     },
     style: {
       paddingLeft: '40px'
@@ -8123,7 +8446,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     isDataFetching: isDataFetching,
     disableRowCheckbox: disableRowCheckbox,
     searchBoxWidth: "400px",
-    searchValue: searchValue
+    searchValue: searchValue,
+    hideTopPagination: false
   });
 };
 var SingupRequests = function SingupRequests(props) {
@@ -8154,7 +8478,6 @@ var SingupRequests = function SingupRequests(props) {
     var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
     return dt.getDate() + " " + months[dt.getMonth()] + " " + dt.getFullYear();
   };
   var columns = [{
     id: 'fname',
     label: 'Name',
@@ -8165,8 +8488,7 @@ var SingupRequests = function SingupRequests(props) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIProfileBox, {
         firstName: row.fname,
         lastName: row.lname,
-        isLetterAvatar:
-        row.profile_pic && row.profile_pic.presigned_url ? false : true,
+        isLetterAvatar: row.profile_pic && row.profile_pic.presigned_url ? false : true,
         primaryText: row.fname + ' ' + row.lname,
         secondaryText: row.email,
         letterAvatarTextColor: "black",
@@ -8240,11 +8562,73 @@ var SingupRequests = function SingupRequests(props) {
   });
 };
+function InfoYellowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: props.width,
+    height: props.height,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 4.99951C11 5.5518 10.5523 5.99951 10 5.99951C9.44771 5.99951 9 5.5518 9 4.99951C9 4.44723 9.44771 3.99951 10 3.99951C10.5523 3.99951 11 4.44723 11 4.99951Z",
+    fill: "#CA8A04"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 7.99951C7.44772 7.99951 7 8.44723 7 8.99951C7 9.5518 7.44772 9.99951 8 9.99951H9V12.9995H8C7.44772 12.9995 7 13.4472 7 13.9995C7 14.5518 7.44772 14.9995 8 14.9995H12C12.5523 14.9995 13 14.5518 13 13.9995C13 13.4472 12.5523 12.9995 12 12.9995H11V8.99951C11 8.44723 10.5523 7.99951 10 7.99951H8Z",
+    fill: "#CA8A04"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0 9.99951C0 15.5224 4.47715 19.9995 10 19.9995C15.5228 19.9995 20 15.5224 20 9.99951C20 4.47666 15.5228 -0.000488281 10 -0.000488281C4.47715 -0.000488281 0 4.47666 0 9.99951ZM10 1.99951C14.4183 1.99951 18 5.58123 18 9.99951C18 14.4178 14.4183 17.9995 10 17.9995C5.58172 17.9995 2 14.4178 2 9.99951C2 5.58123 5.58172 1.99951 10 1.99951Z",
+    fill: "#CA8A04"
+  }));
+}
+function RedWarningIcon(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? '#E11D48' : _props$color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? '14' : _props$size;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 14 14",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM6 4C6 3.44772 6.44772 3 7 3C7.55229 3 8 3.44772 8 4V6C8 6.55229 7.55229 7 7 7C6.44772 7 6 6.55229 6 6V4ZM6 10C6 9.44771 6.44772 9 7 9C7.55229 9 8 9.44771 8 10C8 10.5523 7.55229 11 7 11C6.44772 11 6 10.5523 6 10Z",
+    fill: color
+  }));
+}
 var IUIToastMessageService$7 = services.IUIToastMessageService;
-var env$7 = configs.env;
-var UserList = function UserList(_ref) {
-  var config = _ref.config,
-    isProfile = _ref.isProfile;
+var env$7 = configs.env,
+  api$7 = configs.api;
+var UndoButton = function UndoButton(_ref) {
+  var onUndo = _ref.onUndo,
+    msg = _ref.msg;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      width: '270px',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      whiteSpace: 'nowrap',
+      paddingTop: '8px'
+    }
+  }, msg), /*#__PURE__*/React.createElement("p", {
+    onClick: onUndo,
+    style: {
+      whiteSpace: 'nowrap',
+      fontWeight: '600',
+      fontSize: '1rem',
+      padding: '8px 20px 0'
+    }
+  }, "UNDO"));
+};
+var UserList = function UserList(_ref2) {
+  var config = _ref2.config,
+    isProfile = _ref2.isProfile;
   env$7.init(config, isProfile);
   var history = useHistory();
   var _useSelector = useSelector(function (state) {
@@ -8254,26 +8638,42 @@ var UserList = function UserList(_ref) {
     isDataFetching = _useSelector.isDataFetching,
     deactivatedUsers = _useSelector.deactivatedUsers,
     tabValue = _useSelector.tabValue;
-  var _React$useState = React.useState(1),
-    page = _React$useState[0],
-    setPage = _React$useState[1];
-  var _useState = useState(5),
+  var newSelecteds = userListInfo.results;
+  var _React$useState = React.useState(''),
+    deactivateUser = _React$useState[0],
+    setDeactivateUser = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    setDefaultId = _React$useState2[1];
+  var _React$useState3 = React.useState({
+      admin: false,
+      dept_head: false,
+      approver: false
+    });
+  var _React$useState4 = React.useState(1),
+    page = _React$useState4[0],
+    setPage = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    user = _React$useState5[0],
+    setUser = _React$useState5[1];
+  var _useState = useState(10),
     rowsPerPage = _useState[0],
     setRowsPerPage = _useState[1];
-  var _React$useState2 = React.useState({}),
-    selected = _React$useState2[0],
-    setSelected = _React$useState2[1];
-  var _React$useState3 = React.useState('asc'),
-    order = _React$useState3[0],
-    setOrder = _React$useState3[1];
-  var _React$useState4 = React.useState('first_name'),
-    orderBy = _React$useState4[0],
-    setOrderBy = _React$useState4[1];
+  var _React$useState6 = React.useState({}),
+    selected = _React$useState6[0],
+    setSelected = _React$useState6[1];
+  var _React$useState7 = React.useState('asc'),
+    order = _React$useState7[0],
+    setOrder = _React$useState7[1];
+  var _React$useState8 = React.useState(false),
+    deactivateSingle = _React$useState8[0],
+    setDeactivateSingle = _React$useState8[1];
+  var _React$useState9 = React.useState('first_name'),
+    orderBy = _React$useState9[0],
+    setOrderBy = _React$useState9[1];
   var _useState2 = useState(''),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   var _useState3 = useState(false),
-    isOpenDeActivateModal = _useState3[0],
     setOpenDeActivateModalFlag = _useState3[1];
   var _useSelector2 = useSelector(function (state) {
       return state.common;
@@ -8283,54 +8683,92 @@ var UserList = function UserList(_ref) {
     isILadmin = _useSelector2.isILadmin,
     companyName = _useSelector2.companyName;
   var _useState4 = useState(false),
-    isOpenImportUsersModal = _useState4[0],
     setOpenImportUsersModal = _useState4[1];
   var _useState5 = useState(false),
-    isFileDownloading = _useState5[0],
-    setDownlStatus = _useState5[1];
+    approveeStatus = _useState5[0],
+    setApproveeStatus = _useState5[1];
   var _useState6 = useState(false),
-    isSortingChange = _useState6[0],
-    setSortingChange = _useState6[1];
+    isFileDownloading = _useState6[0],
+    setDownlStatus = _useState6[1];
   var _useState7 = useState(false),
-    isSearchingChange = _useState7[0],
-    setSearchingChange = _useState7[1];
+    isSortingChange = _useState7[0],
+    setSortingChange = _useState7[1];
   var _useState8 = useState(false),
-    isSortingChangeTemp = _useState8[0],
-    setSortingChangeTemp = _useState8[1];
+    isSearchingChange = _useState8[0],
+    setSearchingChange = _useState8[1];
   var _useState9 = useState(false),
-    isSearchingChangeTemp = _useState9[0],
-    setSearchingChangeTemp = _useState9[1];
+    isSortingChangeTemp = _useState9[0],
+    setSortingChangeTemp = _useState9[1];
   var _useState10 = useState(false),
-    isApiFetching = _useState10[0],
-    setisApiFetching = _useState10[1];
-  var _React$useState5 = React.useState(1),
-    signup_page = _React$useState5[0],
-    setSignUpPage = _React$useState5[1];
-  var _useState11 = useState(5),
-    signup_rowsPerPage = _useState11[0],
-    setSignUpRowsPerPage = _useState11[1];
-  var _React$useState6 = React.useState('asc'),
-    signup_order = _React$useState6[0],
-    setSignUpOrder = _React$useState6[1];
-  var _React$useState7 = React.useState('fname'),
-    signup_orderBy = _React$useState7[0],
-    setSignUpOrderBy = _React$useState7[1];
-  var _useState12 = useState(''),
-    signup_searchValue = _useState12[0],
-    set_signup_SearchValue = _useState12[1];
+    isSearchingChangeTemp = _useState10[0],
+    setSearchingChangeTemp = _useState10[1];
+  var _useState11 = useState(false),
+    isApiFetching = _useState11[0],
+    setisApiFetching = _useState11[1];
+  var _useState12 = useState({
+      value: '',
+      label: 'Select approver'
+    }),
+    approverRole = _useState12[0],
+    setApproverRole = _useState12[1];
   var _useState13 = useState(false),
-    isSignUpSortingChange = _useState13[0],
-    setSignUpSortingChange = _useState13[1];
-  var _useState14 = useState(false),
-    isSignUpSearchingChange = _useState14[0],
-    setSignUpSearchingChange = _useState14[1];
-  var _useState15 = useState(false),
-    isSignUpSortingChangeTemp = _useState15[0],
-    setSignUpSortingChangeTemp = _useState15[1];
-  var _useState16 = useState(false),
-    isSignUpSearchingChangeTemp = _useState16[0],
-    setSignUpSearchingChangeTemp = _useState16[1];
+    showInviteModal = _useState13[0],
+    setToggleInviteModal = _useState13[1];
+  var _useState14 = useState(''),
+    setUserIds = _useState14[1];
+  var _React$useState10 = React.useState(false),
+    overlayMenu = _React$useState10[0],
+    setOverlayMenu = _React$useState10[1];
+  var _useState15 = useState(true),
+    isDisabledSubmitBtn = _useState15[0],
+    setIsDisabledSubmitBtn = _useState15[1];
+  useScrollPosition(function (_ref3) {
+    var prevPos = _ref3.prevPos,
+      currPos = _ref3.currPos;
+    if (prevPos.y - currPos.y > 0) {
+      if (currPos.y <= -275) {
+        setOverlayMenu(true);
+      }
+    } else {
+      if (currPos.y > -295) {
+        setOverlayMenu(false);
+      }
+    }
+  }, [overlayMenu]);
+  var scrollTo = function scrollTo(id) {
+    var el = document.getElementById(id);
+    window.scrollTo({
+      top: el.offsetTop,
+      behavior: 'smooth'
+    });
+  };
+  var _React$useState11 = React.useState(1),
+    signup_page = _React$useState11[0],
+    setSignUpPage = _React$useState11[1];
+  var _useState16 = useState(5),
+    signup_rowsPerPage = _useState16[0],
+    setSignUpRowsPerPage = _useState16[1];
+  var _React$useState12 = React.useState('asc'),
+    signup_order = _React$useState12[0],
+    setSignUpOrder = _React$useState12[1];
+  var _React$useState13 = React.useState('fname'),
+    signup_orderBy = _React$useState13[0],
+    setSignUpOrderBy = _React$useState13[1];
+  var _useState17 = useState(''),
+    signup_searchValue = _useState17[0],
+    set_signup_SearchValue = _useState17[1];
+  var _useState18 = useState(false),
+    isSignUpSortingChange = _useState18[0],
+    setSignUpSortingChange = _useState18[1];
+  var _useState19 = useState(false),
+    isSignUpSearchingChange = _useState19[0],
+    setSignUpSearchingChange = _useState19[1];
+  var _useState20 = useState(false),
+    isSignUpSortingChangeTemp = _useState20[0],
+    setSignUpSortingChangeTemp = _useState20[1];
+  var _useState21 = useState(false),
+    isSignUpSearchingChangeTemp = _useState21[0],
+    setSignUpSearchingChangeTemp = _useState21[1];
   var _useSelector3 = useSelector(function (state) {
       return state.userList;
     }),
@@ -8342,59 +8780,32 @@ var UserList = function UserList(_ref) {
     }
     setOpenDeActivateModalFlag(true);
   };
-  var closeDeActivateModal = function closeDeActivateModal() {
-    setOpenDeActivateModalFlag(false);
-  };
   var handleAddPageNavigation = function handleAddPageNavigation() {
     history.push(config.routes.users.add.path);
   };
-  var handleImportPagenavigation = function handleImportPagenavigation(jobId) {
-    history.push(config.routes.bulkUpload["import"].path.replace(":" + config.routes.bulkUpload["import"].paramKeys.jobId, jobId));
-  };
   var handleEditUserClick = function handleEditUserClick(userId) {
     history.push(config.routes.users.edit.path.replace(":" + config.routes.users.edit.paramKeys.userId, userId));
   };
   var handleVerifyUserClick = function handleVerifyUserClick(userId) {
     history.push(config.routes.users.add.path + "?" + config.routes.users.add.queryParamKeys.verifyUserId + "=" + userId);
   };
-  var UndoButton = function UndoButton(_ref2) {
-    var msg = _ref2.msg,
-      id = _ref2.id;
-    return /*#__PURE__*/React.createElement(IUIBox, {
-      display: "flex",
-      flexDirection: "row",
-      width: "270px"
-    }, /*#__PURE__*/React.createElement(IUITypography, {
-      style: {
-        whiteSpace: 'nowrap',
-        paddingTop: '8px'
-      }
-    }, msg), /*#__PURE__*/React.createElement(IUIButton, {
-      type: "text",
-      buttonText: "UNDO",
-      style: {
-        color: '#FFFFFF'
-      },
-      onClick: function onClick() {
-        return dispatch(undoneSignUpRejection(id));
-      }
-    }));
-  };
   var handleRejectUserClick = function handleRejectUserClick(userId) {
     dispatch(rejectUserVerification(userId)).then(function (res) {
-      var _res$data;
-      console.log(res);
-      IUIToastMessageService$7.undoNotify( /*#__PURE__*/React.createElement(UndoButton, {
-        msg: (res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.message) || 'Sign-up request rejected',
-        id: userId
-      }));
       if (res.status === true) {
+        var _res$data;
+        IUIToastMessageService$7.undoNotify( /*#__PURE__*/React.createElement(UndoButton, {
+          onUndo: function onUndo() {
+            return dispatch(undoneSignUpRejection(userId));
+          },
+          msg: (res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.message) || 'Sign-up request rejected'
+        }));
         dispatch(showDataFetchingStatus());
         dispatch(fetchUserSignupRequests({
           ordering: signup_order === 'asc' ? signup_orderBy : "-" + signup_orderBy,
           length: signup_rowsPerPage,
           page: signup_page,
-          search: signup_searchValue.trim()
+          search: signup_searchValue.trim(),
+          pagename: 'company'
         })).then(function () {
           return dispatch(stopDataFetchingStatus());
         });
@@ -8413,12 +8824,13 @@ var UserList = function UserList(_ref) {
   };
   var deselectingCheckboxHandler = function deselectingCheckboxHandler(page) {
     var _extends2;
-    var newSelecteds = userListInfo.results.filter(function (n) {
+    var _newSelecteds = newSelecteds;
+    _newSelecteds.filter(function (n) {
       return n.is_active;
     }).map(function (obj) {
       return obj.id.toString();
     });
-    setSelected(_extends({}, selected, (_extends2 = {}, _extends2[page] = newSelecteds, _extends2)));
+    setSelected(_extends({}, selected, (_extends2 = {}, _extends2[page] = _newSelecteds, _extends2)));
   };
   var handleSelectAllClick = function handleSelectAllClick(event, page) {
     var _extends3;
@@ -8464,6 +8876,25 @@ var UserList = function UserList(_ref) {
     }
     setSelected(_extends({}, selected, (_extends4 = {}, _extends4[page] = newSelected, _extends4)));
   };
+  useEffect(function () {
+    if (deactivateSingle === true) {
+      api$7.get(userAddEditUrl._approversSearch() + "user_id=" + user.id + "&page=1").then(function (response) {
+        setDefaultId(response.data["default"].id);
+        response.data.results.map(function (item) {
+          if (response.data["default"].id === item.id) {
+            setApproverRole({
+              value: '',
+              label: item.email
+            });
+            setIsDisabledSubmitBtn(false);
+            if (item.approvee_status) {
+              setApproveeStatus(true);
+            }
+          }
+        });
+      });
+    }
+  }, [deactivateSingle]);
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     setRowsPerPage(+event.target.value);
     setPage(1);
@@ -8473,31 +8904,61 @@ var UserList = function UserList(_ref) {
   };
   var handleActiveUser = function handleActiveUser(e, id, page) {
     var isActive = e.target.checked;
-    dispatch(updateActiveStatus(e.target.checked ? 1 : 0, e.target.id)).then(function () {
-      if (!isActive) {
-        if (Object.values(selected).flat().includes(id.toString())) {
-          var _extends5;
-          var selectedTemp = _extends({}, selected);
-          selectedTemp[page].splice(selectedTemp[page].indexOf(id.toString()), 1);
-          setSelected(_extends({}, selected, (_extends5 = {}, _extends5[page] = selectedTemp[page], _extends5)));
+    var _isApprover;
+    newSelecteds.map(function (item) {
+      if (item.id === id) {
+        _isApprover = item.roles.is_approver;
+        if (_isApprover === true && isActive === false) {
+          setDeactivateSingle(true);
+          setDeactivateUser(item.first_name + ' ' + item.last_name);
+          setUser(item);
+        } else {
+          dispatch(updateActiveStatus(e.target.checked ? 1 : 0, e.target.id, _isApprover)).then(function () {
+            if (!isActive) {
+              if (Object.values(selected).flat().includes(id.toString())) {
+                var _extends5;
+                var selectedTemp = _extends({}, selected);
+                selectedTemp[page].splice(selectedTemp[page].indexOf(id.toString()), 1);
+                setSelected(_extends({}, selected, (_extends5 = {}, _extends5[page] = selectedTemp[page], _extends5)));
+              }
+            }
+          });
         }
       }
     });
   };
+  var selectApprover = function selectApprover(_ref4) {
+    var _value = _ref4._value;
+    if (_value.data.approvee_status) {
+      setApproveeStatus(true);
+    } else {
+      setApproveeStatus(false);
+    }
+    setApproverRole(_value);
+    setIsDisabledSubmitBtn(false);
+  };
   var handleDeactivateUsers = function handleDeactivateUsers() {
-    dispatch(deActivateUsers(Object.values(selected).flat()));
+    dispatch(updateActiveStatus(0, user.id, user.roles.is_approver, approverRole.data.id));
     setOpenDeActivateModalFlag(false);
+    setDeactivateSingle(false);
     setSelected({});
   };
   var importUserHandler = function importUserHandler() {
     setOpenImportUsersModal(true);
   };
-  var closeImportUsersModal = function closeImportUsersModal() {
-    setOpenImportUsersModal(false);
+  var onResetPasswordHandler = function onResetPasswordHandler(email) {
+    dispatch(resetPasswordForUser({
+      email: email
+    }));
   };
-  var closeImportModal = function closeImportModal(jobId) {
-    setOpenImportUsersModal(false);
-    handleImportPagenavigation(jobId);
+  var toggleInviteModal = function toggleInviteModal(ids, type) {
+    console.log(type);
+    if (!type && (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined)) {
+      IUIToastMessageService$7.warningNotify('Select at least one user to invite.');
+      return false;
+    }
+    setUserIds(ids);
+    setToggleInviteModal(!showInviteModal);
   };
   var handleExportUsers = function handleExportUsers() {
     try {
@@ -8538,12 +8999,20 @@ var UserList = function UserList(_ref) {
   }, {
     label: 'Bulk action history',
     handler: handleBulkActionHistoryClick
+  }, {
+    label: 'Resend invite',
+    handler: toggleInviteModal
   }];
   useEffect(function () {
     var roleCanAccess = ['travel_itilite_admin', 'travel_admin', 'expense_itilite_admin', 'expense_admin'];
     dispatch(showDataFetchingStatus());
     dispatch(verifyAccessToken(roleCanAccess));
   }, []);
+  var onPrimaryAdminHandler = function onPrimaryAdminHandler(userId) {
+    dispatch(makePrimaryAdmin({
+      userId: userId
+    }));
+  };
   var dispatch = useDispatch();
   useEffect(function () {
     if (isTokenVerified === true) {
@@ -8557,6 +9026,7 @@ var UserList = function UserList(_ref) {
           dispatch(fetchUsersList(url)).then(function () {
             setSearchingChange(false);
             setisApiFetching(false);
+            scrollTo('table-root');
           });
         }, 1000);
         return function () {
@@ -8570,7 +9040,8 @@ var UserList = function UserList(_ref) {
             ordering: signup_order === 'asc' ? signup_orderBy : "-" + signup_orderBy,
             length: signup_rowsPerPage,
             page: signup_page,
-            search: signup_searchValue.trim()
+            search: signup_searchValue.trim(),
+            pagename: 'company'
           })).then(function () {
             setSignUpSearchingChange(false);
             setisApiFetching(false);
@@ -8582,6 +9053,7 @@ var UserList = function UserList(_ref) {
       }
       if (isSortingChange) {
         setisApiFetching(true);
+        scrollTo('table-root');
         dispatch(fetchUsersList(url)).then(function () {
           setisApiFetching(false);
           setSortingChange(false);
@@ -8596,7 +9068,8 @@ var UserList = function UserList(_ref) {
           ordering: signup_order === 'asc' ? signup_orderBy : "-" + signup_orderBy,
           length: signup_rowsPerPage,
           page: signup_page,
-          search: signup_searchValue.trim()
+          search: signup_searchValue.trim(),
+          pagename: 'company'
         })).then(function () {
           setisApiFetching(false);
           setSignUpSortingChange(false);
@@ -8612,7 +9085,8 @@ var UserList = function UserList(_ref) {
             ordering: signup_order === 'asc' ? signup_orderBy : "-" + signup_orderBy,
             length: signup_rowsPerPage,
             page: signup_page,
-            search: signup_searchValue.trim()
+            search: signup_searchValue.trim(),
+            pagename: 'company'
           })).then(function () {
             return dispatch(stopDataFetchingStatus());
           });
@@ -8620,15 +9094,89 @@ var UserList = function UserList(_ref) {
       }
     }
   }, [isTokenVerified, isSearchingChangeTemp, isSortingChangeTemp, isSignUpSearchingChangeTemp, isSignUpSortingChangeTemp]);
+  var topRightButtons = function topRightButtons() {
+    return /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: styles$5.buttonWrapper,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      alignSelf: "flex-start"
+    }, /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React.createElement(IUIButton, {
+      buttonText: "Export all users",
+      type: "outlined",
+      startIcon: /*#__PURE__*/React.createElement(BulkDownloadIcon, {
+        width: "22",
+        height: "22"
+      }),
+      onClick: handleExportUsers
+    })), /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React.createElement(IUIDropdownButton, {
+      buttonText: "Bulk actions",
+      type: "outlined",
+      menuListInfo: BulkUploadInfo
+    })), /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: "pageHeader--button-single button-right"
+    }, /*#__PURE__*/React.createElement(IUIButton, {
+      buttonText: "Add user",
+      type: "contained",
+      startIcon: /*#__PURE__*/React.createElement(AddIcon, {
+        width: "9",
+        height: "9",
+        color: "white"
+      }),
+      onClick: handleAddPageNavigation
+    })));
+  };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles$5.UUIUserManagementList
-  }, !hasVerificationError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
+  }, overlayMenu ? /*#__PURE__*/React.createElement(Box, {
+    className: styles$5.scrollOverlayMenu
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    className: clsx(styles$5.pageHeader)
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
+  }, /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: "Search by name, email & department",
+    value: searchValue,
+    onChangeHandler: function onChangeHandler(e) {
+      return onSearchHandler(e.target.value);
+    },
+    className: styles$5.overlaysearch
+  })), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }))) : '', !hasVerificationError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: isFileDownloading || isApiFetching,
     className: styles$5.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), isDataFetching ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
+    id: "table-root",
     component: "div",
     className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
@@ -8653,44 +9201,7 @@ var UserList = function UserList(_ref) {
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
-  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: styles$5.buttonWrapper,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Export all users",
-    type: "outlined",
-    startIcon: /*#__PURE__*/React.createElement(BulkDownloadIcon, {
-      width: "22",
-      height: "22"
-    }),
-    onClick: handleExportUsers
-  })), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React.createElement(IUIDropdownButton, {
-    buttonText: "Bulk actions",
-    type: "outlined",
-    menuListInfo: BulkUploadInfo
-  })), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: "pageHeader--button-single button-right"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add user",
-    type: "contained",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "9",
-      height: "9",
-      color: "white"
-    }),
-    onClick: handleAddPageNavigation
-  })))), /*#__PURE__*/React.createElement(IUIBox, {
+  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
@@ -8733,7 +9244,11 @@ var UserList = function UserList(_ref) {
         onSearchHandler: onSearchHandler,
         onEditHandler: handleEditUserClick,
         disableRowCheckbox: deactivatedUsers,
-        searchValue: searchValue
+        searchValue: searchValue,
+        isILadmin: isILadmin,
+        onPrimaryAdminHandler: onPrimaryAdminHandler,
+        onResetPasswordHandler: onResetPasswordHandler,
+        toggleInviteModal: toggleInviteModal
       }))
     }, {
       label: /*#__PURE__*/React.createElement(IUIBox, null, "Sign-up requests", ' ', /*#__PURE__*/React.createElement(TabLabelCount, {
@@ -8781,42 +9296,51 @@ var UserList = function UserList(_ref) {
       }))
     }]
   }))), /*#__PURE__*/React.createElement(IUIModal, {
-    isOpen: Object.values(selected).flat().length > 0 && isOpenDeActivateModal,
-    closeHandler: closeDeActivateModal,
+    isOpen: deactivateSingle,
+    closeHandler: function closeHandler() {
+      setDeactivateSingle(false);
+    },
     cancelLabel: "Cancel",
     submitLabel: "Deactivate",
     submitHandler: handleDeactivateUsers,
-    width: "508px",
-    hideCloseIcon: true,
-    modalBodyStyle: {
-      padding: '0px'
-    },
-    footerStyle: {
-      justifyContent: 'center'
-    }
+    headerText: "Deactivate this user?",
+    width: "400px",
+    subHanderText: "",
+    submitBtnClass: styles$5.deactivateBtn,
+    isDisabledSubmitBtn: isDisabledSubmitBtn
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "column",
-    padding: "27px 16px 27px",
-    className: styles$5.deActivateModalContainer
-  }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.headerText
-  }, 'Are you sure you want to deactivate ' + Object.values(selected).flat().length.toString() + (Object.values(selected).flat().length === 1 ? ' user ?' : ' users ?')), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.description
-  }, "The", ' ', Object.values(selected).flat().length === 1 ? ' user ' : ' users ', "won\u2019t be able to access itilite platform"))), /*#__PURE__*/React.createElement(BulkUploadModal, {
-    isOpenImportUsersModal: isOpenImportUsersModal,
-    closeImportUsersModal: closeImportUsersModal,
-    closeImportModal: closeImportModal
-  })) : /*#__PURE__*/React.createElement(VerificationError, {
+    className: styles$5.deactivateSingle
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    className: styles$5.deactivateAlert
+  }, /*#__PURE__*/React.createElement(InfoYellowIcon, {
+    width: "9",
+    height: "9"
+  }), /*#__PURE__*/React.createElement(IUITypography, null, /*#__PURE__*/React.createElement("b", null, deactivateUser), " is linked with multiple roles. You can deactivate them only once you transfer the roles to another user.")), /*#__PURE__*/React.createElement(IUIBox, {
+    className: "iui__my-15"
+  }, /*#__PURE__*/React.createElement(IUIAsyncSelect, {
+    isMove: true,
+    additional: {
+      page: 1,
+      product: 'travel',
+      userId: user.id
+    },
+    placeHolderCheck: approverRole !== undefined && approverRole.value === '',
+    label: "Transfer approver role to",
+    value: approverRole,
+    onValueChange: selectApprover,
+    loadOption: approversOptions,
+    disableText: "Please get in touch with your administrator to change this value."
+  }), approveeStatus && /*#__PURE__*/React.createElement(IUIBox, {
+    className: "iui__d-flex iui__align-items-baseline iui__mr-5"
+  }, /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(RedWarningIcon, null)), /*#__PURE__*/React.createElement(IUIBox, {
+    className: "iui__font--para-normal iui__font--color-black500 iui__mt-5 iui__ml-5"
+  }, "The user You're deactivating is the approver of the user you're transferring the role to. If you continue, this user will become a self-approver")))))) : /*#__PURE__*/React.createElement(VerificationError, {
     config: config,
     errMsg: hasVerificationError
   }));
 };
-var TabLabelCount = function TabLabelCount(_ref3) {
-  var count = _ref3.count;
+var TabLabelCount = function TabLabelCount(_ref5) {
+  var count = _ref5.count;
   return /*#__PURE__*/React.createElement(IUIBox, {
     className: styles$5.TabLabelCount
   }, " ", count, " ");
@@ -8891,11 +9415,12 @@ function Header(props) {
   })));
 }
-var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","buttonWidth":"_13tv0","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV","tableContainer":"_3xdGF"};
+var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","rowText":"_2XKxl","lightColor":"_3uyfh","buttonWidth":"_13tv0","readOnlyInput":"_3yYuQ","addUserButton":"_1zbr_","alertDescContainer":"_3h8DM","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV","tableContainer":"_3xdGF"};
 function Listview(_ref) {
   var data = _ref.data,
     name = _ref.name,
+    tableName = _ref.tableName,
     handleEditDialog = _ref.handleEditDialog,
     handleDeleteDialog = _ref.handleDeleteDialog,
     orderBy = _ref.orderBy,
@@ -8908,10 +9433,16 @@ function Listview(_ref) {
     handleChangePage = _ref$handleChangePage === void 0 ? function () {} : _ref$handleChangePage,
     page = _ref.page,
     rowsPerPage = _ref.rowsPerPage;
+  var deptHeadDetails = function deptHeadDetails(data) {
+    var _data$dept_head_detai;
+    if ((data === null || data === void 0 ? void 0 : (_data$dept_head_detai = data.dept_head_details) === null || _data$dept_head_detai === void 0 ? void 0 : _data$dept_head_detai.length) > 0) {
+      return data.dept_head_details[0].first_name + ' ' + data.dept_head_details[0].last_name;
+    }
+  };
   var columns = [{
     id: 'name',
     label: name,
-    width: '45%',
+    width: '40%',
     sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
@@ -8921,7 +9452,7 @@ function Listview(_ref) {
   }, {
     id: 'no_of_users',
     label: 'Number of users',
-    width: '45%',
+    width: '40%',
     sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
@@ -8931,7 +9462,67 @@ function Listview(_ref) {
   }, {
     id: 'actions',
     label: 'Actions',
-    width: '10%',
+    width: '20%',
+    cell: function cell(row) {
+      return row.code !== UNASSIGNED_USERS && /*#__PURE__*/React.createElement(IUIBox, {
+        display: "flex"
+      }, /*#__PURE__*/React.createElement(IUIButton, {
+        buttonText: "Edit",
+        className: styles$7.buttonWidth,
+        onClick: function onClick() {
+          return handleEditDialog(row);
+        }
+      }), row.no_of_users > 0 ? /*#__PURE__*/React.createElement(IUIButton, {
+        buttonText: "Delete",
+        className: styles$7.buttonWidth,
+        onClick: function onClick() {
+          return handleDeleteDialog(row, true);
+        }
+      }) : /*#__PURE__*/React.createElement(IUIButton, {
+        buttonText: "Delete",
+        className: styles$7.buttonWidth,
+        onClick: function onClick() {
+          return handleDeleteDialog(row, false);
+        }
+      }));
+    }
+  }];
+  var departmentColumns = [{
+    id: 'name',
+    label: name,
+    width: '30%',
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/React.createElement(IUIBox, {
+        component: "div"
+      }, row.name);
+    }
+  }, {
+    id: 'department_head',
+    label: 'Department head',
+    width: '30%',
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIBox, {
+        component: "div"
+      }, deptHeadDetails(row)), row.is_default_dept_head && /*#__PURE__*/React.createElement(IUITypography, {
+        className: clsx(styles$7.rowText, styles$7.textTransform, styles$7.lightColor)
+      }, "Assigned by default"));
+    }
+  }, {
+    id: 'no_of_users',
+    label: 'Number of users',
+    width: '45%',
+    sortable: false,
+    cell: function cell(row) {
+      return /*#__PURE__*/React.createElement(IUIBox, {
+        component: "div"
+      }, row.no_of_users);
+    }
+  }, {
+    id: 'actions',
+    label: 'Actions',
+    width: '15%',
     cell: function cell(row) {
       return row.code !== UNASSIGNED_USERS && /*#__PURE__*/React.createElement(IUIBox, {
         display: "flex"
@@ -8964,7 +9555,7 @@ function Listview(_ref) {
     hasFilter: true,
     isCheckboxTable: false,
     count: data.count,
-    columns: columns,
+    columns: tableName === 'department' ? departmentColumns : columns,
     rows: data.results,
     page: page,
     handleChangePage: handleChangePage,
@@ -9021,16 +9612,44 @@ function EditPanelDialog(_ref) {
   var isOpen = _ref.isOpen,
     closeHandler = _ref.closeHandler,
     onValueChange = _ref.onValueChange,
-    submitHandler = _ref.submitHandler,
+    _submitHandler = _ref.submitHandler,
     isError = _ref.isError,
     name = _ref.name,
     isDisabledSubmitBtn = _ref.isDisabledSubmitBtn,
-    validation = _ref.validation;
+    validation = _ref.validation,
+    rowData = _ref.rowData,
+    tableName = _ref.tableName,
+    config = _ref.config;
   var _useSelector = useSelector(function (state) {
       return state.userPanel;
     }),
     dialogData = _useSelector.dialogData;
+  var deptHeadDetails = function deptHeadDetails(data) {
+    var _data$dept_head_detai;
+    if ((data === null || data === void 0 ? void 0 : (_data$dept_head_detai = data.dept_head_details) === null || _data$dept_head_detai === void 0 ? void 0 : _data$dept_head_detai.length) > 0) {
+      setHead({
+        value: data.dept_head_details[0].id,
+        label: data.dept_head_details[0].first_name + ' ' + data.dept_head_details[0].last_name
+      });
+    }
+  };
+  var _useState = useState({
+      value: '',
+      label: 'Select'
+    }),
+    head = _useState[0],
+    setHead = _useState[1];
+  useEffect(function () {
+    deptHeadDetails(rowData);
+  }, [rowData]);
+  var history = useHistory();
+  var handleAddPageNavigation = function handleAddPageNavigation() {
+    console.log(rowData);
+    history.push({
+      pathname: config.routes.users.add.path,
+      state: rowData
+    });
+  };
   return /*#__PURE__*/React.createElement(IUIModal, {
     isDisabledSubmitBtn: isDisabledSubmitBtn,
     isOpen: isOpen,
@@ -9038,27 +9657,60 @@ function EditPanelDialog(_ref) {
     headerText: "Edit " + name.toLowerCase(),
     cancelLabel: (_dialogData$labels = dialogData.labels) === null || _dialogData$labels === void 0 ? void 0 : _dialogData$labels.cancelLabel,
     submitLabel: (_dialogData$labels2 = dialogData.labels) === null || _dialogData$labels2 === void 0 ? void 0 : _dialogData$labels2.submitLabel,
-    submitHandler: submitHandler,
-    width: "365px",
+    submitHandler: function submitHandler() {
+      return _submitHandler(head);
+    },
+    width: tableName === 'department' ? '400px' : '365px',
     hideCloseIcon: false,
     modalBodyStyle: {
-      maxHeight: '400px',
-      overflow: 'auto',
-      margin: '0px'
+      overflowY: 'visible'
     },
     footerStyle: {
       justifyContent: 'end'
     }
+  }, tableName === 'department' && rowData.no_of_users === 0 && /*#__PURE__*/React.createElement(IUIBox, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    style: {
+      marginBottom: '30px'
+    }
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "column",
-    padding: "8px 24px"
-  }, /*#__PURE__*/React.createElement(IUIInput, {
-    label: name + " name"
-    ,
+    className: styles$7.baseAlert
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    className: styles$7.alertDescContainer
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    className: styles$7.iconLayout,
+    style: {
+      paddingTop: '4px'
+    }
+  }, /*#__PURE__*/React.createElement(BoldInfoIcon, {
+    color: "#CA8A04",
+    width: "25",
+    height: "20",
+    className: styles$7.iconStyle
+  })), /*#__PURE__*/React.createElement(IUILabel, {
+    label: "By default, the primary admin gets assigned as the department head. This department has no users, so to change department head, add a new user.",
+    style: {
+      fontWeight: 'normal'
+    }
+  })), /*#__PURE__*/React.createElement(IUIButton, {
+    buttonText: "Add user",
+    type: "text",
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
+      width: "9",
+      height: "9",
+      color: "#EC5D25"
+    }),
+    onClick: handleAddPageNavigation,
+    className: styles$7.addUserButton
+  }))), /*#__PURE__*/React.createElement(IUIInput, {
+    label: name + " name",
     name: "name",
     defaultValue: dialogData.data.name,
     onValueChange: onValueChange,
@@ -9066,7 +9718,49 @@ function EditPanelDialog(_ref) {
     isError: isError,
     validation: validation,
     errorMsg: "Please enter " + name.toLowerCase() + " name.",
-    required: true
+    required: true,
+    style: tableName === 'department' && {
+      width: '350px'
+    }
+  }), tableName === 'department' && rowData.no_of_users === 0 && /*#__PURE__*/React.createElement(IUIBox, {
+    className: "iui__mt-15",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(IUIInput, {
+    label: "Department head",
+    name: "name",
+    defaultValue: head.label,
+    placeholder: "",
+    readOnly: true,
+    style: {
+      width: '350px'
+    }
+  })), tableName === 'department' && rowData.no_of_users > 0 && /*#__PURE__*/React.createElement(IUIBox, {
+    className: "iui__mt-15",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(IUIAsyncSelect, {
+    noResultsText: true,
+    isMove: true,
+    additional: {
+      page: 1,
+      departmentId: rowData.id
+    },
+    placeHolderCheck: head !== undefined && head.value === '',
+    label: "Department head",
+    value: head,
+    onValueChange: function onValueChange(_ref2) {
+      var _value = _ref2._value;
+      return setHead(_value);
+    },
+    loadOption: departmentHeadOptions,
+    disableText: "Please get in touch with your administrator to change this value.",
+    customLoadingText: "No users found in this department",
+    customLoadingTextStyle: {
+      color: '#374151'
+    }
   })));
 }
@@ -9245,12 +9939,15 @@ var UserPanel = function UserPanel(_ref) {
   var _useState13 = useState(false),
     isSortingChangeTemp = _useState13[0],
     setSortingChangeTemp = _useState13[1];
-  var _useState14 = useState(1),
-    page = _useState14[0],
-    setPage = _useState14[1];
-  var _useState15 = useState(5),
-    rowsPerPage = _useState15[0],
-    setRowsPerPage = _useState15[1];
+  var _useState14 = useState([]),
+    rowData = _useState14[0],
+    setRowData = _useState14[1];
+  var _useState15 = useState(1),
+    page = _useState15[0],
+    setPage = _useState15[1];
+  var _useState16 = useState(5),
+    rowsPerPage = _useState16[0],
+    setRowsPerPage = _useState16[1];
   var orderingParam = orderBy;
   var _useSelector = useSelector(function (state) {
       return state.userPanel;
@@ -9263,7 +9960,6 @@ var UserPanel = function UserPanel(_ref) {
     }),
     isTokenVerified = _useSelector2.isTokenVerified,
     hasVerificationError = _useSelector2.hasVerificationError;
   var onValueChange = function onValueChange(_ref2) {
     var _value = _ref2._value;
     var validatedValue = _value.replace(/\s+/g, ' ').trim();
@@ -9347,6 +10043,7 @@ var UserPanel = function UserPanel(_ref) {
       submitLabel: 'Save'
     }, '', data));
     setDataList(data.name);
+    setRowData(data);
     setEditModal(true);
   };
   var closeEditDialog = function closeEditDialog() {
@@ -9361,6 +10058,12 @@ var UserPanel = function UserPanel(_ref) {
       var payload = {
         names: [dataList]
       };
+      if (tableName === 'department') {
+        payload = {
+          name: dataList,
+          department_head_id: null
+        };
+      }
       var message = title + " added successfully.";
       handleApiCall(addRecord, payload, message, 'add');
     } else {
@@ -9374,10 +10077,12 @@ var UserPanel = function UserPanel(_ref) {
     var message = title + " deleted successfully.";
     handleApiCall(deleteRecord, payload, message, 'delete');
   };
-  var handleApiCall = function handleApiCall(dispatchFun, payload, message, type) {
+  var handleApiCall = function handleApiCall(dispatchFun, payload, message, type, optionalParams) {
+    if (optionalParams === void 0) {
+      optionalParams = null;
+    }
     dispatch(userPanelShowLoader());
-    dispatch(dispatchFun(tableName, payload, getApiData())).then(function (res) {
+    dispatch(dispatchFun(tableName, payload, getApiData(), optionalParams)).then(function (res) {
       IUIToastMessageService$8.sNotify(type === 'move' ? res.data.message : "" + message);
       dispatch(userPanelStopLoader());
       if (type === 'delete') {
@@ -9419,8 +10124,14 @@ var UserPanel = function UserPanel(_ref) {
           name: dataList
         }]
       };
+      if (tableName === 'department') {
+        payload = {
+          name: dataList,
+          department_head_id: data.value === '' || rowData.is_default_dept_head && rowData.dept_head === data.value ? null : data.value
+        };
+      }
       var message = title + " updated successfully.";
-      handleApiCall(editRecord, payload, message, 'edit');
+      handleApiCall(editRecord, payload, message, 'edit', dialogData.data.id);
       setErrorEdit(false);
     } else {
       setErrorEdit(true);
@@ -9527,7 +10238,10 @@ var UserPanel = function UserPanel(_ref) {
     submitHandler: handleEditPanel,
     isError: errorEdit,
     isDisabledSubmitBtn: loading,
-    validation: validation
+    validation: validation,
+    rowData: rowData,
+    tableName: tableName,
+    config: config
   })) : /*#__PURE__*/React.createElement(VerificationError, {
     config: config
   }));