oa-componentbook 1.0.1-stage.41 → 1.0.1-stage.410

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -0,0 +1,2384 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireWildcard(require("react"));
+var _layoutReducer = require("./reducer/layoutReducer");
+var _GlobalCss = _interopRequireDefault(require("../../global-css/GlobalCss"));
+var _SidebarWidget = _interopRequireDefault(require("../../widgets/oa-widget-sidebar/SidebarWidget"));
+var _CardList = _interopRequireDefault(require("./components/CardList"));
+var _DropdownSearch = _interopRequireDefault(require("./components/DropdownSearch"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _Search = _interopRequireDefault(require("./components/Search"));
+var _staticConfigResolver = _interopRequireWildcard(require("./resolver/staticConfigResolver"));
+var _CustomTableV = _interopRequireDefault(require("../../components/oa-component-table/CustomTableV1"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _DetailDataLayout = _interopRequireDefault(require("../DetailDataLayout/DetailDataLayout"));
+var _CustomTabs = _interopRequireDefault(require("../../components/oa-component-tabs/CustomTabs"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _ContentPanel = _interopRequireDefault(require("../../widgets/oa-widget-content-panel/ContentPanel"));
+var _styles = require("./styles");
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Modal = _interopRequireDefault(require("./components/Modal"));
+var _antd = require("antd");
+var _astronaut_emptystate = _interopRequireDefault(require("../../images/astronaut_emptystate.png"));
+var _CustomViewer = _interopRequireDefault(require("../../components/oa-component-viewer/CustomViewer"));
+var _StaticFilter = _interopRequireDefault(require("./components/StaticFilter"));
+var _downloadFile = _interopRequireDefault(require("../../utils/download-file"));
+var _AppliedFilters = _interopRequireDefault(require("./components/AppliedFilters"));
+var _ProfileSection = _interopRequireDefault(require("./components/ProfileSection"));
+var _FilterListRounded = _interopRequireDefault(require("@material-ui/icons/FilterListRounded"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+const _excluded = ["filteredValue"],
+  _excluded2 = ["sortOrder"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
+function GenricLayOut(_ref) {
+  var _state$misc29, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables4, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
+  let {
+    config,
+    getInitialData,
+    generateS3Url,
+    uploadOnS3,
+    handlers: {
+      handleTabClick,
+      handleFooterClick,
+      handleTableChange,
+      handleDropdownSearchInputChange,
+      handleDropdownSearchOptionChange,
+      handleTableColumnClick,
+      handleSecondaryTableCTAClick,
+      handleDropdownSearchEnter,
+      handleDropdownSearchClear,
+      handleInputSearchChange,
+      handleInputSearchEnter,
+      handleInputSearchClear,
+      handleDrawerFormOnFinish,
+      downloadFileOnS3,
+      handleModalDataSet,
+      handleActionOnTableCTAClick,
+      handleModalCloseSuccess,
+      handleSubHeadingSelectClick,
+      handleCollapsibleKeyData,
+      handleProfileReroute,
+      handleTableFooterApi,
+      handleSwitchSelectItem
+    } = {}
+  } = _ref;
+  const [state, dispatch] = (0, _react.useReducer)(_layoutReducer.genericLayoutReducer, config !== null && config !== void 0 ? config : _layoutReducer.initialState);
+  const [headerButtons, setHeaderButtons] = (0, _react.useState)(null);
+  const stateRef = (0, _react.useRef)(state);
+  const notificationRef = (0, _react.useRef)(null);
+  const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
+  const {
+    header,
+    cards,
+    sidebar,
+    dropdownSearch,
+    inputSearch,
+    tables,
+    drawer,
+    tabs,
+    contentPanel,
+    nestedDrawer,
+    modal,
+    leftHeaderFirstButton,
+    rightHeaderFirstButton,
+    rightHeaderSecondButton,
+    imageViewer,
+    customDrawer,
+    staticFilter,
+    profileData,
+    infoPanel
+  } = state !== null && state !== void 0 ? state : {};
+  (0, _react.useEffect)(() => {
+    init();
+  }, []);
+  (0, _react.useEffect)(() => {
+    stateRef.current = state;
+  }, [state]);
+  (0, _react.useEffect)(() => {
+    const observer = new MutationObserver(e => {
+      const parent = document.querySelector(".oaheaderButtons");
+      if (parent) {
+        var _parent$children;
+        setHeaderButtons(parent);
+        if ((parent === null || parent === void 0 || (_parent$children = parent.children) === null || _parent$children === void 0 ? void 0 : _parent$children.length) === 1) {
+          parent.classList.add("single-child");
+        }
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [headerButtons]);
+
+  // Check for notification data after component mounts (after reload)
+  (0, _react.useEffect)(() => {
+    const notificationData = sessionStorage.getItem("showEnterpriseNotification");
+    if (notificationData) {
+      try {
+        const {
+          message
+        } = JSON.parse(notificationData);
+        showSuccessNotification(message);
+        sessionStorage.removeItem("showEnterpriseNotification");
+      } catch (error) {
+        console.error("Error parsing notification data:", error);
+        sessionStorage.removeItem("showEnterpriseNotification");
+      }
+    }
+  }, []);
+
+  /**
+   * Initializes the layout by fetching initial data and updating the state.
+   *
+   * If `getInitialData` is provided, it fetches data using the currently active tab and any additional state information.
+   * On error, it shows an error notification and sets the table to empty.
+   * On success, it replaces variables in the config with the fetched data and initializes the state.
+   */
+
+  const init = async () => {
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_LOADING,
+      payload: true
+    });
+    console.log("here");
+    console.log(config === null || config === void 0 ? void 0 : config.misc, "config?.misc");
+    if (getInitialData) {
+      var _config$tabs, _config$misc;
+      const {
+        error,
+        data
+      } = await (getInitialData === null || getInitialData === void 0 ? void 0 : getInitialData(_objectSpread(_objectSpread({}, config !== null && config !== void 0 && (_config$tabs = config.tabs) !== null && _config$tabs !== void 0 && _config$tabs.active ? {
+        selectedTab: config.tabs.active
+      } : {}), (_config$misc = config === null || config === void 0 ? void 0 : config.misc) !== null && _config$misc !== void 0 ? _config$misc : {})));
+      if (error) {
+        showErrorNotification(error);
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, {});
+        dispatch({
+          type: _layoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, data !== null && data !== void 0 ? data : {});
+        dispatch({
+          type: _layoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+      }
+    }
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_LOADING,
+      payload: false
+    });
+  };
+
+  /**
+   * Shows an error notification.
+   *
+   * @param {string} message - Error message to show in the notification.
+   *
+   * @returns {void}
+   */
+  const showErrorNotification = message => {
+    openNotification({
+      description: message,
+      type: "failure",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+
+  /**
+   * Shows a success notification.
+   *
+   * @param {string} message - Message to show in the notification.
+   *
+   * @returns {void}
+   */
+  const showSuccessNotification = message => {
+    openNotification({
+      description: message,
+      type: "success",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const setStaticFilterData = data => {
+    var _staticFilter$data$fi, _config$staticFilter, _staticFilter$data;
+    const selectedKey = staticFilter === null || staticFilter === void 0 || (_staticFilter$data$fi = staticFilter.data.find(item => item.selected)) === null || _staticFilter$data$fi === void 0 ? void 0 : _staticFilter$data$fi.value;
+    const dynamicConfig = (0, _staticConfigResolver.default)(config === null || config === void 0 || (_config$staticFilter = config.staticFilter) === null || _config$staticFilter === void 0 ? void 0 : _config$staticFilter.data, data !== null && data !== void 0 ? data : {});
+    const storePreviousFilters = staticFilter === null || staticFilter === void 0 || (_staticFilter$data = staticFilter.data) === null || _staticFilter$data === void 0 ? void 0 : _staticFilter$data.map((filter, idx) => {
+      var _dynamicConfig$idx;
+      return _objectSpread(_objectSpread({}, filter), {}, {
+        label: (dynamicConfig === null || dynamicConfig === void 0 || (_dynamicConfig$idx = dynamicConfig[idx]) === null || _dynamicConfig$idx === void 0 ? void 0 : _dynamicConfig$idx.label) || filter.label
+      });
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_STATIC_FILTER,
+      payload: storePreviousFilters
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_STATIC_FILTER_SELECTION,
+      payload: selectedKey
+    });
+  };
+
+  /**
+   * Handles the change of the search input value.
+   *
+   * Updates the `inputSearchValue` state with the new search input value,
+   * and if the value is empty, calls the `handleInputSearchChange` callback
+   * with the current selected tab and pagination state.
+   *
+   * @param {{ target: { value: string } }} e - The change event.
+   *
+   * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
+   */
+  const onSearchInputChange = async _ref2 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref2;
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_VALUE,
+      payload: value
+    });
+    if (value === "") {
+      if (handleInputSearchChange) {
+        var _state$inputSearch, _state$tabs, _customDrawer$applied, _config$tables, _config$tables2, _tables$sorting, _tables$sorting2, _header$subHeading, _header$subHeading2, _state$misc;
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_LOADING,
+          payload: true
+        });
+        const {
+          error,
+          data
+        } = await handleInputSearchChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, state === null || state === void 0 || (_state$inputSearch = state.inputSearch) === null || _state$inputSearch === void 0 ? void 0 : _state$inputSearch.request), state !== null && state !== void 0 && (_state$tabs = state.tabs) !== null && _state$tabs !== void 0 && _state$tabs.active ? {
+          selectedTab: state.tabs.active
+        } : {}), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied !== void 0 ? _customDrawer$applied : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), {}, {
+          current: config === null || config === void 0 || (_config$tables = config.tables) === null || _config$tables === void 0 || (_config$tables = _config$tables.pagination) === null || _config$tables === void 0 ? void 0 : _config$tables.current,
+          pageSize: config === null || config === void 0 || (_config$tables2 = config.tables) === null || _config$tables2 === void 0 || (_config$tables2 = _config$tables2.pagination) === null || _config$tables2 === void 0 ? void 0 : _config$tables2.pageSize,
+          field: tables === null || tables === void 0 || (_tables$sorting = tables.sorting) === null || _tables$sorting === void 0 ? void 0 : _tables$sorting.sortBy,
+          order: tables === null || tables === void 0 || (_tables$sorting2 = tables.sorting) === null || _tables$sorting2 === void 0 ? void 0 : _tables$sorting2.sortDirection
+        }, (header === null || header === void 0 || (_header$subHeading = header.subHeading) === null || _header$subHeading === void 0 || (_header$subHeading = _header$subHeading.jsxConfig) === null || _header$subHeading === void 0 ? void 0 : _header$subHeading.type) == "select" ? {
+          subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading2 = header.subHeading) === null || _header$subHeading2 === void 0 || (_header$subHeading2 = _header$subHeading2.jsxConfig) === null || _header$subHeading2 === void 0 ? void 0 : _header$subHeading2.value
+        } : {}), (_state$misc = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc !== void 0 ? _state$misc : {}));
+        if (error) {
+          showErrorNotification(error);
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+          });
+        } else {
+          var _config$tables3, _config$tables4;
+          if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+            setStaticFilterData(data);
+          }
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+            payload: data
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_PAGINATION,
+            payload: {
+              current: config === null || config === void 0 || (_config$tables3 = config.tables) === null || _config$tables3 === void 0 || (_config$tables3 = _config$tables3.pagination) === null || _config$tables3 === void 0 ? void 0 : _config$tables3.current,
+              pageSize: config === null || config === void 0 || (_config$tables4 = config.tables) === null || _config$tables4 === void 0 || (_config$tables4 = _config$tables4.pagination) === null || _config$tables4 === void 0 ? void 0 : _config$tables4.pageSize
+            }
+          });
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_LOADING,
+          payload: false
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles the "Enter" key press event for the search input.
+   *
+   * Trims the search input value and validates it. If the value is invalid or empty,
+   * an error is dispatched. If valid, it dispatches the search value and invokes the
+   * `handleInputSearchEnter` callback to fetch data based on the search criteria.
+   *
+   * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
+   */
+
+  const onSearchPressEnter = async () => {
+    var _state$inputSearch2;
+    const {
+      value,
+      validateInput,
+      request
+    } = (_state$inputSearch2 = state === null || state === void 0 ? void 0 : state.inputSearch) !== null && _state$inputSearch2 !== void 0 ? _state$inputSearch2 : {};
+    const trimedValue = value === null || value === void 0 ? void 0 : value.trim();
+    if (trimedValue === "" || !(validateInput !== null && validateInput !== void 0 && validateInput(trimedValue))) {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_ERROR,
+        payload: trimedValue === "" ? null : "Please enter a valid ".concat(selectedOption)
+      });
+      return;
+    }
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_VALUE,
+      payload: trimedValue
+    });
+    if (handleInputSearchEnter) {
+      var _state$tabs2, _config$tables5, _config$tables6, _tables$sorting3, _tables$sorting4, _customDrawer$applied2, _header$subHeading3, _header$subHeading4, _state$misc2;
+      const {
+        error,
+        data
+      } = await handleInputSearchEnter(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, state !== null && state !== void 0 && (_state$tabs2 = state.tabs) !== null && _state$tabs2 !== void 0 && _state$tabs2.active ? {
+        selectedTab: state.tabs.active
+      } : {}), {}, {
+        searchedValue: trimedValue,
+        current: config === null || config === void 0 || (_config$tables5 = config.tables) === null || _config$tables5 === void 0 || (_config$tables5 = _config$tables5.pagination) === null || _config$tables5 === void 0 ? void 0 : _config$tables5.current,
+        pageSize: config === null || config === void 0 || (_config$tables6 = config.tables) === null || _config$tables6 === void 0 || (_config$tables6 = _config$tables6.pagination) === null || _config$tables6 === void 0 ? void 0 : _config$tables6.pageSize,
+        field: tables === null || tables === void 0 || (_tables$sorting3 = tables.sorting) === null || _tables$sorting3 === void 0 ? void 0 : _tables$sorting3.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting4 = tables.sorting) === null || _tables$sorting4 === void 0 ? void 0 : _tables$sorting4.sortDirection
+      }, (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied2 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied2 !== void 0 ? _customDrawer$applied2 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), inputSearch !== null && inputSearch !== void 0 && inputSearch.queryField ? {
+        queryField: inputSearch.queryField
+      } : {}), (header === null || header === void 0 || (_header$subHeading3 = header.subHeading) === null || _header$subHeading3 === void 0 || (_header$subHeading3 = _header$subHeading3.jsxConfig) === null || _header$subHeading3 === void 0 ? void 0 : _header$subHeading3.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading4 = header.subHeading) === null || _header$subHeading4 === void 0 || (_header$subHeading4 = _header$subHeading4.jsxConfig) === null || _header$subHeading4 === void 0 ? void 0 : _header$subHeading4.value
+      } : {}), (_state$misc2 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc2 !== void 0 ? _state$misc2 : {}));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables7, _config$tables8;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables7 = config.tables) === null || _config$tables7 === void 0 || (_config$tables7 = _config$tables7.pagination) === null || _config$tables7 === void 0 ? void 0 : _config$tables7.current,
+            pageSize: config === null || config === void 0 || (_config$tables8 = config.tables) === null || _config$tables8 === void 0 || (_config$tables8 = _config$tables8.pagination) === null || _config$tables8 === void 0 ? void 0 : _config$tables8.pageSize
+          }
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles changes in the dropdown search input value.
+   *
+   * Updates the `dropdownSearchValue` in the state with the new value.
+   * If the input value is empty, triggers the `handleDropdownSearchInputChange` callback
+   * to fetch data based on the current selected tab, pagination, sorting, and additional
+   * state information. Displays an error notification and sets the table to empty in case of an error.
+   *
+   * @param {{ target: { value: string } }} param0 - The change event with the new input value.
+   *
+   * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
+   */
+
+  const onDropdownSearchInputChange = async _ref3 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref3;
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_VALUE,
+      payload: value
+    });
+    if (value === "") {
+      if (handleDropdownSearchInputChange) {
+        var _state$tabs3, _config$tables9, _config$tables10, _tables$sorting5, _tables$sorting6, _tables$filter, _staticFilter$data2, _customDrawer$applied3, _header$subHeading5, _header$subHeading6, _state$misc3, _state$staticFilter$m, _state$staticFilter;
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_LOADING,
+          payload: true
+        });
+        const {
+          error,
+          data
+        } = await handleDropdownSearchInputChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          selectedTab: state === null || state === void 0 || (_state$tabs3 = state.tabs) === null || _state$tabs3 === void 0 ? void 0 : _state$tabs3.active,
+          current: config === null || config === void 0 || (_config$tables9 = config.tables) === null || _config$tables9 === void 0 || (_config$tables9 = _config$tables9.pagination) === null || _config$tables9 === void 0 ? void 0 : _config$tables9.current,
+          pageSize: config === null || config === void 0 || (_config$tables10 = config.tables) === null || _config$tables10 === void 0 || (_config$tables10 = _config$tables10.pagination) === null || _config$tables10 === void 0 ? void 0 : _config$tables10.pageSize,
+          field: tables === null || tables === void 0 || (_tables$sorting5 = tables.sorting) === null || _tables$sorting5 === void 0 ? void 0 : _tables$sorting5.sortBy,
+          order: tables === null || tables === void 0 || (_tables$sorting6 = tables.sorting) === null || _tables$sorting6 === void 0 ? void 0 : _tables$sorting6.sortDirection
+        }, (tables === null || tables === void 0 || (_tables$filter = tables.filter) === null || _tables$filter === void 0 ? void 0 : _tables$filter.key) && {
+          columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+        }), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data2 = staticFilter.data) === null || _staticFilter$data2 === void 0 || (_staticFilter$data2 = _staticFilter$data2.find(item => item.selected)) === null || _staticFilter$data2 === void 0 ? void 0 : _staticFilter$data2.value) && {
+          staticFilter: staticFilter.data.find(item => item.selected).value
+        }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied3 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied3 !== void 0 ? _customDrawer$applied3 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (header === null || header === void 0 || (_header$subHeading5 = header.subHeading) === null || _header$subHeading5 === void 0 || (_header$subHeading5 = _header$subHeading5.jsxConfig) === null || _header$subHeading5 === void 0 ? void 0 : _header$subHeading5.type) == "select" ? {
+          subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading6 = header.subHeading) === null || _header$subHeading6 === void 0 || (_header$subHeading6 = _header$subHeading6.jsxConfig) === null || _header$subHeading6 === void 0 ? void 0 : _header$subHeading6.value
+        } : {}), (_state$misc3 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc3 !== void 0 ? _state$misc3 : {}), {}, {
+          multiSelectValue: (_state$staticFilter$m = state === null || state === void 0 || (_state$staticFilter = state.staticFilter) === null || _state$staticFilter === void 0 ? void 0 : _state$staticFilter.multiSelectValue) !== null && _state$staticFilter$m !== void 0 ? _state$staticFilter$m : []
+        }));
+        if (error) {
+          showErrorNotification(error);
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+          });
+        } else {
+          var _config$tables11, _config$tables12;
+          if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+            setStaticFilterData(data);
+          }
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+            payload: data
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_PAGINATION,
+            payload: {
+              current: config === null || config === void 0 || (_config$tables11 = config.tables) === null || _config$tables11 === void 0 || (_config$tables11 = _config$tables11.pagination) === null || _config$tables11 === void 0 ? void 0 : _config$tables11.current,
+              pageSize: config === null || config === void 0 || (_config$tables12 = config.tables) === null || _config$tables12 === void 0 || (_config$tables12 = _config$tables12.pagination) === null || _config$tables12 === void 0 ? void 0 : _config$tables12.pageSize
+            }
+          });
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_LOADING,
+          payload: false
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles the "Enter" key press event for the dropdown search input.
+   *
+   * Validates the trimmed search input value against the selected option.
+   * If invalid or empty, dispatches an error with a message indicating the required input.
+   * If valid, it updates the dropdown search value in the state and invokes the
+   * `handleDropdownSearchEnter` callback to fetch data based on the search criteria.
+   * The callback is provided with details such as the searched value, selected tab,
+   * pagination, sorting, filter status, and additional state information.
+   * Displays an error notification and sets the table to empty in case of an error.
+   * On successful data retrieval, updates the table data in the state.
+   *
+   * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
+   */
+
+  const onDropdownSearchPressEnter = async () => {
+    var _state$dropdownSearch;
+    const {
+      value,
+      validateInput,
+      selectedOption,
+      menuItems,
+      request
+    } = (_state$dropdownSearch = state === null || state === void 0 ? void 0 : state.dropdownSearch) !== null && _state$dropdownSearch !== void 0 ? _state$dropdownSearch : {};
+    const trimedValue = value === null || value === void 0 ? void 0 : value.trim();
+    if (trimedValue === "" || !(validateInput !== null && validateInput !== void 0 && validateInput(selectedOption, trimedValue))) {
+      var _menuItems$find;
+      const errorLabel = (Array.isArray(menuItems) ? (_menuItems$find = menuItems.find(item => item.value === selectedOption)) === null || _menuItems$find === void 0 ? void 0 : _menuItems$find.label : null) || selectedOption || "input";
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_ERROR,
+        payload: trimedValue === "" ? null : "Please enter a valid ".concat(errorLabel)
+      });
+      return;
+    }
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_VALUE,
+      payload: value
+    });
+    if (handleDropdownSearchEnter) {
+      var _state$tabs4, _config$tables13, _config$tables14, _tables$sorting7, _tables$sorting8, _tables$filter2, _staticFilter$data3, _customDrawer$applied4, _header$subHeading7, _header$subHeading8, _state$misc4, _state$staticFilter$m2, _state$staticFilter2;
+      const {
+        error,
+        data
+      } = await handleDropdownSearchEnter(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        searchedValue: value,
+        selectedTab: state === null || state === void 0 || (_state$tabs4 = state.tabs) === null || _state$tabs4 === void 0 ? void 0 : _state$tabs4.active,
+        selectedOption: state === null || state === void 0 ? void 0 : state.dropdownSearch.selectedOption,
+        current: config === null || config === void 0 || (_config$tables13 = config.tables) === null || _config$tables13 === void 0 || (_config$tables13 = _config$tables13.pagination) === null || _config$tables13 === void 0 ? void 0 : _config$tables13.current,
+        pageSize: config === null || config === void 0 || (_config$tables14 = config.tables) === null || _config$tables14 === void 0 || (_config$tables14 = _config$tables14.pagination) === null || _config$tables14 === void 0 ? void 0 : _config$tables14.pageSize,
+        field: tables === null || tables === void 0 || (_tables$sorting7 = tables.sorting) === null || _tables$sorting7 === void 0 ? void 0 : _tables$sorting7.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting8 = tables.sorting) === null || _tables$sorting8 === void 0 ? void 0 : _tables$sorting8.sortDirection
+      }, (tables === null || tables === void 0 || (_tables$filter2 = tables.filter) === null || _tables$filter2 === void 0 ? void 0 : _tables$filter2.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data3 = staticFilter.data) === null || _staticFilter$data3 === void 0 || (_staticFilter$data3 = _staticFilter$data3.find(item => item.selected)) === null || _staticFilter$data3 === void 0 ? void 0 : _staticFilter$data3.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied4 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied4 !== void 0 ? _customDrawer$applied4 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (header === null || header === void 0 || (_header$subHeading7 = header.subHeading) === null || _header$subHeading7 === void 0 || (_header$subHeading7 = _header$subHeading7.jsxConfig) === null || _header$subHeading7 === void 0 ? void 0 : _header$subHeading7.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading8 = header.subHeading) === null || _header$subHeading8 === void 0 || (_header$subHeading8 = _header$subHeading8.jsxConfig) === null || _header$subHeading8 === void 0 ? void 0 : _header$subHeading8.value
+      } : {}), (_state$misc4 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc4 !== void 0 ? _state$misc4 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m2 = state === null || state === void 0 || (_state$staticFilter2 = state.staticFilter) === null || _state$staticFilter2 === void 0 ? void 0 : _state$staticFilter2.multiSelectValue) !== null && _state$staticFilter$m2 !== void 0 ? _state$staticFilter$m2 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables15, _config$tables16;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables15 = config.tables) === null || _config$tables15 === void 0 || (_config$tables15 = _config$tables15.pagination) === null || _config$tables15 === void 0 ? void 0 : _config$tables15.current,
+            pageSize: config === null || config === void 0 || (_config$tables16 = config.tables) === null || _config$tables16 === void 0 || (_config$tables16 = _config$tables16.pagination) === null || _config$tables16 === void 0 ? void 0 : _config$tables16.pageSize
+          }
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles the change of the selected option in the dropdown search input.
+   *
+   * Updates the selected option in the state and invokes the
+   * `handleDropdownSearchOptionChange` callback to fetch data based on the selected option.
+   * The callback is provided with no arguments.
+   * Displays an error notification and sets the table to empty in case of an error.
+   * On successful data retrieval, updates the table data in the state and triggers a tab click.
+   *
+   * @param {object} option - The selected option object.
+   * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
+   */
+  const onDropdownSearchOptionChange = async option => {
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_OPTION,
+      payload: option === null || option === void 0 ? void 0 : option.value
+    });
+    if (handleDropdownSearchOptionChange) {
+      var _config$tables17, _config$tables18, _staticFilter$data4, _customDrawer$applied5, _header$subHeading9, _header$subHeading10, _state$misc5, _state$staticFilter$m3, _state$staticFilter3;
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: true
+      });
+      const {
+        error,
+        data
+      } = await handleDropdownSearchOptionChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        selectedTab: tabs === null || tabs === void 0 ? void 0 : tabs.active,
+        current: config === null || config === void 0 || (_config$tables17 = config.tables) === null || _config$tables17 === void 0 || (_config$tables17 = _config$tables17.pagination) === null || _config$tables17 === void 0 ? void 0 : _config$tables17.current,
+        pageSize: config === null || config === void 0 || (_config$tables18 = config.tables) === null || _config$tables18 === void 0 || (_config$tables18 = _config$tables18.pagination) === null || _config$tables18 === void 0 ? void 0 : _config$tables18.pageSize
+      }, (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data4 = staticFilter.data) === null || _staticFilter$data4 === void 0 || (_staticFilter$data4 = _staticFilter$data4.find(item => item.selected)) === null || _staticFilter$data4 === void 0 ? void 0 : _staticFilter$data4.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied5 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied5 !== void 0 ? _customDrawer$applied5 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (header === null || header === void 0 || (_header$subHeading9 = header.subHeading) === null || _header$subHeading9 === void 0 || (_header$subHeading9 = _header$subHeading9.jsxConfig) === null || _header$subHeading9 === void 0 ? void 0 : _header$subHeading9.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading10 = header.subHeading) === null || _header$subHeading10 === void 0 || (_header$subHeading10 = _header$subHeading10.jsxConfig) === null || _header$subHeading10 === void 0 ? void 0 : _header$subHeading10.value
+      } : {}), (_state$misc5 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc5 !== void 0 ? _state$misc5 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m3 = state === null || state === void 0 || (_state$staticFilter3 = state.staticFilter) === null || _state$staticFilter3 === void 0 ? void 0 : _state$staticFilter3.multiSelectValue) !== null && _state$staticFilter$m3 !== void 0 ? _state$staticFilter$m3 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables19, _config$tables20;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables19 = config.tables) === null || _config$tables19 === void 0 || (_config$tables19 = _config$tables19.pagination) === null || _config$tables19 === void 0 ? void 0 : _config$tables19.current,
+            pageSize: config === null || config === void 0 || (_config$tables20 = config.tables) === null || _config$tables20 === void 0 || (_config$tables20 = _config$tables20.pagination) === null || _config$tables20 === void 0 ? void 0 : _config$tables20.pageSize
+          }
+        });
+        if (config !== null && config !== void 0 && config.tabs) {
+          dispatch({
+            type: _layoutReducer.actionTypes.TAB_CLICK,
+            payload: {
+              active: tabs === null || tabs === void 0 ? void 0 : tabs.active
+            }
+          });
+        }
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: false
+      });
+    }
+  };
+
+  /**
+   * Handles the blur event for the input search.
+   *
+   * Checks if the input search value is empty, and if so,
+   * clears any existing input search error in the state.
+   *
+   * @returns {Promise<void>} - Resolves when the input search error state has been updated.
+   */
+
+  const onInputSearchBlur = async () => {
+    var _state$inputSearch3;
+    const {
+      value
+    } = (_state$inputSearch3 = state === null || state === void 0 ? void 0 : state.inputSearch) !== null && _state$inputSearch3 !== void 0 ? _state$inputSearch3 : {};
+    if (value === "") {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_ERROR,
+        payload: null
+      });
+    }
+  };
+
+  /**
+   * Handles the blur event for the dropdown search input.
+   *
+   * Checks if the dropdown search value is empty, and if so,
+   * clears any existing dropdown search error in the state.
+   *
+   * @returns {Promise<void>} - Resolves when the dropdown search error state has been updated.
+   */
+  const onDropdownSearchBlur = async () => {
+    var _state$dropdownSearch2;
+    const {
+      value
+    } = (_state$dropdownSearch2 = state === null || state === void 0 ? void 0 : state.dropdownSearch) !== null && _state$dropdownSearch2 !== void 0 ? _state$dropdownSearch2 : {};
+    if (value === "") {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_ERROR,
+        payload: null
+      });
+    }
+  };
+
+  /**
+   * Handles the clear event for the dropdown search input.
+   *
+   * Clears the current value of the dropdown search input and triggers
+   * a call to the handleDropdownSearchClear callback function, passing
+   * the current state of the component as an argument.
+   *
+   * If the callback function returns an error, shows an error notification
+   * and sets the table data to an empty array. If the callback function
+   * returns data, sets the table data to the returned data.
+   *
+   * @returns {Promise<void>} - Resolves when the table data has been updated.
+   */
+  const onDropdownSearchClear = async () => {
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_VALUE,
+      payload: null
+    });
+    if (handleDropdownSearchClear) {
+      var _state$tabs5, _config$tables21, _config$tables22, _tables$sorting9, _tables$sorting10, _tables$filter3, _staticFilter$data5, _customDrawer$applied6, _header$subHeading11, _header$subHeading12, _state$misc6, _state$staticFilter$m4, _state$staticFilter4;
+      const {
+        error,
+        data
+      } = await handleDropdownSearchClear(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        selectedTab: state === null || state === void 0 || (_state$tabs5 = state.tabs) === null || _state$tabs5 === void 0 ? void 0 : _state$tabs5.active,
+        current: config === null || config === void 0 || (_config$tables21 = config.tables) === null || _config$tables21 === void 0 || (_config$tables21 = _config$tables21.pagination) === null || _config$tables21 === void 0 ? void 0 : _config$tables21.current,
+        pageSize: config === null || config === void 0 || (_config$tables22 = config.tables) === null || _config$tables22 === void 0 || (_config$tables22 = _config$tables22.pagination) === null || _config$tables22 === void 0 ? void 0 : _config$tables22.pageSize,
+        field: tables === null || tables === void 0 || (_tables$sorting9 = tables.sorting) === null || _tables$sorting9 === void 0 ? void 0 : _tables$sorting9.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting10 = tables.sorting) === null || _tables$sorting10 === void 0 ? void 0 : _tables$sorting10.sortDirection
+      }, (tables === null || tables === void 0 || (_tables$filter3 = tables.filter) === null || _tables$filter3 === void 0 ? void 0 : _tables$filter3.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data5 = staticFilter.data) === null || _staticFilter$data5 === void 0 || (_staticFilter$data5 = _staticFilter$data5.find(item => item.selected)) === null || _staticFilter$data5 === void 0 ? void 0 : _staticFilter$data5.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied6 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied6 !== void 0 ? _customDrawer$applied6 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (header === null || header === void 0 || (_header$subHeading11 = header.subHeading) === null || _header$subHeading11 === void 0 || (_header$subHeading11 = _header$subHeading11.jsxConfig) === null || _header$subHeading11 === void 0 ? void 0 : _header$subHeading11.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading12 = header.subHeading) === null || _header$subHeading12 === void 0 || (_header$subHeading12 = _header$subHeading12.jsxConfig) === null || _header$subHeading12 === void 0 ? void 0 : _header$subHeading12.value
+      } : {}), (_state$misc6 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc6 !== void 0 ? _state$misc6 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m4 = state === null || state === void 0 || (_state$staticFilter4 = state.staticFilter) === null || _state$staticFilter4 === void 0 ? void 0 : _state$staticFilter4.multiSelectValue) !== null && _state$staticFilter$m4 !== void 0 ? _state$staticFilter$m4 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables23, _config$tables24;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables23 = config.tables) === null || _config$tables23 === void 0 || (_config$tables23 = _config$tables23.pagination) === null || _config$tables23 === void 0 ? void 0 : _config$tables23.current,
+            pageSize: config === null || config === void 0 || (_config$tables24 = config.tables) === null || _config$tables24 === void 0 || (_config$tables24 = _config$tables24.pagination) === null || _config$tables24 === void 0 ? void 0 : _config$tables24.pageSize
+          }
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles the clear event for the input search input.
+   *
+   * Clears the current value of the input search input and triggers
+   * a call to the handleInputSearchClear callback function, passing
+   * the current selected tab, pagination state, and sorting state
+   * as an argument.
+   *
+   * If the callback function returns an error, shows an error notification
+   * and sets the table data to an empty array. If the callback function
+   * returns data, sets the table data to the returned data.
+   *
+   * @returns {Promise<void>} - Resolves when the table data has been updated.
+   */
+  const onInputSearchClear = async () => {
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_VALUE,
+      payload: null
+    });
+    if (handleInputSearchClear) {
+      var _state$tabs6, _config$tables25, _config$tables26, _tables$sorting11, _tables$sorting12, _customDrawer$applied7, _header$subHeading13, _header$subHeading14, _state$misc7;
+      const {
+        error,
+        data
+      } = await handleInputSearchClear(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, state !== null && state !== void 0 && (_state$tabs6 = state.tabs) !== null && _state$tabs6 !== void 0 && _state$tabs6.active ? {
+        selectedTab: state.tabs.active
+      } : {}), {}, {
+        current: config === null || config === void 0 || (_config$tables25 = config.tables) === null || _config$tables25 === void 0 || (_config$tables25 = _config$tables25.pagination) === null || _config$tables25 === void 0 ? void 0 : _config$tables25.current,
+        pageSize: config === null || config === void 0 || (_config$tables26 = config.tables) === null || _config$tables26 === void 0 || (_config$tables26 = _config$tables26.pagination) === null || _config$tables26 === void 0 ? void 0 : _config$tables26.pageSize,
+        field: tables === null || tables === void 0 || (_tables$sorting11 = tables.sorting) === null || _tables$sorting11 === void 0 ? void 0 : _tables$sorting11.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting12 = tables.sorting) === null || _tables$sorting12 === void 0 ? void 0 : _tables$sorting12.sortDirection
+      }, (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied7 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied7 !== void 0 ? _customDrawer$applied7 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (header === null || header === void 0 || (_header$subHeading13 = header.subHeading) === null || _header$subHeading13 === void 0 || (_header$subHeading13 = _header$subHeading13.jsxConfig) === null || _header$subHeading13 === void 0 ? void 0 : _header$subHeading13.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading14 = header.subHeading) === null || _header$subHeading14 === void 0 || (_header$subHeading14 = _header$subHeading14.jsxConfig) === null || _header$subHeading14 === void 0 ? void 0 : _header$subHeading14.value
+      } : {}), (_state$misc7 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc7 !== void 0 ? _state$misc7 : {}));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables27, _config$tables28;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables27 = config.tables) === null || _config$tables27 === void 0 || (_config$tables27 = _config$tables27.pagination) === null || _config$tables27 === void 0 ? void 0 : _config$tables27.current,
+            pageSize: config === null || config === void 0 || (_config$tables28 = config.tables) === null || _config$tables28 === void 0 || (_config$tables28 = _config$tables28.pagination) === null || _config$tables28 === void 0 ? void 0 : _config$tables28.pageSize
+          }
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles various table actions based on the provided configuration arguments.
+   *
+   * @async
+   * @function
+   * @param {Object} record - The record object representing the table row.
+   * @param {Object} configArgs - The configuration arguments for the action.
+   * @returns {Promise<void>} - Resolves after the action is handled.
+   *
+   * The function performs different actions depending on the `action` specified in `configArgs`:
+   * - "OPEN_DRAWER_AND_FETCH": Opens a drawer and fetches data; updates the drawer's state.
+   * - "EXPORT_DATA": Triggers data export functionality.
+   * - "OPEN_URL_IN_NEW_TAB": Opens a URL in a new browser tab.
+   * - "OPEN_MODAL": Opens a modal with updated content.
+   * - "ACTION_ON_CTA": Executes a custom table action and displays a success notification.
+   *
+   * If an error occurs during any action, an error notification is shown.
+   */
+
+  const customTableChange = async (record, configArgs, optKey) => {
+    var _state$tables;
+    const isRowSelected = state === null || state === void 0 || (_state$tables = state.tables) === null || _state$tables === void 0 || (_state$tables = _state$tables.selectedRows) === null || _state$tables === void 0 ? void 0 : _state$tables.some(row => row.rowKey === record.rowKey);
+    if (isRowSelected) {
+      return;
+    }
+    if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "OPEN_DRAWER_AND_FETCH") {
+      const selectkey = optKey || (configArgs === null || configArgs === void 0 ? void 0 : configArgs.key);
+      if (handleTableColumnClick) {
+        var _state$misc8;
+        const {
+          error,
+          data
+        } = await (handleTableColumnClick === null || handleTableColumnClick === void 0 ? void 0 : handleTableColumnClick(_objectSpread({
+          record: record,
+          type: configArgs === null || configArgs === void 0 ? void 0 : configArgs.call
+        }, (_state$misc8 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc8 !== void 0 ? _state$misc8 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.type) === "openNestedDrawer") {
+            var _config$nestedDrawer;
+            const record = config === null || config === void 0 || (_config$nestedDrawer = config.nestedDrawer) === null || _config$nestedDrawer === void 0 || (_config$nestedDrawer = _config$nestedDrawer.data) === null || _config$nestedDrawer === void 0 ? void 0 : _config$nestedDrawer.cancelOrder;
+            const dynamicConfig = (0, _staticConfigResolver.default)(record, data !== null && data !== void 0 ? data : {});
+            dispatch({
+              type: _layoutReducer.actionTypes.SET_NESTED_DRAWER,
+              payload: dynamicConfig
+            });
+            dispatch({
+              type: _layoutReducer.actionTypes.NESTED_DRAWER_OPEN
+            });
+          } else {
+            var _config$drawer, _state$tabs$active, _state$tabs7;
+            const record = _objectSpread({}, config === null || config === void 0 || (_config$drawer = config.drawer) === null || _config$drawer === void 0 || (_config$drawer = _config$drawer.data) === null || _config$drawer === void 0 || (_config$drawer = _config$drawer[(_state$tabs$active = state === null || state === void 0 || (_state$tabs7 = state.tabs) === null || _state$tabs7 === void 0 ? void 0 : _state$tabs7.active) !== null && _state$tabs$active !== void 0 ? _state$tabs$active : "default"]) === null || _config$drawer === void 0 ? void 0 : _config$drawer[selectkey]);
+            const dynamicConfig = (0, _staticConfigResolver.removeHidden)((0, _staticConfigResolver.default)(record, data !== null && data !== void 0 ? data : {}));
+            dispatch({
+              type: _layoutReducer.actionTypes.SET_DRAWER,
+              payload: {
+                dynamicConfig: dynamicConfig,
+                active: selectkey
+              }
+            });
+            dispatch({
+              type: _layoutReducer.actionTypes.TOGGLE_DRAWER,
+              payload: selectkey
+            });
+          }
+        }
+      }
+    } else if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "EXPORT_DATA") {
+      if (handleSecondaryTableCTAClick) {
+        var _state$misc9;
+        const {
+          error,
+          data
+        } = await (handleSecondaryTableCTAClick === null || handleSecondaryTableCTAClick === void 0 ? void 0 : handleSecondaryTableCTAClick(_objectSpread({
+          rentalId: record === null || record === void 0 ? void 0 : record.rentalId
+        }, (_state$misc9 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc9 !== void 0 ? _state$misc9 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          (0, _downloadFile.default)(data, configArgs === null || configArgs === void 0 ? void 0 : configArgs.fileName);
+        }
+      }
+    } else if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "OPEN_URL_IN_NEW_TAB") {
+      if (handleTableColumnClick) {
+        var _state$misc10;
+        handleTableColumnClick === null || handleTableColumnClick === void 0 || handleTableColumnClick(_objectSpread({
+          record: record,
+          type: configArgs === null || configArgs === void 0 ? void 0 : configArgs.call
+        }, (_state$misc10 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc10 !== void 0 ? _state$misc10 : {}));
+      }
+    } else if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "OPEN_MODAL") {
+      if (handleTableColumnClick) {
+        var _state$misc11;
+        const {
+          error,
+          data
+        } = await (handleTableColumnClick === null || handleTableColumnClick === void 0 ? void 0 : handleTableColumnClick(_objectSpread({
+          record: record,
+          type: configArgs === null || configArgs === void 0 ? void 0 : configArgs.call
+        }, (_state$misc11 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc11 !== void 0 ? _state$misc11 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          const updatedModalContent = (0, _staticConfigResolver.default)(config === null || config === void 0 ? void 0 : config.modal, data);
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_MODAL,
+            payload: {
+              modalData: updatedModalContent
+            }
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+            payload: true
+          });
+        }
+      }
+    } else if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "ACTION_ON_CTA") {
+      if (handleActionOnTableCTAClick) {
+        var _state$misc12;
+        const {
+          error,
+          data
+        } = await (handleActionOnTableCTAClick === null || handleActionOnTableCTAClick === void 0 ? void 0 : handleActionOnTableCTAClick(_objectSpread({
+          record: record,
+          type: configArgs === null || configArgs === void 0 ? void 0 : configArgs.call
+        }, (_state$misc12 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc12 !== void 0 ? _state$misc12 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          showSuccessNotification(data);
+          init();
+        }
+      }
+    } else if ((configArgs === null || configArgs === void 0 ? void 0 : configArgs.action) === "VIEW_PHOTO") {
+      if (handleTableColumnClick) {
+        var _state$misc13;
+        const {
+          error,
+          data
+        } = await (handleTableColumnClick === null || handleTableColumnClick === void 0 ? void 0 : handleTableColumnClick(_objectSpread({
+          record: record,
+          type: configArgs === null || configArgs === void 0 ? void 0 : configArgs.call
+        }, (_state$misc13 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc13 !== void 0 ? _state$misc13 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          var _config$imageViewer;
+          const record = config === null || config === void 0 || (_config$imageViewer = config.imageViewer) === null || _config$imageViewer === void 0 ? void 0 : _config$imageViewer.content;
+          const dynamicConfig = (0, _staticConfigResolver.default)(record, data !== null && data !== void 0 ? data : {});
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_IMAGE_VIEW,
+            payload: dynamicConfig
+          });
+        }
+      }
+    }
+  };
+
+  /**
+   * Handles various table footer actions based on the provided configuration arguments.
+   *
+   * @async
+   * @function
+   * @param {Object} config - The configuration arguments for the action.
+   * @returns {Promise<void>} - Resolves after the action is handled.
+   *
+   * The function performs different actions depending on the `action` specified in `config`:
+   * - "OPEN_MODAL": Opens a modal with updated content.
+   *
+   * If an error occurs during any action, an error notification is shown.
+   */
+  const customTableSelectFooterClick = async configData => {
+    if ((configData === null || configData === void 0 ? void 0 : configData.action) === "OPEN_MODAL") {
+      var _state$modal;
+      const modalContent = state === null || state === void 0 || (_state$modal = state.modal) === null || _state$modal === void 0 ? void 0 : _state$modal.modalContent;
+      if (handleModalDataSet) {
+        const {
+          error,
+          data
+        } = await (handleModalDataSet === null || handleModalDataSet === void 0 ? void 0 : handleModalDataSet(modalContent, state));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          const updatedModalContent = (0, _staticConfigResolver.default)(config === null || config === void 0 ? void 0 : config.modal, data);
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_MODAL,
+            payload: {
+              modalData: updatedModalContent
+            }
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+            payload: true
+          });
+        }
+      }
+    } else if ((configData === null || configData === void 0 ? void 0 : configData.action) === "CALL_API") {
+      if (handleTableFooterApi) {
+        const {
+          error,
+          data
+        } = await (handleTableFooterApi === null || handleTableFooterApi === void 0 ? void 0 : handleTableFooterApi(state));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          const updatedModalContent = (0, _staticConfigResolver.default)(config === null || config === void 0 ? void 0 : config.modal, data);
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_MODAL,
+            payload: {
+              modalData: updatedModalContent
+            }
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+            payload: true
+          });
+        }
+      }
+    } else if ((configData === null || configData === void 0 ? void 0 : configData.action) === "ACTION_ON_CTA") {
+      if (handleTableFooterApi) {
+        var _state$tables2;
+        const {
+          error,
+          data
+        } = await (handleTableFooterApi === null || handleTableFooterApi === void 0 ? void 0 : handleTableFooterApi(state === null || state === void 0 || (_state$tables2 = state.tables) === null || _state$tables2 === void 0 ? void 0 : _state$tables2.selectedRowKeys, state));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          showSuccessNotification(data);
+        }
+        init();
+      }
+    }
+  };
+
+  /**
+   * Handles table change events.
+   *
+   * @async
+   * @function
+   * @param {Object} pagination - The current pagination state.
+   * @param {Object} _f - The current filter state.
+   * @param {Object} sorter - The current sort state.
+   * @returns {Promise<void>} - Resolves after the event is handled.
+   *
+   * Updates the pagination, filter, and sorting state based on the provided event data.
+   * If `handleTableChange` is provided, calls it with the current state and the updated event data.
+   * If an error occurs during the handling of the event, an error notification is shown.
+   */
+  const onTableChange = async (pagination, _f, sorter) => {
+    var _tables$columns, _tabs$active, _tabs$active2, _tables$filter4;
+    const {
+      current,
+      pageSize
+    } = pagination;
+
+    // Check if filters have meaningful values (not empty arrays or null/undefined)
+    const hasActiveFilters = Object.values(_f).some(filterValue => filterValue && Array.isArray(filterValue) && filterValue.length > 0);
+    const currentColumns = (tables === null || tables === void 0 || (_tables$columns = tables.columns) === null || _tables$columns === void 0 ? void 0 : _tables$columns[(_tabs$active = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active !== void 0 ? _tabs$active : "default"]) || [];
+    const updatedColumns = currentColumns.map(column => {
+      // Check both dataIndex and key for filter matching
+      const filterKey = column.key || column.dataIndex;
+      const columnKey = column.key || column.dataIndex;
+      let updatedColumn = _objectSpread({}, column);
+
+      // Handle filters
+      if (column.filters) {
+        if (hasActiveFilters && _f[filterKey] && Array.isArray(_f[filterKey]) && _f[filterKey].length > 0) {
+          // Set filtered value when filter is active
+          updatedColumn.filteredValue = _f[filterKey];
+        } else {
+          // Clear filtered value when filter is not active or empty
+          const {
+              filteredValue
+            } = updatedColumn,
+            columnWithoutFilter = _objectWithoutProperties(updatedColumn, _excluded);
+          updatedColumn = columnWithoutFilter;
+        }
+      }
+
+      // Handle sorting - update sortOrder to reflect current sort state in UI
+      if (sorter && sorter.columnKey === columnKey) {
+        updatedColumn.sortOrder = sorter.order;
+      } else {
+        // Clear sort order for other columns
+        const {
+            sortOrder
+          } = updatedColumn,
+          columnWithoutSort = _objectWithoutProperties(updatedColumn, _excluded2);
+        updatedColumn = columnWithoutSort;
+      }
+      return updatedColumn;
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_TABLE_COLUMNS_RESET,
+      payload: {
+        tabKey: (_tabs$active2 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active2 !== void 0 ? _tabs$active2 : "default",
+        columns: updatedColumns
+      }
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_PAGINATION,
+      payload: {
+        current: current,
+        pageSize: pageSize
+      }
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_TABLE_FILTER,
+      payload: {
+        key: tables === null || tables === void 0 || (_tables$filter4 = tables.filter) === null || _tables$filter4 === void 0 ? void 0 : _tables$filter4.key,
+        value: _f
+      }
+    });
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_SORTING,
+      payload: {
+        sortBy: sorter === null || sorter === void 0 ? void 0 : sorter.columnKey,
+        sortDirection: (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "ascend" && "ASC" || (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "descend" && "DESC" || ""
+      }
+    });
+    if (handleTableChange) {
+      var _state$dropdownSearch3, _state$inputSearch4, _state$tabs8, _header$subHeading15, _header$subHeading16, _staticFilter$data6, _customDrawer$applied8, _state$misc14, _state$staticFilter$m5, _state$staticFilter5;
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: true
+      });
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch3 = state.dropdownSearch) === null || _state$dropdownSearch3 === void 0 || (_state$dropdownSearch3 = _state$dropdownSearch3.value) === null || _state$dropdownSearch3 === void 0 ? void 0 : _state$dropdownSearch3.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch4 = state.inputSearch) === null || _state$inputSearch4 === void 0 || (_state$inputSearch4 = _state$inputSearch4.value) === null || _state$inputSearch4 === void 0 ? void 0 : _state$inputSearch4.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        selectedTab: state === null || state === void 0 || (_state$tabs8 = state.tabs) === null || _state$tabs8 === void 0 ? void 0 : _state$tabs8.active,
+        current: current,
+        pageSize: pageSize,
+        columnFilterStatus: _f,
+        field: sorter === null || sorter === void 0 ? void 0 : sorter.columnKey
+      }, (header === null || header === void 0 || (_header$subHeading15 = header.subHeading) === null || _header$subHeading15 === void 0 || (_header$subHeading15 = _header$subHeading15.jsxConfig) === null || _header$subHeading15 === void 0 ? void 0 : _header$subHeading15.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading16 = header.subHeading) === null || _header$subHeading16 === void 0 || (_header$subHeading16 = _header$subHeading16.jsxConfig) === null || _header$subHeading16 === void 0 ? void 0 : _header$subHeading16.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data6 = staticFilter.data) === null || _staticFilter$data6 === void 0 || (_staticFilter$data6 = _staticFilter$data6.find(item => item.selected)) === null || _staticFilter$data6 === void 0 ? void 0 : _staticFilter$data6.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied8 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied8 !== void 0 ? _customDrawer$applied8 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), {}, {
+        order: (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "ascend" && "ASC" || (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "descend" && "DESC" || ""
+      }, (_state$misc14 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc14 !== void 0 ? _state$misc14 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m5 = state === null || state === void 0 || (_state$staticFilter5 = state.staticFilter) === null || _state$staticFilter5 === void 0 ? void 0 : _state$staticFilter5.multiSelectValue) !== null && _state$staticFilter$m5 !== void 0 ? _state$staticFilter$m5 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: false
+      });
+    }
+  };
+
+  /**
+   * @function onTabClick
+   * @description A function to handle the tab click action. It dispatches the active tab state and calls the handleTabClick function
+   * @param {string} key - The key of the tab
+   * @returns {void}
+   */
+  const onTabClick = async key => {
+    var _tables$filter5, _tables$columns2, _staticFilter$data$fi2;
+    dispatch({
+      type: _layoutReducer.actionTypes.TAB_CLICK,
+      payload: {
+        active: key
+      }
+    });
+    if (tables !== null && tables !== void 0 && tables.selectionType) {
+      var _state$tabs9;
+      const selectionKey = Object.keys(tables === null || tables === void 0 ? void 0 : tables.selectionType).find(key => (tables === null || tables === void 0 ? void 0 : tables.selectionType[key]) === "checkbox");
+      if ((state === null || state === void 0 || (_state$tabs9 = state.tabs) === null || _state$tabs9 === void 0 ? void 0 : _state$tabs9.activeKey) !== selectionKey) {
+        dispatch({
+          type: _layoutReducer.actionTypes.TABLE_FOOTER_TOGGLE,
+          payload: false
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.TABLE_ROW_SELECTED_DATA,
+          payload: []
+        });
+      }
+    }
+
+    // Reset table column filters in state
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_TABLE_FILTER,
+      payload: {
+        key: tables === null || tables === void 0 || (_tables$filter5 = tables.filter) === null || _tables$filter5 === void 0 ? void 0 : _tables$filter5.key,
+        value: {}
+      }
+    });
+
+    // Reset UI filters by updating columns with filteredValue: []
+    const currentColumns = (tables === null || tables === void 0 || (_tables$columns2 = tables.columns) === null || _tables$columns2 === void 0 ? void 0 : _tables$columns2[key]) || [];
+    const resetColumns = currentColumns.map(column => {
+      if (column.filters) {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          filteredValue: [] // Empty array resets the UI filter
+        });
+      }
+      return column;
+    });
+
+    // Update columns with reset filters
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_TABLE_COLUMNS_RESET,
+      payload: {
+        tabKey: key,
+        columns: resetColumns
+      }
+    });
+    const selectedStaticFilterValue = tables !== null && tables !== void 0 && tables.staticFilterKey && (tables === null || tables === void 0 ? void 0 : tables.staticFilterKey) == key && Array.isArray(staticFilter.data) ? (_staticFilter$data$fi2 = staticFilter.data.find(item => item.selected)) === null || _staticFilter$data$fi2 === void 0 ? void 0 : _staticFilter$data$fi2.value : undefined;
+    if (handleTabClick) {
+      var _state$misc15, _tables$pagination, _tables$pagination2, _tables$sorting13, _tables$sorting14, _state$dropdownSearch4, _header$subHeading17, _header$subHeading18, _customDrawer$applied9, _state$misc16, _state$staticFilter$m6, _state$staticFilter6;
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: true
+      });
+      const {
+        error,
+        data
+      } = await handleTabClick(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (_state$misc15 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc15 !== void 0 ? _state$misc15 : {}), {}, {
+        selectedTab: key,
+        current: tables === null || tables === void 0 || (_tables$pagination = tables.pagination) === null || _tables$pagination === void 0 ? void 0 : _tables$pagination.current,
+        pageSize: tables === null || tables === void 0 || (_tables$pagination2 = tables.pagination) === null || _tables$pagination2 === void 0 ? void 0 : _tables$pagination2.pageSize,
+        field: tables === null || tables === void 0 || (_tables$sorting13 = tables.sorting) === null || _tables$sorting13 === void 0 ? void 0 : _tables$sorting13.sortBy
+      }, selectedStaticFilterValue && {
+        staticFilter: selectedStaticFilterValue
+      }), {}, {
+        order: tables === null || tables === void 0 || (_tables$sorting14 = tables.sorting) === null || _tables$sorting14 === void 0 ? void 0 : _tables$sorting14.sortDirection
+      }, (state === null || state === void 0 || (_state$dropdownSearch4 = state.dropdownSearch) === null || _state$dropdownSearch4 === void 0 || (_state$dropdownSearch4 = _state$dropdownSearch4.value) === null || _state$dropdownSearch4 === void 0 ? void 0 : _state$dropdownSearch4.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (header === null || header === void 0 || (_header$subHeading17 = header.subHeading) === null || _header$subHeading17 === void 0 || (_header$subHeading17 = _header$subHeading17.jsxConfig) === null || _header$subHeading17 === void 0 ? void 0 : _header$subHeading17.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading18 = header.subHeading) === null || _header$subHeading18 === void 0 || (_header$subHeading18 = _header$subHeading18.jsxConfig) === null || _header$subHeading18 === void 0 ? void 0 : _header$subHeading18.value
+      } : {}), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied9 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied9 !== void 0 ? _customDrawer$applied9 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (_state$misc16 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc16 !== void 0 ? _state$misc16 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m6 = state === null || state === void 0 || (_state$staticFilter6 = state.staticFilter) === null || _state$staticFilter6 === void 0 ? void 0 : _state$staticFilter6.multiSelectValue) !== null && _state$staticFilter$m6 !== void 0 ? _state$staticFilter$m6 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        if (selectedStaticFilterValue) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: false
+      });
+    }
+  };
+
+  /**
+   * @function onChange
+   * @description Handles the row selection change event.
+   * @param {Array<string>} selectedRowKeys - The keys of the selected rows.
+   * @param {Array<Object>} selectedRows - The selected rows.
+   * @returns {void}
+   *
+   * Dispatches the {@link actionTypes.TABLE_FOOTER_TOGGLE} action with the selected rows length
+   * as the payload to toggle the table footer.
+   * Dispatches the {@link actionTypes.TABLE_ROW_SELECTED_DATA} action with the selected rows
+   * as the payload to update the selected rows state.
+   */
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      dispatch({
+        type: _layoutReducer.actionTypes.TABLE_FOOTER_TOGGLE,
+        payload: (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) != 0
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.TABLE_ROW_SELECTED_DATA,
+        payload: selectedRows
+      });
+    }
+  };
+
+  /**
+   * @function onSubHeadingClick
+   * @description Handles the subheading click event to perform specific actions.
+   * @param {string} action - The action to be performed when the subheading is clicked.
+   *
+   * If the action is "OPEN_MODAL", dispatches actions to set the modal data and toggle the modal visibility.
+   */
+
+  const onSubHeadingClick = action => {
+    if (action === "OPEN_MODAL") {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_MODAL,
+        payload: {
+          modalData: config === null || config === void 0 ? void 0 : config.modal
+        }
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+        payload: true
+      });
+    }
+  };
+
+  /**
+   * Handles the form submission event for the drawer.
+   *
+   * @async
+   * @function
+   * @param {Object} formData - The data submitted from the drawer form.
+   * @returns {Promise<void>} - Resolves after the form data is processed.
+   *
+   * If the `formData` type is "openNestedDrawer", triggers a custom table change
+   * with the current record and form data. Otherwise, attempts to handle the form
+   * submission by calling `handleDrawerFormOnFinish`. Shows an error notification
+   * if an error occurs, or a success notification if successful, and then closes
+   * the drawer. If a nested drawer is visible, dispatches an action to close it.
+   * Finally, re-initializes the state.
+   */
+
+  const drawerFormOnFinish = async formData => {
+    var _state$drawer, _state$tabs$active2, _state$tabs10, _state$drawer2;
+    const record = _objectSpread({}, state === null || state === void 0 || (_state$drawer = state.drawer) === null || _state$drawer === void 0 || (_state$drawer = _state$drawer.data) === null || _state$drawer === void 0 || (_state$drawer = _state$drawer[(_state$tabs$active2 = state === null || state === void 0 || (_state$tabs10 = state.tabs) === null || _state$tabs10 === void 0 ? void 0 : _state$tabs10.active) !== null && _state$tabs$active2 !== void 0 ? _state$tabs$active2 : "default"]) === null || _state$drawer === void 0 || (_state$drawer = _state$drawer[state === null || state === void 0 || (_state$drawer2 = state.drawer) === null || _state$drawer2 === void 0 ? void 0 : _state$drawer2.active]) === null || _state$drawer === void 0 ? void 0 : _state$drawer.value);
+    if ((formData === null || formData === void 0 ? void 0 : formData.type) === "openNestedDrawer") {
+      customTableChange(record, _objectSpread({}, formData));
+      return;
+    }
+    if (handleDrawerFormOnFinish) {
+      var _state$misc17;
+      const {
+        error,
+        data
+      } = await (handleDrawerFormOnFinish === null || handleDrawerFormOnFinish === void 0 ? void 0 : handleDrawerFormOnFinish(_objectSpread(_objectSpread(_objectSpread({}, record), formData), (_state$misc17 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc17 !== void 0 ? _state$misc17 : {})));
+      if (error) {
+        showErrorNotification(error);
+      } else {
+        showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+        dispatch({
+          type: _layoutReducer.actionTypes.CLOSE_DRAWER
+        });
+        (nestedDrawer === null || nestedDrawer === void 0 ? void 0 : nestedDrawer.visible) && dispatch({
+          type: _layoutReducer.actionTypes.NESTED_DRAWER_CLOSED
+        });
+        init();
+      }
+    }
+  };
+  const onRemoveAppliedFilter = async filterKey => {
+    var _state$customDrawer;
+    const currentFilters = _objectSpread({}, state === null || state === void 0 || (_state$customDrawer = state.customDrawer) === null || _state$customDrawer === void 0 ? void 0 : _state$customDrawer.appliedFilters);
+
+    // Remove the specific filter
+    delete currentFilters[filterKey];
+
+    // If there are remaining filters, reapply them
+    if (Object.keys(currentFilters).length > 0) {
+      var _state$dropdownSearch5, _state$inputSearch5, _state$tabs11, _tables$pagination3, _tables$pagination4, _tables$filter6, _tables$sorting15, _header$subHeading19, _header$subHeading20, _staticFilter$data7, _tables$sorting16, _state$misc18, _state$staticFilter$m7, _state$staticFilter7;
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch5 = state.dropdownSearch) === null || _state$dropdownSearch5 === void 0 || (_state$dropdownSearch5 = _state$dropdownSearch5.value) === null || _state$dropdownSearch5 === void 0 ? void 0 : _state$dropdownSearch5.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch5 = state.inputSearch) === null || _state$inputSearch5 === void 0 || (_state$inputSearch5 = _state$inputSearch5.value) === null || _state$inputSearch5 === void 0 ? void 0 : _state$inputSearch5.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        filterOn: currentFilters === null || currentFilters === void 0 ? void 0 : currentFilters.filterBy,
+        fromDate: currentFilters === null || currentFilters === void 0 ? void 0 : currentFilters.fromDate,
+        toDate: currentFilters === null || currentFilters === void 0 ? void 0 : currentFilters.toDate,
+        selectedTab: state === null || state === void 0 || (_state$tabs11 = state.tabs) === null || _state$tabs11 === void 0 ? void 0 : _state$tabs11.active,
+        current: tables === null || tables === void 0 || (_tables$pagination3 = tables.pagination) === null || _tables$pagination3 === void 0 ? void 0 : _tables$pagination3.current,
+        pageSize: tables === null || tables === void 0 || (_tables$pagination4 = tables.pagination) === null || _tables$pagination4 === void 0 ? void 0 : _tables$pagination4.pageSize
+      }, (tables === null || tables === void 0 || (_tables$filter6 = tables.filter) === null || _tables$filter6 === void 0 ? void 0 : _tables$filter6.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), {}, {
+        field: tables === null || tables === void 0 || (_tables$sorting15 = tables.sorting) === null || _tables$sorting15 === void 0 ? void 0 : _tables$sorting15.sortBy
+      }, (header === null || header === void 0 || (_header$subHeading19 = header.subHeading) === null || _header$subHeading19 === void 0 || (_header$subHeading19 = _header$subHeading19.jsxConfig) === null || _header$subHeading19 === void 0 ? void 0 : _header$subHeading19.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading20 = header.subHeading) === null || _header$subHeading20 === void 0 || (_header$subHeading20 = _header$subHeading20.jsxConfig) === null || _header$subHeading20 === void 0 ? void 0 : _header$subHeading20.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data7 = staticFilter.data) === null || _staticFilter$data7 === void 0 || (_staticFilter$data7 = _staticFilter$data7.find(item => item.selected)) === null || _staticFilter$data7 === void 0 ? void 0 : _staticFilter$data7.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), {}, {
+        order: tables === null || tables === void 0 || (_tables$sorting16 = tables.sorting) === null || _tables$sorting16 === void 0 ? void 0 : _tables$sorting16.sortDirection
+      }, (_state$misc18 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc18 !== void 0 ? _state$misc18 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m7 = state === null || state === void 0 || (_state$staticFilter7 = state.staticFilter) === null || _state$staticFilter7 === void 0 ? void 0 : _state$staticFilter7.multiSelectValue) !== null && _state$staticFilter$m7 !== void 0 ? _state$staticFilter$m7 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_APPLIED_FILTERS,
+          payload: currentFilters
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.REMOVE_APPLIED_FILTER,
+          payload: {
+            filterKey
+          }
+        });
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        // Sync the filter form with remaining applied filters
+        syncFilterFormWithAppliedFilters(currentFilters);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+      }
+    }
+  };
+  const filterFormOnFinish = async formData => {
+    // Check if this is a cancel/clear action - check both buttonClickType and the actual button data
+    if (formData.type === "FILTER-CANCEL") {
+      var _state$dropdownSearch6, _state$inputSearch6, _state$tabs12, _tables$pagination5, _tables$pagination6, _tables$filter7, _tables$sorting17, _header$subHeading21, _header$subHeading22, _staticFilter$data8, _tables$sorting18, _state$misc19, _state$staticFilter$m8, _state$staticFilter8;
+      if (isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)) {
+        dispatch({
+          type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+        });
+        return;
+      }
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch6 = state.dropdownSearch) === null || _state$dropdownSearch6 === void 0 || (_state$dropdownSearch6 = _state$dropdownSearch6.value) === null || _state$dropdownSearch6 === void 0 ? void 0 : _state$dropdownSearch6.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch6 = state.inputSearch) === null || _state$inputSearch6 === void 0 || (_state$inputSearch6 = _state$inputSearch6.value) === null || _state$inputSearch6 === void 0 ? void 0 : _state$inputSearch6.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        selectedTab: state === null || state === void 0 || (_state$tabs12 = state.tabs) === null || _state$tabs12 === void 0 ? void 0 : _state$tabs12.active,
+        current: tables === null || tables === void 0 || (_tables$pagination5 = tables.pagination) === null || _tables$pagination5 === void 0 ? void 0 : _tables$pagination5.current,
+        pageSize: tables === null || tables === void 0 || (_tables$pagination6 = tables.pagination) === null || _tables$pagination6 === void 0 ? void 0 : _tables$pagination6.pageSize
+      }, (tables === null || tables === void 0 || (_tables$filter7 = tables.filter) === null || _tables$filter7 === void 0 ? void 0 : _tables$filter7.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), {}, {
+        field: tables === null || tables === void 0 || (_tables$sorting17 = tables.sorting) === null || _tables$sorting17 === void 0 ? void 0 : _tables$sorting17.sortBy
+      }, (header === null || header === void 0 || (_header$subHeading21 = header.subHeading) === null || _header$subHeading21 === void 0 || (_header$subHeading21 = _header$subHeading21.jsxConfig) === null || _header$subHeading21 === void 0 ? void 0 : _header$subHeading21.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading22 = header.subHeading) === null || _header$subHeading22 === void 0 || (_header$subHeading22 = _header$subHeading22.jsxConfig) === null || _header$subHeading22 === void 0 ? void 0 : _header$subHeading22.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data8 = staticFilter.data) === null || _staticFilter$data8 === void 0 || (_staticFilter$data8 = _staticFilter$data8.find(item => item.selected)) === null || _staticFilter$data8 === void 0 ? void 0 : _staticFilter$data8.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), {}, {
+        order: tables === null || tables === void 0 || (_tables$sorting18 = tables.sorting) === null || _tables$sorting18 === void 0 ? void 0 : _tables$sorting18.sortDirection
+      }, (_state$misc19 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc19 !== void 0 ? _state$misc19 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m8 = state === null || state === void 0 || (_state$staticFilter8 = state.staticFilter) === null || _state$staticFilter8 === void 0 ? void 0 : _state$staticFilter8.multiSelectValue) !== null && _state$staticFilter$m8 !== void 0 ? _state$staticFilter$m8 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$customDrawer;
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.CLEAR_ALL_APPLIED_FILTERS
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+        });
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        const drawerData = config === null || config === void 0 || (_config$customDrawer = config.customDrawer) === null || _config$customDrawer === void 0 || (_config$customDrawer = _config$customDrawer.data) === null || _config$customDrawer === void 0 ? void 0 : _config$customDrawer[rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.drawerKey];
+        if (drawerData) {
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+            payload: drawerData
+          });
+        }
+      }
+      return;
+    }
+    if (formData.type === "EXPORT-CANCEL") {
+      var _config$customDrawer2;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer2 = config.customDrawer) === null || _config$customDrawer2 === void 0 || (_config$customDrawer2 = _config$customDrawer2.data) === null || _config$customDrawer2 === void 0 ? void 0 : _config$customDrawer2[leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.drawerKey];
+      if (drawerData) {
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+          payload: drawerData
+        });
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+      });
+      return;
+    }
+
+    // Only process filter data if this is actually a filter drawer
+    if (formData.type === "FILTER-SUBMIT") {
+      var _state$dropdownSearch7, _state$inputSearch7, _ref4, _appliedFilters$filte, _state$tabs13, _config$tables29, _config$tables30, _tables$filter8, _tables$sorting19, _header$subHeading23, _header$subHeading24, _staticFilter$data9, _tables$sorting20, _state$misc20, _state$staticFilter$m9, _state$staticFilter9;
+      const appliedFilters = {};
+      Object.keys(formData).forEach(key => {
+        const value = formData[key];
+        if (value !== undefined && value !== "" && value !== null) {
+          appliedFilters[key] = value;
+        }
+      });
+      if (isFiltersEmpty(appliedFilters)) {
+        dispatch({
+          type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+        });
+        return;
+      }
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch7 = state.dropdownSearch) === null || _state$dropdownSearch7 === void 0 || (_state$dropdownSearch7 = _state$dropdownSearch7.value) === null || _state$dropdownSearch7 === void 0 ? void 0 : _state$dropdownSearch7.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch7 = state.inputSearch) === null || _state$inputSearch7 === void 0 || (_state$inputSearch7 = _state$inputSearch7.value) === null || _state$inputSearch7 === void 0 ? void 0 : _state$inputSearch7.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), appliedFilters), {}, {
+        filterOn: (_ref4 = (_appliedFilters$filte = appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filterBy) !== null && _appliedFilters$filte !== void 0 ? _appliedFilters$filte : customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.defaultAppliedFilter) !== null && _ref4 !== void 0 ? _ref4 : "",
+        fromDate: appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.fromDate,
+        toDate: appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.toDate,
+        selectedTab: state === null || state === void 0 || (_state$tabs13 = state.tabs) === null || _state$tabs13 === void 0 ? void 0 : _state$tabs13.active,
+        current: config === null || config === void 0 || (_config$tables29 = config.tables) === null || _config$tables29 === void 0 || (_config$tables29 = _config$tables29.pagination) === null || _config$tables29 === void 0 ? void 0 : _config$tables29.current,
+        pageSize: config === null || config === void 0 || (_config$tables30 = config.tables) === null || _config$tables30 === void 0 || (_config$tables30 = _config$tables30.pagination) === null || _config$tables30 === void 0 ? void 0 : _config$tables30.pageSize
+      }, (tables === null || tables === void 0 || (_tables$filter8 = tables.filter) === null || _tables$filter8 === void 0 ? void 0 : _tables$filter8.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), {}, {
+        field: tables === null || tables === void 0 || (_tables$sorting19 = tables.sorting) === null || _tables$sorting19 === void 0 ? void 0 : _tables$sorting19.sortBy
+      }, (header === null || header === void 0 || (_header$subHeading23 = header.subHeading) === null || _header$subHeading23 === void 0 || (_header$subHeading23 = _header$subHeading23.jsxConfig) === null || _header$subHeading23 === void 0 ? void 0 : _header$subHeading23.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading24 = header.subHeading) === null || _header$subHeading24 === void 0 || (_header$subHeading24 = _header$subHeading24.jsxConfig) === null || _header$subHeading24 === void 0 ? void 0 : _header$subHeading24.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data9 = staticFilter.data) === null || _staticFilter$data9 === void 0 || (_staticFilter$data9 = _staticFilter$data9.find(item => item.selected)) === null || _staticFilter$data9 === void 0 ? void 0 : _staticFilter$data9.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), {}, {
+        order: tables === null || tables === void 0 || (_tables$sorting20 = tables.sorting) === null || _tables$sorting20 === void 0 ? void 0 : _tables$sorting20.sortDirection
+      }, (_state$misc20 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc20 !== void 0 ? _state$misc20 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m9 = state === null || state === void 0 || (_state$staticFilter9 = state.staticFilter) === null || _state$staticFilter9 === void 0 ? void 0 : _state$staticFilter9.multiSelectValue) !== null && _state$staticFilter$m9 !== void 0 ? _state$staticFilter$m9 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$tables31, _config$tables32;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          var _staticFilter$data$fi3, _config$staticFilter2;
+          const selectedKey = staticFilter === null || staticFilter === void 0 || (_staticFilter$data$fi3 = staticFilter.data.find(item => item.selected)) === null || _staticFilter$data$fi3 === void 0 ? void 0 : _staticFilter$data$fi3.value;
+          const dynamicConfig = (0, _staticConfigResolver.default)(config === null || config === void 0 || (_config$staticFilter2 = config.staticFilter) === null || _config$staticFilter2 === void 0 ? void 0 : _config$staticFilter2.data, data !== null && data !== void 0 ? data : {});
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_STATIC_FILTER,
+            payload: dynamicConfig
+          });
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_STATIC_FILTER_SELECTION,
+            payload: selectedKey
+          });
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_APPLIED_FILTERS,
+          payload: appliedFilters
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.UPDATE_FILTER_DEFAULT_VALUES,
+          payload: formData
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: config === null || config === void 0 || (_config$tables31 = config.tables) === null || _config$tables31 === void 0 || (_config$tables31 = _config$tables31.pagination) === null || _config$tables31 === void 0 ? void 0 : _config$tables31.current,
+            pageSize: config === null || config === void 0 || (_config$tables32 = config.tables) === null || _config$tables32 === void 0 || (_config$tables32 = _config$tables32.pagination) === null || _config$tables32 === void 0 ? void 0 : _config$tables32.pageSize
+          }
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+        });
+      }
+    } else if (formData.drawerKey === "exportDrawer") {
+      const appliedFilters = {};
+      Object.keys(formData).forEach(key => {
+        const value = formData[key];
+        if (value !== undefined && value !== "" && value !== null) {
+          appliedFilters[key] = value;
+        }
+      });
+      if (handleSecondaryTableCTAClick) {
+        var _state$dropdownSearch8, _state$inputSearch8, _state$tabs14, _tables$pagination7, _tables$pagination8, _tables$filter9, _tables$sorting21, _tables$sorting22, _header$subHeading25, _header$subHeading26, _staticFilter$data10, _state$misc21, _state$staticFilter$m10, _state$staticFilter10;
+        const {
+          error,
+          data
+        } = await (handleSecondaryTableCTAClick === null || handleSecondaryTableCTAClick === void 0 ? void 0 : handleSecondaryTableCTAClick(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch8 = state.dropdownSearch) === null || _state$dropdownSearch8 === void 0 || (_state$dropdownSearch8 = _state$dropdownSearch8.value) === null || _state$dropdownSearch8 === void 0 ? void 0 : _state$dropdownSearch8.trim()) && {
+          searchedValue: state.dropdownSearch.value,
+          selectedOption: state.dropdownSearch.selectedOption
+        }), (state === null || state === void 0 || (_state$inputSearch8 = state.inputSearch) === null || _state$inputSearch8 === void 0 || (_state$inputSearch8 = _state$inputSearch8.value) === null || _state$inputSearch8 === void 0 ? void 0 : _state$inputSearch8.trim()) && {
+          searchedValue: state.inputSearch.value
+        }), {}, {
+          selectedTab: state === null || state === void 0 || (_state$tabs14 = state.tabs) === null || _state$tabs14 === void 0 ? void 0 : _state$tabs14.active,
+          current: tables === null || tables === void 0 || (_tables$pagination7 = tables.pagination) === null || _tables$pagination7 === void 0 ? void 0 : _tables$pagination7.current,
+          pageSize: tables === null || tables === void 0 || (_tables$pagination8 = tables.pagination) === null || _tables$pagination8 === void 0 ? void 0 : _tables$pagination8.pageSize,
+          columnFilterStatus: tables === null || tables === void 0 || (_tables$filter9 = tables.filter) === null || _tables$filter9 === void 0 ? void 0 : _tables$filter9.value,
+          field: tables === null || tables === void 0 || (_tables$sorting21 = tables.sorting) === null || _tables$sorting21 === void 0 ? void 0 : _tables$sorting21.sortBy,
+          order: tables === null || tables === void 0 || (_tables$sorting22 = tables.sorting) === null || _tables$sorting22 === void 0 ? void 0 : _tables$sorting22.sortDirection
+        }, (header === null || header === void 0 || (_header$subHeading25 = header.subHeading) === null || _header$subHeading25 === void 0 || (_header$subHeading25 = _header$subHeading25.jsxConfig) === null || _header$subHeading25 === void 0 ? void 0 : _header$subHeading25.type) == "select" ? {
+          subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading26 = header.subHeading) === null || _header$subHeading26 === void 0 || (_header$subHeading26 = _header$subHeading26.jsxConfig) === null || _header$subHeading26 === void 0 ? void 0 : _header$subHeading26.value
+        } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data10 = staticFilter.data) === null || _staticFilter$data10 === void 0 || (_staticFilter$data10 = _staticFilter$data10.find(item => item.selected)) === null || _staticFilter$data10 === void 0 ? void 0 : _staticFilter$data10.value) && {
+          staticFilter: staticFilter.data.find(item => item.selected).value
+        }), {}, {
+          fromDate: formData === null || formData === void 0 ? void 0 : formData.fromDate,
+          toDate: formData === null || formData === void 0 ? void 0 : formData.toDate
+        }, appliedFilters), (formData === null || formData === void 0 ? void 0 : formData.exportType) && {
+          exportType: formData === null || formData === void 0 ? void 0 : formData.exportType
+        }), (_state$misc21 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc21 !== void 0 ? _state$misc21 : {}), {}, {
+          multiSelectValue: (_state$staticFilter$m10 = state === null || state === void 0 || (_state$staticFilter10 = state.staticFilter) === null || _state$staticFilter10 === void 0 ? void 0 : _state$staticFilter10.multiSelectValue) !== null && _state$staticFilter$m10 !== void 0 ? _state$staticFilter$m10 : []
+        })));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          var _formData$fileName;
+          (0, _downloadFile.default)(data, (_formData$fileName = formData.fileName) !== null && _formData$fileName !== void 0 ? _formData$fileName : undefined);
+          dispatch({
+            type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+          });
+        }
+      }
+    }
+  };
+  const onClearAllAppliedFilters = async () => {
+    var _state$dropdownSearch9, _state$inputSearch9, _state$tabs15, _tables$pagination9, _tables$pagination10, _tables$filter10, _tables$sorting23, _header$subHeading27, _header$subHeading28, _staticFilter$data11, _tables$sorting24, _state$misc22, _state$staticFilter$m11, _state$staticFilter11;
+    const {
+      error,
+      data
+    } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch9 = state.dropdownSearch) === null || _state$dropdownSearch9 === void 0 || (_state$dropdownSearch9 = _state$dropdownSearch9.value) === null || _state$dropdownSearch9 === void 0 ? void 0 : _state$dropdownSearch9.trim()) && {
+      searchedValue: state.dropdownSearch.value,
+      selectedOption: state.dropdownSearch.selectedOption
+    }), (state === null || state === void 0 || (_state$inputSearch9 = state.inputSearch) === null || _state$inputSearch9 === void 0 || (_state$inputSearch9 = _state$inputSearch9.value) === null || _state$inputSearch9 === void 0 ? void 0 : _state$inputSearch9.trim()) && {
+      searchedValue: state.inputSearch.value
+    }), {}, {
+      selectedTab: state === null || state === void 0 || (_state$tabs15 = state.tabs) === null || _state$tabs15 === void 0 ? void 0 : _state$tabs15.active,
+      current: tables === null || tables === void 0 || (_tables$pagination9 = tables.pagination) === null || _tables$pagination9 === void 0 ? void 0 : _tables$pagination9.current,
+      pageSize: tables === null || tables === void 0 || (_tables$pagination10 = tables.pagination) === null || _tables$pagination10 === void 0 ? void 0 : _tables$pagination10.pageSize
+    }, (tables === null || tables === void 0 || (_tables$filter10 = tables.filter) === null || _tables$filter10 === void 0 ? void 0 : _tables$filter10.key) && {
+      columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+    }), {}, {
+      field: tables === null || tables === void 0 || (_tables$sorting23 = tables.sorting) === null || _tables$sorting23 === void 0 ? void 0 : _tables$sorting23.sortBy
+    }, (header === null || header === void 0 || (_header$subHeading27 = header.subHeading) === null || _header$subHeading27 === void 0 || (_header$subHeading27 = _header$subHeading27.jsxConfig) === null || _header$subHeading27 === void 0 ? void 0 : _header$subHeading27.type) == "select" ? {
+      subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading28 = header.subHeading) === null || _header$subHeading28 === void 0 || (_header$subHeading28 = _header$subHeading28.jsxConfig) === null || _header$subHeading28 === void 0 ? void 0 : _header$subHeading28.value
+    } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data11 = staticFilter.data) === null || _staticFilter$data11 === void 0 || (_staticFilter$data11 = _staticFilter$data11.find(item => item.selected)) === null || _staticFilter$data11 === void 0 ? void 0 : _staticFilter$data11.value) && {
+      staticFilter: staticFilter.data.find(item => item.selected).value
+    }), {}, {
+      order: tables === null || tables === void 0 || (_tables$sorting24 = tables.sorting) === null || _tables$sorting24 === void 0 ? void 0 : _tables$sorting24.sortDirection
+    }, (_state$misc22 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc22 !== void 0 ? _state$misc22 : {}), {}, {
+      multiSelectValue: (_state$staticFilter$m11 = state === null || state === void 0 || (_state$staticFilter11 = state.staticFilter) === null || _state$staticFilter11 === void 0 ? void 0 : _state$staticFilter11.multiSelectValue) !== null && _state$staticFilter$m11 !== void 0 ? _state$staticFilter$m11 : []
+    }));
+    if (error) {
+      showErrorNotification(error);
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+      });
+    } else {
+      if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+        setStaticFilterData(data);
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+        payload: data
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.CLEAR_ALL_APPLIED_FILTERS
+      });
+    }
+  };
+  const syncFilterFormWithAppliedFilters = appliedFilters => {
+    dispatch({
+      type: _layoutReducer.actionTypes.UPDATE_FILTER_FORM_VALUES,
+      payload: {
+        formValues: appliedFilters
+      }
+    });
+  };
+
+  /**
+   * Handles the modal footer click event.
+   *
+   * @async
+   * @function
+   * @param {String} action - The action to be performed.
+   * @param {Object} buttonConfig - The button configuration.
+   * @returns {Promise<void>} - Resolves after the action is handled.
+   *
+   * Handles the modal footer button clicks with the following actions:
+   * - "CLOSE_MODAL": Closes the modal.
+   * - "CLOSE_MODAL_AND_FETCH": Calls the `handleModalCloseSuccess` function
+   *   if provided, and closes the modal if successful. Also re-initializes the
+   *   state.
+   * - Any other action: Calls the `handleDrawerFormOnFinish` function if
+   *   provided, with the action as "APPROVE" and the order UUIDs from the
+   *   selected row keys. Closes the modal and re-initializes the state if
+   *   successful.
+   */
+
+  const onClickModalFooter = async (action, buttonConfig) => {
+    if (action === "CLOSE_MODAL") {
+      dispatch({
+        type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+        payload: false
+      });
+      return;
+    } else if (action === "CLOSE_MODAL_AND_FETCH") {
+      if (handleModalCloseSuccess) {
+        var _stateRef$current, _state$misc23;
+        const {
+          error,
+          data
+        } = await (handleModalCloseSuccess === null || handleModalCloseSuccess === void 0 ? void 0 : handleModalCloseSuccess(_objectSpread({
+          modalValue: stateRef === null || stateRef === void 0 || (_stateRef$current = stateRef.current) === null || _stateRef$current === void 0 || (_stateRef$current = _stateRef$current.modal) === null || _stateRef$current === void 0 ? void 0 : _stateRef$current.value,
+          call: buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.call
+        }, (_state$misc23 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc23 !== void 0 ? _state$misc23 : {})));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+            payload: false
+          });
+          init();
+        }
+      }
+    } else {
+      if (handleDrawerFormOnFinish) {
+        var _state$tables$selecte, _state$tables3, _state$misc24;
+        let req = {};
+        req.type = "APPROVE";
+        req.orderUUID = (_state$tables$selecte = state === null || state === void 0 || (_state$tables3 = state.tables) === null || _state$tables3 === void 0 || (_state$tables3 = _state$tables3.selectedRowKeys) === null || _state$tables3 === void 0 ? void 0 : _state$tables3.map(item => item.orderUUID)) !== null && _state$tables$selecte !== void 0 ? _state$tables$selecte : [];
+        req.misc = (_state$misc24 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc24 !== void 0 ? _state$misc24 : {};
+        const {
+          error,
+          data
+        } = await (handleDrawerFormOnFinish === null || handleDrawerFormOnFinish === void 0 ? void 0 : handleDrawerFormOnFinish(req));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+          dispatch({
+            type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+            payload: false
+          });
+          init();
+        }
+      }
+    }
+  };
+  const emptyTableState = /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+    image: /*#__PURE__*/_react.default.createElement("img", {
+      src: _astronaut_emptystate.default,
+      alt: "Nothing to show yet"
+    }),
+    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-24"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      typography: "type-t1-500"
+    }, "Nothing available at the moment")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-12"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "secondary-content",
+      typography: "type-b1-400"
+    }, "There is currently no data to display. We will update automatically when new information is available.")))
+  });
+
+  /**
+   * Handles the left header button click event.
+   *
+   * @async
+   * @function
+   * @param {Object} configArgs - The button configuration arguments.
+   * @returns {Promise<void>} - Resolves after the action is handled.
+   *
+   * Handles the left header button clicks with the following actions:
+   * - "EXPORT_DATA": Triggers data export functionality.
+   * - "OPEN_DRAWER": Opens a drawer with the specified key.
+   * - "OPEN_MODAL": Opens a modal with updated content.
+   */
+  const leftHeaderFirstButtonClick = async () => {
+    if ((leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.action) === "OPEN_CUSTOM_DRAWER") {
+      var _config$customDrawer3;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer3 = config.customDrawer) === null || _config$customDrawer3 === void 0 || (_config$customDrawer3 = _config$customDrawer3.data) === null || _config$customDrawer3 === void 0 ? void 0 : _config$customDrawer3[leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.drawerKey];
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+        payload: drawerData
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.CUSTOM_DRAWER_OPEN
+      });
+    }
+  };
+
+  /**
+   * Handles the right header button click event.
+   *
+   * @async
+   * @function
+   * @param {Object} configArgs - The button configuration arguments.
+   * @returns {Promise<void>} - Resolves after the action is handled.
+   *
+   * Handles the right header button clicks with the following actions:
+   * - "OPEN_FILTER_DRAWER": Opens the filter drawer.
+   * - "OPEN_DRAWER": Opens a drawer with the specified key.
+   */
+  const rightHeaderFirstButtonClick = async () => {
+    if ((rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.action) === "OPEN_CUSTOM_DRAWER") {
+      var _config$customDrawer4, _state$customDrawer2;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer4 = config.customDrawer) === null || _config$customDrawer4 === void 0 || (_config$customDrawer4 = _config$customDrawer4.data) === null || _config$customDrawer4 === void 0 ? void 0 : _config$customDrawer4[rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey];
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+        payload: drawerData
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.CUSTOM_DRAWER_OPEN
+      });
+
+      // Sync the filter form with applied filters if they exist
+      if (state !== null && state !== void 0 && (_state$customDrawer2 = state.customDrawer) !== null && _state$customDrawer2 !== void 0 && _state$customDrawer2.appliedFilters && Object.keys(state.customDrawer.appliedFilters).length > 0) {
+        syncFilterFormWithAppliedFilters(state.customDrawer.appliedFilters);
+      }
+    } else if ((rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.action) === "OPEN_DRAWER") {
+      dispatch({
+        type: _layoutReducer.actionTypes.TOGGLE_DRAWER,
+        payload: rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.key
+      });
+    }
+  };
+  const rightHeaderSecondButtonClick = async () => {
+    if ((rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.action) === "RESET_CUSTOM_DRAWER") {
+      var _state$dropdownSearch10, _state$inputSearch10, _state$tabs16, _tables$pagination11, _tables$pagination12, _tables$filter11, _tables$sorting25, _header$subHeading29, _header$subHeading30, _staticFilter$data12, _tables$sorting26, _state$misc25, _state$staticFilter$m12, _state$staticFilter12;
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch10 = state.dropdownSearch) === null || _state$dropdownSearch10 === void 0 || (_state$dropdownSearch10 = _state$dropdownSearch10.value) === null || _state$dropdownSearch10 === void 0 ? void 0 : _state$dropdownSearch10.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch10 = state.inputSearch) === null || _state$inputSearch10 === void 0 || (_state$inputSearch10 = _state$inputSearch10.value) === null || _state$inputSearch10 === void 0 ? void 0 : _state$inputSearch10.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        selectedTab: state === null || state === void 0 || (_state$tabs16 = state.tabs) === null || _state$tabs16 === void 0 ? void 0 : _state$tabs16.active,
+        current: tables === null || tables === void 0 || (_tables$pagination11 = tables.pagination) === null || _tables$pagination11 === void 0 ? void 0 : _tables$pagination11.current,
+        pageSize: tables === null || tables === void 0 || (_tables$pagination12 = tables.pagination) === null || _tables$pagination12 === void 0 ? void 0 : _tables$pagination12.pageSize
+      }, (tables === null || tables === void 0 || (_tables$filter11 = tables.filter) === null || _tables$filter11 === void 0 ? void 0 : _tables$filter11.key) && {
+        columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+      }), {}, {
+        field: tables === null || tables === void 0 || (_tables$sorting25 = tables.sorting) === null || _tables$sorting25 === void 0 ? void 0 : _tables$sorting25.sortBy
+      }, (header === null || header === void 0 || (_header$subHeading29 = header.subHeading) === null || _header$subHeading29 === void 0 || (_header$subHeading29 = _header$subHeading29.jsxConfig) === null || _header$subHeading29 === void 0 ? void 0 : _header$subHeading29.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading30 = header.subHeading) === null || _header$subHeading30 === void 0 || (_header$subHeading30 = _header$subHeading30.jsxConfig) === null || _header$subHeading30 === void 0 ? void 0 : _header$subHeading30.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data12 = staticFilter.data) === null || _staticFilter$data12 === void 0 || (_staticFilter$data12 = _staticFilter$data12.find(item => item.selected)) === null || _staticFilter$data12 === void 0 ? void 0 : _staticFilter$data12.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), {}, {
+        order: tables === null || tables === void 0 || (_tables$sorting26 = tables.sorting) === null || _tables$sorting26 === void 0 ? void 0 : _tables$sorting26.sortDirection
+      }, (_state$misc25 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc25 !== void 0 ? _state$misc25 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m12 = state === null || state === void 0 || (_state$staticFilter12 = state.staticFilter) === null || _state$staticFilter12 === void 0 ? void 0 : _state$staticFilter12.multiSelectValue) !== null && _state$staticFilter$m12 !== void 0 ? _state$staticFilter$m12 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _config$customDrawer5;
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.CLEAR_ALL_APPLIED_FILTERS
+        });
+        const drawerData = config === null || config === void 0 || (_config$customDrawer5 = config.customDrawer) === null || _config$customDrawer5 === void 0 || (_config$customDrawer5 = _config$customDrawer5.data) === null || _config$customDrawer5 === void 0 ? void 0 : _config$customDrawer5[rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.drawerKey];
+        if (drawerData) {
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+            payload: drawerData
+          });
+        }
+      }
+    }
+  };
+
+  /**
+   * @function
+   * @param {Object} selectedOption - The selected option from the custom select.
+   * @param {String} key - The key of the drawer data to be updated.
+   * @param {String} action - The custom select action.
+   * @description
+   * Updates the state of the drawer data with the selected option value
+   * for the given key when the action is "changeBillingAddress".
+   */
+  const updateStateData = (selectedOption, key, action) => {
+    if (action === "changeBillingAddress") {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER_DATA_SELECT,
+        payload: {
+          key: key,
+          value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.subLabel
+        }
+      });
+    }
+  };
+  const handleSubHeadingSelect = async val => {
+    if (val) {
+      var _state$tabs17, _tables$pagination13, _tables$pagination14, _state$misc26;
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_SUBHEADING_SELECTED_CONFIG,
+        payload: val
+      });
+      const {
+        error,
+        data
+      } = await handleSubHeadingSelectClick(_objectSpread({
+        selectedTab: state === null || state === void 0 || (_state$tabs17 = state.tabs) === null || _state$tabs17 === void 0 ? void 0 : _state$tabs17.active,
+        searchedValue: inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.value,
+        current: tables === null || tables === void 0 || (_tables$pagination13 = tables.pagination) === null || _tables$pagination13 === void 0 ? void 0 : _tables$pagination13.current,
+        pageSize: tables === null || tables === void 0 || (_tables$pagination14 = tables.pagination) === null || _tables$pagination14 === void 0 ? void 0 : _tables$pagination14.pageSize,
+        subHeadingSelectVal: val
+      }, (_state$misc26 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc26 !== void 0 ? _state$misc26 : {}));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+      }
+    }
+  };
+
+  /**
+   * Handles static filter selection
+   * @param {string} filterValue - The value of the selected filter
+   */
+  const onStaticFilterSelect = async filterValue => {
+    const selectedFilterStatus = staticFilter.data.map(item => item.selected ? item.value : null).filter(Boolean);
+    const currentSelectedIndex = selectedFilterStatus.indexOf(filterValue);
+    if (currentSelectedIndex === -1) {
+      selectedFilterStatus.push(filterValue);
+    } else {
+      selectedFilterStatus.splice(currentSelectedIndex, 1);
+    }
+    const multiSelectValue = [...selectedFilterStatus];
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_STATIC_FILTER_SELECTION,
+      payload: filterValue,
+      source: "click"
+    });
+
+    // Call the handler if provided
+    if (handleTableChange) {
+      var _state$dropdownSearch11, _state$inputSearch11, _state$tabs18, _tables$pagination15, _tables$sorting27, _tables$sorting28, _header$subHeading31, _header$subHeading32, _customDrawer$applied10, _state$misc27;
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: true
+      });
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch11 = state.dropdownSearch) === null || _state$dropdownSearch11 === void 0 || (_state$dropdownSearch11 = _state$dropdownSearch11.value) === null || _state$dropdownSearch11 === void 0 ? void 0 : _state$dropdownSearch11.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch11 = state.inputSearch) === null || _state$inputSearch11 === void 0 || (_state$inputSearch11 = _state$inputSearch11.value) === null || _state$inputSearch11 === void 0 ? void 0 : _state$inputSearch11.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        selectedTab: state === null || state === void 0 || (_state$tabs18 = state.tabs) === null || _state$tabs18 === void 0 ? void 0 : _state$tabs18.active,
+        current: 1,
+        // Reset to first page when filtering
+        pageSize: tables === null || tables === void 0 || (_tables$pagination15 = tables.pagination) === null || _tables$pagination15 === void 0 ? void 0 : _tables$pagination15.pageSize,
+        filterStatus: filterValue,
+        field: tables === null || tables === void 0 || (_tables$sorting27 = tables.sorting) === null || _tables$sorting27 === void 0 ? void 0 : _tables$sorting27.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting28 = tables.sorting) === null || _tables$sorting28 === void 0 ? void 0 : _tables$sorting28.sortDirection
+      }, (header === null || header === void 0 || (_header$subHeading31 = header.subHeading) === null || _header$subHeading31 === void 0 || (_header$subHeading31 = _header$subHeading31.jsxConfig) === null || _header$subHeading31 === void 0 ? void 0 : _header$subHeading31.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading32 = header.subHeading) === null || _header$subHeading32 === void 0 || (_header$subHeading32 = _header$subHeading32.jsxConfig) === null || _header$subHeading32 === void 0 ? void 0 : _header$subHeading32.value
+      } : {}), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied10 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied10 !== void 0 ? _customDrawer$applied10 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (_state$misc27 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc27 !== void 0 ? _state$misc27 : {}), {}, {
+        staticFilter: filterValue,
+        // Pass static filter value
+        multiSelectValue: multiSelectValue
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        var _tables$pagination16;
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+        // Reset pagination to first page
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_PAGINATION,
+          payload: {
+            current: 1,
+            pageSize: tables === null || tables === void 0 || (_tables$pagination16 = tables.pagination) === null || _tables$pagination16 === void 0 ? void 0 : _tables$pagination16.pageSize
+          }
+        });
+      }
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_LOADING,
+        payload: false
+      });
+    }
+  };
+  const onMobilePageChange = async _ref5 => {
+    let {
+      current,
+      pageSize
+    } = _ref5;
+    dispatch({
+      type: _layoutReducer.actionTypes.SET_PAGINATION,
+      payload: {
+        current,
+        pageSize
+      }
+    });
+    if (handleTableChange) {
+      var _state$dropdownSearch12, _state$inputSearch12, _state$tabs19, _tables$filter12, _tables$sorting29, _tables$sorting30, _header$subHeading33, _header$subHeading34, _staticFilter$data13, _customDrawer$applied11, _state$misc28, _state$staticFilter$m13, _state$staticFilter13;
+      const {
+        error,
+        data
+      } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch12 = state.dropdownSearch) === null || _state$dropdownSearch12 === void 0 || (_state$dropdownSearch12 = _state$dropdownSearch12.value) === null || _state$dropdownSearch12 === void 0 ? void 0 : _state$dropdownSearch12.trim()) && {
+        searchedValue: state.dropdownSearch.value,
+        selectedOption: state.dropdownSearch.selectedOption
+      }), (state === null || state === void 0 || (_state$inputSearch12 = state.inputSearch) === null || _state$inputSearch12 === void 0 || (_state$inputSearch12 = _state$inputSearch12.value) === null || _state$inputSearch12 === void 0 ? void 0 : _state$inputSearch12.trim()) && {
+        searchedValue: state.inputSearch.value
+      }), {}, {
+        selectedTab: state === null || state === void 0 || (_state$tabs19 = state.tabs) === null || _state$tabs19 === void 0 ? void 0 : _state$tabs19.active,
+        current,
+        pageSize,
+        columnFilterStatus: tables === null || tables === void 0 || (_tables$filter12 = tables.filter) === null || _tables$filter12 === void 0 ? void 0 : _tables$filter12.value,
+        field: tables === null || tables === void 0 || (_tables$sorting29 = tables.sorting) === null || _tables$sorting29 === void 0 ? void 0 : _tables$sorting29.sortBy,
+        order: tables === null || tables === void 0 || (_tables$sorting30 = tables.sorting) === null || _tables$sorting30 === void 0 ? void 0 : _tables$sorting30.sortDirection
+      }, (header === null || header === void 0 || (_header$subHeading33 = header.subHeading) === null || _header$subHeading33 === void 0 || (_header$subHeading33 = _header$subHeading33.jsxConfig) === null || _header$subHeading33 === void 0 ? void 0 : _header$subHeading33.type) == "select" ? {
+        subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading34 = header.subHeading) === null || _header$subHeading34 === void 0 || (_header$subHeading34 = _header$subHeading34.jsxConfig) === null || _header$subHeading34 === void 0 ? void 0 : _header$subHeading34.value
+      } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data13 = staticFilter.data) === null || _staticFilter$data13 === void 0 || (_staticFilter$data13 = _staticFilter$data13.find(item => item.selected)) === null || _staticFilter$data13 === void 0 ? void 0 : _staticFilter$data13.value) && {
+        staticFilter: staticFilter.data.find(item => item.selected).value
+      }), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied11 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied11 !== void 0 ? _customDrawer$applied11 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (_state$misc28 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc28 !== void 0 ? _state$misc28 : {}), {}, {
+        multiSelectValue: (_state$staticFilter$m13 = state === null || state === void 0 || (_state$staticFilter13 = state.staticFilter) === null || _state$staticFilter13 === void 0 ? void 0 : _state$staticFilter13.multiSelectValue) !== null && _state$staticFilter$m13 !== void 0 ? _state$staticFilter$m13 : []
+      }));
+      if (error) {
+        showErrorNotification(error);
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+        });
+      } else {
+        if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+          setStaticFilterData(data);
+        }
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+          payload: data
+        });
+      }
+    }
+  };
+  function isFiltersEmpty() {
+    let filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const filtersKeyLength = Object.keys(filters).length;
+    if (filtersKeyLength === 0) return true;
+    if (filtersKeyLength === 2) {
+      return (filters === null || filters === void 0 ? void 0 : filters.drawerKey) && (filters === null || filters === void 0 ? void 0 : filters.type);
+    }
+    return false;
+  }
+  console.log(state, "GenricLayOutstate");
+  return /*#__PURE__*/_react.default.createElement(_styles.OapageWithDataStyle, {
+    marginBottom: infoPanel !== null && infoPanel !== void 0 && infoPanel.bottomMarginRequired ? "18px" : "0",
+    className: (state === null || state === void 0 || (_state$misc29 = state.misc) === null || _state$misc29 === void 0 ? void 0 : _state$misc29.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
+  }, /*#__PURE__*/_react.default.createElement(_styles.DrawerWithOutFooter, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fullPageLayout"
+  }, /*#__PURE__*/_react.default.createElement(_GlobalCss.default, null, (sidebar === null || sidebar === void 0 ? void 0 : sidebar.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    style: {
+      width: 300
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SidebarWidget.default, _extends({}, sidebar, {
+    handleFooterClick: handleFooterClick,
+    profileData: profileData
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaRightLayouts"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaTopHeaderAndBtnSec "
+  }, /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerContent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerLeft"
+  }, (header === null || header === void 0 ? void 0 : header.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, _extends({}, header, {
+    onSubHeadingClick: onSubHeadingClick,
+    handleSubHeadingSelect: handleSubHeadingSelect
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerRight"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (sidebar === null || sidebar === void 0 || (_sidebar$mobileMenuIt = sidebar.mobileMenuItems) === null || _sidebar$mobileMenuIt === void 0 || (_sidebar$mobileMenuIt = _sidebar$mobileMenuIt.items) === null || _sidebar$mobileMenuIt === void 0 ? void 0 : _sidebar$mobileMenuIt.length) > 0 ? "hideProfileOnMobile" : ""
+  }, /*#__PURE__*/_react.default.createElement(_ProfileSection.default, {
+    profileData: profileData,
+    onProfileClick: () => {
+      handleProfileReroute();
+    }
+  })))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "layoutHeadingAndSearch"
+  }, (imageViewer === null || imageViewer === void 0 ? void 0 : imageViewer.visible) && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
+    open: true,
+    previewFile: imageViewer === null || imageViewer === void 0 || (_imageViewer$content = imageViewer.content) === null || _imageViewer$content === void 0 ? void 0 : _imageViewer$content.url,
+    title: imageViewer === null || imageViewer === void 0 || (_imageViewer$content2 = imageViewer.content) === null || _imageViewer$content2 === void 0 ? void 0 : _imageViewer$content2.name,
+    onCancel: () => dispatch({
+      type: _layoutReducer.actionTypes.TOGGLE_IMAGE_VIEW
+    }),
+    downloadCallback: () => {
+      var _imageViewer$content3;
+      return downloadFileOnS3({
+        url: imageViewer === null || imageViewer === void 0 || (_imageViewer$content3 = imageViewer.content) === null || _imageViewer$content3 === void 0 ? void 0 : _imageViewer$content3.url
+      });
+    }
+  }), (cards === null || cards === void 0 ? void 0 : cards.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CardList.default, {
+    cards: cards === null || cards === void 0 ? void 0 : cards.data
+  })), (dropdownSearch === null || dropdownSearch === void 0 ? void 0 : dropdownSearch.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaheaderSearchAndFilter"
+  }, /*#__PURE__*/_react.default.createElement(_DropdownSearch.default, _extends({}, dropdownSearch, {
+    selectedOption: dropdownSearch === null || dropdownSearch === void 0 ? void 0 : dropdownSearch.selectedOption,
+    onInputChange: onDropdownSearchInputChange,
+    onPressEnter: onDropdownSearchPressEnter,
+    onOptionChange: onDropdownSearchOptionChange,
+    allowClear: dropdownSearch === null || dropdownSearch === void 0 ? void 0 : dropdownSearch.allowClear,
+    onClear: onDropdownSearchClear,
+    onBlur: onDropdownSearchBlur
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaheaderButtons"
+  }, (leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.visible) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
+    label: leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.label,
+    onClick: leftHeaderFirstButtonClick,
+    type: leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.type,
+    size: leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.size
+  }, (leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.iconConfig) && {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 || (_leftHeaderFirstButto = leftHeaderFirstButton.iconConfig) === null || _leftHeaderFirstButto === void 0 ? void 0 : _leftHeaderFirstButto.icon,
+        size: 24,
+        color: "primary"
+      }),
+      position: leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 || (_leftHeaderFirstButto2 = leftHeaderFirstButton.iconConfig) === null || _leftHeaderFirstButto2 === void 0 ? void 0 : _leftHeaderFirstButto2.position
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaheaderButtonsRight"
+  }, (rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.visible) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.label,
+    onClick: rightHeaderSecondButtonClick,
+    type: rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.type,
+    size: rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.size
+  }), (rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.visible) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.label,
+    onClick: rightHeaderFirstButtonClick,
+    type: rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.type,
+    size: rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.size,
+    iconConfig: _objectSpread({}, (rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.showIcon) === false ? {} : {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _FilterListRounded.default,
+        size: 24,
+        color: "primary"
+      }),
+      position: "left"
+    })
+  }), !isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && /*#__PURE__*/_react.default.createElement("span", {
+    className: "notifyDot"
+  })))))), (inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, _extends({}, inputSearch, {
+    onInputChange: onSearchInputChange,
+    onPressEnter: onSearchPressEnter,
+    allowClear: true,
+    onClear: onInputSearchClear,
+    onBlur: onInputSearchBlur
+  }))), (infoPanel === null || infoPanel === void 0 ? void 0 : infoPanel.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-12"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    description: infoPanel === null || infoPanel === void 0 || (_infoPanel$data = infoPanel.data) === null || _infoPanel$data === void 0 ? void 0 : _infoPanel$data.description,
+    color: infoPanel === null || infoPanel === void 0 || (_infoPanel$data2 = infoPanel.data) === null || _infoPanel$data2 === void 0 ? void 0 : _infoPanel$data2.color,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: (infoPanel === null || infoPanel === void 0 || (_infoPanel$data3 = infoPanel.data) === null || _infoPanel$data3 === void 0 || (_infoPanel$data3 = _infoPanel$data3.iconConfig) === null || _infoPanel$data3 === void 0 ? void 0 : _infoPanel$data3.color) || "warning",
+        icon: infoPanel === null || infoPanel === void 0 || (_infoPanel$data4 = infoPanel.data) === null || _infoPanel$data4 === void 0 || (_infoPanel$data4 = _infoPanel$data4.iconConfig) === null || _infoPanel$data4 === void 0 ? void 0 : _infoPanel$data4.icon
+      }),
+      position: (infoPanel === null || infoPanel === void 0 || (_infoPanel$data5 = infoPanel.data) === null || _infoPanel$data5 === void 0 || (_infoPanel$data5 = _infoPanel$data5.iconConfig) === null || _infoPanel$data5 === void 0 ? void 0 : _infoPanel$data5.position) || "left"
+    }
+  }))), Object.keys((state === null || state === void 0 || (_state$customDrawer3 = state.customDrawer) === null || _state$customDrawer3 === void 0 ? void 0 : _state$customDrawer3.appliedFilters) || {}).length > 0 && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AppliedFilters.default, {
+    appliedFilters: state === null || state === void 0 || (_state$customDrawer4 = state.customDrawer) === null || _state$customDrawer4 === void 0 ? void 0 : _state$customDrawer4.appliedFilters,
+    filterConfig: customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.data,
+    onRemoveFilter: onRemoveAppliedFilter,
+    onClearAll: onClearAllAppliedFilters,
+    filterDrawerData: state === null || state === void 0 ? void 0 : state.customDrawer
+  })), (tabs === null || tabs === void 0 ? void 0 : tabs.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaTabs"
+  }, /*#__PURE__*/_react.default.createElement(_CustomTabs.default, {
+    data: {
+      tabs: tabs === null || tabs === void 0 || (_tabs$list = tabs.list) === null || _tabs$list === void 0 ? void 0 : _tabs$list.map(tab => _objectSpread(_objectSpread({}, tab), {}, {
+        label: "".concat(tab === null || tab === void 0 ? void 0 : tab.label, " (").concat((tab === null || tab === void 0 ? void 0 : tab.value) || 0, ")")
+      }))
+    },
+    activeKey: tabs === null || tabs === void 0 ? void 0 : tabs.active,
+    onTabClick: onTabClick
+  }))), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_StaticFilter.default, {
+    staticFilter: staticFilter,
+    onFilterSelect: onStaticFilterSelect
+  })), (tables === null || tables === void 0 ? void 0 : tables.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.TableDataStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tableContainerList"
+  }, /*#__PURE__*/_react.default.createElement(_CustomTableV.default, {
+    columns: (_tables$columns3 = tables === null || tables === void 0 || (_tables$columns4 = tables.columns) === null || _tables$columns4 === void 0 ? void 0 : _tables$columns4[(_tabs$active3 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active3 !== void 0 ? _tabs$active3 : "default"]) !== null && _tables$columns3 !== void 0 ? _tables$columns3 : [],
+    dataSource: Array.isArray(tables === null || tables === void 0 ? void 0 : tables.data) ? tables === null || tables === void 0 ? void 0 : tables.data : [],
+    onChange: onTableChange,
+    customTableChange: customTableChange,
+    pagination: tables === null || tables === void 0 ? void 0 : tables.pagination,
+    selectedRows: (state === null || state === void 0 || (_state$tables4 = state.tables) === null || _state$tables4 === void 0 ? void 0 : _state$tables4.selectedRowKeys) || [],
+    rowSelection: (tables === null || tables === void 0 || (_tables$selectionType = tables.selectionType) === null || _tables$selectionType === void 0 ? void 0 : _tables$selectionType[(_tabs$active4 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active4 !== void 0 ? _tabs$active4 : "default"]) && Object.assign({
+      type: tables === null || tables === void 0 || (_tables$selectionType2 = tables.selectionType) === null || _tables$selectionType2 === void 0 ? void 0 : _tables$selectionType2[tabs === null || tabs === void 0 ? void 0 : tabs.active]
+    }, rowSelection),
+    locale: {
+      emptyText: emptyTableState
+    },
+    emptyStateCard: emptyTableState,
+    onMobilePageChange: tables !== null && tables !== void 0 && (_tables$pagination17 = tables.pagination) !== null && _tables$pagination17 !== void 0 && _tables$pagination17.mwebPagination ? onMobilePageChange : undefined
+  })))), (drawer === null || drawer === void 0 ? void 0 : drawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    className: "oaDrawer",
+    title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[(_tabs$active5 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active5 !== void 0 ? _tabs$active5 : "default"]) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active]) === null || _drawer$data === void 0 ? void 0 : _drawer$data.title,
+    onClose: () => dispatch({
+      type: _layoutReducer.actionTypes.CLOSE_DRAWER
+    }),
+    footer: null,
+    destroyOnClose: true,
+    zIndex: 1000
+  }, /*#__PURE__*/_react.default.createElement(_DetailDataLayout.default, _extends({}, (_drawer$data$drawer$a = drawer === null || drawer === void 0 || (_drawer$data2 = drawer.data) === null || _drawer$data2 === void 0 || (_drawer$data2 = _drawer$data2[(_tabs$active6 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active6 !== void 0 ? _tabs$active6 : "default"]) === null || _drawer$data2 === void 0 ? void 0 : _drawer$data2[drawer === null || drawer === void 0 ? void 0 : drawer.active]) !== null && _drawer$data$drawer$a !== void 0 ? _drawer$data$drawer$a : {}, {
+    activeTab: (_tabs$active7 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active7 !== void 0 ? _tabs$active7 : "default",
+    handleDrawerFormOnFinish: drawerFormOnFinish,
+    generateS3Url: generateS3Url,
+    downloadFileOnS3: downloadFileOnS3,
+    uploadOnS3: uploadOnS3,
+    onSelectHandlers: updateStateData,
+    handleCollapsibleKeyData: handleCollapsibleKeyData
+  }))), (nestedDrawer === null || nestedDrawer === void 0 ? void 0 : nestedDrawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    className: "oaDrawer",
+    title: nestedDrawer === null || nestedDrawer === void 0 || (_nestedDrawer$data = nestedDrawer.data) === null || _nestedDrawer$data === void 0 || (_nestedDrawer$data = _nestedDrawer$data.cancelOrder) === null || _nestedDrawer$data === void 0 ? void 0 : _nestedDrawer$data.title,
+    onClose: () => dispatch({
+      type: _layoutReducer.actionTypes.NESTED_DRAWER_CLOSED
+    }),
+    footer: null,
+    destroyOnClose: true,
+    zIndex: 1000
+  }, /*#__PURE__*/_react.default.createElement(_DetailDataLayout.default, _extends({}, (_nestedDrawer$data$ca = nestedDrawer === null || nestedDrawer === void 0 || (_nestedDrawer$data2 = nestedDrawer.data) === null || _nestedDrawer$data2 === void 0 ? void 0 : _nestedDrawer$data2.cancelOrder) !== null && _nestedDrawer$data$ca !== void 0 ? _nestedDrawer$data$ca : {}, {
+    handleDrawerFormOnFinish: drawerFormOnFinish
+  }))), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    className: "oaDrawer",
+    title: customDrawer === null || customDrawer === void 0 || (_customDrawer$data = customDrawer.data) === null || _customDrawer$data === void 0 ? void 0 : _customDrawer$data.title,
+    onClose: () => dispatch({
+      type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+    }),
+    footer: null,
+    destroyOnClose: true,
+    zIndex: 1000
+  }, /*#__PURE__*/_react.default.createElement(_DetailDataLayout.default, _extends({}, (_customDrawer$data2 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.data) !== null && _customDrawer$data2 !== void 0 ? _customDrawer$data2 : {}, {
+    handleDrawerFormOnFinish: filterFormOnFinish
+  }))), (contentPanel === null || contentPanel === void 0 ? void 0 : contentPanel.visible) && Array.isArray(contentPanel === null || contentPanel === void 0 ? void 0 : contentPanel.dataSource) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 2
+    }
+  }, contentPanel === null || contentPanel === void 0 || (_contentPanel$dataSou = contentPanel.dataSource) === null || _contentPanel$dataSou === void 0 ? void 0 : _contentPanel$dataSou.map((item, i) => /*#__PURE__*/_react.default.createElement(_ContentPanel.default, _extends({
+    key: i
+  }, item)))), (tables === null || tables === void 0 || (_tables$tableFooter = tables.tableFooter) === null || _tables$tableFooter === void 0 ? void 0 : _tables$tableFooter.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bottomSelectedSecion"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-button-500"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "".concat(tables === null || tables === void 0 || (_tables$selectedRowKe = tables.selectedRowKeys) === null || _tables$selectedRowKe === void 0 ? void 0 : _tables$selectedRowKe.length, " ").concat(tables === null || tables === void 0 || (_tables$tableFooter2 = tables.tableFooter) === null || _tables$tableFooter2 === void 0 ? void 0 : _tables$tableFooter2.text))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: tables === null || tables === void 0 || (_tables$tableFooter3 = tables.tableFooter) === null || _tables$tableFooter3 === void 0 || (_tables$tableFooter3 = _tables$tableFooter3.jsxConfig) === null || _tables$tableFooter3 === void 0 ? void 0 : _tables$tableFooter3.buttonType,
+    onClick: () => {
+      var _tables$tableFooter4;
+      return customTableSelectFooterClick(tables === null || tables === void 0 || (_tables$tableFooter4 = tables.tableFooter) === null || _tables$tableFooter4 === void 0 ? void 0 : _tables$tableFooter4.jsxConfig);
+    },
+    label: tables === null || tables === void 0 || (_tables$tableFooter5 = tables.tableFooter) === null || _tables$tableFooter5 === void 0 || (_tables$tableFooter5 = _tables$tableFooter5.jsxConfig) === null || _tables$tableFooter5 === void 0 ? void 0 : _tables$tableFooter5.label
+  })))), (modal === null || modal === void 0 ? void 0 : modal.visible) && /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    modal: modal,
+    onCancel: () => dispatch({
+      type: _layoutReducer.actionTypes.TOGGLE_MODAL,
+      payload: false
+    }),
+    onFooterAction: onClickModalFooter,
+    handleSwitchSelectItem: handleSwitchSelectItem
+  }))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }))));
+}
+GenricLayOut.propTypes = {};
+GenricLayOut.defaultProps = {};
+var _default = exports.default = GenricLayOut;