@itilite/iui-user-management 0.4.29 → 0.4.31

package/dist/index.js

@@ -19,6 +19,7 @@ var Switch = _interopDefault(require('@material-ui/core/Switch'));
 var MoreHorizIcon = _interopDefault(require('@material-ui/icons/MoreHoriz'));
 var Button = _interopDefault(require('@material-ui/core/Button'));
 var core = require('@material-ui/core');
+var useScrollPosition = require('@n8tb1t/use-scroll-position');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -458,6 +459,14 @@ var userPanelUrl = {
     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 = utils.configs.api;
 var NAoptionConfig = {
@@ -686,6 +695,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,
@@ -1056,12 +1105,6 @@ var setSignUpRequestList = function setSignUpRequestList(payload) {
     payload: payload
   };
 };
-var setUserActiveStatus = function setUserActiveStatus(payload) {
-  return {
-    type: SET_ACTIVE_STATUS,
-    payload: payload
-  };
-};
 var setBulkDeactivatedUsers = function setBulkDeactivatedUsers(payload) {
   return {
     type: SET_BULK_DEACTIVATED_USERS,
@@ -1154,27 +1197,6 @@ var updateTabValue = function updateTabValue(tabId) {
     payload: tabId
   };
 };
-var updateActiveStatus = function updateActiveStatus(activateVal, id) {
-  return function (dispatch) {
-    return new Promise(function (resolve, reject) {
-      api$1.get(userListUrl.updateActiveStatus + 'user_id=' + id + '&activate=' + activateVal).then(function (res) {
-        dispatch(setUserActiveStatus({
-          is_active: activateVal !== 0,
-          id: id
-        }));
-        IUIToastMessageService.sNotify(res.data.message);
-        resolve(res);
-      })["catch"](function (err) {
-        if (!err.response.data.status) {
-          IUIToastMessageService.warningNotify(err.response.data.message);
-          reject(err);
-          return;
-        }
-        reject(err);
-      });
-    });
-  };
-};
 
 var api$2 = utils.configs.api;
 var IUIToastMessageService$1 = utils.services.IUIToastMessageService,
@@ -1757,6 +1779,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 = utils.configs.api;
 var IUIToastMessageService$2 = utils.services.IUIToastMessageService;
@@ -1806,14 +1829,14 @@ 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.');
       });
     });
   };
@@ -1827,25 +1850,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.');
+        });
+      }
     });
   };
 };
@@ -1857,8 +1892,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.');
       });
     });
   };
@@ -3958,6 +3993,7 @@ var initialState$2 = {
     previous: null,
     results: []
   },
+  deptUsers: [],
   loading: false
 };
 var reducer$2 = function reducer(state, action) {
@@ -4027,6 +4063,12 @@ var reducer$2 = function reducer(state, action) {
           loading: false
         });
       }
+    case FETCH_DEPARTMENT_USERS_DATA:
+      {
+        return _extends({}, state, {
+          deptUsers: action.payload
+        });
+      }
     default:
       return state;
   }
@@ -4224,49 +4266,8 @@ function withStore(Component) {
   return WrappedComponent;
 }
 
-var ExpandMoreIcon = function ExpandMoreIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: props.width,
-    height: props.height,
-    fill: "none",
-    viewBox: "0 0 12 7"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#6B7280",
-    d: "M.293.294a1 1 0 011.414 0L6 4.587 10.293.294a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
-  }));
-};
-
-var ExpandLessIcon = function ExpandLessIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: props.width,
-    height: props.height,
-    fill: "none",
-    viewBox: "0 0 10 6"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#6B7280",
-    d: "M.293.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-  }));
-};
-
-var CrossIcon = function CrossIcon(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? '#6B7280' : _props$color;
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: props.width,
-    height: props.height,
-    fill: "none",
-    viewBox: "0 0 14 14"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: color,
-    d: "M.293.292a1 1 0 011.414 0L7 5.585 12.293.292a1 1 0 111.414 1.415L8.414 7l5.293 5.292a1 1 0 01-1.414 1.415L7 8.414l-5.293 5.293a1 1 0 01-1.414-1.415L5.586 7 .293 1.707a1 1 0 010-1.415z"
-  }));
-};
-
 var AdditionalInfo = function AdditionalInfo(_ref) {
-  var _clsx;
+  var _clsx2;
   var membershipInfoInput = _ref.membershipInfoInput,
     onMemInfoInputChange = _ref.onMemInfoInputChange,
     addMemInfoInput = _ref.addMemInfoInput,
@@ -4295,6 +4296,10 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
       setAdditionalInfoFlag(defaultExpand ? panel : false);
     };
   };
