@itilite/iui-user-management 0.1.18 → 0.2.0

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-import { IUITypography, IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUITypography, IUIDivider, IUIGrid, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
 import React, { useState, useEffect, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
-import axios from 'axios';
 import moment from 'moment';
+import axios from 'axios';
 import AddIcon$1 from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { useDispatch, useSelector, Provider } from 'react-redux';
@@ -178,6 +178,186 @@ function clsx() {
   return n;
 }
 
+function GetInputType(_ref) {
+  var _p = _ref._p,
+      _ref$inputState = _ref.inputState,
+      inputState = _ref$inputState === void 0 ? {} : _ref$inputState,
+      _ref$customHandler = _ref.customHandler,
+      customHandler = _ref$customHandler === void 0 ? function () {} : _ref$customHandler,
+      _ref$dropdownList = _ref.dropdownList,
+      dropdownList = _ref$dropdownList === void 0 ? {} : _ref$dropdownList,
+      _ref$dateFormat = _ref.dateFormat,
+      dateFormat = _ref$dateFormat === void 0 ? 'dd MMM yyyy' : _ref$dateFormat,
+      _ref$errorArray = _ref.errorArray,
+      errorArray = _ref$errorArray === void 0 ? [] : _ref$errorArray,
+      _ref$errorMsg = _ref.errorMsg,
+      errorMsg = _ref$errorMsg === void 0 ? '' : _ref$errorMsg,
+      _ref$showNaOption = _ref.showNaOption,
+      showNaOption = _ref$showNaOption === void 0 ? false : _ref$showNaOption;
+
+  switch (_p.type) {
+    case 'input':
+      return /*#__PURE__*/React.createElement(IUIInput, {
+        label: _p.label,
+        secondaryLabel: _p.secondaryLabel,
+        fullWidth: _p.fullWidth,
+        name: _p.name,
+        id: _p.name,
+        defaultValue: inputState[_p.name],
+        customHandler: customHandler,
+        placeholder: _p.placeholder,
+        validation: _p.validation,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        required: _p.required,
+        readOnly: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        disableText: _p.disableText
+      });
+
+    case 'datepicker':
+      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
+        label: _p.label,
+        required: _p.required
+      }), /*#__PURE__*/React.createElement(IUIDatePicker, {
+        label: _p.label,
+        fullWidth: _p.fullWidth,
+        hasIcon: _p.hasIcon,
+        size: _p.size,
+        name: _p.name,
+        id: _p.name,
+        dateValue: inputState[_p.name],
+        customHandler: customHandler,
+        displayDateType: dateFormat,
+        placeholder: dateFormat.toUpperCase(),
+        maxDate: _p.maxDate,
+        minDate: _p.minDate,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        disabled: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        required: _p.required,
+        disableText: _p.disableText
+      }));
+
+    case 'select':
+      return /*#__PURE__*/React.createElement(IUISelect, {
+        label: _p.label,
+        fullWidth: _p.fullWidth,
+        list: dropdownList[_p.name],
+        valueKey: "name",
+        required: _p.required,
+        name: _p.name,
+        id: _p.name,
+        value: inputState[_p.name],
+        customSelectHandler: customHandler,
+        menuItemTitle: _p.placeholder,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        readOnly: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        disableText: _p.disableText
+      });
+
+    case 'phone':
+      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
+        label: _p.label,
+        required: _p.required
+      }), /*#__PURE__*/React.createElement(IUIPhone, {
+        list: dropdownList[_p.name],
+        name: _p.name,
+        id: _p.name,
+        value: inputState[_p.name],
+        required: _p.required,
+        selectedCountryOverride: inputState.country_code,
+        customHandler: customHandler,
+        validation: _p.validation,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        readOnly: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip
+      }));
+
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(IUICheckboxButton, {
+        label: _p.label,
+        isCheckbox: true,
+        customHandler: customHandler,
+        checkboxFlag: inputState[_p.name],
+        disabled: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        id: _p.name,
+        disableText: _p.disableText
+      });
+
+    case 'file':
+      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
+        label: _p.label,
+        required: _p.required,
+        description: _p.description,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip
+      }), /*#__PURE__*/React.createElement(IUIFileUpload, {
+        multiple: _p.multiple,
+        title: _p.title,
+        fileType: _p.fileType,
+        name: _p.name,
+        id: _p.name,
+        customHandler: customHandler,
+        value: inputState[_p.name],
+        maxFiles: _p.maxNoFiles,
+        maxFileSize: _p.fileSize,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        readOnly: _p.readOnly,
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        disableText: _p.disableText,
+        buttonType: _p.buttonType
+      }));
+
+    case 'async_select':
+      return /*#__PURE__*/React.createElement(IUIAsyncSelect, {
+        id: _p.name,
+        additional: {
+          page: 1,
+          tabelName: _p.tabelName,
+          product: _p.product,
+          placeholder: _p.placeholder,
+          userId: _p.editUserId,
+          selectCTA: _p.selectCTA,
+          showNaOption: showNaOption
+        },
+        label: _p.label,
+        secondaryLabel: _p.secondaryLabel,
+        title: _p.title,
+        value: inputState[_p.name],
+        name: _p.name,
+        customSelectHandler: customHandler,
+        inputType: _p.inputType,
+        loadOption: _p.loadOption,
+        isError: errorArray.indexOf(_p.name) !== -1,
+        errorMsg: errorMsg,
+        required: _p.required,
+        readOnly: _p.readOnly,
+        placeHolderCheck: inputState[_p.name] !== undefined && inputState[_p.name].value === '',
+        hasInfoIcon: !!_p.tooltip,
+        tooltipText: _p.tooltip,
+        disableText: _p.disableText,
+        selectCTA: _p.selectCTA,
+        clearCache: _p.clearCache
+      });
+
+    default:
+      return null;
+  }
+}
+
 var env = configs.env;
 var IUILocalStorageService = services.IUILocalStorageService;
 var userAddEditUrl = {
@@ -272,264 +452,28 @@ var userPanelUrl = {
   deleteUnit: function deleteUnit(tableName) {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?action=delete&table=" + tableName;
   },
-  getUnit: function getUnit(tableName, length) {
-    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length;
+  getUnit: function getUnit(tableName, length, sort) {
+    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&order=" + sort;
   },
-  getPaginationUnit: function getPaginationUnit(tableName, length, page) {
-    return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/table?table_name=" + tableName + "&length=" + length + "&page=" + page;
+  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;
   },
   moveUnit: function moveUnit() {
     return "api/v1/user-management/company/" + IUILocalStorageService.getCompanyId() + "/transfer-users";
   }
 };
 
-var IUILocalStorageService$1 = services.IUILocalStorageService;
-var api = configs.api;
-var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref) {
-  var page = _ref.page,
-      tabelName = _ref.tabelName,
-      placeholder = _ref.placeholder,
-      selectCTA = _ref.selectCTA,
-      showNaOption = _ref.showNaOption;
-
-  try {
-    return Promise.resolve(_catch(function () {
-      var url = userAddEditUrl.dropdownList() + ("?page=" + page + "&table_name=" + tabelName + "&search=" + search);
-      return Promise.resolve(api.get(url).then(function (res) {
-        return res.data;
-      })).then(function (response) {
-        var mappedValue = response.results.map(function (item) {
-          return {
-            value: item.id,
-            label: item.name
-          };
-        });
-
-        if (showNaOption && page === 1 && NAoptionConfig.applyFor.includes(tabelName)) {
-          mappedValue.unshift(NAoptionConfig.option);
-        }
-
-        if (response.next === null && selectCTA) {
-          mappedValue.push({
-            value: selectCTA.value,
-            label: ''
-          });
-        }
-
-        return {
-          options: mappedValue,
-          hasMore: !!response.next,
-          additional: {
-            page: page + 1,
-            tabelName: tabelName,
-            placeholder: placeholder,
-            selectCTA: selectCTA
-          }
-        };
-      });
-    }, function () {
-      return {
-        options: [],
-        hasMore: false,
-        additional: {
-          page: 1,
-          tabelName: tabelName,
-          placeholder: placeholder,
-          selectCTA: selectCTA
-        }
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var currencyLoadOptions = function currencyLoadOptions(search, loadedOptions, _ref3) {
-  var page = _ref3.page;
-
-  try {
-    return Promise.resolve(_catch(function () {
-      return Promise.resolve(api.get(userAddEditUrl.currencyCode() + "&search=" + search + "&page=" + page).then(function (res) {
-        return res.data;
-      })).then(function (response) {
-        var mappedValue = response.results.map(function (item) {
-          return {
-            value: item.currency_code,
-            label: item.currency_code
-          };
-        });
-        return {
-          options: mappedValue,
-          hasMore: !!response.next,
-          additional: {
-            page: page + 1
-          }
-        };
-      });
-    }, function () {
-      return {
-        options: [],
-        hasMore: false,
-        additional: {
-          page: 1
-        }
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var approversOptions = function approversOptions(search, loadedOptions, _ref4) {
-  var page = _ref4.page,
-      product = _ref4.product,
-      userId = _ref4.userId,
-      placeholder = _ref4.placeholder;
-
-  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 res.data;
-      })).then(function (response) {
-        var mappedValue = response.results.map(function (item) {
-          return {
-            value: item.approver,
-            label: item.approver
-          };
-        });
-
-        if (page === 1) {
-          var placeholderLbl = {
-            value: '',
-            label: placeholder
-          };
-          mappedValue.unshift(placeholderLbl);
-        }
-
-        return {
-          options: mappedValue,
-          hasMore: !!response.next,
-          additional: {
-            page: page + 1,
-            product: product,
-            userId: userId
-          }
-        };
-      });
-    }, function () {
-      return {
-        options: [],
-        hasMore: false,
-        additional: {
-          page: 1,
-          product: product,
-          userId: userId
-        }
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var countryOptions = function countryOptions(search, loadedOptions, _ref5) {
-  var page = _ref5.page,
-      tabelName = _ref5.tabelName;
-
-  try {
-    return Promise.resolve(_catch(function () {
-      return Promise.resolve(api.get(userAddEditUrl.countryPaginated() + "&search=" + search + "&page=" + page + "&info=" + tabelName).then(function (res) {
-        return res.data;
-      })).then(function (response) {
-        var mappedValue = response.results.map(function (item) {
-          return {
-            value: item[tabelName],
-            label: item[tabelName]
-          };
-        });
-        return {
-          options: mappedValue,
-          hasMore: !!response.next,
-          additional: {
-            page: page + 1,
-            tabelName: tabelName
-          }
-        };
-      });
-    }, function () {
-      return {
-        options: [],
-        hasMore: false,
-        additional: {
-          page: 1,
-          tabelName: tabelName
-        }
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var airlineOptionsfn = function airlineOptionsfn(search, loadedOptions, _ref6) {
-  var page = _ref6.page,
-      placeholder = _ref6.placeholder;
-
-  try {
-    return Promise.resolve(_catch(function () {
-      var url = userAddEditUrl.airlineList() + ("?page=" + page + "&search=" + search);
-      var token = IUILocalStorageService$1.getAccessToken();
-      return Promise.resolve(axios.get(url, {
-        headers: {
-          Authorization: 'Bearer ' + token
-        }
-      })).then(function (response) {
-        return Promise.resolve(response.data.results.map(function (item) {
-          return {
-            value: item.id,
-            label: item.name
-          };
-        })).then(function (mappedValue) {
-          if (placeholder) {
-            var placeholderLbl = {
-              value: '',
-              label: placeholder
-            };
-            mappedValue.unshift(placeholderLbl);
-          }
-
-          return {
-            options: mappedValue,
-            hasMore: !!response.data.next,
-            additional: {
-              page: page + 1,
-              placeholder: placeholder
-            }
-          };
-        });
-      });
-    }, function () {
-      return {
-        options: [],
-        hasMore: false,
-        additional: {
-          page: 1,
-          placeholder: placeholder
-        }
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
-var dob = {
-  maxDate: moment().subtract(18, 'years'),
-  minDate: moment().subtract(300, 'years')
-};
-var passportStart = {
-  maxDate: moment(),
-  minDate: moment().subtract(100, 'years')
-};
-var passportEnd = {
-  maxDate: moment().add(18, 'years'),
-  minDate: moment()
+var dob = {
+  maxDate: moment().subtract(18, 'years'),
+  minDate: moment().subtract(300, 'years')
+};
+var passportStart = {
+  maxDate: moment(),
+  minDate: moment().subtract(100, 'years')
+};
+var passportEnd = {
+  maxDate: moment().add(18, 'years'),
+  minDate: moment()
 };
 
 var personalInfo = [{
@@ -1173,186 +1117,281 @@ var NAoptionConfig = {
   },
   applyFor: ['employee_level', 'department']
 };
+var userAddPageFormLabels = {
+  user_personal_info: {
+    first_name: 'First and middle name',
+    last_name: 'Last name',
+    email: 'Email address',
+    contact_number: 'Phone number',
+    dob: 'Date of birth',
+    gender: 'Gender',
+    profile_pic: 'Profile photo'
+  },
+  employee_info: {
+    emp_level: 'Employee level',
+    employee_id: 'Employee ID',
+    entity: 'Entity',
+    business_unit: 'Business unit',
+    department: 'Department',
+    designation: 'Designation',
+    base_location: 'Base location',
+    currency: 'Default currency'
+  },
+  user_travel_info: {
+    nationality: 'Nationality',
+    passport_number: 'Passport number',
+    passport_expiry_date: 'Date of expiry',
+    passport_issue_country: 'Passport issuing country',
+    passport_issue_date: 'Date of issue',
+    passport_photo: 'Photo of passport',
+    travel_docs: 'Travel documents',
+    flight_seat_preference: 'Flight seat preference',
+    meal_preference: 'Meals preference',
+    trusted_traveller: 'Known traveler number',
+    redress_number: 'Redress number'
+  },
+  products: {
+    travel: 'Travel',
+    expense: 'Expense'
+  },
+  travel_fyi_approver: 'FYI approver'
+};
 
-function GetInputType(_ref) {
-  var _p = _ref._p,
-      _ref$inputState = _ref.inputState,
-      inputState = _ref$inputState === void 0 ? {} : _ref$inputState,
-      _ref$customHandler = _ref.customHandler,
-      customHandler = _ref$customHandler === void 0 ? function () {} : _ref$customHandler,
-      _ref$dropdownList = _ref.dropdownList,
-      dropdownList = _ref$dropdownList === void 0 ? {} : _ref$dropdownList,
-      _ref$dateFormat = _ref.dateFormat,
-      dateFormat = _ref$dateFormat === void 0 ? 'dd MMM yyyy' : _ref$dateFormat,
-      _ref$errorArray = _ref.errorArray,
-      errorArray = _ref$errorArray === void 0 ? [] : _ref$errorArray,
-      _ref$errorMsg = _ref.errorMsg,
-      errorMsg = _ref$errorMsg === void 0 ? '' : _ref$errorMsg,
-      _ref$showNaOption = _ref.showNaOption,
-      showNaOption = _ref$showNaOption === void 0 ? false : _ref$showNaOption;
+var IUILocalStorageService$1 = services.IUILocalStorageService;
+var api = configs.api;
+var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref) {
+  var page = _ref.page,
+      tabelName = _ref.tabelName,
+      placeholder = _ref.placeholder,
+      selectCTA = _ref.selectCTA,
+      showNaOption = _ref.showNaOption;
 
-  switch (_p.type) {
-    case 'input':
-      return /*#__PURE__*/React.createElement(IUIInput, {
-        label: _p.label,
-        secondaryLabel: _p.secondaryLabel,
-        fullWidth: _p.fullWidth,
-        name: _p.name,
-        id: _p.name,
-        defaultValue: inputState[_p.name],
-        customHandler: customHandler,
-        placeholder: _p.placeholder,
-        validation: _p.validation,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        required: _p.required,
-        readOnly: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        disableText: _p.disableText
+  try {
+    return Promise.resolve(_catch(function () {
+      var url = userAddEditUrl.dropdownList() + ("?page=" + page + "&table_name=" + tabelName + "&search=" + search);
+      return Promise.resolve(api.get(url).then(function (res) {
+        return res.data;
+      })).then(function (response) {
+        var mappedValue = response.results.map(function (item) {
+          return {
+            value: item.id,
+            label: item.name
+          };
+        });
+
+        if (showNaOption && page === 1 && NAoptionConfig.applyFor.includes(tabelName)) {
+          mappedValue.unshift(NAoptionConfig.option);
+        }
+
+        if (response.next === null && selectCTA) {
+          mappedValue.push({
+            value: selectCTA.value,
+            label: ''
+          });
+        }
+
+        return {
+          options: mappedValue,
+          hasMore: !!response.next,
+          additional: {
+            page: page + 1,
+            tabelName: tabelName,
+            placeholder: placeholder,
+            selectCTA: selectCTA
+          }
+        };
       });
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
+        additional: {
+          page: 1,
+          tabelName: tabelName,
+          placeholder: placeholder,
+          selectCTA: selectCTA
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var currencyLoadOptions = function currencyLoadOptions(search, loadedOptions, _ref3) {
+  var page = _ref3.page;
 
-    case 'datepicker':
-      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
-        label: _p.label,
-        required: _p.required
-      }), /*#__PURE__*/React.createElement(IUIDatePicker, {
-        label: _p.label,
-        fullWidth: _p.fullWidth,
-        hasIcon: _p.hasIcon,
-        size: _p.size,
-        name: _p.name,
-        id: _p.name,
-        dateValue: inputState[_p.name],
-        customHandler: customHandler,
-        displayDateType: dateFormat,
-        placeholder: dateFormat.toUpperCase(),
-        maxDate: _p.maxDate,
-        minDate: _p.minDate,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        disabled: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        required: _p.required,
-        disableText: _p.disableText
-      }));
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(api.get(userAddEditUrl.currencyCode() + "&search=" + search + "&page=" + page).then(function (res) {
+        return res.data;
+      })).then(function (response) {
+        var mappedValue = response.results.map(function (item) {
+          return {
+            value: item.currency_code,
+            label: item.currency_code
+          };
+        });
+        return {
+          options: mappedValue,
+          hasMore: !!response.next,
+          additional: {
+            page: page + 1
+          }
+        };
+      });
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
+        additional: {
+          page: 1
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var approversOptions = function approversOptions(search, loadedOptions, _ref4) {
+  var page = _ref4.page,
+      product = _ref4.product,
+      userId = _ref4.userId,
+      placeholder = _ref4.placeholder;
 
-    case 'select':
-      return /*#__PURE__*/React.createElement(IUISelect, {
-        label: _p.label,
-        fullWidth: _p.fullWidth,
-        list: dropdownList[_p.name],
-        valueKey: "name",
-        required: _p.required,
-        name: _p.name,
-        id: _p.name,
-        value: inputState[_p.name],
-        customSelectHandler: customHandler,
-        menuItemTitle: _p.placeholder,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        readOnly: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        disableText: _p.disableText
+  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 res.data;
+      })).then(function (response) {
+        var mappedValue = response.results.map(function (item) {
+          return {
+            value: item.approver,
+            label: item.approver
+          };
+        });
+
+        if (page === 1) {
+          var placeholderLbl = {
+            value: '',
+            label: placeholder
+          };
+          mappedValue.unshift(placeholderLbl);
+        }
+
+        return {
+          options: mappedValue,
+          hasMore: !!response.next,
+          additional: {
+            page: page + 1,
+            product: product,
+            userId: userId
+          }
+        };
       });
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
+        additional: {
+          page: 1,
+          product: product,
+          userId: userId
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var countryOptions = function countryOptions(search, loadedOptions, _ref5) {
+  var page = _ref5.page,
+      tabelName = _ref5.tabelName;
 
-    case 'phone':
-      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
-        label: _p.label,
-        required: _p.required
-      }), /*#__PURE__*/React.createElement(IUIPhone, {
-        list: dropdownList[_p.name],
-        name: _p.name,
-        id: _p.name,
-        value: inputState[_p.name],
-        required: _p.required,
-        selectedCountryOverride: inputState.country_code,
-        customHandler: customHandler,
-        validation: _p.validation,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        readOnly: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip
-      }));
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(api.get(userAddEditUrl.countryPaginated() + "&search=" + search + "&page=" + page + "&info=" + tabelName).then(function (res) {
+        return res.data;
+      })).then(function (response) {
+        var mappedValue = response.results.map(function (item) {
+          return {
+            value: item[tabelName],
+            label: item[tabelName]
+          };
+        });
+        return {
+          options: mappedValue,
+          hasMore: !!response.next,
+          additional: {
+            page: page + 1,
+            tabelName: tabelName
+          }
+        };
+      });
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
+        additional: {
+          page: 1,
+          tabelName: tabelName
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var airlineOptionsfn = function airlineOptionsfn(search, loadedOptions, _ref6) {
+  var page = _ref6.page,
+      placeholder = _ref6.placeholder;
+
+  try {
+    return Promise.resolve(_catch(function () {
+      var url = userAddEditUrl.airlineList() + ("?page=" + page + "&search=" + search);
+      var token = IUILocalStorageService$1.getAccessToken();
+      return Promise.resolve(axios.get(url, {
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      })).then(function (response) {
+        return Promise.resolve(response.data.results.map(function (item) {
+          return {
+            value: item.id,
+            label: item.name
+          };
+        })).then(function (mappedValue) {
+          if (placeholder) {
+            var placeholderLbl = {
+              value: '',
+              label: placeholder
+            };
+            mappedValue.unshift(placeholderLbl);
+          }
 
-    case 'checkbox':
-      return /*#__PURE__*/React.createElement(IUICheckboxButton, {
-        label: _p.label,
-        isCheckbox: true,
-        customHandler: customHandler,
-        checkboxFlag: inputState[_p.name],
-        disabled: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        id: _p.name,
-        disableText: _p.disableText
+          return {
+            options: mappedValue,
+            hasMore: !!response.data.next,
+            additional: {
+              page: page + 1,
+              placeholder: placeholder
+            }
+          };
+        });
       });
-
-    case 'file':
-      return /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUILabel, {
-        label: _p.label,
-        required: _p.required,
-        description: _p.description,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip
-      }), /*#__PURE__*/React.createElement(IUIFileUpload, {
-        multiple: _p.multiple,
-        title: _p.title,
-        fileType: _p.fileType,
-        name: _p.name,
-        id: _p.name,
-        customHandler: customHandler,
-        value: inputState[_p.name],
-        maxFiles: _p.maxNoFiles,
-        maxFileSize: _p.fileSize,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        readOnly: _p.readOnly,
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        disableText: _p.disableText,
-        buttonType: _p.buttonType
-      }));
-
-    case 'async_select':
-      return /*#__PURE__*/React.createElement(IUIAsyncSelect, {
-        id: _p.name,
+    }, function () {
+      return {
+        options: [],
+        hasMore: false,
         additional: {
           page: 1,
-          tabelName: _p.tabelName,
-          product: _p.product,
-          placeholder: _p.placeholder,
-          userId: _p.editUserId,
-          selectCTA: _p.selectCTA,
-          showNaOption: showNaOption
-        },
-        label: _p.label,
-        secondaryLabel: _p.secondaryLabel,
-        title: _p.title,
-        value: inputState[_p.name],
-        name: _p.name,
-        customSelectHandler: customHandler,
-        inputType: _p.inputType,
-        loadOption: _p.loadOption,
-        isError: errorArray.indexOf(_p.name) !== -1,
-        errorMsg: errorMsg,
-        required: _p.required,
-        readOnly: _p.readOnly,
-        placeHolderCheck: inputState[_p.name] !== undefined && inputState[_p.name].value === '',
-        hasInfoIcon: !!_p.tooltip,
-        tooltipText: _p.tooltip,
-        disableText: _p.disableText,
-        selectCTA: _p.selectCTA,
-        clearCache: _p.clearCache
-      });
-
-    default:
-      return null;
+          placeholder: placeholder
+        }
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
   }
-}
+};
 
 var UserRole = function UserRole(_ref) {
   var _ref$list = _ref.list,
@@ -2386,98 +2425,85 @@ var closeDialog = function closeDialog() {
     type: CLOSE_DIALOG
   };
 };
-var getUserPanalOnPageChange = function getUserPanalOnPageChange(tableName, length, page) {
-  return function (dispatch) {
-    return new Promise(function (resolve, reject) {
-      api$3.get(userPanelUrl.getPaginationUnit(tableName, length, page)).then(function (res) {
-        dispatch({
-          type: FETCH_USERPANEL_DATA,
-          payload: res.data
-        });
-        dispatch(userPanelStopLoader());
-        resolve();
-      })["catch"](function () {
-        dispatch(userPanelStopLoader());
-      });
-    });
-  };
-};
-var getUserPanalData = function getUserPanalData(tableName, length) {
+var getUserPanalData = function getUserPanalData(params) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$3.get(userPanelUrl.getUnit(tableName, length)).then(function (res) {
+      api$3.get(userPanelUrl.getPaginationUnit(params.tableName, params.rowsPerPage, params.page, params.orderingParam)).then(function (res) {
         dispatch({
           type: FETCH_USERPANEL_DATA,
           payload: res.data
         });
         dispatch(userPanelStopLoader());
         resolve();
-      })["catch"](function () {
+      })["catch"](function (err) {
+        var _err$response, _err$response$data;
+
         dispatch(userPanelStopLoader());
+        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.message) || 'Opps, Something went wrong.');
       });
     });
   };
 };
-var addRecord = function addRecord(tableName, data) {
+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) {
-        dispatch(getUserPanalData(tableName, 5));
+        dispatch(getUserPanalData(getParam));
         dispatch(closeDialog());
         resolve(res);
       })["catch"](function (err) {
-        var _err$response, _err$response$data;
+        var _err$response2, _err$response2$data;
 
         dispatch(userPanelStopLoader());
-        IUIToastMessageService$2.warningNotify((err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.message) || 'Opps, Something went wrong.');
+        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.');
       });
     });
   };
 };
-var deleteRecord = function deleteRecord(tableName, id) {
+var deleteRecord = function deleteRecord(tableName, id, getParam) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
       api$3.post(userPanelUrl.deleteUnit(tableName), id).then(function (res) {
-        dispatch(getUserPanalOnPageChange(tableName, 5, 1));
+        dispatch(getUserPanalData(getParam));
         dispatch(closeDialog());
         dispatch(userPanelStopLoader());
         resolve();
       })["catch"](function (err) {
-        var _err$response2, _err$response2$data;
+        var _err$response3, _err$response3$data;
 
-        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.');
         dispatch(userPanelStopLoader());
       });
     });
   };
 };
-var editRecord = function editRecord(tableName, data) {
+var editRecord = function editRecord(tableName, data, getParam) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
       api$3.post(userPanelUrl.editUnit(tableName), data).then(function (res) {
-        dispatch(getUserPanalOnPageChange(tableName, 5, 1));
+        dispatch(getUserPanalData(getParam));
         dispatch(closeDialog());
         resolve();
       })["catch"](function (err) {
-        var _err$response3, _err$response3$data;
+        var _err$response4, _err$response4$data;
 
         dispatch(userPanelStopLoader());
-        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.');
+        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.');
       });
     });
   };
 };
-var moveRecord = function moveRecord(tableName, data) {
+var moveRecord = function moveRecord(tableName, data, getParam) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
       api$3.post(userPanelUrl.moveUnit(tableName), data).then(function (res) {
-        dispatch(getUserPanalData(tableName, 5));
+        dispatch(getUserPanalData(getParam));
         dispatch(closeDialog());
         resolve(res);
       })["catch"](function (err) {
-        var _err$response4, _err$response4$data;
+        var _err$response5, _err$response5$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.');
+        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.');
       });
     });
   };
@@ -3426,7 +3452,9 @@ var initialState = {
     secureTravelInfo: secureTravelInfo,
     disableText: '',
     travelRoles: travelConstants.roles,
-    expenseRoles: expenseConstants.roles
+    expenseRoles: expenseConstants.roles,
+    travelConstants: travelConstants,
+    expenseConstants: expenseConstants
   },
   dropdownList: dropdownList,
   maxTravelApprovers: 10,
@@ -3461,6 +3489,10 @@ var reducer = function reducer(state, action) {
       {
         var _action$payload, _action$payload$appro, _action$payload$appro2, _action$payload2, _action$payload2$appr, _action$payload2$appr2, _action$payload3, _action$payload3$trav, _action$payload4, _action$payload4$expe, _action$payload5, _action$payload5$flig, _action$payload6, _action$payload6$meal, _action$payload7;
 
+        if (!action.payload.labels) {
+          action.payload.labels = userAddPageFormLabels;
+        }
+
         var renderFields = _extends({}, state.renderFields);
 
         var _action$payload$visib = action.payload.visibility,
@@ -3471,14 +3503,36 @@ var reducer = function reducer(state, action) {
             userPersonalInfoOptionalFields = _action$payload$optio.user_personal_info,
             employeeInfoOptionalFields = _action$payload$optio.employee_info,
             userTravelInfoOptionalFields = _action$payload$optio.user_travel_info;
-        renderFields.personalInfo = setFieldsDisplayAtt(renderFields.personalInfo, userPersonalInfo, userPersonalInfoOptionalFields);
-        renderFields.workInfo = setFieldsDisplayAtt(renderFields.workInfo, employeeInfo, employeeInfoOptionalFields);
-        renderFields.passportInfo = setFieldsDisplayAtt(renderFields.passportInfo, userTravelInfo, userTravelInfoOptionalFields);
-        renderFields.travelPreference = setFieldsDisplayAtt(renderFields.travelPreference, userTravelInfo, userTravelInfoOptionalFields);
-        renderFields.secureTravelInfo = setFieldsDisplayAtt(renderFields.secureTravelInfo, userTravelInfo, userTravelInfoOptionalFields);
+        var _action$payload$label = action.payload.labels,
+            userPersonalInfoLabels = _action$payload$label.user_personal_info,
+            employeeInfoLabels = _action$payload$label.employee_info,
+            userTravelInfoLabels = _action$payload$label.user_travel_info,
+            productLabels = _action$payload$label.products,
+            travelFYIlabel = _action$payload$label.travel_fyi_approver,
+            expenseFYIlabel = _action$payload$label.expense_fyi_approver;
+        renderFields.personalInfo = setFieldsDisplayAtt(renderFields.personalInfo, userPersonalInfo, userPersonalInfoOptionalFields, userPersonalInfoLabels);
+        renderFields.workInfo = setFieldsDisplayAtt(renderFields.workInfo, employeeInfo, employeeInfoOptionalFields, employeeInfoLabels);
+        renderFields.passportInfo = setFieldsDisplayAtt(renderFields.passportInfo, userTravelInfo, userTravelInfoOptionalFields, userTravelInfoLabels);
+        renderFields.travelPreference = setFieldsDisplayAtt(renderFields.travelPreference, userTravelInfo, userTravelInfoOptionalFields, userTravelInfoLabels);
+        renderFields.secureTravelInfo = setFieldsDisplayAtt(renderFields.secureTravelInfo, userTravelInfo, userTravelInfoOptionalFields, userTravelInfoLabels);
         renderFields.products = renderFields.products.filter(function (product) {
           return action.payload.products.includes(product.name);
+        }).map(function (product) {
+          if (productLabels && Object.hasOwnProperty.call(productLabels, product.name)) {
+            product.label = productLabels[product.name];
+          }
+
+          return product;
         });
+
+        if (travelFYIlabel) {
+          renderFields.travelConstants.FYILabel = travelFYIlabel;
+        }
+
+        if (expenseFYIlabel) {
+          renderFields.expenseConstants.FYILabel = expenseFYIlabel;
+        }
+
         renderFields.custom_attributes = action.payload.custom_attributes;
 
         if (action !== null && action !== void 0 && (_action$payload = action.payload) !== null && _action$payload !== void 0 && (_action$payload$appro = _action$payload.approvers) !== null && _action$payload$appro !== void 0 && (_action$payload$appro2 = _action$payload$appro.travel) !== null && _action$payload$appro2 !== void 0 && _action$payload$appro2.length) {
@@ -3735,7 +3789,7 @@ var reducer = function reducer(state, action) {
   }
 };
 
-var setFieldsDisplayAtt = function setFieldsDisplayAtt(objToLoop, visibilityObj, optionalObj) {
+var setFieldsDisplayAtt = function setFieldsDisplayAtt(objToLoop, visibilityObj, optionalObj, labelsObj) {
   return objToLoop.map(function (p) {
     var key = p.name;
 
@@ -3761,6 +3815,10 @@ var setFieldsDisplayAtt = function setFieldsDisplayAtt(objToLoop, visibilityObj,
       p.required = false;
     }
 
+    if (labelsObj && Object.hasOwnProperty.call(labelsObj, p.name)) {
+      p.label = labelsObj[p.name];
+    }
+
     return p;
   });
 };
@@ -6503,7 +6561,7 @@ var UserAddEdit = function UserAddEdit(props) {
     className: styles.dividerColor
   }), productAccess && productAccess.travel && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(TravelExpenseFields, {
     fieldsInfo: renderFields.travelApprovers,
-    travelConstants: travelConstants,
+    travelConstants: renderFields.travelConstants,
     type: "travel",
     addFields: function addFields() {
       return dispatch(addTravelApproverField());
@@ -6541,7 +6599,7 @@ var UserAddEdit = function UserAddEdit(props) {
     className: styles.dividerColor
   }), productAccess && productAccess.expense && /*#__PURE__*/React.createElement(TravelExpenseFields, {
     fieldsInfo: renderFields.expenseApprovers,
-    travelConstants: expenseConstants,
+    travelConstants: renderFields.expenseConstants,
     type: "expense",
     addFields: function addFields() {
       return dispatch(addExpenseApproverField());
@@ -8838,9 +8896,13 @@ var index$2 = withStore(UserList);
 
 function Header(props) {
   var HeaderButton = props.HeaderButton,
-      name = props.name,
-      headingName = props.headingName,
-      subHeading = props.subHeading;
+      _props$name = props.name,
+      name = _props$name === void 0 ? '' : _props$name,
+      _props$headingName = props.headingName,
+      headingName = _props$headingName === void 0 ? '' : _props$headingName,
+      _props$subHeading = props.subHeading,
+      subHeading = _props$subHeading === void 0 ? '' : _props$subHeading,
+      loading = props.loading;
 
   var _useSelector = useSelector(function (state) {
     return state.common;
@@ -8873,7 +8935,7 @@ function Header(props) {
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
-  }, isILadmin === 1 && companyName + " - ", " ", headingName)), /*#__PURE__*/React.createElement(IUIBox, {
+  }, isILadmin === 1 && companyName !== null && companyName + " - ", ' ', headingName)), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles$5.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
@@ -8890,6 +8952,7 @@ function Header(props) {
     component: "div",
     className: "pageHeader--button-single button-right"
   }, /*#__PURE__*/React.createElement(IUIButton, {
+    disabled: loading,
     type: "contained",
     buttonText: "+ Add " + name.toLowerCase(),
     onClick: HeaderButton
@@ -8906,31 +8969,18 @@ var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sideb
 function Listview(_ref) {
   var data = _ref.data,
       name = _ref.name,
-      tableName = _ref.tableName,
       handleEditDialog = _ref.handleEditDialog,
-      handleDeleteDialog = _ref.handleDeleteDialog;
-  var dispatch = useDispatch();
-
-  var _useState = useState(1),
-      page = _useState[0],
-      setPage = _useState[1];
-
-  var _useState2 = useState(5),
-      rowsPerPage = _useState2[0],
-      setRowsPerPage = _useState2[1];
-
-  var handleChangePage = function handleChangePage(e, newPage) {
-    setPage(newPage);
-  };
-
-  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
-    setRowsPerPage(+event.target.value);
-    setPage(1);
-  };
-
-  useEffect(function () {
-    dispatch(getUserPanalOnPageChange(tableName, rowsPerPage, page));
-  }, [rowsPerPage, page]);
+      handleDeleteDialog = _ref.handleDeleteDialog,
+      orderBy = _ref.orderBy,
+      order = _ref.order,
+      _ref$onRequestSort = _ref.onRequestSort,
+      onRequestSort = _ref$onRequestSort === void 0 ? function () {} : _ref$onRequestSort,
+      _ref$handleChangeRows = _ref.handleChangeRowsPerPage,
+      handleChangeRowsPerPage = _ref$handleChangeRows === void 0 ? function () {} : _ref$handleChangeRows,
+      _ref$handleChangePage = _ref.handleChangePage,
+      handleChangePage = _ref$handleChangePage === void 0 ? function () {} : _ref$handleChangePage,
+      page = _ref.page,
+      rowsPerPage = _ref.rowsPerPage;
   var columns = [{
     id: 'name',
     label: name,
@@ -8945,6 +8995,7 @@ function Listview(_ref) {
     id: 'no_of_users',
     label: 'Number of users',
     width: '45%',
+    sortable: true,
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
@@ -8981,16 +9032,19 @@ function Listview(_ref) {
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIBox, {
     p: 3
   }, /*#__PURE__*/React.createElement(IUITable, {
-    hasFilter: false,
-    isCheckboxTable: false,
     searchHide: true,
+    hasFilter: true,
+    isCheckboxTable: false,
     count: data.count,
     columns: columns,
     rows: data.results,
     page: page,
     handleChangePage: handleChangePage,
     handleChangeRowsPerPage: handleChangeRowsPerPage,
-    rowsPerPage: rowsPerPage
+    rowsPerPage: rowsPerPage,
+    orderBy: orderBy,
+    order: order,
+    onRequestSort: onRequestSort
   })));
 }
 
@@ -9272,6 +9326,32 @@ var UserPanel = function UserPanel(_ref) {
       alertModal = _useState11[0],
       setAlertModal = _useState11[1];
 
+  var _React$useState = React.useState('asc'),
+      order = _React$useState[0],
+      setOrder = _React$useState[1];
+
+  var _React$useState2 = React.useState('name'),
+      orderBy = _React$useState2[0],
+      setOrderBy = _React$useState2[1];
+
+  var _useState12 = useState(false),
+      isSortingChange = _useState12[0],
+      setSortingChange = _useState12[1];
+
+  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 orderingParam = orderBy;
+
   var _useSelector = useSelector(function (state) {
     return state.userPanel;
   }),
@@ -9301,16 +9381,37 @@ var UserPanel = function UserPanel(_ref) {
   useEffect(function () {
     var roleCanAccess = ['travel_itilite_admin', 'travel_admin', 'expense_itilite_admin', 'expense_admin'];
     dispatch(verifyAccessToken(roleCanAccess));
+    window.scrollTo(0, 0);
   }, []);
   useEffect(function () {
     dispatch(userPanelShowLoader());
 
     if (isTokenVerified) {
-      dispatch(getUserPanalData(tableName, 5)).then(function () {
-        return dispatch(userPanelStopLoader());
-      });
+      calApiPanelList();
     }
-  }, [isTokenVerified]);
+  }, [isTokenVerified, isSortingChangeTemp]);
+
+  var calApiPanelList = function calApiPanelList() {
+    dispatch(getUserPanalData(getApiData())).then(function () {
+      return dispatch(userPanelStopLoader());
+    })["finally"](function () {
+      if (isSortingChange) {
+        setSortingChange(false);
+      }
+    });
+  };
+
+  var getApiData = function getApiData() {
+    orderingParam = order === 'asc' ? orderBy : '-' + orderBy;
+    var urlData = {
+      tableName: tableName,
+      rowsPerPage: rowsPerPage,
+      page: page,
+      orderingParam: orderingParam
+    };
+    return urlData;
+  };
+
   useEffect(function () {
     var arrList = userPanelData.results.filter(function (item) {
       return item.name !== dialogData.data.name;
@@ -9369,48 +9470,61 @@ var UserPanel = function UserPanel(_ref) {
   var handleAddUserPanel = function handleAddUserPanel() {
     if (dataList) {
       setErrorAdd(false);
-      dispatch(userPanelShowLoader());
-      dispatch(addRecord(tableName, {
+      var payload = {
         names: [dataList]
-      })).then(function (res) {
-        IUIToastMessageService$8.sNotify(title + " added successfully.");
-        closeDeActivateModal();
-        dispatch(userPanelStopLoader());
-        setDataList('');
-      });
+      };
+      var message = title + " added successfully.";
+      handleApiCall(addRecord, payload, message, 'add');
     } else {
       setErrorAdd(true);
     }
   };
 
-  var handleDeletePanel = function handleDeletePanel(data) {
-    if (!dialogData.labels.showMoveButton) {
-      dispatch(userPanelShowLoader());
-      dispatch(deleteRecord(tableName, {
-        row_ids: [dialogData.data.id]
-      })).then(function (res) {
-        IUIToastMessageService$8.sNotify(title + " deleted successfully.");
-        dispatch(userPanelStopLoader());
+  var handleDeletePanel = function handleDeletePanel() {
+    var payload = {
+      row_ids: [dialogData.data.id]
+    };
+    var message = title + " deleted successfully.";
+    handleApiCall(deleteRecord, payload, message, 'delete');
+  };
+
+  var handleApiCall = function handleApiCall(dispatchFun, payload, message, type) {
+    dispatch(userPanelShowLoader());
+    dispatch(dispatchFun(tableName, payload, getApiData())).then(function (res) {
+      IUIToastMessageService$8.sNotify(type === 'move' ? res.data.message : "" + message);
+      dispatch(userPanelStopLoader());
+
+      if (type === 'delete') {
         closeDeleteModal();
-      });
-    }
+      }
+
+      if (type === 'add') {
+        closeDeActivateModal();
+        setDataList('');
+      }
+
+      if (type === 'move') {
+        setMoveModal(false);
+        dispatch(closeDialog());
+        setSelectValue('');
+      }
+
+      if (type === 'edit') {
+        closeEditDialog();
+        setDataList('');
+      }
+    });
   };
 
   var handleMovePanel = function handleMovePanel() {
     if (selectValue) {
-      setErrorMove(false);
-      dispatch(userPanelShowLoader());
-      dispatch(moveRecord(tableName, {
+      var payload = {
         table_name: tableName,
         from: dialogData.data.name,
         to: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label
-      })).then(function (res) {
-        IUIToastMessageService$8.sNotify(res.data.message);
-        setMoveModal(false);
-        dispatch(closeDialog());
-        dispatch(userPanelStopLoader());
-        setSelectValue('');
-      });
+      };
+      handleApiCall(moveRecord, payload, 'message', 'move');
+      setErrorMove(false);
     } else {
       setErrorMove(true);
     }
@@ -9418,19 +9532,14 @@ var UserPanel = function UserPanel(_ref) {
 
   var handleEditPanel = function handleEditPanel(data) {
     if (dataList) {
+      var payload = {
+        table_name: tableName,
+        from: dialogData.data.name,
+        to: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label
+      };
+      var message = title + " updated successfully.";
+      handleApiCall(editRecord, payload, message, 'edit');
       setErrorEdit(false);
-      dispatch(userPanelShowLoader());
-      dispatch(editRecord(tableName, {
-        rows: [{
-          id: dialogData.data.id,
-          name: dataList
-        }]
-      })).then(function (res) {
-        dispatch(userPanelStopLoader());
-        IUIToastMessageService$8.sNotify(title + " updated successfully.");
-        closeEditDialog();
-        setDataList('');
-      });
     } else {
       setErrorEdit(true);
     }
@@ -9454,21 +9563,49 @@ var UserPanel = function UserPanel(_ref) {
     setAlertModal(false);
   };
 
+  var onRequestSort = function onRequestSort(event, property) {
+    var isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    setSortingChange(true);
+    setSortingChangeTemp(!isSortingChangeTemp);
+  };
+
+  var handleChangePage = function handleChangePage(e, newPage) {
+    setPage(newPage);
+    setSortingChangeTemp(!isSortingChangeTemp);
+  };
+
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    setRowsPerPage(+event.target.value);
+    setPage(1);
+    setSortingChange(true);
+    setSortingChangeTemp(!isSortingChangeTemp);
+  };
+
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles$5.UUIUserManagementList
-  }, hasVerificationError === false ? /*#__PURE__*/React.createElement(Fragment$1, null, loading ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
+  }, hasVerificationError === false ? /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     name: title,
     headingName: headingName,
     subHeading: subHeading,
-    HeaderButton: addDialog
-  }), /*#__PURE__*/React.createElement(Listview, {
+    HeaderButton: addDialog,
+    loading: loading
+  }), loading ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Listview, {
     data: userPanelData,
     name: title,
     tableName: tableName,
     handleEditDialog: openEditDialog,
     handleDeleteDialog: openDeleteModal,
-    closeDeActivateModal: closeDeActivateModal
+    closeDeActivateModal: closeDeActivateModal,
+    orderBy: orderBy,
+    order: order,
+    onRequestSort: onRequestSort,
+    handleChangePage: handleChangePage,
+    handleChangeRowsPerPage: handleChangeRowsPerPage,
+    rowsPerPage: rowsPerPage,
+    page: page
   })), /*#__PURE__*/React.createElement(AddPanelDialog, {
     name: title,
     isOpen: addModal,