oa-componentbook 0.18.368 → 0.18.370

package/build/components/oa-component-modal/CustomModal.js

@@ -14,53 +14,56 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _typographyOptions = require("../../global-css/typography-options");
 var _utils = require("../../utils");
 var _styles = require("./styles");
-const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
+const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width", "bgColor", "showCloseIcon"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
 /**
-   * This is a custom Modal component that extends the default antd Modal
-   * component.
-   *
-   * The open state of the modal is controlled by the parent component.
-   *
-   * The parent can also provide a callback function to be called when the
-   * cancel button is clicked.
-   *
-   * The width of the modal can be customized by providing a width prop.
-   *
-   * The buttons for the modal can be customized by providing a buttonConfig
-   * prop.
-   *
-   * The title of the modal can be provided as a string or as an image.
-   *
-   * The children of the modal can be provided as a string or a number, or as
-   * JSX elements.
-   *
-   * The typography of the title and description can be customized by providing
-   * a typographies object.
-   *
-   * The modal is centered by default.
-   *
-   * The modal is rendered with a gray background.
-   *
-   * The modal is rendered with a close button.
-   *
-   * The parent can provide additional props to the Modal component.
-   */
+ * This is a custom Modal component that extends the default antd Modal
+ * component.
+ *
+ * The open state of the modal is controlled by the parent component.
+ *
+ * The parent can also provide a callback function to be called when the
+ * cancel button is clicked.
+ *
+ * The width of the modal can be customized by providing a width prop.
+ *
+ * The buttons for the modal can be customized by providing a buttonConfig
+ * prop.
+ *
+ * The title of the modal can be provided as a string or as an image.
+ *
+ * The children of the modal can be provided as a string or a number, or as
+ * JSX elements.
+ *
+ * The typography of the title and description can be customized by providing
+ * a typographies object.
+ *
+ * The modal is centered by default.
+ *
+ * The modal is rendered with a gray background.
+ *
+ * The modal is rendered with a close button.
+ *
+ * The parent can provide additional props to the Modal component.
+ */
 function CustomModal(_ref) {
   let {
       buttonConfig,
       children,
-      'data-test': dataTest,
+      "data-test": dataTest,
       imgSrc,
       // This callback function provided by parent is called upon clicking on the cancel button
       onCancel,
       open,
       title,
       typographies,
-      width
+      width,
+      bgColor,
+      showCloseIcon = true // Add this prop with default value
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   /*
@@ -75,15 +78,15 @@ function CustomModal(_ref) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBgMask: 'rgba(0, 0, 0, 0.7)'
+        colorBgMask: bgColor || "rgba(0, 0, 0, 0.7)"
       }
     }
   }, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
-    closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+    closeIcon: showCloseIcon ? /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
       style: {
-        fontSize: '26px'
+        fontSize: "26px"
       }
-    }),
+    }) : false,
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
@@ -94,7 +97,7 @@ function CustomModal(_ref) {
       onClick: button.callback,
       size: "large",
       type: button === null || button === void 0 ? void 0 : button.type,
-      "data-test": button['data-test']
+      "data-test": button["data-test"]
     })))),
     onCancel: handleCancel,
     open: open,
@@ -116,17 +119,17 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
-    'data-test': _propTypes.default.string,
+    "data-test": _propTypes.default.string,
     label: _propTypes.default.string,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
-      position: _propTypes.default.oneOf(['left', 'right']),
+      position: _propTypes.default.oneOf(["left", "right"]),
       style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
     }),
-    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+    type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
   })),
   children: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   title: _propTypes.default.string,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
@@ -135,19 +138,21 @@ CustomModal.propTypes = {
   imgSrc: _propTypes.default.string,
   onCancel: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
-  width: _propTypes.default.string || _propTypes.default.number
+  width: _propTypes.default.string || _propTypes.default.number,
+  showCloseIcon: _propTypes.default.bool
 };
 CustomModal.defaultProps = {
   buttonConfig: [],
   children: null,
-  'data-test': null,
+  "data-test": null,
   imgSrc: null,
   open: true,
   title: null,
   typographies: {
-    title: 'type-t1-500',
-    children: 'type-b2-400'
+    title: "type-t1-500",
+    children: "type-b2-400"
   },
-  width: 416
+  width: 416,
+  showCloseIcon: true
 };
 var _default = exports.default = CustomModal;

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -1,6 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +8,7 @@ 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");
@@ -38,6 +38,7 @@ 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 }; }
@@ -52,7 +53,7 @@ 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$misc22, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _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;
+  var _state$misc22, _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,
@@ -105,7 +106,8 @@ function GenricLayOut(_ref) {
     imageViewer,
     customDrawer,
     staticFilter,
-    profileData
+    profileData,
+    infoPanel
   } = state !== null && state !== void 0 ? state : {};
   (0, _react.useEffect)(() => {
     init();
@@ -147,12 +149,12 @@ function GenricLayOut(_ref) {
       payload: true
     });
     if (getInitialData) {
-      var _state$tabs, _state$misc;
+      var _config$tabs, _state$misc;
       const {
         error,
         data
-      } = await (getInitialData === null || getInitialData === void 0 ? void 0 : getInitialData(_objectSpread(_objectSpread({}, state !== null && state !== void 0 && (_state$tabs = state.tabs) !== null && _state$tabs !== void 0 && _state$tabs.active ? {
-        selectedTab: state.tabs.active
+      } = 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
       } : {}), (_state$misc = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc !== void 0 ? _state$misc : {})));
       if (error) {
         showErrorNotification(error);
@@ -248,7 +250,7 @@ function GenricLayOut(_ref) {
     });
     if (value === "") {
       if (handleInputSearchChange) {
-        var _state$inputSearch, _state$tabs2, _customDrawer$applied, _config$tables, _config$tables2, _tables$sorting, _tables$sorting2, _header$subHeading, _header$subHeading2;
+        var _state$inputSearch, _state$tabs, _customDrawer$applied, _config$tables, _config$tables2, _tables$sorting, _tables$sorting2, _header$subHeading, _header$subHeading2;
         dispatch({
           type: _layoutReducer.actionTypes.SET_LOADING,
           payload: true
@@ -256,7 +258,7 @@ function GenricLayOut(_ref) {
         const {
           error,
           data
-        } = await handleInputSearchChange(_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$tabs2 = state.tabs) !== null && _state$tabs2 !== void 0 && _state$tabs2.active ? {
+        } = await handleInputSearchChange(_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,
@@ -326,11 +328,11 @@ function GenricLayOut(_ref) {
       payload: trimedValue
     });
     if (handleInputSearchEnter) {
-      var _state$tabs3, _config$tables5, _config$tables6, _tables$sorting3, _tables$sorting4, _customDrawer$applied2, _header$subHeading3, _header$subHeading4;
+      var _state$tabs2, _config$tables5, _config$tables6, _tables$sorting3, _tables$sorting4, _customDrawer$applied2, _header$subHeading3, _header$subHeading4;
       const {
         error,
         data
-      } = await handleInputSearchEnter(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, state !== null && state !== void 0 && (_state$tabs3 = state.tabs) !== null && _state$tabs3 !== void 0 && _state$tabs3.active ? {
+      } = await handleInputSearchEnter(_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,
@@ -393,7 +395,7 @@ function GenricLayOut(_ref) {
     });
     if (value === "") {
       if (handleDropdownSearchInputChange) {
-        var _state$tabs4, _config$tables9, _config$tables10, _tables$sorting5, _tables$sorting6, _tables$filter, _staticFilter$data, _customDrawer$applied3, _header$subHeading5, _header$subHeading6, _state$misc2;
+        var _state$tabs3, _config$tables9, _config$tables10, _tables$sorting5, _tables$sorting6, _tables$filter, _staticFilter$data, _customDrawer$applied3, _header$subHeading5, _header$subHeading6, _state$misc2;
         dispatch({
           type: _layoutReducer.actionTypes.SET_LOADING,
           payload: true
@@ -402,7 +404,7 @@ function GenricLayOut(_ref) {
           error,
           data
         } = await handleDropdownSearchInputChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          selectedTab: state === null || state === void 0 || (_state$tabs4 = state.tabs) === null || _state$tabs4 === void 0 ? void 0 : _state$tabs4.active,
+          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,
@@ -483,13 +485,13 @@ function GenricLayOut(_ref) {
       payload: value
     });
     if (handleDropdownSearchEnter) {
-      var _state$tabs5, _config$tables13, _config$tables14, _tables$sorting7, _tables$sorting8, _tables$filter2, _staticFilter$data2, _customDrawer$applied4, _header$subHeading7, _header$subHeading8, _state$misc3;
+      var _state$tabs4, _config$tables13, _config$tables14, _tables$sorting7, _tables$sorting8, _tables$filter2, _staticFilter$data2, _customDrawer$applied4, _header$subHeading7, _header$subHeading8, _state$misc3;
       const {
         error,
         data
       } = await handleDropdownSearchEnter(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         searchedValue: value,
-        selectedTab: state === null || state === void 0 || (_state$tabs5 = state.tabs) === null || _state$tabs5 === void 0 ? void 0 : _state$tabs5.active,
+        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,
@@ -661,12 +663,12 @@ function GenricLayOut(_ref) {
       payload: null
     });
     if (handleDropdownSearchClear) {
-      var _state$tabs6, _config$tables21, _config$tables22, _tables$sorting9, _tables$sorting10, _tables$filter3, _staticFilter$data4, _customDrawer$applied6, _header$subHeading11, _header$subHeading12, _state$misc5;
+      var _state$tabs5, _config$tables21, _config$tables22, _tables$sorting9, _tables$sorting10, _tables$filter3, _staticFilter$data4, _customDrawer$applied6, _header$subHeading11, _header$subHeading12, _state$misc5;
       const {
         error,
         data
       } = await handleDropdownSearchClear(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-        selectedTab: state === null || state === void 0 || (_state$tabs6 = state.tabs) === null || _state$tabs6 === void 0 ? void 0 : _state$tabs6.active,
+        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,
@@ -723,11 +725,11 @@ function GenricLayOut(_ref) {
       payload: null
     });
     if (handleInputSearchClear) {
-      var _state$tabs7, _config$tables25, _config$tables26, _tables$sorting11, _tables$sorting12, _customDrawer$applied7, _header$subHeading13, _header$subHeading14, _state$misc6;
+      var _state$tabs6, _config$tables25, _config$tables26, _tables$sorting11, _tables$sorting12, _customDrawer$applied7, _header$subHeading13, _header$subHeading14, _state$misc6;
       const {
         error,
         data
-      } = await handleInputSearchClear(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, state !== null && state !== void 0 && (_state$tabs7 = state.tabs) !== null && _state$tabs7 !== void 0 && _state$tabs7.active ? {
+      } = 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,
@@ -813,8 +815,8 @@ function GenricLayOut(_ref) {
               type: _layoutReducer.actionTypes.NESTED_DRAWER_OPEN
             });
           } else {
-            var _config$drawer, _state$tabs$active, _state$tabs8;
-            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$tabs8 = state.tabs) === null || _state$tabs8 === void 0 ? void 0 : _state$tabs8.active) !== null && _state$tabs$active !== void 0 ? _state$tabs$active : "default"]) === null || _config$drawer === void 0 ? void 0 : _config$drawer[selectkey]);
+            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,
@@ -1080,7 +1082,7 @@ function GenricLayOut(_ref) {
       }
     });
     if (handleTableChange) {
-      var _state$dropdownSearch3, _state$inputSearch4, _state$tabs9, _header$subHeading15, _header$subHeading16, _staticFilter$data5, _customDrawer$applied8, _state$misc8;
+      var _state$dropdownSearch3, _state$inputSearch4, _state$tabs8, _header$subHeading15, _header$subHeading16, _staticFilter$data5, _customDrawer$applied8, _state$misc8;
       dispatch({
         type: _layoutReducer.actionTypes.SET_LOADING,
         payload: true
@@ -1094,7 +1096,7 @@ function GenricLayOut(_ref) {
       }), (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$tabs9 = state.tabs) === null || _state$tabs9 === void 0 ? void 0 : _state$tabs9.active,
+        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,
@@ -1142,9 +1144,9 @@ function GenricLayOut(_ref) {
       }
     });
     if (tables !== null && tables !== void 0 && tables.selectionType) {
-      var _state$tabs10;
+      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$tabs10 = state.tabs) === null || _state$tabs10 === void 0 ? void 0 : _state$tabs10.activeKey) !== selectionKey) {
+      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
@@ -1295,8 +1297,8 @@ function GenricLayOut(_ref) {
    */
 
   const drawerFormOnFinish = async formData => {
-    var _state$drawer, _state$tabs$active2, _state$tabs11, _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$tabs11 = state.tabs) === null || _state$tabs11 === void 0 ? void 0 : _state$tabs11.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);
+    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;
@@ -1330,7 +1332,7 @@ function GenricLayOut(_ref) {
 
     // If there are remaining filters, reapply them
     if (Object.keys(currentFilters).length > 0) {
-      var _state$dropdownSearch5, _state$inputSearch5, _state$tabs12, _tables$pagination3, _tables$pagination4, _tables$filter6, _tables$sorting15, _header$subHeading19, _header$subHeading20, _staticFilter$data6, _tables$sorting16, _state$misc12;
+      var _state$dropdownSearch5, _state$inputSearch5, _state$tabs11, _tables$pagination3, _tables$pagination4, _tables$filter6, _tables$sorting15, _header$subHeading19, _header$subHeading20, _staticFilter$data6, _tables$sorting16, _state$misc12;
       const {
         error,
         data
@@ -1343,7 +1345,7 @@ function GenricLayOut(_ref) {
         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$tabs12 = state.tabs) === null || _state$tabs12 === void 0 ? void 0 : _state$tabs12.active,
+        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) && {
@@ -1388,7 +1390,7 @@ function GenricLayOut(_ref) {
   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$tabs13, _tables$pagination5, _tables$pagination6, _tables$filter7, _tables$sorting17, _header$subHeading21, _header$subHeading22, _staticFilter$data7, _tables$sorting18, _state$misc13;
+      var _state$dropdownSearch6, _state$inputSearch6, _state$tabs12, _tables$pagination5, _tables$pagination6, _tables$filter7, _tables$sorting17, _header$subHeading21, _header$subHeading22, _staticFilter$data7, _tables$sorting18, _state$misc13;
       if (isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)) {
         dispatch({
           type: _layoutReducer.actionTypes.CUSTOM_DRAWER_CLOSED
@@ -1404,7 +1406,7 @@ function GenricLayOut(_ref) {
       }), (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$tabs13 = state.tabs) === null || _state$tabs13 === void 0 ? void 0 : _state$tabs13.active,
+        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) && {
@@ -1465,7 +1467,7 @@ function GenricLayOut(_ref) {
 
     // 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$tabs14, _config$tables29, _config$tables30, _tables$filter8, _tables$sorting19, _header$subHeading23, _header$subHeading24, _staticFilter$data8, _tables$sorting20, _state$misc14;
+      var _state$dropdownSearch7, _state$inputSearch7, _ref4, _appliedFilters$filte, _state$tabs13, _config$tables29, _config$tables30, _tables$filter8, _tables$sorting19, _header$subHeading23, _header$subHeading24, _staticFilter$data8, _tables$sorting20, _state$misc14;
       const appliedFilters = {};
       Object.keys(formData).forEach(key => {
         const value = formData[key];
@@ -1491,7 +1493,7 @@ function GenricLayOut(_ref) {
         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$tabs14 = state.tabs) === null || _state$tabs14 === void 0 ? void 0 : _state$tabs14.active,
+        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) && {
@@ -1557,7 +1559,7 @@ function GenricLayOut(_ref) {
         }
       });
       if (handleSecondaryTableCTAClick) {
-        var _state$dropdownSearch8, _state$inputSearch8, _state$tabs15, _tables$pagination7, _tables$pagination8, _tables$filter9, _tables$sorting21, _tables$sorting22, _header$subHeading25, _header$subHeading26, _staticFilter$data9, _state$misc15;
+        var _state$dropdownSearch8, _state$inputSearch8, _state$tabs14, _tables$pagination7, _tables$pagination8, _tables$filter9, _tables$sorting21, _tables$sorting22, _header$subHeading25, _header$subHeading26, _staticFilter$data9, _state$misc15;
         const {
           error,
           data
@@ -1567,7 +1569,7 @@ function GenricLayOut(_ref) {
         }), (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$tabs15 = state.tabs) === null || _state$tabs15 === void 0 ? void 0 : _state$tabs15.active,
+          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,
@@ -1596,7 +1598,7 @@ function GenricLayOut(_ref) {
     }
   };
   const onClearAllAppliedFilters = async () => {
-    var _state$dropdownSearch9, _state$inputSearch9, _state$tabs16, _tables$pagination9, _tables$pagination10, _tables$filter10, _tables$sorting23, _header$subHeading27, _header$subHeading28, _staticFilter$data10, _tables$sorting24, _state$misc16;
+    var _state$dropdownSearch9, _state$inputSearch9, _state$tabs15, _tables$pagination9, _tables$pagination10, _tables$filter10, _tables$sorting23, _header$subHeading27, _header$subHeading28, _staticFilter$data10, _tables$sorting24, _state$misc16;
     const {
       error,
       data
@@ -1606,7 +1608,7 @@ function GenricLayOut(_ref) {
     }), (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$tabs16 = state.tabs) === null || _state$tabs16 === void 0 ? void 0 : _state$tabs16.active,
+      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) && {
@@ -1800,7 +1802,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$tabs17, _tables$pagination11, _tables$pagination12, _tables$filter11, _tables$sorting25, _header$subHeading29, _header$subHeading30, _staticFilter$data11, _tables$sorting26, _state$misc18;
+      var _state$dropdownSearch10, _state$inputSearch10, _state$tabs16, _tables$pagination11, _tables$pagination12, _tables$filter11, _tables$sorting25, _header$subHeading29, _header$subHeading30, _staticFilter$data11, _tables$sorting26, _state$misc18;
       const {
         error,
         data
@@ -1810,7 +1812,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$tabs17 = state.tabs) === null || _state$tabs17 === void 0 ? void 0 : _state$tabs17.active,
+        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) && {
@@ -1874,7 +1876,7 @@ function GenricLayOut(_ref) {
   };
   const handleSubHeadingSelect = async val => {
     if (val) {
-      var _state$tabs18, _tables$pagination13, _tables$pagination14, _state$misc19;
+      var _state$tabs17, _tables$pagination13, _tables$pagination14, _state$misc19;
       dispatch({
         type: _layoutReducer.actionTypes.SET_SUBHEADING_SELECTED_CONFIG,
         payload: val
@@ -1883,7 +1885,7 @@ function GenricLayOut(_ref) {
         error,
         data
       } = await handleSubHeadingSelectClick(_objectSpread({
-        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$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,
@@ -1915,7 +1917,7 @@ function GenricLayOut(_ref) {
 
     // Call the handler if provided
     if (handleTableChange) {
-      var _state$dropdownSearch11, _state$inputSearch11, _state$tabs19, _tables$pagination15, _tables$sorting27, _tables$sorting28, _header$subHeading31, _header$subHeading32, _customDrawer$applied10, _state$misc20;
+      var _state$dropdownSearch11, _state$inputSearch11, _state$tabs18, _tables$pagination15, _tables$sorting27, _tables$sorting28, _header$subHeading31, _header$subHeading32, _customDrawer$applied10, _state$misc20;
       dispatch({
         type: _layoutReducer.actionTypes.SET_LOADING,
         payload: true
@@ -1929,7 +1931,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$tabs19 = state.tabs) === null || _state$tabs19 === void 0 ? void 0 : _state$tabs19.active,
+        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,
@@ -1980,7 +1982,7 @@ function GenricLayOut(_ref) {
       }
     });
     if (handleTableChange) {
-      var _state$dropdownSearch12, _state$inputSearch12, _state$tabs20, _tables$filter12, _tables$sorting29, _tables$sorting30, _header$subHeading33, _header$subHeading34, _staticFilter$data12, _customDrawer$applied11, _state$misc21;
+      var _state$dropdownSearch12, _state$inputSearch12, _state$tabs19, _tables$filter12, _tables$sorting29, _tables$sorting30, _header$subHeading33, _header$subHeading34, _staticFilter$data12, _customDrawer$applied11, _state$misc21;
       const {
         error,
         data
@@ -1990,7 +1992,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$tabs20 = state.tabs) === null || _state$tabs20 === void 0 ? void 0 : _state$tabs20.active,
+        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,
@@ -2028,6 +2030,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$misc22 = state.misc) === null || _state$misc22 === void 0 ? void 0 : _state$misc22.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
   }, /*#__PURE__*/_react.default.createElement(_styles.DrawerWithOutFooter, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "fullPageLayout"
@@ -2057,7 +2060,7 @@ function GenricLayOut(_ref) {
   }))), /*#__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' : ''
+    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: () => {
@@ -2152,6 +2155,24 @@ function GenricLayOut(_ref) {
     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,

package/build/layout/GenricLayOut/components/AppliedFilters.js

@@ -32,10 +32,17 @@ const AppliedFilters = _ref => {
     switch (key) {
       case "filterBy":
         {
-          var _filterDrawerData$dat, _filterByField$value, _matchedOption$label;
-          const filterByField = filterDrawerData === null || filterDrawerData === void 0 || (_filterDrawerData$dat = filterDrawerData.data) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.filterData) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.groups) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.flatMap(group => group.items || [])) === null || _filterDrawerData$dat === void 0 ? void 0 : _filterDrawerData$dat.find(item => item.name === "filterBy");
-          const matchedOption = filterByField === null || filterByField === void 0 || (_filterByField$value = filterByField.value) === null || _filterByField$value === void 0 ? void 0 : _filterByField$value.find(opt => opt.value === value);
-          return (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value;
+          var _filterDrawerData$dat;
+          // Access the filterBy field configuration from the correct path
+          // The filterDrawerData structure should be: filterDrawerData.data.filterData.groups
+          const filterByField = filterDrawerData === null || filterDrawerData === void 0 || (_filterDrawerData$dat = filterDrawerData.data) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.groups) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.flatMap(group => group.items || [])) === null || _filterDrawerData$dat === void 0 ? void 0 : _filterDrawerData$dat.find(item => item.name === "filterBy");
+          if (filterByField !== null && filterByField !== void 0 && filterByField.value) {
+            var _matchedOption$label;
+            const matchedOption = filterByField.value.find(opt => opt.value === value);
+            console.log("matchedOption:", matchedOption);
+            return (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value;
+          }
+          return value;
         }
       case "fromDate":
         return (0, _dayjs.default)(value).format("DD MMM YYYY");

package/build/layout/GenricLayOut/components/Modal.js

@@ -14,6 +14,7 @@ var _HubAutomationModal = _interopRequireDefault(require("../../../widgets/oa-wi
 var _GuideWidget = _interopRequireDefault(require("../../../widgets/oa-widget-guide/GuideWidget"));
 var _MaterialIcon = _interopRequireDefault(require("../../../components/oa-component-icons/MaterialIcon"));
 var _HubAutomationDeleteBiker = _interopRequireDefault(require("../../../widgets/oa-widget-hub-automation-modal/HubAutomationDeleteBiker"));
+var _SelectListItemModal = _interopRequireDefault(require("../../../widgets/oa-widget-select-list-item-modal/SelectListItemModal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -42,6 +43,11 @@ function LayoutModal(_ref) {
       });
     } else if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "hubAutomationDeleteBiker") {
       return /*#__PURE__*/_react.default.createElement(_HubAutomationDeleteBiker.default, modal);
+    } else if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "selectListItem") {
+      return /*#__PURE__*/_react.default.createElement(_SelectListItemModal.default, {
+        modalContent: modal === null || modal === void 0 ? void 0 : modal.modalContent,
+        onItemSelect: item => onFooterAction("select", item)
+      });
     } else {
       var _modal$modalContent2, _modal$modalContent3, _modal$modalContent4, _modal$modalContent5, _modal$modalContent6, _modal$modalContent7, _modal$modalContent8, _modal$modalContent9, _modal$modalContent10, _modal$modalContent11, _modal$modalContent12, _modal$modalContent13;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (modal === null || modal === void 0 || (_modal$modalContent2 = modal.modalContent) === null || _modal$modalContent2 === void 0 ? void 0 : _modal$modalContent2.header) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -69,12 +75,14 @@ function LayoutModal(_ref) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
-    width: 428,
+    width: (modal === null || modal === void 0 ? void 0 : modal.customWidth) || 428,
     onCancel: onCancel,
     destroyOnClose: true,
     title: modal === null || modal === void 0 ? void 0 : modal.heading,
     imgSrc: modal === null || modal === void 0 ? void 0 : modal.imgSrc,
-    buttonConfig: getModalButtonConfig(modal === null || modal === void 0 || (_modal$jsxConfig = modal.jsxConfig) === null || _modal$jsxConfig === void 0 ? void 0 : _modal$jsxConfig.buttonConfig)
+    buttonConfig: getModalButtonConfig(modal === null || modal === void 0 || (_modal$jsxConfig = modal.jsxConfig) === null || _modal$jsxConfig === void 0 ? void 0 : _modal$jsxConfig.buttonConfig),
+    bgColor: modal === null || modal === void 0 ? void 0 : modal.bgColor,
+    showCloseIcon: modal === null || modal === void 0 ? void 0 : modal.showCloseIcon
   }, render());
 }
 LayoutModal.propTypes = {

package/build/layout/GenricLayOut/styles.js

@@ -13,10 +13,15 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-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"])));
+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: 40px;\n  height: 40px;\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: 20px;\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: center;\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: center;\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 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  }\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  .oaheaderButtons {\n    display: flex;\n    gap: 24px;\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: 16px;\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    .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"])));
+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: 24px;\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: 16px;\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;
+  return marginBottom || "0";
+});
 const ListofDamageParts = exports.ListofDamageParts = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ul.damagedParts {\n    display: flex;\n    flex-direction: column;\n    margin: 8px 0 0 16px;\n    list-style-type: disc;\n  }\n  ul.damagedParts li {\n    padding: 4px 0;\n    width: 100%;\n  }\n  ul.damagedParts li::marker {\n    color: #717171;\n    font-size: 20px;\n  }\n"])));
 const IncidentListParts = exports.IncidentListParts = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .qaSec dl {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n  }\n  .qaSec dl dt {\n    display: flex;\n    flex-direction: column;\n    margin: 16px 0 0 0;\n  }\n  .qaSec dl dt:first-child {\n    margin-top: 8px;\n  }\n"])));
 const ProfileSectionContainer = exports.ProfileSectionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-left: auto;\n\n  .profile-icon-container {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])));

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

@@ -34,7 +34,6 @@ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
 var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
-var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
 var _CollapsibleKeyValueWidget = _interopRequireDefault(require("../oa-widget-collapsible-key-value/CollapsibleKeyValueWidget"));
 var _UserManagementWidget = _interopRequireDefault(require("../oa-widget-user-management/UserManagementWidget"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -133,8 +132,8 @@ function FormWidget(props) {
       placement: "top"
     }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
-      size: 20,
-      icon: _InfoRounded.default
+      size: 16,
+      icon: _InfoOutlined.default
     })));
   };
   const renderFieldWidget = (item, index, itemData) => {
@@ -211,14 +210,45 @@ function FormWidget(props) {
       return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
         name: item === null || item === void 0 ? void 0 : item.name,
         initialValue: item === null || item === void 0 ? void 0 : item.defaultValue,
-        label: item === null || item === void 0 ? void 0 : item.label,
+        label: renderLabelWithTooltip(item === null || item === void 0 ? void 0 : item.label, item === null || item === void 0 ? void 0 : item.tooltip),
         rules: item === null || item === void 0 ? void 0 : item.rules
       }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
-        defaultValue: item.defaultValue
-      }, item === null || item === void 0 ? void 0 : item.value.map(v => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
-        value: v.value,
-        label: v.label
-      }))));
+        defaultValue: item.defaultValue,
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '24px'
+        }
+      }, item === null || item === void 0 ? void 0 : item.value.map((v, index) => {
+        // Check if this radio option has info/tooltip
+        const hasInfo = v.info || v.tooltip;
+        const radioLabel = hasInfo ? /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          }
+        }, /*#__PURE__*/_react.default.createElement("span", null, v.label), v.info && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+          title: v.info.tooltip || v.info.tooltipTitle || v.info.infoData,
+          placement: "top"
+        }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: v.info.color || "primary-content",
+          size: v.info.size || 16,
+          icon: _InfoOutlined.default
+        })), v.tooltip && !v.info && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+          title: v.tooltip,
+          placement: "top"
+        }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: "primary-content",
+          size: 16,
+          icon: _InfoOutlined.default
+        }))) : v.label;
+        return /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+          key: index,
+          value: v.value,
+          label: radioLabel
+        });
+      })));
     }
     if ((item === null || item === void 0 ? void 0 : item.widget) === "input") {
       var _item$value;
@@ -345,9 +375,10 @@ function FormWidget(props) {
             title: item.info.tooltipTitle,
             placement: "top"
           }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-            color: item.info.color || "secondary",
+            color: item.info.color || "primary-content",
             size: item.info.size || 16,
-            icon: _InfoOutlined.default
+            icon: _InfoOutlined.default,
+            className: "margin-left-4"
           }))
         } : undefined;
         return /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