+  var ExpandMore = iuistyles.icons.ExpandMore,
+    ExpandLess = iuistyles.icons.ExpandLess,
+    Add = iuistyles.icons.Add,
+    Cross = iuistyles.icons.Cross;
   var _useSelector = reactRedux.useSelector(function (state) {
       return state.userAddEdit.renderFields;
     }),
@@ -4352,312 +4357,316 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }
     return null;
   };
-  return /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordion, {
-    expanded: defaultExpand === 'open',
-    onChange: handleChange('open'),
-    className: styles.additionalInfoContainer
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionSummary, {
-    expandIcon: defaultExpand ? /*#__PURE__*/React__default.createElement(ExpandLessIcon, {
-      width: "12px",
-      height: "7px"
-    }) : /*#__PURE__*/React__default.createElement(ExpandMoreIcon, {
-      width: "12px",
-      height: "7px"
-    }),
-    "aria-controls": "panel1bh-content",
-    id: "panel1bh-header",
-    className: clsx(styles.additionalInfoTitle, (_clsx = {}, _clsx[styles.expandIconAlign] = defaultExpand === 'open', _clsx))
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.product_info, styles.sectionWrapper)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 4,
-    className: styles.titleContainer
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Additional information",
-    headerType: true,
-    description: "Passport, Membership, Travel preferences..."
-  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionDetails, {
-    className: styles.detailsContainer
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.work_info, styles.sectionWrapper)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 4
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Passport information",
-    headerType: true
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 8,
-    lg: 8,
-    xl: 6
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-  }, passportInfo.map(function (p, i) {
-    var _clsx2;
-    if (!p.visibility) {
-      return null;
-    }
+  var getAccordianSummary = function getAccordianSummary() {
     return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.product_info, styles.sectionWrapper)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 12,
-      lg: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
-      xl: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
-      key: i,
-      className: clsx(styles.margin, (_clsx2 = {}, _clsx2[styles.minGridWidth] = p.type === 'datepicker', _clsx2))
-    }, /*#__PURE__*/React__default.createElement(GetInputType, {
-      _p: p,
-      inputState: passportInfoInput,
-      onValueChange: onPassportInfoInputChange,
-      dropdownList: dropdownList,
-      errorArray: errorArray,
-      errorMsg: errorMsgs[p.name],
-      dateFormat: dateFormat
-    }));
-  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-    className: styles.dividerColor
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.personal_info, styles.sectionWrapper)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 4
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Membership information",
-    headerType: true,
-    description: "You can add up to " + maxMembershipInput + " membership details"
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 8,
-    lg: 8,
-    xl: 6
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: styles.formFieldsWrapper
-  }, membershipInfoInput.length === 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    className: styles.emptyFieldContainer
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
-    className: styles.emptyFieldDescription
-  }, "No membership details added yet"), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
-    if (index >= maxMembershipInput) {
-      return null;
-    }
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: index.toString()
+      md: 4,
+      className: styles.titleContainer
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+      label: "Additional information",
+      headerType: true,
+      description: "Passport, Membership, Travel preferences..."
+    })));
+  };
+  var getAccordianDetails = function getAccordianDetails() {
+    return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.work_info, styles.sectionWrapper)
     }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
+      sm: 12,
+      md: 4
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+      label: "Passport information",
+      headerType: true
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      item: true,
+      sm: 12,
       md: 8,
-      lg: 6,
+      lg: 8,
       xl: 6
-    }, /*#__PURE__*/React__default.createElement(MembershipField, {
-      val: val,
-      index: index,
-      key: index.toString()
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+    }, passportInfo.map(function (p, i) {
+      var _clsx;
+      if (!p.visibility) {
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+        item: true,
+        sm: 12,
+        md: 12,
+        lg: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
+        xl: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
+        key: i,
+        className: clsx(styles.margin, (_clsx = {}, _clsx[styles.minGridWidth] = p.type === 'datepicker', _clsx))
+      }, /*#__PURE__*/React__default.createElement(GetInputType, {
+        _p: p,
+        inputState: passportInfoInput,
+        onValueChange: onPassportInfoInputChange,
+        dropdownList: dropdownList,
+        errorArray: errorArray,
+        errorMsg: errorMsgs[p.name],
+        dateFormat: dateFormat
+      }));
+    })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+      className: styles.dividerColor
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.personal_info, styles.sectionWrapper)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      item: true,
+      sm: 12,
+      md: 4
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+      label: "Membership information",
+      headerType: true,
+      description: "You can add up to " + maxMembershipInput + " membership details"
     })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
