oa-componentbook 0.18.387 → 0.18.389

package/build/components/oa-component-info/CustomInfo.js

@@ -53,9 +53,11 @@ function CustomInfo(_ref) {
     borderColor,
     closable,
     onClose,
-    position
+    position,
+    closeIconPosition
   } = _ref;
   const [visible, setVisible] = (0, _react.useState)(true);
+  console.log(closeIconPosition, "closeIconPosition");
   const handleClose = () => {
     setVisible(false);
     if (onClose) {
@@ -111,7 +113,10 @@ function CustomInfo(_ref) {
       color: "var(--color-".concat(fontColor, ")")
     }
   }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon(), closable && /*#__PURE__*/_react.default.createElement(_styles.CloseButton, {
-    onClick: handleClose
+    onClick: handleClose,
+    style: closeIconPosition === 'end' ? {
+      marginLeft: 'auto'
+    } : {}
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
     icon: _CloseRounded.default,
     color: "secondary-content",
@@ -135,14 +140,15 @@ CustomInfo.propTypes = {
   fontColor: _propTypes.default.oneOf(_colorOptions.colorOptions),
   iconConfig: _propTypes.default.shape({
     icon: _propTypes.default.node,
-    position: _propTypes.default.oneOf(['left', 'right']),
+    position: _propTypes.default.oneOf(['left', 'right', 'end']),
     tooltipText: _propTypes.default.string
   }),
   title: _propTypes.default.string,
   borderColor: _propTypes.default.string,
   closable: _propTypes.default.bool,
   onClose: _propTypes.default.func,
-  position: _propTypes.default.oneOf(['left', 'center', 'right'])
+  position: _propTypes.default.oneOf(['left', 'center', 'right']),
+  closeIconPosition: _propTypes.default.string
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -160,5 +166,6 @@ CustomInfo.defaultProps = {
   borderColor: '',
   closable: false,
   onClose: null,
-  position: 'left'
+  position: 'left',
+  closeIconPosition: ''
 };

package/build/components/oa-component-tag/CustomTag.js

@@ -32,7 +32,7 @@ function CustomTag(_ref) {
     textColor,
     style
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
+  const tag = /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
     "data-test": dataTest,
     type: type,
     visible: visible,
@@ -44,11 +44,15 @@ function CustomTag(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-button-500"
   }, label)));
+  if (type === "ai") {
+    return /*#__PURE__*/_react.default.createElement(_styles.AIGradientWrapper, null, tag);
+  }
+  return tag;
 }
 CustomTag.propTypes = {
   "data-test": _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom"]),
+  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom", "ai"]),
   visible: _propTypes.default.bool,
   bgColor: _propTypes.default.string,
   borderColor: _propTypes.default.string,

package/build/components/oa-component-tag/styles.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledTag = exports.CenteredTextContainer = void 0;
+exports.default = exports.StyledTag = exports.CenteredTextContainer = exports.AIGradientWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const AIGradientWrapper = exports.AIGradientWrapper = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  padding: 1px;\n  border-radius: 4px;\n  background: linear-gradient(\n    135deg,\n    #4fc3f7 0%,\n    #ff69b4 25%,\n    #ffa500 50%,\n    #ffd700 75%,\n    #ff69b4 100%\n  );\n"])));
 const getColorStyles = props => {
   const {
     type,
@@ -57,6 +58,13 @@ const getColorStyles = props => {
       textColor: 'var(--color-primary)'
     };
   }
+  if (type === 'ai') {
+    return {
+      backgroundColor: '#ffffff',
+      borderColor: 'transparent',
+      textColor: '#212121'
+    };
+  }
   if (type === 'custom') {
     return {
       backgroundColor: bgColor,
@@ -71,5 +79,5 @@ const getColorStyles = props => {
   };
 };
 var _default = exports.default = {};
-const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n\n  visibility: ", ";\n"])), props => getColorStyles(props).textColor, props => getColorStyles(props).backgroundColor, props => getColorStyles(props).borderColor, props => props.visible ? 'visible' : 'hidden');
-const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));
+const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  border: ", ";\n  border-radius: 4px;\n\n  visibility: ", ";\n"])), props => getColorStyles(props).textColor, props => getColorStyles(props).backgroundColor, props => props.type === 'ai' ? 'none' : "1px solid ".concat(getColorStyles(props).borderColor), props => props.visible ? 'visible' : 'hidden');
+const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));

package/build/components/oa-component-upload/CustomUpload.js

@@ -197,7 +197,6 @@ function DocumentUpload(_ref) {
               return modifiedFile;
             }
             response = (_response5 = response) === null || _response5 === void 0 ? void 0 : _response5.data;
-            s3ResponseReturn(response);
             await uploadOnS3((_response6 = response) === null || _response6 === void 0 || (_response6 = _response6.response) === null || _response6 === void 0 || (_response6 = _response6.data) === null || _response6 === void 0 ? void 0 : _response6.uploadUrl, files);
             if (((_response7 = response) === null || _response7 === void 0 || (_response7 = _response7.response) === null || _response7 === void 0 || (_response7 = _response7.status) === null || _response7 === void 0 ? void 0 : _response7.toLowerCase()) == "success") {
               var _response8;
@@ -206,6 +205,7 @@ function DocumentUpload(_ref) {
               if (!isImageFile(files === null || files === void 0 ? void 0 : files.name)) {
                 modifiedFile.url = _PdfSampleImage.default;
               }
+              await s3ResponseReturn(response);
             } else {
               modifiedFile.status = "failed";
               modifiedFile = null;

package/build/layout/DetailDataLayout/DetailDataLayout.js

@@ -16,6 +16,8 @@ function DetailDataLayout(props) {
     handleDrawerFormOnFinish: props === null || props === void 0 ? void 0 : props.handleDrawerFormOnFinish,
     onSelectHandlers: props === null || props === void 0 ? void 0 : props.onSelectHandlers,
     handleCollapsibleKeyData: props === null || props === void 0 ? void 0 : props.handleCollapsibleKeyData,
-    misc: props === null || props === void 0 ? void 0 : props.misc
+    handleDownloadTemplate: props === null || props === void 0 ? void 0 : props.handleDownloadTemplate,
+    misc: props === null || props === void 0 ? void 0 : props.misc,
+    postUploadCall: props === null || props === void 0 ? void 0 : props.postUploadCall
   })));
 }

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -8,6 +8,8 @@ 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.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireWildcard(require("react"));
@@ -56,12 +58,13 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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$misc34, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _infoData$iconConfig, _infoData$iconConfig2, _infoData$iconConfig3, _infoData$iconConfig4, _leftHeaderFirstButto, _leftHeaderFirstButto2, _leftHeaderSecondButt, _leftHeaderSecondButt2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer3, _state$customDrawer4, _tabs$list, _ref7, _tabs$extraAction$che2, _tabs$extraAction$pro, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables5, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination19, _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;
+  var _state$misc37, _headerRightFirstButt, _headerRightSecondBut, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _infoData$iconConfig, _infoData$iconConfig2, _infoData$iconConfig3, _infoData$iconConfig4, _leftHeaderFirstButto, _leftHeaderFirstButto2, _leftHeaderSecondButt, _leftHeaderSecondButt2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer4, _state$customDrawer5, _tabs$list, _ref7, _tabs$extraAction$che2, _tabs$extraAction$pro, _tabTableInfoPanel$da, _tabTableInfoPanel$da2, _tabTableInfoPanel$da3, _tabTableInfoPanel$da4, _tabTableInfoPanel$da5, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables5, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination19, _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,
+    postUploadCall,
     handlers: {
       handleTabClick,
       handleFooterClick,
@@ -89,6 +92,8 @@ function GenricLayOut(_ref) {
       handleLeftHeaderFirstButton,
       handleLeftHeaderSecondButton,
       handleRightHeaderButtonClick,
+      handleHeaderRightFirstButton,
+      handleHeaderRightSecondButton,
       handleDownloadTemplate,
       handleCtaDownload,
       handleTabExtraActionChange,
@@ -116,6 +121,8 @@ function GenricLayOut(_ref) {
     modal,
     leftHeaderFirstButton,
     leftHeaderSecondButton,
+    headerRightFirstButton,
+    headerRightSecondButton,
     rightHeaderFirstButton,
     rightHeaderSecondButton,
     imageViewer,
@@ -123,9 +130,11 @@ function GenricLayOut(_ref) {
     staticFilter,
     profileData,
     infoPanel,
+    tabTableInfoPanel,
     infoData,
     feedbackWidget
   } = state !== null && state !== void 0 ? state : {};
+  console.log(infoData, "infoData");
   (0, _react.useEffect)(() => {
     init();
   }, []);
@@ -1777,10 +1786,27 @@ function GenricLayOut(_ref) {
           init();
         }
       }
+    } else if ((formData === null || formData === void 0 ? void 0 : formData.type) === "BULK_CREATION_WITH_ENTERPRISE_DATA") {
+      if (handleDrawerFormOnFinish) {
+        var _state$misc25, _state$header;
+        const {
+          error,
+          data
+        } = await (handleDrawerFormOnFinish === null || handleDrawerFormOnFinish === void 0 ? void 0 : handleDrawerFormOnFinish(_objectSpread(_objectSpread(_objectSpread({}, formData), (_state$misc25 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc25 !== void 0 ? _state$misc25 : {}), state === null || state === void 0 || (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.subHeading)));
+        if (error) {
+          showErrorNotification(error);
+        } else {
+          dispatch({
+            type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
+          });
+          showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+          init();
+        }
+      }
     }
   };
   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$misc25, _state$staticFilter$m11, _state$staticFilter11;
+    var _state$dropdownSearch9, _state$inputSearch9, _state$tabs15, _tables$pagination9, _tables$pagination10, _tables$filter10, _tables$sorting23, _header$subHeading27, _header$subHeading28, _staticFilter$data11, _tables$sorting24, _state$misc26, _state$staticFilter$m11, _state$staticFilter11;
     resetTabsExtraActionSwitch();
     const {
       error,
@@ -1804,7 +1830,7 @@ function GenricLayOut(_ref) {
       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$misc25 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc25 !== void 0 ? _state$misc25 : {}), {}, {
+    }, (_state$misc26 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc26 !== void 0 ? _state$misc26 : {}), {}, {
       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) {
@@ -1833,6 +1859,83 @@ function GenricLayOut(_ref) {
       }
     });
   };
+  const handlePostUploadSuccess = data => {
+    const wrappedData = {
+      postUploadWidget: data
+    };
+    const fieldValues = {};
+    const patchGroups = (currentGroups, staticGroups) => {
+      if (!Array.isArray(currentGroups)) return currentGroups;
+      return currentGroups.map((group, gIdx) => {
+        var _group$items;
+        const staticGroup = staticGroups === null || staticGroups === void 0 ? void 0 : staticGroups[gIdx];
+        const updatedItems = group === null || group === void 0 || (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.map((item, iIdx) => {
+          var _staticGroup$items;
+          const staticItem = staticGroup === null || staticGroup === void 0 || (_staticGroup$items = staticGroup.items) === null || _staticGroup$items === void 0 ? void 0 : _staticGroup$items[iIdx];
+          if (typeof staticItem === "string" && /^{{\s*[^}]+\s*}}$/.test(staticItem)) {
+            const resolved = (0, _staticConfigResolver.default)(staticItem, wrappedData);
+            if (resolved !== "") {
+              if (resolved !== null && resolved !== void 0 && resolved.name && (resolved === null || resolved === void 0 ? void 0 : resolved.value) !== undefined) {
+                fieldValues[resolved.name] = resolved.value;
+              }
+              return resolved;
+            }
+            return item;
+          }
+          return item;
+        });
+        return _objectSpread(_objectSpread({}, group), {}, {
+          items: updatedItems
+        });
+      });
+    };
+    if (drawer !== null && drawer !== void 0 && drawer.visible) {
+      var _state$drawer3, _state$tabs$active3, _state$tabs16, _state$drawer4, _config$drawer2;
+      const currentDrawerKey = state === null || state === void 0 || (_state$drawer3 = state.drawer) === null || _state$drawer3 === void 0 ? void 0 : _state$drawer3.active;
+      const tabKey = (_state$tabs$active3 = state === null || state === void 0 || (_state$tabs16 = state.tabs) === null || _state$tabs16 === void 0 ? void 0 : _state$tabs16.active) !== null && _state$tabs$active3 !== void 0 ? _state$tabs$active3 : "default";
+      const currentDrawerData = state === null || state === void 0 || (_state$drawer4 = state.drawer) === null || _state$drawer4 === void 0 || (_state$drawer4 = _state$drawer4.data) === null || _state$drawer4 === void 0 || (_state$drawer4 = _state$drawer4[tabKey]) === null || _state$drawer4 === void 0 ? void 0 : _state$drawer4[currentDrawerKey];
+      const staticDrawerData = config === null || config === void 0 || (_config$drawer2 = config.drawer) === null || _config$drawer2 === void 0 || (_config$drawer2 = _config$drawer2.data) === null || _config$drawer2 === void 0 || (_config$drawer2 = _config$drawer2[tabKey]) === null || _config$drawer2 === void 0 ? void 0 : _config$drawer2[currentDrawerKey];
+      if (!currentDrawerData) return fieldValues;
+      const updatedGroups = patchGroups(currentDrawerData === null || currentDrawerData === void 0 ? void 0 : currentDrawerData.groups, staticDrawerData === null || staticDrawerData === void 0 ? void 0 : staticDrawerData.groups);
+      const dynamicConfig = _objectSpread(_objectSpread({}, currentDrawerData), {}, {
+        groups: updatedGroups
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_DRAWER,
+        payload: {
+          dynamicConfig,
+          active: currentDrawerKey
+        }
+      });
+    } else if (nestedDrawer !== null && nestedDrawer !== void 0 && nestedDrawer.visible) {
+      var _state$nestedDrawer, _config$nestedDrawer2;
+      const currentDrawerData = state === null || state === void 0 || (_state$nestedDrawer = state.nestedDrawer) === null || _state$nestedDrawer === void 0 || (_state$nestedDrawer = _state$nestedDrawer.data) === null || _state$nestedDrawer === void 0 ? void 0 : _state$nestedDrawer.cancelOrder;
+      const staticDrawerData = config === null || config === void 0 || (_config$nestedDrawer2 = config.nestedDrawer) === null || _config$nestedDrawer2 === void 0 || (_config$nestedDrawer2 = _config$nestedDrawer2.data) === null || _config$nestedDrawer2 === void 0 ? void 0 : _config$nestedDrawer2.cancelOrder;
+      if (!currentDrawerData) return fieldValues;
+      const updatedGroups = patchGroups(currentDrawerData === null || currentDrawerData === void 0 ? void 0 : currentDrawerData.groups, staticDrawerData === null || staticDrawerData === void 0 ? void 0 : staticDrawerData.groups);
+      const dynamicConfig = _objectSpread(_objectSpread({}, currentDrawerData), {}, {
+        groups: updatedGroups
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_NESTED_DRAWER,
+        payload: dynamicConfig
+      });
+    } else if (customDrawer !== null && customDrawer !== void 0 && customDrawer.visible) {
+      var _state$customDrawer2, _config$customDrawer3;
+      const currentDrawerData = state === null || state === void 0 || (_state$customDrawer2 = state.customDrawer) === null || _state$customDrawer2 === void 0 ? void 0 : _state$customDrawer2.data;
+      const staticDrawerData = 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[(rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.drawerKey) || (rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey) || (leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.drawerKey) || (leftHeaderSecondButton === null || leftHeaderSecondButton === void 0 ? void 0 : leftHeaderSecondButton.drawerKey)];
+      if (!currentDrawerData) return fieldValues;
+      const updatedGroups = patchGroups(currentDrawerData === null || currentDrawerData === void 0 ? void 0 : currentDrawerData.groups, staticDrawerData === null || staticDrawerData === void 0 ? void 0 : staticDrawerData.groups);
+      const dynamicConfig = _objectSpread(_objectSpread({}, currentDrawerData), {}, {
+        groups: updatedGroups
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+        payload: dynamicConfig
+      });
+    }
+    return fieldValues;
+  };
 
   /**
    * Handles the modal footer click event.
@@ -1863,14 +1966,14 @@ function GenricLayOut(_ref) {
       return;
     } else if (action === "CLOSE_MODAL_AND_FETCH") {
       if (handleModalCloseSuccess) {
-        var _stateRef$current, _state$misc26;
+        var _stateRef$current, _state$misc27;
         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$misc26 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc26 !== void 0 ? _state$misc26 : {})));
+        }, (_state$misc27 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc27 !== void 0 ? _state$misc27 : {})));
         if (error) {
           showErrorNotification(error);
         } else {
@@ -1884,11 +1987,11 @@ function GenricLayOut(_ref) {
       }
     } else {
       if (handleDrawerFormOnFinish) {
-        var _state$tables$selecte, _state$tables4, _state$misc27;
+        var _state$tables$selecte, _state$tables4, _state$misc28;
         let req = {};
         req.type = "APPROVE";
         req.orderUUID = (_state$tables$selecte = state === null || state === void 0 || (_state$tables4 = state.tables) === null || _state$tables4 === void 0 || (_state$tables4 = _state$tables4.selectedRowKeys) === null || _state$tables4 === void 0 ? void 0 : _state$tables4.map(item => item.orderUUID)) !== null && _state$tables$selecte !== void 0 ? _state$tables$selecte : [];
-        req.misc = (_state$misc27 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc27 !== void 0 ? _state$misc27 : {};
+        req.misc = (_state$misc28 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc28 !== void 0 ? _state$misc28 : {};
         const {
           error,
           data
@@ -1939,8 +2042,8 @@ function GenricLayOut(_ref) {
    */
   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];