@@ -443,7 +474,8 @@ function FormWidget(props) {
     title: headingInfo,
     placement: "top"
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    icon: _InfoOutlined.default
+    icon: _InfoOutlined.default,
+    size: 16
   })));
   return /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FormWidgetStyleStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Form, {
     form: form,

package/build/widgets/oa-widget-collapsible-key-value/CollapsibleKeyValueWidget.js

@@ -292,8 +292,9 @@ function CollapsibleKeyValueWidget(_ref) {
         infoData: /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
           title: item === null || item === void 0 || (_item$info2 = item.info) === null || _item$info2 === void 0 ? void 0 : _item$info2.tooltipTitle
         }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-          color: "secondary",
-          icon: _InfoOutlined.default
+          color: "primary-content",
+          icon: _InfoOutlined.default,
+          size: 16
         }))
       },
       tagStatus: {

package/build/widgets/oa-widget-collapsible-key-value/styles.js

@@ -8,9 +8,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 CollapsibleKeyValueContainer = exports.CollapsibleKeyValueContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  .type-t2-700 {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  .type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  .margin-bottom-16 {\n    margin-bottom: 16px;\n  }\n"])));
-const CollapsibleItem = exports.CollapsibleItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n.totalOrderSecBox {    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 0 0 0;\n    border-top: 1px solid #E0E0E0;\n  \n}\n.gstAndCost {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\n"])));
-const CollapsibleHeader = exports.CollapsibleHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  \n.keyValueSecWithBtn {\n  display: flex; flex-direction: column; padding: 16px; border-radius: 4px;\n  border: 1px solid  #E0E0E0; gap:16px; margin-bottom: 16px;\n  }\n\n\n.keyValueSecWithBtn .valuestyle span  { width:auto;}\n\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: stretch;\n    \n    .key-value-section {\n      margin-right: 0;\n      margin-bottom: 12px;\n    }\n  }\n"])));
-const OrderTotalSec = exports.OrderTotalSec = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  \n\n\n\n"])));
-const CollapsibleContent = exports.CollapsibleContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  animation: slideDown 0.3s ease-out;\n  \n  .details-section {\n    color: var(--color-secondary-content);\n  }\n  \n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      max-height: 0;\n    }\n    to {\n      opacity: 1;\n      max-height: 500px;\n    }\n  }\n"])));
-const ExpandButton = exports.ExpandButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n"])));
+const CollapsibleKeyValueContainer = exports.CollapsibleKeyValueContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n\n  .type-t2-700 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n\n  .type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n\n  .margin-bottom-16 {\n    margin-bottom: 16px;\n  }\n"])));
+const CollapsibleItem = exports.CollapsibleItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .totalOrderSecBox {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 0 0 0;\n    border-top: 1px solid #e0e0e0;\n  }\n  .gstAndCost {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n"])));
+const CollapsibleHeader = exports.CollapsibleHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .keyValueSecWithBtn {\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n    border-radius: 4px;\n    border: 1px solid #e0e0e0;\n    gap: 16px;\n    margin-bottom: 16px;\n  }\n\n  .keyValueSecWithBtn .valuestyle span {\n    width: auto;\n  }\n\n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: stretch;\n\n    .key-value-section {\n      margin-right: 0;\n      margin-bottom: 12px;\n    }\n  }\n"])));
+const OrderTotalSec = exports.OrderTotalSec = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+const CollapsibleContent = exports.CollapsibleContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  animation: slideDown 0.3s ease-out;\n\n  .details-section {\n    color: var(--color-secondary-content);\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      max-height: 0;\n    }\n    to {\n      opacity: 1;\n      max-height: 500px;\n    }\n  }\n"])));
+const ExpandButton = exports.ExpandButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -106,7 +106,7 @@ function NotesWidget(_ref) {
     borderRadius: tableBorder ? "4px" : "0"
     // visibility: (!(records.length > 0) && disabled) ? 'hidden' : undefined,
   };
-  return /*#__PURE__*/_react.default.createElement(NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_styles.NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     style: tableStyle,
     columns: columns,
     dataSource: mutatedRecords,

package/build/widgets/oa-widget-select-list-item-modal/SelectListItemModal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+const SelectListItemModal = _ref => {
+  var _modalContent$header, _modalContent$header2, _modalContent$subHead, _modalContent$subHead2, _modalContent$listIte;
+  let {
+    modalContent,
+    onItemSelect
+  } = _ref;
+  const avatarColors = (modalContent === null || modalContent === void 0 ? void 0 : modalContent.avatarColors) || [];
+  const handleItemSelect = item => {
+    // localStorage.setItem('selectedListItem', JSON.stringify(item));
+    if (onItemSelect) {
+      onItemSelect(item);
+    }
+  };
+  const getAvatarStyle = index => {
+    if (avatarColors.length === 0) {
+      // Default colors if no colors provided
+      return {
+        backgroundColor: '#f0f0f0',
+        color: '#333'
+      };
+    }
+
+    // Use modulo to cycle through colors
+    const colorIndex = index % avatarColors.length;
+    return avatarColors[colorIndex];
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (modalContent === null || modalContent === void 0 ? void 0 : modalContent.header) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: modalContent === null || modalContent === void 0 || (_modalContent$header = modalContent.header) === null || _modalContent$header === void 0 ? void 0 : _modalContent$header.type,
+    color: "primary-content"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$header2 = modalContent.header) === null || _modalContent$header2 === void 0 ? void 0 : _modalContent$header2.text), (modalContent === null || modalContent === void 0 ? void 0 : modalContent.subHeading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: modalContent === null || modalContent === void 0 || (_modalContent$subHead = modalContent.subHeading) === null || _modalContent$subHead === void 0 ? void 0 : _modalContent$subHead.type,
+    color: "secondary-content"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$subHead2 = modalContent.subHeading) === null || _modalContent$subHead2 === void 0 ? void 0 : _modalContent$subHead2.text)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-list-container"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$listIte = modalContent.listItem) === null || _modalContent$listIte === void 0 ? void 0 : _modalContent$listIte.map((item, index) => {
+    var _item$label;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "select-list-item",
+      onClick: () => handleItemSelect(item)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-avatar",
+      style: getAvatarStyle(index)
+    }, (_item$label = item.label) === null || _item$label === void 0 || (_item$label = _item$label.charAt(0)) === null || _item$label === void 0 ? void 0 : _item$label.toUpperCase()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-content"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400",
+      color: "primary-content"
+    }, item.label)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-arrow"
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _ChevronRight.default,
+      size: 20,
+      color: "primary"
+    })));
+  })));
+};
+SelectListItemModal.propTypes = {
+  modalContent: _propTypes.default.object,
+  onItemSelect: _propTypes.default.func,
+  avatarColors: _propTypes.default.array
+};
+var _default = exports.default = SelectListItemModal;