+      sm: 12,
       md: 8,
-      lg: 6,
+      lg: 8,
       xl: 6
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: styles.formFieldsWrapper
+    }, membershipInfoInput.length === 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      className: styles.emptyFieldContainer
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+      className: styles.emptyFieldDescription
+    }, "No membership details added yet"), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
+      display: "flex"
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add airline",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('flight');
+      }
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add hotel",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('hotel');
+      }
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add car rental",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('rental_car');
+      }
+    }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
+      if (index >= maxMembershipInput) {
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: index.toString()
+      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+        item: true,
+        md: 8,
+        lg: 6,
+        xl: 6
+      }, /*#__PURE__*/React__default.createElement(MembershipField, {
+        val: val,
+        index: index,
+        key: index.toString()
+      })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+        item: true,
+        md: 8,
+        lg: 6,
+        xl: 6
+      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+        component: "div",
+        display: "flex"
+      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
+        label: "Membership number",
+        placeholder: "Enter membership number",
+        fullwidth: false,
+        defaultValue: val.number,
+        onValueChange: function onValueChange(_ref6) {
+          var _value = _ref6._value;
+          return onMemInfoInputChange(index, 'number', _value);
+        }
+      }), /*#__PURE__*/React__default.createElement(iuistyles.IUIIconButton, {
+        style: {
+          marginTop: '30px'
+        },
+        disableRipple: true,
+        onClick: function onClick() {
+          return handleRemoveMemFields(index);
+        },
+        className: styles.backGrdColorOnHover
+      }, /*#__PURE__*/React__default.createElement(Cross, {
+        width: "14",
+        height: "14"
+      })))));
+    }), membershipInfoInput.length < maxMembershipInput && membershipInfoInput.length > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      item: true,
+      md: 8,
+      lg: 8,
+      xl: 8
     }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-      component: "div",