+      var _config$customDrawer4;
+      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[leftHeaderFirstButton === null || leftHeaderFirstButton === void 0 ? void 0 : leftHeaderFirstButton.drawerKey];
       dispatch({
         type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
         payload: drawerData
@@ -1980,8 +2083,8 @@ function GenricLayOut(_ref) {
    */
   const leftHeaderSecondButtonClick = async () => {
     if ((leftHeaderSecondButton === null || leftHeaderSecondButton === void 0 ? void 0 : leftHeaderSecondButton.action) === "OPEN_CUSTOM_DRAWER") {
-      var _config$customDrawer4;
-      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[leftHeaderSecondButton === null || leftHeaderSecondButton === void 0 ? void 0 : leftHeaderSecondButton.drawerKey];
+      var _config$customDrawer5;
+      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[leftHeaderSecondButton === null || leftHeaderSecondButton === void 0 ? void 0 : leftHeaderSecondButton.drawerKey];
       dispatch({
         type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
         payload: drawerData
@@ -2020,9 +2123,9 @@ function GenricLayOut(_ref) {
    */
   const rightHeaderFirstButtonClick = async () => {
     if ((rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.action) === "OPEN_CUSTOM_DRAWER") {
-      var _config$customDrawer5, _state$misc28, _state$customDrawer2;
-      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[rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey];
-      const dynamicConfig = (0, _staticConfigResolver.removeHidden)((0, _staticConfigResolver.default)(drawerData, (_state$misc28 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc28 !== void 0 ? _state$misc28 : {}));
+      var _config$customDrawer6, _state$misc29, _state$customDrawer3;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer6 = config.customDrawer) === null || _config$customDrawer6 === void 0 || (_config$customDrawer6 = _config$customDrawer6.data) === null || _config$customDrawer6 === void 0 ? void 0 : _config$customDrawer6[rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey];
+      const dynamicConfig = (0, _staticConfigResolver.removeHidden)((0, _staticConfigResolver.default)(drawerData, (_state$misc29 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc29 !== void 0 ? _state$misc29 : {}));
       dispatch({
         type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
         payload: dynamicConfig
@@ -2032,18 +2135,18 @@ function GenricLayOut(_ref) {
       });
 
       // 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) {
+      if (state !== null && state !== void 0 && (_state$customDrawer3 = state.customDrawer) !== null && _state$customDrawer3 !== void 0 && _state$customDrawer3.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") {
       // Check if button has a drawerKey for custom drawer, otherwise use key for regular drawer
       if (rightHeaderFirstButton !== null && rightHeaderFirstButton !== void 0 && rightHeaderFirstButton.drawerKey) {
-        var _config$customDrawer6, _state$misc29;
-        const drawerData = config === null || config === void 0 || (_config$customDrawer6 = config.customDrawer) === null || _config$customDrawer6 === void 0 || (_config$customDrawer6 = _config$customDrawer6.data) === null || _config$customDrawer6 === void 0 ? void 0 : _config$customDrawer6[rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey];
+        var _config$customDrawer7, _state$misc30;
+        const drawerData = config === null || config === void 0 || (_config$customDrawer7 = config.customDrawer) === null || _config$customDrawer7 === void 0 || (_config$customDrawer7 = _config$customDrawer7.data) === null || _config$customDrawer7 === void 0 ? void 0 : _config$customDrawer7[rightHeaderFirstButton === null || rightHeaderFirstButton === void 0 ? void 0 : rightHeaderFirstButton.drawerKey];
         const {
           error,
           data
-        } = await handleRightHeaderButtonClick(_objectSpread({}, (_state$misc29 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc29 !== void 0 ? _state$misc29 : {}));
+        } = await handleRightHeaderButtonClick(_objectSpread({}, (_state$misc30 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc30 !== void 0 ? _state$misc30 : {}));
         if (drawerData) {
           const dynamicConfig = (0, _staticConfigResolver.removeHidden)((0, _staticConfigResolver.default)(drawerData, data !== null && data !== void 0 ? data : {}));
           dispatch({
@@ -2064,7 +2167,7 @@ function GenricLayOut(_ref) {
   };
   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$misc30, _state$staticFilter$m12, _state$staticFilter12;
+      var _state$dropdownSearch10, _state$inputSearch10, _state$tabs17, _tables$pagination11, _tables$pagination12, _tables$filter11, _tables$sorting25, _header$subHeading29, _header$subHeading30, _staticFilter$data12, _tables$sorting26, _state$misc31, _state$staticFilter$m12, _state$staticFilter12;
       resetTabsExtraActionSwitch();
       const {
         error,
@@ -2075,7 +2178,7 @@ function GenricLayOut(_ref) {
       }), (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,
+        selectedTab: state === null || state === void 0 || (_state$tabs17 = state.tabs) === null || _state$tabs17 === void 0 ? void 0 : _state$tabs17.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) && {
@@ -2088,7 +2191,7 @@ function GenricLayOut(_ref) {
         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$misc30 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc30 !== void 0 ? _state$misc30 : {}), {}, {
+      }, (_state$misc31 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc31 !== void 0 ? _state$misc31 : {}), {}, {
         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) {
@@ -2097,7 +2200,7 @@ function GenricLayOut(_ref) {
           type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
         });
       } else {
-        var _config$customDrawer7;
+        var _config$customDrawer8;
         if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
           setStaticFilterData(data);
         }
@@ -2108,14 +2211,100 @@ function GenricLayOut(_ref) {
         dispatch({
           type: _layoutReducer.actionTypes.CLEAR_ALL_APPLIED_FILTERS
         });
-        const drawerData = config === null || config === void 0 || (_config$customDrawer7 = config.customDrawer) === null || _config$customDrawer7 === void 0 || (_config$customDrawer7 = _config$customDrawer7.data) === null || _config$customDrawer7 === void 0 ? void 0 : _config$customDrawer7[rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.drawerKey];
+        const drawerData = config === null || config === void 0 || (_config$customDrawer8 = config.customDrawer) === null || _config$customDrawer8 === void 0 || (_config$customDrawer8 = _config$customDrawer8.data) === null || _config$customDrawer8 === void 0 ? void 0 : _config$customDrawer8[rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.drawerKey];
+        if (drawerData) {
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+            payload: drawerData
+          });
+        }
+      }
+    }
+  };
+  const handleHeaderActionButtonClick = async (buttonConfig, customHandler) => {
+    if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.action)) {
+      return;
+    }
+    if (buttonConfig.action === "OPEN_CUSTOM_DRAWER") {
+      var _config$customDrawer9;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer9 = config.customDrawer) === null || _config$customDrawer9 === void 0 || (_config$customDrawer9 = _config$customDrawer9.data) === null || _config$customDrawer9 === void 0 ? void 0 : _config$customDrawer9[buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.drawerKey];
+      if (drawerData) {
+        var _state$misc32;
+        const dynamicConfig = (0, _staticConfigResolver.removeHidden)((0, _staticConfigResolver.default)(drawerData, (_state$misc32 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc32 !== void 0 ? _state$misc32 : {}));
+        dispatch({
+          type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+          payload: dynamicConfig
+        });
+        dispatch({
+          type: _layoutReducer.actionTypes.CUSTOM_DRAWER_OPEN
+        });
+      }
+      return;
+    }
+    if (buttonConfig.action === "OPEN_DRAWER") {
+      if (buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.drawerKey) {
+        var _config$customDrawer10;
+        const drawerData = config === null || config === void 0 || (_config$customDrawer10 = config.customDrawer) === null || _config$customDrawer10 === void 0 || (_config$customDrawer10 = _config$customDrawer10.data) === null || _config$customDrawer10 === void 0 ? void 0 : _config$customDrawer10[buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.drawerKey];
         if (drawerData) {
           dispatch({
             type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
             payload: drawerData
           });
+          dispatch({
+            type: _layoutReducer.actionTypes.CUSTOM_DRAWER_OPEN
+          });
         }
+      } else if (buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.key) {
+        dispatch({
+          type: _layoutReducer.actionTypes.TOGGLE_DRAWER,
+          payload: buttonConfig.key
+        });
       }
+      return;
+    }
+    if (buttonConfig.action === "EXPORT_DATA" && customHandler) {
+      customHandler(state).then(res => {
+        const {
+          error,
+          data
+        } = res;
+        if (error) {
+          showErrorNotification(error);
+        } else if (data) {
+          showSuccessNotification((data === null || data === void 0 ? void 0 : data.message) || "Export initiated successfully");
+        }
+      }).catch(err => {
+        showErrorNotification((err === null || err === void 0 ? void 0 : err.message) || "An error occurred during export");
+      });
+      return;
+    }
+    if (customHandler) {
+      var _state$misc33;
+      const {
+        error,
+        data
+      } = await customHandler(_objectSpread(_objectSpread({}, state), (_state$misc33 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc33 !== void 0 ? _state$misc33 : {}));
+      if (error) {
+        showErrorNotification(error);
+      } else if (data !== null && data !== void 0 && data.message) {
+        showSuccessNotification(data.message);
+      }
+    }
+  };
+  const headerRightFirstButtonClick = async () => {
+    console.log(headerRightFirstButton, "headerRightFirstButton");
+  };
+  const headerRightSecondButtonClick = async () => {
+    if ((headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.action) === "OPEN_CUSTOM_DRAWER") {
+      var _config$customDrawer11;
+      const drawerData = config === null || config === void 0 || (_config$customDrawer11 = config.customDrawer) === null || _config$customDrawer11 === void 0 || (_config$customDrawer11 = _config$customDrawer11.data) === null || _config$customDrawer11 === void 0 ? void 0 : _config$customDrawer11[headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.drawerKey];
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
+        payload: drawerData
+      });
+      dispatch({
+        type: _layoutReducer.actionTypes.CUSTOM_DRAWER_OPEN
+      });
     }
   };
 
@@ -2128,8 +2317,8 @@ function GenricLayOut(_ref) {
     if (menuItem !== null && menuItem !== void 0 && menuItem.drawerKey) {
       // Check if it's a custom drawer or regular drawer
       if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.drawerType) === "custom") {
-        var _config$customDrawer8;
-        const drawerData = config === null || config === void 0 || (_config$customDrawer8 = config.customDrawer) === null || _config$customDrawer8 === void 0 || (_config$customDrawer8 = _config$customDrawer8.data) === null || _config$customDrawer8 === void 0 ? void 0 : _config$customDrawer8[menuItem.drawerKey];
+        var _config$customDrawer12;
+        const drawerData = config === null || config === void 0 || (_config$customDrawer12 = config.customDrawer) === null || _config$customDrawer12 === void 0 || (_config$customDrawer12 = _config$customDrawer12.data) === null || _config$customDrawer12 === void 0 ? void 0 : _config$customDrawer12[menuItem.drawerKey];
         if (drawerData) {
           dispatch({
             type: _layoutReducer.actionTypes.SET_CUSTOM_DRAWER,
@@ -2176,7 +2365,7 @@ function GenricLayOut(_ref) {
   };
   const handleSubHeadingSelect = async val => {
     if (val) {
-      var _state$tabs17, _tables$pagination13, _tables$pagination14, _state$misc31;
+      var _state$tabs18, _tables$pagination13, _tables$pagination14, _state$misc34;
       dispatch({
         type: _layoutReducer.actionTypes.SET_SUBHEADING_SELECTED_CONFIG,
         payload: val
@@ -2185,12 +2374,12 @@ function GenricLayOut(_ref) {
         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,
+        selectedTab: state === null || state === void 0 || (_state$tabs18 = state.tabs) === null || _state$tabs18 === void 0 ? void 0 : _state$tabs18.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$misc31 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc31 !== void 0 ? _state$misc31 : {}));
+      }, (_state$misc34 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc34 !== void 0 ? _state$misc34 : {}));
       if (error) {
         showErrorNotification(error);
         dispatch({
@@ -2227,7 +2416,7 @@ function GenricLayOut(_ref) {
 
     // 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$misc32;
+      var _state$dropdownSearch11, _state$inputSearch11, _state$tabs19, _tables$pagination15, _tables$sorting27, _tables$sorting28, _header$subHeading31, _header$subHeading32, _customDrawer$applied10, _state$misc35;
       dispatch({
         type: _layoutReducer.actionTypes.SET_LOADING,
         payload: true
@@ -2241,7 +2430,7 @@ function GenricLayOut(_ref) {
       }), (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,
+        selectedTab: state === null || state === void 0 || (_state$tabs19 = state.tabs) === null || _state$tabs19 === void 0 ? void 0 : _state$tabs19.active,
         current: 1,
         pageSize: tables === null || tables === void 0 || (_tables$pagination15 = tables.pagination) === null || _tables$pagination15 === void 0 ? void 0 : _tables$pagination15.pageSize,
         filterStatus: filterValue,
@@ -2249,7 +2438,7 @@ function GenricLayOut(_ref) {
         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$misc32 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc32 !== void 0 ? _state$misc32 : {}), {}, {
+      } : {}), (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$misc35 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc35 !== void 0 ? _state$misc35 : {}), {}, {
         staticFilter: filterValue,
         // Pass static filter value
         multiSelectValue: multiSelectValue
@@ -2294,7 +2483,7 @@ function GenricLayOut(_ref) {
       }
     });
     if (handleTableChange) {
-      var _state$dropdownSearch12, _state$inputSearch12, _state$tabs19, _tables$filter12, _tables$sorting29, _tables$sorting30, _header$subHeading33, _header$subHeading34, _staticFilter$data13, _customDrawer$applied11, _state$misc33, _state$staticFilter$m13, _state$staticFilter13;
+      var _state$dropdownSearch12, _state$inputSearch12, _state$tabs20, _tables$filter12, _tables$sorting29, _tables$sorting30, _header$subHeading33, _header$subHeading34, _staticFilter$data13, _customDrawer$applied11, _state$misc36, _state$staticFilter$m13, _state$staticFilter13;
       const {
         error,
         data
@@ -2304,7 +2493,7 @@ function GenricLayOut(_ref) {
       }), (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,
+        selectedTab: state === null || state === void 0 || (_state$tabs20 = state.tabs) === null || _state$tabs20 === void 0 ? void 0 : _state$tabs20.active,
         current,
         pageSize,
         columnFilterStatus: tables === null || tables === void 0 || (_tables$filter12 = tables.filter) === null || _tables$filter12 === void 0 ? void 0 : _tables$filter12.value,
@@ -2314,7 +2503,7 @@ function GenricLayOut(_ref) {
         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$misc33 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc33 !== void 0 ? _state$misc33 : {}), {}, {
+      }), (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$misc36 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc36 !== void 0 ? _state$misc36 : {}), {}, {
         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) {
@@ -2345,7 +2534,7 @@ function GenricLayOut(_ref) {
   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$misc34 = state.misc) === null || _state$misc34 === void 0 ? void 0 : _state$misc34.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
+    className: (state === null || state === void 0 || (_state$misc37 = state.misc) === null || _state$misc37 === void 0 ? void 0 : _state$misc37.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, {
@@ -2374,6 +2563,32 @@ function GenricLayOut(_ref) {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "headerRight"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerTopActionButtons"
+  }, (headerRightFirstButton === null || headerRightFirstButton === void 0 ? void 0 : headerRightFirstButton.visible) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: headerRightFirstButton === null || headerRightFirstButton === void 0 ? void 0 : headerRightFirstButton.label,
+    onClick: headerRightFirstButtonClick,
+    type: headerRightFirstButton === null || headerRightFirstButton === void 0 ? void 0 : headerRightFirstButton.type,
+    size: headerRightFirstButton === null || headerRightFirstButton === void 0 ? void 0 : headerRightFirstButton.size,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: headerRightFirstButton === null || headerRightFirstButton === void 0 || (_headerRightFirstButt = headerRightFirstButton.iconConfig) === null || _headerRightFirstButt === void 0 ? void 0 : _headerRightFirstButt.icon,
+        size: 24,
+        color: "primary"
+      })
+    }
+  }), (headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.visible) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.label,
+    onClick: headerRightSecondButtonClick,
+    type: headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.type,
+    size: headerRightSecondButton === null || headerRightSecondButton === void 0 ? void 0 : headerRightSecondButton.size,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: headerRightSecondButton === null || headerRightSecondButton === void 0 || (_headerRightSecondBut = headerRightSecondButton.iconConfig) === null || _headerRightSecondBut === void 0 ? void 0 : _headerRightSecondBut.icon,
+        size: 24,
+        color: "primary"
+      })
+    }
+  })), /*#__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,
@@ -2411,7 +2626,8 @@ function GenricLayOut(_ref) {
         icon: infoData === null || infoData === void 0 || (_infoData$iconConfig2 = infoData.iconConfig) === null || _infoData$iconConfig2 === void 0 ? void 0 : _infoData$iconConfig2.icon,
         size: (infoData === null || infoData === void 0 || (_infoData$iconConfig3 = infoData.iconConfig) === null || _infoData$iconConfig3 === void 0 ? void 0 : _infoData$iconConfig3.size) || 16
       }),
-      position: (infoData === null || infoData === void 0 || (_infoData$iconConfig4 = infoData.iconConfig) === null || _infoData$iconConfig4 === void 0 ? void 0 : _infoData$iconConfig4.position) || "left"
+      position: (infoData === null || infoData === void 0 || (_infoData$iconConfig4 = infoData.iconConfig) === null || _infoData$iconConfig4 === void 0 ? void 0 : _infoData$iconConfig4.position) || "left",
+      closeIconPosition: infoData === null || infoData === void 0 ? void 0 : infoData.closeIconPosition
     }
   })), (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,
@@ -2469,7 +2685,7 @@ function GenricLayOut(_ref) {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "oaheaderButtonsRight"
-  }, !isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+  }, !isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && (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,
@@ -2543,14 +2759,14 @@ function GenricLayOut(_ref) {
       }),
       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, {
+  }))), Object.keys((state === null || state === void 0 || (_state$customDrawer4 = state.customDrawer) === null || _state$customDrawer4 === void 0 ? void 0 : _state$customDrawer4.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,
+    appliedFilters: state === null || state === void 0 || (_state$customDrawer5 = state.customDrawer) === null || _state$customDrawer5 === void 0 ? void 0 : _state$customDrawer5.appliedFilters,
     filterConfig: customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.data,
     onRemoveFilter: onRemoveAppliedFilter,
     onClearAll: onClearAllAppliedFilters,
@@ -2587,7 +2803,7 @@ function GenricLayOut(_ref) {
           }
           // Call handleTabExtraActionChange
           if (handleTabExtraActionChange) {
-            var _tables$pagination17, _tables$pagination18, _tables$sorting31, _tables$sorting32, _tables$filter13, _staticFilter$data14, _state$misc35;
+            var _tables$pagination17, _tables$pagination18, _tables$sorting31, _tables$sorting32, _tables$filter13, _staticFilter$data14, _state$misc38;
             dispatch({
               type: _layoutReducer.actionTypes.SET_LOADING,
               payload: true
@@ -2606,7 +2822,7 @@ function GenricLayOut(_ref) {
               columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
             }), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data14 = staticFilter.data) === null || _staticFilter$data14 === void 0 || (_staticFilter$data14 = _staticFilter$data14.find(item => item.selected)) === null || _staticFilter$data14 === void 0 ? void 0 : _staticFilter$data14.value) && {
               staticFilter: staticFilter.data.find(item => item.selected).value
-            }), (_state$misc35 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc35 !== void 0 ? _state$misc35 : {}));
+            }), (_state$misc38 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc38 !== void 0 ? _state$misc38 : {}));
             if (error) {
               showErrorNotification(error);
               dispatch({
@@ -2653,6 +2869,24 @@ function GenricLayOut(_ref) {
         }
       })
     }) : null
+  }))), (tabTableInfoPanel === null || tabTableInfoPanel === void 0 ? void 0 : tabTableInfoPanel.visible) && (tabTableInfoPanel === null || tabTableInfoPanel === void 0 ? void 0 : tabTableInfoPanel.data) && /*#__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: tabTableInfoPanel === null || tabTableInfoPanel === void 0 || (_tabTableInfoPanel$da = tabTableInfoPanel.data) === null || _tabTableInfoPanel$da === void 0 ? void 0 : _tabTableInfoPanel$da.description,
+    color: tabTableInfoPanel === null || tabTableInfoPanel === void 0 || (_tabTableInfoPanel$da2 = tabTableInfoPanel.data) === null || _tabTableInfoPanel$da2 === void 0 ? void 0 : _tabTableInfoPanel$da2.color,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: (tabTableInfoPanel === null || tabTableInfoPanel === void 0 || (_tabTableInfoPanel$da3 = tabTableInfoPanel.data) === null || _tabTableInfoPanel$da3 === void 0 || (_tabTableInfoPanel$da3 = _tabTableInfoPanel$da3.iconConfig) === null || _tabTableInfoPanel$da3 === void 0 ? void 0 : _tabTableInfoPanel$da3.color) || "warning",
+        icon: tabTableInfoPanel === null || tabTableInfoPanel === void 0 || (_tabTableInfoPanel$da4 = tabTableInfoPanel.data) === null || _tabTableInfoPanel$da4 === void 0 || (_tabTableInfoPanel$da4 = _tabTableInfoPanel$da4.iconConfig) === null || _tabTableInfoPanel$da4 === void 0 ? void 0 : _tabTableInfoPanel$da4.icon
+      }),
+      position: (tabTableInfoPanel === null || tabTableInfoPanel === void 0 || (_tabTableInfoPanel$da5 = tabTableInfoPanel.data) === null || _tabTableInfoPanel$da5 === void 0 || (_tabTableInfoPanel$da5 = _tabTableInfoPanel$da5.iconConfig) === null || _tabTableInfoPanel$da5 === void 0 ? void 0 : _tabTableInfoPanel$da5.position) || "left"
+    }
   }))), (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,
@@ -2700,6 +2934,8 @@ function GenricLayOut(_ref) {
     generateS3Url: generateS3Url,
     downloadFileOnS3: downloadFileOnS3,
     uploadOnS3: uploadOnS3,
+    postUploadCall: postUploadCall,
+    onPostUploadSuccess: handlePostUploadSuccess,
     onSelectHandlers: updateStateData,
     handleCollapsibleKeyData: handleCollapsibleKeyData,
     misc: state === null || state === void 0 ? void 0 : state.misc
@@ -2717,6 +2953,8 @@ function GenricLayOut(_ref) {
     generateS3Url: generateS3Url,
     downloadFileOnS3: downloadFileOnS3,
     uploadOnS3: uploadOnS3,
+    postUploadCall: postUploadCall,
+    onPostUploadSuccess: handlePostUploadSuccess,
     handleCollapsibleKeyData: handleCollapsibleKeyData,
     misc: state === null || state === void 0 ? void 0 : state.misc
   }))), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
@@ -2733,6 +2971,8 @@ function GenricLayOut(_ref) {
     generateS3Url: generateS3Url,
     downloadFileOnS3: downloadFileOnS3,
     uploadOnS3: uploadOnS3,
+    postUploadCall: postUploadCall,
+    onPostUploadSuccess: handlePostUploadSuccess,
     handleCollapsibleKeyData: handleCollapsibleKeyData,
     handleDownloadTemplate: handleDownloadTemplate,
     misc: state === null || state === void 0 ? void 0 : state.misc

package/build/layout/GenricLayOut/reducer/layoutReducer.js

@@ -208,7 +208,7 @@ const genericLayoutReducer = exports.genericLayoutReducer = (0, _immer.produce)(
       }
     case actionTypes.SET_SUBHEADING_SELECTED_CONFIG:
       draft.header.subHeading.jsxConfig.value = action.payload;
-      draft.dropdownSearch.error = null;
+      if (draft.dropdownSearch) draft.dropdownSearch.error = null;
       break;
     case actionTypes.SET_STATIC_FILTER_SELECTION:
       if ((_draft$staticFilter = draft.staticFilter) !== null && _draft$staticFilter !== void 0 && _draft$staticFilter.data) {

package/build/layout/GenricLayOut/styles.js

@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout  .oaRightLayouts{\n    max-width: 1154px;\n    margin: 24px auto;\n    padding: 0 16px;\n    box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n    background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n     width: 100%; \n    height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n    color: #DE350B;\n    font-size: 12px;\n    margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    display: flex; z-index: 2;\n    align-items: center;\n    justify-content: end;\n    gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n    border: 1px solid #E0E0E0;\n    padding: 24px;\n    margin: 24px 0 0 0;}\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n    padding: 24px 0;\n    margin: 24px 0 0 0;}\n\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center;  margin: 0 0 16px 0; gap:4px;}\n\n/* Select List Item Styles */\n.select-list-container {\n  padding: 0;\n  margin: 16px 0 0 0;\n}\n\n.select-list-item {\n  display: flex;\n  align-items: center;\n  padding: 16px 0;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border-bottom: 1px solid #f0f0f0;\n  position: relative;\n}\n\n.select-list-item:hover {\n  background-color: #f8f9fa;\n}\n\n.select-list-item:last-child {\n  border-bottom: none;\n}\n\n.item-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background-color: #f0f0f0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  font-size: 28px;\n  font-weight: 500;\n  color: #333;\n  flex-shrink: 0;\n}\n\n/* Different avatar colors for different items */\n.select-list-item:nth-child(1) .item-avatar {\n  background-color: #717171;\n  color: #fff;\n}\n\n.select-list-item:nth-child(2) .item-avatar {\n  background-color: #014fc5;\n  color: #fff;\n}\n\n.item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.item-arrow {\n  flex-shrink: 0;\n  margin-left: 8px;\n  color: #014fc5;\n}\n"])));
 const FormWidgetStyle = exports.FormWidgetStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .formBottomAction {\n    position: absolute;\n    bottom: 0px;\n    background-color: rgb(249, 249, 249);\n    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8px;\n    padding: 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    z-index: 10;\n    left: 0;\n    right: 0;\n  }\n\n  .formBottomAction .ant-form-item {\n    margin-bottom: 0px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n"])));
 const TableDataStyle = exports.TableDataStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n"])));
-const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: flex-start; // Changed from 'center' to 'flex-start'\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: flex-start; // Changed from 'center' to 'flex-start'\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 ", " 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n    max-width: 83vw;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n\n  .customeSelectDropdown .ant-select-selection-item {\n    display: inline-block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n  }\n\n  .oaheaderButtons {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    margin-left: auto;\n    padding-left: 24px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .customeSelectDropdown {\n      margin: 4px 0 0 0;\n    }\n\n    .customeSelectDropdown .ant-select {\n      margin: 0 0 0 0;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n\n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])), _ref => {
+const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: flex-start; // Changed from 'center' to 'flex-start'\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: flex-start; // Changed from 'center' to 'flex-start'\n        justify-content: flex-end;\n      }\n\n      .headerTopActionButtons {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        margin-right: 16px;\n        margin-top: 8px;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 ", " 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n    max-width: 83vw;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n    max-width: 500px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n\n  .customeSelectDropdown .ant-select-selection-item {\n    display: inline-block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n  }\n\n  .oaheaderButtons {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    margin-left: auto;\n    padding-left: 24px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .customeSelectDropdown {\n      margin: 4px 0 0 0;\n    }\n\n    .customeSelectDropdown .ant-select {\n      margin: 0 0 0 0;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n\n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])), _ref => {
   let {
     marginBottom
   } = _ref;

package/build/widgets/oa-form-widget/FormWidget.js

@@ -13,6 +13,7 @@ require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
 var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
@@ -58,6 +59,7 @@ function FormWidget(props) {
     uploadOnS3,
     handleCollapsibleKeyData,
     handleDownloadTemplate,
+    postUploadCall,
     misc
   } = props;
   const {
@@ -283,18 +285,34 @@ function FormWidget(props) {
         className: (_item$className = item === null || item === void 0 ? void 0 : item.className) !== null && _item$className !== void 0 ? _item$className : ""
       })));
     }
-    const handleS3Response = (res, fieldName) => {
-      var _res$data;
-      const docId = res === null || res === void 0 || (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.uuid;
+    const handleS3Response = async (res, fieldName, item) => {
+      var _res$data$uuid, _res$data, _res$response;
+      const docId = (_res$data$uuid = res === null || res === void 0 || (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.uuid) !== null && _res$data$uuid !== void 0 ? _res$data$uuid : res === null || res === void 0 || (_res$response = res.response) === null || _res$response === void 0 || (_res$response = _res$response.data) === null || _res$response === void 0 ? void 0 : _res$response.uuid;
       if (docId != null) {
         form.setFieldsValue({
           [fieldName]: docId
         });
       }
+      if (item.postUploadCallApiRequired) {
+        const {
+          error,
+          data
+        } = await postUploadCall(item, docId);
+        if (!error && data) {
+          var _props$onPostUploadSu;
+          const fieldValues = await (props === null || props === void 0 || (_props$onPostUploadSu = props.onPostUploadSuccess) === null || _props$onPostUploadSu === void 0 ? void 0 : _props$onPostUploadSu.call(props, data));
+          if (fieldValues && typeof fieldValues === 'object' && Object.keys(fieldValues).length > 0) {
+            form.setFieldsValue(fieldValues);
+          }
+        }
+      }
     };
     if (item.widget === "upload") {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: dynamicClassInCaseOfUpload(item)
+        className: dynamicClassInCaseOfUpload(item),
+        style: item !== null && item !== void 0 && item.remarks ? {
+          marginBottom: '12px'
+        } : {}
       }, " ", /*#__PURE__*/_react.default.createElement(_CustomUpload.default, _extends({
         label: (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
           color: "primary-content",
@@ -310,8 +328,13 @@ function FormWidget(props) {
         maxAllowedSize: item === null || item === void 0 ? void 0 : item.maxAllowedSize,
         downloadCallback: downloadFileOnS3,
         beforeUploadFileValidations: item === null || item === void 0 ? void 0 : item.beforeUploadFileValidations,
-        s3ResponseReturn: res => handleS3Response(res, item.name)
-      }, item === null || item === void 0 ? void 0 : item.uploadProps))));
+        s3ResponseReturn: res => handleS3Response(res, item.name, item)
+      }, item === null || item === void 0 ? void 0 : item.uploadProps))), /*#__PURE__*/_react.default.createElement("div", {
+        className: "margin-bottom-16"
+      }, (item === null || item === void 0 ? void 0 : item.remarks) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: "type-b2-400",
+        color: "secondary-content"
+      }, item.remarks)));
     }
   };
   const renderWidget = item => {

package/build/widgets/oa-widget-map-base-location/AddressForm.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
 var _react = _interopRequireDefault(require("react"));
 var _antd = require("antd");
 var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
@@ -55,6 +59,18 @@ function AddressForm(props) {
     rules: [{
       required: true,
       message: "Please input your House no. / Flat / Floor!"
+    }, {
+      validator: (_, value) => {
+        if (!value) return Promise.resolve();
+        const trimmed = value.trim();
+        if (trimmed.length < 2) {
+          return Promise.reject(new Error('Please enter at least 2 characters.'));
+        }
+        if (!/[a-zA-Z0-9]/.test(trimmed)) {
+          return Promise.reject(new Error('Please enter a valid House no. / Flat / Floor!'));
+        }
+        return Promise.resolve();
+      }
     }]
   }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
     placeholder: "Type here",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.387",
+  "version": "0.18.389",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",