@itilite/iui-user-management 0.4.203 → 0.4.204

package/dist/index.modern.js

@@ -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,22 +5275,23 @@ 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);
@@ -5196,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);
       };
@@ -5266,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') {
@@ -5312,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);
     }
@@ -5334,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();
@@ -5594,7 +5723,6 @@ var UserAddEdit = function UserAddEdit(props) {
               required: true
             }
           }));
-
           var _productAccess = _extends({}, productAccess);
           renderFields.products.forEach(function (product) {
             _productAccess[product.name] = true;
@@ -5642,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;
@@ -5658,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);
     }
@@ -5791,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');
@@ -5804,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');
@@ -5821,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();
       }
@@ -5855,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) {
@@ -5869,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);
@@ -5918,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);
@@ -5963,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);
     }
@@ -5997,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 '';
             }()
@@ -6042,7 +6171,6 @@ var UserAddEdit = function UserAddEdit(props) {
             }()
           });
         });
-
         if (res.client_admin) {
           setTravelApproversInput(function (prevState) {
             var nextState = _extends({}, prevState);
@@ -6076,7 +6204,6 @@ var UserAddEdit = function UserAddEdit(props) {
       });
     }
   };
-
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles.UUIUserManagementAddEdit
@@ -6093,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
     }]
@@ -6163,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,
@@ -6315,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);
@@ -6356,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);
@@ -6535,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'
@@ -6662,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,
@@ -6731,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) {
@@ -6771,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);
     }
@@ -6946,7 +7077,6 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     setOpenImportUsersModal(false);
     handleImportPagenavigation(jobId);
   };
-
   var handleDownloadRecords = function handleDownloadRecords(type) {
     try {
       setDownlStatus(true);
@@ -7922,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: {
@@ -7972,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,
@@ -7980,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',
@@ -7995,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",
@@ -8005,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, {
@@ -8021,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, {
@@ -8057,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",
@@ -8083,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'
@@ -8119,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) {
@@ -8150,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',
@@ -8161,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",
@@ -8236,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) {
@@ -8250,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;
@@ -8279,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;
     }),
@@ -8338,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());
         });
@@ -8409,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;
@@ -8460,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);
@@ -8469,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 {
@@ -8534,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) {
@@ -8553,6 +9026,7 @@ var UserList = function UserList(_ref) {
           dispatch(fetchUsersList(url)).then(function () {
             setSearchingChange(false);
             setisApiFetching(false);
+            scrollTo('table-root');
           });
         }, 1000);
         return function () {
@@ -8566,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);
@@ -8578,6 +9053,7 @@ var UserList = function UserList(_ref) {
       }
       if (isSortingChange) {
         setisApiFetching(true);
+        scrollTo('table-root');
         dispatch(fetchUsersList(url)).then(function () {
           setisApiFetching(false);
           setSortingChange(false);
@@ -8592,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);
@@ -8608,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());
           });
@@ -8616,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, {
@@ -8649,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",
@@ -8729,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, {
@@ -8777,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, " ");
@@ -8887,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,
@@ -8904,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, {
@@ -8917,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, {
@@ -8927,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"
@@ -8960,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,
@@ -9017,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,
@@ -9034,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,
@@ -9062,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'
+    }
   })));
 }
 
@@ -9241,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;
@@ -9259,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();
@@ -9343,6 +10043,7 @@ var UserPanel = function UserPanel(_ref) {
       submitLabel: 'Save'
     }, '', data));
     setDataList(data.name);
+    setRowData(data);
     setEditModal(true);
   };
   var closeEditDialog = function closeEditDialog() {
@@ -9357,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 {
@@ -9370,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') {
@@ -9415,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);
@@ -9523,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
   }));