+      className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
       display: "flex"
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
-      label: "Membership number",
-      placeholder: "Enter membership number",
-      fullwidth: false,
-      defaultValue: val.number,
-      onValueChange: function onValueChange(_ref6) {
-        var _value = _ref6._value;
-        return onMemInfoInputChange(index, 'number', _value);
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add airline",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('flight');
       }
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIIconButton, {
-      style: {
-        marginTop: '30px'
-      },
-      disableRipple: true,
-      onClick: function onClick() {
-        return handleRemoveMemFields(index);
-      },
-      className: styles.backGrdColorOnHover
-    }, /*#__PURE__*/React__default.createElement(CrossIcon, {
-      width: "14",
-      height: "14"
-    })))));
-  }), membershipInfoInput.length < maxMembershipInput && membershipInfoInput.length > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    md: 8,
-    lg: 8,
-    xl: 8
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  })))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-    className: styles.dividerColor
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.personal_info, styles.sectionWrapper)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 4
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Travel preferences",
-    headerType: true
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 8,
-    lg: 8,
-    xl: 6
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-  }, travelPreference.map(function (p, i) {
-    if (!p.visibility) {
-      return null;
-    }
-    return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add hotel",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('hotel');
+      }
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add car rental",
+      type: "text",
+      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
+        width: "10",
+        height: "10",
+        color: "#EC5D25"
+      }),
+      className: styles.paddingTop,
+      onClick: function onClick(e) {
+        return addMemInfoInput('rental_car');
+      }
+    })))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+      className: styles.dividerColor
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.personal_info, styles.sectionWrapper)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 12,
-      lg: p.fullWidth ? 12 : 6,
-      xl: p.fullWidth ? 12 : 6,
-      key: i,
-      className: clsx(styles.margin)
-    }, /*#__PURE__*/React__default.createElement(GetInputType, {
-      _p: p,
-      inputState: travelPreferenceInfo,
-      onValueChange: travelPreferenceOnChange,
-      dropdownList: dropdownList,
-      errorArray: errorArray,
-      errorMsg: errorMsgs[p.name]
-    }));
-  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-    className: styles.dividerColor
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.personal_info, styles.sectionWrapper)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 4
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Secure traveler information",
-    headerType: true
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    item: true,
-    sm: 12,
-    md: 8,
-    lg: 8,
-    xl: 6
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-    container: true,
-    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-  }, secureTravelInfo.map(function (p, i) {
-    if (!p.visibility) {
-      return null;
-    }
-    return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      md: 4
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+      label: "Travel preferences",
+      headerType: true
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 12,
-      lg: p.fullWidth ? 12 : 6,
-      xl: p.fullWidth ? 12 : 6,
-      key: i,
-      className: clsx(styles.margin)
-    }, /*#__PURE__*/React__default.createElement(GetInputType, {
-      _p: p,
-      inputState: secureTravelInputInfo,
-      onValueChange: onSecureTraveelerInfoInputChange,
-      errorArray: errorArray,
-      errorMsg: errorMsgs[p.name]
-    }));
-  }))))));
+      md: 8,
+      lg: 8,
+      xl: 6
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+    }, travelPreference.map(function (p, i) {
+      if (!p.visibility) {
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+        item: true,
+        sm: 12,
+        md: 12,
+        lg: p.fullWidth ? 12 : 6,
+        xl: p.fullWidth ? 12 : 6,
+        key: i,
+        className: clsx(styles.margin)
+      }, /*#__PURE__*/React__default.createElement(GetInputType, {
+        _p: p,
+        inputState: travelPreferenceInfo,
+        onValueChange: travelPreferenceOnChange,
+        dropdownList: dropdownList,
+        errorArray: errorArray,
+        errorMsg: errorMsgs[p.name]
+      }));
+    })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+      className: styles.dividerColor
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.personal_info, styles.sectionWrapper)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      item: true,
+      sm: 12,
+      md: 4
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+      label: "Secure traveler information",
+      headerType: true
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      item: true,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 6
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      container: true,
+      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+    }, secureTravelInfo.map(function (p, i) {
+      if (!p.visibility) {
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+        item: true,
+        sm: 12,
+        md: 12,
+        lg: p.fullWidth ? 12 : 6,
+        xl: p.fullWidth ? 12 : 6,
+        key: i,
+        className: clsx(styles.margin)
+      }, /*#__PURE__*/React__default.createElement(GetInputType, {
+        _p: p,
+        inputState: secureTravelInputInfo,
+        onValueChange: onSecureTraveelerInfoInputChange,
+        errorArray: errorArray,
+        errorMsg: errorMsgs[p.name]
+      }));
+    })))));
+  };
+  return /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionMain, {
+    expanded: defaultExpand === 'open',
+    onChange: handleChange('open'),
+    accordionClass: styles.additionalInfoContainer,
+    summaryComponent: getAccordianSummary(),
+    summaryClass: clsx(styles.additionalInfoTitle, (_clsx2 = {}, _clsx2[styles.expandIconAlign] = defaultExpand === 'open', _clsx2)),
+    expandIcon: defaultExpand ? /*#__PURE__*/React__default.createElement(ExpandLess, {
+      width: "12px",
+      height: "7px"
+    }) : /*#__PURE__*/React__default.createElement(ExpandMore, {
+      width: "12px",
+      height: "7px"
+    }),
+    detailsComponent: getAccordianDetails(),
+    detailsClass: styles.detailsContainer
+  });
 };
 
 var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF","actionCustom":"_3Kbfm"};
@@ -6741,7 +6750,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","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","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","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn","deactivateAlert":"_3hvWz","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4"};
 
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -8002,6 +8011,19 @@ 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 ExpandMoreIcon = function ExpandMoreIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width,
+    height: props.height,
+    fill: "none",
+    viewBox: "0 0 12 7"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#6B7280",
+    d: "M.293.294a1 1 0 011.414 0L6 4.587 10.293.294a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
+  }));
+};
+
 var DropdownBtn = function DropdownBtn(props) {
   var _clsx;
   var _props$buttonText = props.buttonText,
@@ -8223,7 +8245,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     id: 'first_name',
     label: '',
     minWidth: 60,
-    sortable: true,
+    sortable: false,
     cell: function cell(row) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div",
@@ -8394,7 +8416,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     isDataFetching: isDataFetching,
     disableRowCheckbox: disableRowCheckbox,
     searchBoxWidth: "400px",
-    searchValue: searchValue
+    searchValue: searchValue,
+    hideTopPagination: false
   });
 };
 var SingupRequests = function SingupRequests(props) {
@@ -8525,6 +8548,25 @@ function InviteInfoIcon() {
   }));
 }
 