package/build/widgets/oa-widget-sidebar/SidebarWidget.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _reactRouterDom = require("react-router-dom");
 var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
@@ -17,16 +17,19 @@ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-componen
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _styles = _interopRequireWildcard(require("./styles"));
 var _CustomDropdown = _interopRequireDefault(require("../../components/oa-component-dropdown/CustomDropdown"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable */
 
 const {
   Sider
 } = _antd.Layout;
+const {
+  SubMenu
+} = _antd.Menu;
 function SidebarWidget(_ref) {
-  var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3;
+  var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3, _footer$icons$;
   let {
     heading,
     menuItems = [],
@@ -35,12 +38,71 @@ function SidebarWidget(_ref) {
     location,
     history,
     handleFooterClick,
-    profileData // Add profileData prop
+    profileData
   } = _ref;
+  const [openKeys, setOpenKeys] = (0, _react.useState)([]);
+
   // Determine which menu items to use and whether to show profile icon
   const shouldShowProfileIcon = (mobileMenuItems === null || mobileMenuItems === void 0 || (_mobileMenuItems$item = mobileMenuItems.items) === null || _mobileMenuItems$item === void 0 ? void 0 : _mobileMenuItems$item.length) > 0;
   const activeMenuItems = shouldShowProfileIcon ? mobileMenuItems : menuItems;
-  console.log(profileData, "profileData");
+
+  // Find which submenu contains the current path and set it as open by default
+  (0, _react.useEffect)(() => {
+    const currentPath = location.pathname;
+    const items = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.items) || [];
+
+    // Find if current path is in any submenu
+    for (const item of items) {
+      if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 ? void 0 : item.children.length) > 0) {
+        var _item$children;
+        const hasCurrentPath = item === null || item === void 0 || (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(child => (child === null || child === void 0 ? void 0 : child.path) === currentPath);
+        if (hasCurrentPath) {
+          setOpenKeys([item === null || item === void 0 ? void 0 : item.key]);
+          return;
+        }
+      }
+    }
+
+    // If no match found, open the first submenu by default
+    const firstSubmenu = items === null || items === void 0 ? void 0 : items.find(item => {
+      var _item$children2;
+      return (item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 || (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0;
+    });
+    if (firstSubmenu) {
+      setOpenKeys([firstSubmenu === null || firstSubmenu === void 0 ? void 0 : firstSubmenu.key]);
+    }
+  }, [location.pathname, menuItems]);
+
+  // Simple menu click handler
+  const handleMenuClick = _ref2 => {
+    let {
+      key
+    } = _ref2;
+    history.replace(key);
+  };
+
+  // Handle submenu open/close
+  const handleOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+
+  // Simple render function for menu items
+  const renderMenuItem = item => {
+    var _item$children3;
+    if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 || (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length) > 0) {
+      var _item$children4;
+      return /*#__PURE__*/_react.default.createElement(SubMenu, {
+        key: item.key,
+        title: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label)
+      }, item === null || item === void 0 || (_item$children4 = item.children) === null || _item$children4 === void 0 ? void 0 : _item$children4.map(child => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: child === null || child === void 0 ? void 0 : child.path
+      }, child === null || child === void 0 ? void 0 : child.label)));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: item.path
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "oaLeftLayouts"
   }, /*#__PURE__*/_react.default.createElement(Sider, {
@@ -69,8 +131,8 @@ function SidebarWidget(_ref) {
     }
   }, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
     style: {
-      backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || 'primary', ")"),
-      color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || 'primary-content', ")")
+      backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || "primary", ")"),
+      color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || "primary-content", ")")
     }
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "white",
@@ -81,25 +143,33 @@ function SidebarWidget(_ref) {
     size: 20
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "notShowInMobile"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebarContent"
   }, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_antd.Menu, {
     theme: "light",
     mode: "inline",
     selectedKeys: [location.pathname],
+    openKeys: openKeys,
+    onOpenChange: handleOpenChange,
     className: "menu",
-    onClick: _ref2 => {
-      let {
-        key
-      } = _ref2;
-      history.replace(key);
-    }
-  }, menuItems === null || menuItems === void 0 || (_menuItems$items = menuItems.items) === null || _menuItems$items === void 0 ? void 0 : _menuItems$items.map(item => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
-    key: item.path
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item.label))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleMenuClick
+  }, menuItems === null || menuItems === void 0 || (_menuItems$items = menuItems.items) === null || _menuItems$items === void 0 ? void 0 : _menuItems$items.map(item => renderMenuItem(item))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
     className: "logoutDiv",
     onClick: () => handleFooterClick()
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "negative",
     typography: "type-button-500"