+function InfoYellowIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: props.width,
+    height: props.height,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.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__default.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__default.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"
+  }));
+}
+
 var IUIToastMessageService$7 = utils.services.IUIToastMessageService;
 var env$7 = utils.configs.env;
 var UndoButton = function UndoButton(_ref) {
@@ -8567,7 +8609,7 @@ var UserList = function UserList(_ref2) {
   var _React$useState = React__default.useState(1),
     page = _React$useState[0],
     setPage = _React$useState[1];
-  var _useState = React.useState(5),
+  var _useState = React.useState(10),
     rowsPerPage = _useState[0],
     setRowsPerPage = _useState[1];
   var _React$useState2 = React__default.useState({}),
@@ -8576,9 +8618,12 @@ var UserList = function UserList(_ref2) {
   var _React$useState3 = React__default.useState('asc'),
     order = _React$useState3[0],
     setOrder = _React$useState3[1];
-  var _React$useState4 = React__default.useState('first_name'),
-    orderBy = _React$useState4[0],
-    setOrderBy = _React$useState4[1];
+  var _React$useState4 = React__default.useState(false),
+    deactivateSingle = _React$useState4[0],
+    setDeactivateSingle = _React$useState4[1];
+  var _React$useState5 = React__default.useState('first_name'),
+    orderBy = _React$useState5[0],
+    setOrderBy = _React$useState5[1];
   var _useState2 = React.useState(''),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
@@ -8619,18 +8664,41 @@ var UserList = function UserList(_ref2) {
   var _useState12 = React.useState(''),
     userIds = _useState12[0],
     setUserIds = _useState12[1];
-  var _React$useState5 = React__default.useState(1),
-    signup_page = _React$useState5[0],
-    setSignUpPage = _React$useState5[1];
+  var _React$useState6 = React__default.useState(false),
+    overlayMenu = _React$useState6[0],
+    setOverlayMenu = _React$useState6[1];
+  useScrollPosition.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$useState7 = React__default.useState(1),
+    signup_page = _React$useState7[0],
+    setSignUpPage = _React$useState7[1];
   var _useState13 = React.useState(5),
     signup_rowsPerPage = _useState13[0],
     setSignUpRowsPerPage = _useState13[1];
-  var _React$useState6 = React__default.useState('asc'),
-    signup_order = _React$useState6[0],
-    setSignUpOrder = _React$useState6[1];
-  var _React$useState7 = React__default.useState('fname'),
-    signup_orderBy = _React$useState7[0],
-    setSignUpOrderBy = _React$useState7[1];
+  var _React$useState8 = React__default.useState('asc'),
+    signup_order = _React$useState8[0],
+    setSignUpOrder = _React$useState8[1];
+  var _React$useState9 = React__default.useState('fname'),
+    signup_orderBy = _React$useState9[0],
+    setSignUpOrderBy = _React$useState9[1];
   var _useState14 = React.useState(''),
     signup_searchValue = _useState14[0],
     set_signup_SearchValue = _useState14[1];
@@ -8650,6 +8718,12 @@ var UserList = function UserList(_ref2) {
       return state.userList;
     }),
     signupRequestListInfo = _useSelector3.signupRequestListInfo;
+  var _useState19 = React.useState({
+      value: '',
+      label: 'Select approver'
+    }),
+    travelFYI = _useState19[0],
+    setTravelFYI = _useState19[1];
   var openDeactivateModal = function openDeactivateModal() {
     if (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined) {
       IUIToastMessageService$7.warningNotify('Select at least one user to deactivate.');
@@ -8687,7 +8761,8 @@ var UserList = function UserList(_ref2) {
           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());
         });
@@ -8765,17 +8840,7 @@ var UserList = function UserList(_ref2) {
     setSortingChangeTemp(!isSortingChangeTemp);
   };
   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)));
-        }
-      }
-    });
+    setDeactivateSingle(true);
   };
   var handleDeactivateUsers = function handleDeactivateUsers() {
     dispatch(deActivateUsers(Object.values(selected).flat()));
@@ -8882,13 +8947,14 @@ var UserList = function UserList(_ref2) {
       var pageNum = page;
       var searchParam = searchValue.trim() !== '' ? '&search=' + searchValue : '';
       var orderingParam = orderBy === '' ? '' : order === 'asc' ? '&ordering=' + orderBy : '&ordering=-' + orderBy;
-      var url = userListUrl.getUser + '?length=' + rowsPerPage + '&page=' + pageNum + searchParam + orderingParam + '&pagename=company';
+      var url = userListUrl.getUser + '?length=' + rowsPerPage + '&page=' + pageNum + searchParam + orderingParam;
       if (isSearchingChange) {
         var delayDebounceFn = setTimeout(function () {
           setisApiFetching(true);
           dispatch(fetchUsersList(url)).then(function () {
             setSearchingChange(false);
             setisApiFetching(false);
+            scrollTo('table-root');
           });
         }, 1000);
         return function () {
@@ -8902,7 +8968,8 @@ var UserList = function UserList(_ref2) {
             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);
@@ -8914,6 +8981,7 @@ var UserList = function UserList(_ref2) {
       }
       if (isSortingChange) {
         setisApiFetching(true);
+        scrollTo('table-root');
         dispatch(fetchUsersList(url)).then(function () {
           setisApiFetching(false);
           setSortingChange(false);
@@ -8928,7 +8996,8 @@ var UserList = function UserList(_ref2) {
           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);
@@ -8944,7 +9013,8 @@ var UserList = function UserList(_ref2) {
             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());
           });
@@ -8952,15 +9022,89 @@ var UserList = function UserList(_ref2) {
       }
     }
   }, [isTokenVerified, isSearchingChangeTemp, isSortingChangeTemp, isSignUpSearchingChangeTemp, isSignUpSortingChangeTemp]);
+  var topRightButtons = function topRightButtons() {
+    return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: styles$5.buttonWrapper,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      alignSelf: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Export all users",
+      type: "outlined",
+      startIcon: /*#__PURE__*/React__default.createElement(BulkDownloadIcon, {
+        width: "22",
+        height: "22"
+      }),
+      onClick: handleExportUsers
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIDropdownButton, {
+      buttonText: "Bulk actions",
+      type: "outlined",
+      menuListInfo: BulkUploadInfo
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: "pageHeader--button-single button-right"
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add user",
+      type: "contained",
+      startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+        width: "9",
+        height: "9",
+        color: "white"
+      }),
+      onClick: handleAddPageNavigation
+    })));
+  };
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: styles$5.UUIUserManagementList
-  }, !hasVerificationError ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBackdrop, {
+  }, overlayMenu ? /*#__PURE__*/React__default.createElement(core.Box, {
+    className: styles$5.scrollOverlayMenu
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    className: clsx(styles$5.pageHeader)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.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__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }))) : '', !hasVerificationError ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBackdrop, {
     open: isFileDownloading || isApiFetching,
     className: styles$5.backdrop
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUICircularProgress, {
     color: "inherit"
   })), isDataFetching ? /*#__PURE__*/React__default.createElement(SkeletonLoader, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    id: "table-root",
     component: "div",
     className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -8985,44 +9129,7 @@ var UserList = function UserList(_ref2) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
-  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: styles$5.buttonWrapper,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Export all users",
-    type: "outlined",
-    startIcon: /*#__PURE__*/React__default.createElement(BulkDownloadIcon, {
-      width: "22",
-      height: "22"
-    }),
-    onClick: handleExportUsers
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIDropdownButton, {
-    buttonText: "Bulk actions",
-    type: "outlined",
-    menuListInfo: BulkUploadInfo
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: "pageHeader--button-single button-right"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add user",
-    type: "contained",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "9",
-      height: "9",
-      color: "white"
-    }),
-    onClick: handleAddPageNavigation
-  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), topRightButtons()), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
@@ -9117,6 +9224,82 @@ var UserList = function UserList(_ref2) {
       }))
     }]
   }))), /*#__PURE__*/React__default.createElement(iuistyles.IUIModal, {
+    isOpen: deactivateSingle,
+    closeHandler: function closeHandler() {
+      setDeactivateSingle(false);
+    },
+    cancelLabel: "Cancel",
+    submitLabel: "Deactivate",
+    submitHandler: handleDeactivateUsers,
+    headerText: "Deactivate this user?",
+    width: "400px",
+    subHanderText: "",
+    submitBtnClass: styles$5.deactivateBtn,
+    isDisabledSubmitBtn: true
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: styles$5.deactivateSingle
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: styles$5.deactivateAlert
+  }, /*#__PURE__*/React__default.createElement(InfoYellowIcon, {
+    width: "9",
+    height: "9"
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, null, /*#__PURE__*/React__default.createElement("b", null, "Anvesh Dunna"), " is linked with multiple roles. You can deactivate them only once you transfer the roles to another user.")), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: "iui__mb-15 iui__mt-15"
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIAsyncSelect, {
+    isMove: true,
+    additional: {
+      page: 1,
+      product: 'travel',
+      placeholder: 'Select a user'
+    },
+    placeHolderCheck: travelFYI !== undefined && travelFYI.value === '',
+    label: "Transfer admin role to",
+    value: travelFYI,
+    onValueChange: function onValueChange(_ref4) {
+      var _value = _ref4._value;
+      return setTravelFYI(_value);
+    },
+    loadOption: approversOptions,
+    disableText: "Please get in touch with your administrator to change this value."
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+    className: clsx('iui__mb-5', styles$5.departmentHeadText)
+  }, "Anvesh Dunna is the department head for: Product Design."), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: "iui__mb-15"
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIAsyncSelect, {
+    isMove: true,
+    additional: {
+      page: 1,
+      product: 'travel',
+      placeholder: 'Select a user'
+    },
+    placeHolderCheck: travelFYI !== undefined && travelFYI.value === '',
+    label: "Transfer department head role to",
+    value: travelFYI,
+    onValueChange: function onValueChange(_ref5) {
+      var _value = _ref5._value;
+      return setTravelFYI(_value);
+    },
+    loadOption: approversOptions,
+    disableText: "Please get in touch with your administrator to change this value."
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: "iui__mb-15"
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIAsyncSelect, {
+    isMove: true,
+    additional: {
+      page: 1,
+      product: 'travel',
+      placeholder: 'Select a user'
+    },
+    placeHolderCheck: travelFYI !== undefined && travelFYI.value === '',
+    label: "Transfer approver role to",
+    value: travelFYI,
+    onValueChange: function onValueChange(_ref6) {
+      var _value = _ref6._value;
+      return setTravelFYI(_value);
+    },
+    loadOption: approversOptions,
+    disableText: "Please get in touch with your administrator to change this value."
+  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIModal, {
     isOpen: Object.values(selected).flat().length > 0 && isOpenDeActivateModal,
     closeHandler: closeDeActivateModal,
     cancelLabel: "Cancel",
@@ -9185,8 +9368,8 @@ var UserList = function UserList(_ref2) {
     errMsg: hasVerificationError
   }));
 };