-  }, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label))))));
+  }, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label)))))), (footer === null || footer === void 0 ? void 0 : footer.icons) && footer.icons.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerLogoSection notShowInMobile"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-b2-400"
+  }, "Powered by"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerLogoContainer"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Image, {
+    src: (_footer$icons$ = footer.icons[0]) === null || _footer$icons$ === void 0 ? void 0 : _footer$icons$.icon,
+    preview: false,
+    className: "footerLogo"
+  }))));
 }
 var _default = exports.default = (0, _reactRouterDom.withRouter)(SidebarWidget);

package/build/widgets/oa-widget-sidebar/components/Header.js

@@ -24,7 +24,7 @@ function Header(_ref) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Image, {
       src: icon,
       preview: false,
-      className: "logo"
+      className: "logo logo-mobile-height"
     }));
   }), text && /*#__PURE__*/_react.default.createElement(_antd.Typography, {
     typography: "type-h3-500"

package/build/widgets/oa-widget-sidebar/styles.js

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2; // styles.js
 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 OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n  }\n\n  .logoContainer {\n    padding: 0 12px 68px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .logoutDiv {\n    display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logoContainer em {\n    width: 1px;\n    background: #e0e0e0;\n  }\n  .logoContainer img {\n    height: 32px;\n  }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n  .ant-menu-item-selected {\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 16px;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n  }\n"])));
+const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: 80vh; /* full viewport height */\n    display: flex;\n    flex-direction: column;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logo-mobile-height {\n    height: auto;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 24px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 0 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .logo-mobile-height {\n      height: 56px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n    .layoutHeadingPage * {\n      max-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n"])));
 const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var _default = exports.default = OalayoutStyle;

package/package.json

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