-var TabLabelCount = function TabLabelCount(_ref3) {
-  var count = _ref3.count;
+var TabLabelCount = function TabLabelCount(_ref7) {
+  var count = _ref7.count;
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     className: styles$5.TabLabelCount
   }, " ", count, " ");
@@ -9261,11 +9444,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,
@@ -9278,10 +9462,17 @@ 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;
+    }
+    return 'Unassigned';
+  };
   var columns = [{
     id: 'name',
     label: name,
-    width: '45%',
+    width: '40%',
     sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -9291,7 +9482,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__default.createElement(iuistyles.IUIBox, {
@@ -9301,7 +9492,67 @@ function Listview(_ref) {
   }, {
     id: 'actions',
     label: 'Actions',
-    width: '10%',
+    width: '20%',
+    cell: function cell(row) {
+      return row.code !== UNASSIGNED_USERS && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+        display: "flex"
+      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+        buttonText: "Edit",
+        className: styles$7.buttonWidth,
+        onClick: function onClick() {
+          return handleEditDialog(row);
+        }
+      }), row.no_of_users > 0 ? /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+        buttonText: "Delete",
+        className: styles$7.buttonWidth,
+        onClick: function onClick() {
+          return handleDeleteDialog(row, true);
+        }
+      }) : /*#__PURE__*/React__default.createElement(iuistyles.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__default.createElement(iuistyles.IUIBox, {
+        component: "div"
+      }, row.name);
+    }
+  }, {
+    id: 'department_head',
+    label: 'Department head',
+    width: '30%',
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+        component: "div"
+      }, deptHeadDetails(row)), row.is_default_dept_head && /*#__PURE__*/React__default.createElement(iuistyles.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__default.createElement(iuistyles.IUIBox, {
+        component: "div"
+      }, row.no_of_users);
+    }
+  }, {
+    id: 'actions',
+    label: 'Actions',
+    width: '15%',
     cell: function cell(row) {
       return row.code !== UNASSIGNED_USERS && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         display: "flex"
@@ -9334,7 +9585,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,
@@ -9391,15 +9642,41 @@ 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 = reactRedux.useSelector(function (state) {
       return state.userPanel;
     }),
     dialogData = _useSelector.dialogData;
+  var deptHeadDetails = function deptHeadDetails(data) {
+    var _data$dept_head_detai;
+    console.log(data);
+    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 = React.useState({
+      value: '',
+      label: 'Select'
+    }),
+    head = _useState[0],
+    setHead = _useState[1];
+  React.useEffect(function () {
+    deptHeadDetails(rowData);
+  }, [rowData]);
+  var history = reactRouterDom.useHistory();
+  var handleAddPageNavigation = function handleAddPageNavigation() {
+    history.push(config.routes.users.add.path);
+  };
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIModal, {
     isDisabledSubmitBtn: isDisabledSubmitBtn,
     isOpen: isOpen,
@@ -9407,25 +9684,59 @@ 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__default.createElement(iuistyles.IUIBox, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    style: {
+      marginBottom: '30px'
+    }
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "column",
-    padding: "8px 24px"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
+    className: styles$7.baseAlert
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: styles$7.alertDescContainer
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: styles$7.iconLayout,
+    style: {
+      paddingTop: '4px'
+    }
+  }, /*#__PURE__*/React__default.createElement(BoldInfoIcon, {
+    color: "#CA8A04",
+    width: "25",
+    height: "20",
+    className: styles$7.iconStyle
+  })), /*#__PURE__*/React__default.createElement(iuistyles.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__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add user",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "9",
+      height: "9",
+      color: "#EC5D25"
+    }),
+    onClick: handleAddPageNavigation,
+    className: styles$7.addUserButton
+  }))), /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
     label: name + " name",
     name: "name",
     defaultValue: dialogData.data.name,
@@ -9434,7 +9745,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__default.createElement(iuistyles.IUIBox, {
+    className: "iui__mt-15",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
+    label: "Department head",
+    name: "name",
+    defaultValue: head.label,
+    placeholder: "",
+    readOnly: true,
+    style: {
+      width: '350px'
+    }
+  })), tableName === 'department' && rowData.no_of_users > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: "iui__mt-15",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.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'
+    }
   })));
 }
 
@@ -9613,12 +9966,15 @@ var UserPanel = function UserPanel(_ref) {
   var _useState13 = React.useState(false),
     isSortingChangeTemp = _useState13[0],
     setSortingChangeTemp = _useState13[1];
-  var _useState14 = React.useState(1),
-    page = _useState14[0],
-    setPage = _useState14[1];
-  var _useState15 = React.useState(5),
-    rowsPerPage = _useState15[0],
-    setRowsPerPage = _useState15[1];
+  var _useState14 = React.useState([]),
+    rowData = _useState14[0],
+    setRowData = _useState14[1];
+  var _useState15 = React.useState(1),
+    page = _useState15[0],
+    setPage = _useState15[1];
+  var _useState16 = React.useState(5),
+    rowsPerPage = _useState16[0],
+    setRowsPerPage = _useState16[1];
   var orderingParam = orderBy;
   var _useSelector = reactRedux.useSelector(function (state) {
       return state.userPanel;
@@ -9714,6 +10070,7 @@ var UserPanel = function UserPanel(_ref) {
       submitLabel: 'Save'
     }, '', data));
     setDataList(data.name);
+    setRowData(data);
     setEditModal(true);
   };
   var closeEditDialog = function closeEditDialog() {
@@ -9728,6 +10085,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 {
@@ -9741,9 +10104,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') {
@@ -9785,8 +10151,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);
@@ -9893,7 +10265,10 @@ var UserPanel = function UserPanel(_ref) {
     submitHandler: handleEditPanel,
     isError: errorEdit,
     isDisabledSubmitBtn: loading,
-    validation: validation
+    validation: validation,
+    rowData: rowData,
+    tableName: tableName,
+    config: config
   })) : /*#__PURE__*/React__default.createElement(VerificationError, {
     config: config
   }));