oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.440

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.flat-map.js");
+require("core-js/modules/es.array.unscopables.flat-map.js");
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+var _CancelRounded = _interopRequireDefault(require("@material-ui/icons/CancelRounded"));
+var _MaterialIcon = _interopRequireDefault(require("../../../components/oa-component-icons/MaterialIcon"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("./StaticFilter.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+const AppliedFilters = _ref => {
+  let {
+    appliedFilters,
+    filterConfig,
+    onRemoveFilter,
+    onClearAll,
+    filterDrawerData
+  } = _ref;
+  const filterKeys = Object.keys(appliedFilters);
+  if (filterKeys.length === 0) {
+    return null;
+  }
+  const getFilterDisplayValue = (key, value) => {
+    switch (key) {
+      case "filterBy":
+        {
+          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);
+            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");
+      case "toDate":
+        return (0, _dayjs.default)(value).format("DD MMM YYYY");
+      default:
+        return value;
+    }
+  };
+  const formatAppliedFilterDisplay = () => {
+    const filterBy = appliedFilters.filterBy;
+    const fromDate = appliedFilters.fromDate;
+    const toDate = appliedFilters.toDate;
+
+    // Create the combined filter display as shown in design
+    let displayParts = [];
+    if (filterBy) {
+      displayParts.push(getFilterDisplayValue("filterBy", filterBy));
+    }
+    if (fromDate && toDate) {
+      displayParts.push("From Date: ".concat(getFilterDisplayValue("fromDate", fromDate), " | To Date: ").concat(getFilterDisplayValue("toDate", toDate)));
+    }
+    return displayParts.length > 0 ? displayParts.join(": ") : null;
+  };
+
+  // Update the render logic
+  const displayText = formatAppliedFilterDisplay();
+  if (!displayText) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "appliedFiltersContainer"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tag, {
+    closable: true,
+    onClose: onClearAll,
+    closeIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _CancelRounded.default,
+      size: 20,
+      color: "background-overlay"
+    }),
+    className: "appliedFilterTag"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400"
+  }, displayText)));
+};
+var _default = exports.default = AppliedFilters;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _KPICardWidget = _interopRequireDefault(require("../../../widgets/oa-widget-kpi/KPICardWidget"));
+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); } /* eslint-disable */
+function CardList(_ref) {
+  let {
+    cards = []
+  } = _ref;
+  if (window.innerWidth < 600) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cardData"
+    }, /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
+      autoplay: true
+    }, cards === null || cards === void 0 ? void 0 : cards.map(card => /*#__PURE__*/_react.default.createElement(_KPICardWidget.default, _extends({
+      key: card === null || card === void 0 ? void 0 : card.title
+    }, card)))));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardData"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardContainer"
+  }, cards === null || cards === void 0 ? void 0 : cards.map(card => /*#__PURE__*/_react.default.createElement(_KPICardWidget.default, _extends({
+    key: card === null || card === void 0 ? void 0 : card.title
+  }, card)))));
+}
+var _default = exports.default = CardList;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DropdownSearchInput = _interopRequireDefault(require("../../../widgets/oa-widget-dropdown-search-input/DropdownSearchInput"));
+const _excluded = ["menuItems", "value", "error", "selectedOption", "onInputChange", "onOptionChange", "onPressEnter", "onClear", "onBlur", "allowClear"];
+/* 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; }
+function DropdownSearch(_ref) {
+  let {
+      menuItems,
+      value,
+      error,
+      selectedOption,
+      onInputChange,
+      onOptionChange,
+      onPressEnter,
+      onClear,
+      onBlur,
+      allowClear = true
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dropDownSearchContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "selectAndSearch"
+  }, /*#__PURE__*/_react.default.createElement(_DropdownSearchInput.default, _extends({
+    allowClear: allowClear,
+    options: menuItems,
+    inputValue: value,
+    selectedOption: selectedOption,
+    onInputChange: onInputChange,
+    onPressEnter: onPressEnter,
+    onOptionChange: onOptionChange,
+    onClear: onClear,
+    onBlur: onBlur
+  }, otherProps)), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "searchErrorMsg"
+  }, error)));
+}
+var _default = exports.default = DropdownSearch;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../../components/oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../../../components/oa-component-button/CustomButton"));
+var _CustomSelect = _interopRequireDefault(require("../../../components/oa-component-select/CustomSelect"));
+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); } /* eslint-disable */
+function Header(_ref) {
+  var _subHeading$jsxConfig8, _subHeading$jsxConfig9, _subHeading$jsxConfig10, _subHeading$color, _subHeading$icon, _subHeading$icon2, _subHeading$icon3, _subHeading$icon4;
+  let {
+    heading,
+    subHeading,
+    subHeading1,
+    onSubHeadingClick,
+    handleSubHeadingSelect
+  } = _ref;
+  const {
+    text,
+    type,
+    icon
+  } = heading !== null && heading !== void 0 ? heading : {};
+  const subHeadingJsx = subHeading => {
+    var _subHeading$jsxConfig, _subHeading$jsxConfig5;
+    if ((subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig = subHeading.jsxConfig) === null || _subHeading$jsxConfig === void 0 ? void 0 : _subHeading$jsxConfig.type) === "button") {
+      var _subHeading$jsxConfig2, _subHeading$jsxConfig4;
+      return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+        label: subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig2 = subHeading.jsxConfig) === null || _subHeading$jsxConfig2 === void 0 ? void 0 : _subHeading$jsxConfig2.label,
+        onClick: () => {
+          var _subHeading$jsxConfig3;
+          return onSubHeadingClick(subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig3 = subHeading.jsxConfig) === null || _subHeading$jsxConfig3 === void 0 ? void 0 : _subHeading$jsxConfig3.action);
+        },
+        type: subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig4 = subHeading.jsxConfig) === null || _subHeading$jsxConfig4 === void 0 ? void 0 : _subHeading$jsxConfig4.buttonType
+      });
+    } else if ((subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig5 = subHeading.jsxConfig) === null || _subHeading$jsxConfig5 === void 0 ? void 0 : _subHeading$jsxConfig5.type) === "select") {
+      var _subHeading$jsxConfig6, _subHeading$jsxConfig7;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "customeSelectDropdown"
+      }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+        value: subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig6 = subHeading.jsxConfig) === null || _subHeading$jsxConfig6 === void 0 ? void 0 : _subHeading$jsxConfig6.value,
+        options: (subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig7 = subHeading.jsxConfig) === null || _subHeading$jsxConfig7 === void 0 ? void 0 : _subHeading$jsxConfig7.data) || [],
+        onChange: handleSubHeadingSelect
+      }));
+    }
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "layoutHeadingPage"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "topHadingWithIcon"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: type,
+    color: "primary-content"
+  }, (icon === null || icon === void 0 ? void 0 : icon.position) === "left" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, icon === null || icon === void 0 ? void 0 : icon.iconConfig), text, (icon === null || icon === void 0 ? void 0 : icon.position) === "right" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, icon === null || icon === void 0 ? void 0 : icon.iconConfig))), subHeading && /*#__PURE__*/_react.default.createElement("div", {
+    className: subHeading !== null && subHeading !== void 0 && (_subHeading$jsxConfig8 = subHeading.jsxConfig) !== null && _subHeading$jsxConfig8 !== void 0 && _subHeading$jsxConfig8.type && (subHeading === null || subHeading === void 0 || (_subHeading$jsxConfig9 = subHeading.jsxConfig) === null || _subHeading$jsxConfig9 === void 0 ? void 0 : _subHeading$jsxConfig9.align) === "in-line" ? "inLine subHadingText" : subHeading !== null && subHeading !== void 0 && (_subHeading$jsxConfig10 = subHeading.jsxConfig) !== null && _subHeading$jsxConfig10 !== void 0 && _subHeading$jsxConfig10.type ? "subHadingText marginNone" : "subHadingText"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: subHeading === null || subHeading === void 0 ? void 0 : subHeading.type,
+    color: (_subHeading$color = subHeading === null || subHeading === void 0 ? void 0 : subHeading.color) !== null && _subHeading$color !== void 0 ? _subHeading$color : "secondary-content"
+  }, (subHeading === null || subHeading === void 0 || (_subHeading$icon = subHeading.icon) === null || _subHeading$icon === void 0 ? void 0 : _subHeading$icon.position) === "left" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, _extends({}, subHeading === null || subHeading === void 0 || (_subHeading$icon2 = subHeading.icon) === null || _subHeading$icon2 === void 0 ? void 0 : _subHeading$icon2.iconConfig, {
+    className: "margin-right-8"
+  })), subHeading === null || subHeading === void 0 ? void 0 : subHeading.text, (subHeading === null || subHeading === void 0 || (_subHeading$icon3 = subHeading.icon) === null || _subHeading$icon3 === void 0 ? void 0 : _subHeading$icon3.position) === "right" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, subHeading === null || subHeading === void 0 || (_subHeading$icon4 = subHeading.icon) === null || _subHeading$icon4 === void 0 ? void 0 : _subHeading$icon4.iconConfig)), subHeadingJsx(subHeading)), subHeading1 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "subHading1Text"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: subHeading1 === null || subHeading1 === void 0 ? void 0 : subHeading1.type,
+    color: "secondary-content"
+  }, subHeading1 === null || subHeading1 === void 0 ? void 0 : subHeading1.text)));
+}
+var _default = exports.default = Header;

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CustomModal = _interopRequireDefault(require("../../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+var _KeyValueWidget = _interopRequireDefault(require("../../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _HubAutomationModal = _interopRequireDefault(require("../../../widgets/oa-widget-hub-automation-modal/HubAutomationModal"));
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
+function LayoutModal(_ref) {
+  var _modal$jsxConfig, _modal$modalContent14;
+  let {
+    modal,
+    onCancel,
+    onFooterAction,
+    handleSwitchSelectItem
+  } = _ref;
+  if (!(modal !== null && modal !== void 0 && modal.visible)) return null;
+  const getModalButtonConfig = buttonConfig => buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => _objectSpread(_objectSpread({}, button), {}, {
+    callback: () => onFooterAction(button === null || button === void 0 ? void 0 : button.action, button)
+  }));
+  const render = () => {
+    if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "hubAutomation") {
+      return /*#__PURE__*/_react.default.createElement(_HubAutomationModal.default, modal);
+    } else if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "guideModal") {
+      var _modal$modalContent;
+      return /*#__PURE__*/_react.default.createElement(_GuideWidget.default, {
+        slides: modal === null || modal === void 0 || (_modal$modalContent = modal.modalContent) === null || _modal$modalContent === void 0 || (_modal$modalContent = _modal$modalContent.content) === null || _modal$modalContent === void 0 || (_modal$modalContent = _modal$modalContent.data) === null || _modal$modalContent === void 0 ? void 0 : _modal$modalContent.dataSource,
+        onComplete: onCancel
+      });
+    } 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),
+        handleSwitchSelectItem: handleSwitchSelectItem
+      });
+    } 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, {
+        typography: modal === null || modal === void 0 || (_modal$modalContent3 = modal.modalContent) === null || _modal$modalContent3 === void 0 || (_modal$modalContent3 = _modal$modalContent3.header) === null || _modal$modalContent3 === void 0 ? void 0 : _modal$modalContent3.type,
+        color: "primary-content"
+      }, modal === null || modal === void 0 || (_modal$modalContent4 = modal.modalContent) === null || _modal$modalContent4 === void 0 || (_modal$modalContent4 = _modal$modalContent4.header) === null || _modal$modalContent4 === void 0 ? void 0 : _modal$modalContent4.text), (modal === null || modal === void 0 || (_modal$modalContent5 = modal.modalContent) === null || _modal$modalContent5 === void 0 ? void 0 : _modal$modalContent5.subHeading) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "margin-top-12"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: modal === null || modal === void 0 || (_modal$modalContent6 = modal.modalContent) === null || _modal$modalContent6 === void 0 || (_modal$modalContent6 = _modal$modalContent6.subHeading) === null || _modal$modalContent6 === void 0 ? void 0 : _modal$modalContent6.type,
+        color: "secondary-content"
+      }, modal === null || modal === void 0 || (_modal$modalContent7 = modal.modalContent) === null || _modal$modalContent7 === void 0 || (_modal$modalContent7 = _modal$modalContent7.subHeading) === null || _modal$modalContent7 === void 0 ? void 0 : _modal$modalContent7.text)), (modal === null || modal === void 0 || (_modal$modalContent8 = modal.modalContent) === null || _modal$modalContent8 === void 0 || (_modal$modalContent8 = _modal$modalContent8.content) === null || _modal$modalContent8 === void 0 || (_modal$modalContent8 = _modal$modalContent8.data) === null || _modal$modalContent8 === void 0 ? void 0 : _modal$modalContent8.dataType) === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "listOfItems"
+      }, (modal === null || modal === void 0 || (_modal$modalContent9 = modal.modalContent) === null || _modal$modalContent9 === void 0 || (_modal$modalContent9 = _modal$modalContent9.content) === null || _modal$modalContent9 === void 0 || (_modal$modalContent9 = _modal$modalContent9.data) === null || _modal$modalContent9 === void 0 ? void 0 : _modal$modalContent9.boxHeading) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "modalIconAndTextBox"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: modal === null || modal === void 0 || (_modal$modalContent10 = modal.modalContent) === null || _modal$modalContent10 === void 0 || (_modal$modalContent10 = _modal$modalContent10.content) === null || _modal$modalContent10 === void 0 || (_modal$modalContent10 = _modal$modalContent10.data) === null || _modal$modalContent10 === void 0 || (_modal$modalContent10 = _modal$modalContent10.boxHeading) === null || _modal$modalContent10 === void 0 ? void 0 : _modal$modalContent10.icon,
+        size: 20,
+        color: "primary-content"
+      }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        color: "secondary-content",
+        typography: modal === null || modal === void 0 || (_modal$modalContent11 = modal.modalContent) === null || _modal$modalContent11 === void 0 || (_modal$modalContent11 = _modal$modalContent11.content) === null || _modal$modalContent11 === void 0 || (_modal$modalContent11 = _modal$modalContent11.data) === null || _modal$modalContent11 === void 0 || (_modal$modalContent11 = _modal$modalContent11.boxHeading) === null || _modal$modalContent11 === void 0 ? void 0 : _modal$modalContent11.type
+      }, modal === null || modal === void 0 || (_modal$modalContent12 = modal.modalContent) === null || _modal$modalContent12 === void 0 || (_modal$modalContent12 = _modal$modalContent12.content) === null || _modal$modalContent12 === void 0 || (_modal$modalContent12 = _modal$modalContent12.data) === null || _modal$modalContent12 === void 0 || (_modal$modalContent12 = _modal$modalContent12.boxHeading) === null || _modal$modalContent12 === void 0 ? void 0 : _modal$modalContent12.text)), /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+        data: modal === null || modal === void 0 || (_modal$modalContent13 = modal.modalContent) === null || _modal$modalContent13 === void 0 || (_modal$modalContent13 = _modal$modalContent13.content) === null || _modal$modalContent13 === void 0 || (_modal$modalContent13 = _modal$modalContent13.data) === null || _modal$modalContent13 === void 0 ? void 0 : _modal$modalContent13.dataSource
+      })));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    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),
+    bgColor: modal === null || modal === void 0 ? void 0 : modal.bgColor,
+    showCloseIcon: modal === null || modal === void 0 ? void 0 : modal.showCloseIcon,
+    maskClosable: (modal === null || modal === void 0 || (_modal$modalContent14 = modal.modalContent) === null || _modal$modalContent14 === void 0 ? void 0 : _modal$modalContent14.backClickDisable) === true ? false : (modal === null || modal === void 0 ? void 0 : modal.maskClosable) !== undefined ? modal === null || modal === void 0 ? void 0 : modal.maskClosable : true
+  }, render());
+}
+LayoutModal.propTypes = {
+  modal: _propTypes.default.object,
+  onCancel: _propTypes.default.func,
+  onFooterAction: _propTypes.default.func
+};
+var _default = exports.default = LayoutModal;

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

@@ -0,0 +1,219 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.json.stringify.js");
+var _react = _interopRequireWildcard(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"));
+var _CustomButton = _interopRequireDefault(require("../../../components/oa-component-button/CustomButton"));
+var _styles = require("../styles");
+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; }
+/* eslint-disable */
+
+/**
+ * ProfileSection component that displays a user profile icon with tooltip
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.profileData - Profile data object
+ * @param {string} props.profileData.iconText - Text to display in the circular icon
+ * @param {string} props.profileData.iconColor - Design token like 'secondary-content'
+ * @param {string} props.profileData.iconBgColor - Design token like 'primary'
+ * @param {string} props.profileData.tooltipText - Text to display in the tooltip
+ * @param {boolean} props.profileData.visible - Whether to show the profile section
+ * @param {string} props.profileData.behavior - 'reroute' or 'open-container'
+ * @param {Object} props.profileData.containerData - Data for container modal
+ * @param {Function} props.onProfileClick - Function to call when profile is clicked
+ *
+ * @returns {JSX.Element} Profile section component
+ */
+function ProfileSection(_ref) {
+  var _containerData$curren, _containerData$curren2, _containerData$curren3, _containerData$curren4;
+  let {
+    profileData,
+    onProfileClick
+  } = _ref;
+  const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
+  const [showContainer, setShowContainer] = (0, _react.useState)(false);
+  if (!(profileData !== null && profileData !== void 0 && profileData.visible)) {
+    return null;
+  }
+  const {
+    iconText,
+    iconColor,
+    iconBgColor,
+    tooltipText,
+    behavior = "reroute",
+    containerData,
+    mwebTypographyType = "type-h2-500"
+  } = profileData;
+  const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
+  const handleProfileClick = () => {
+    if (behavior === "open-container") {
+      setShowContainer(true);
+    } else {
+      onProfileClick();
+    }
+  };
+  const handleListItemSelect = enterprise => {
+    // Store selected enterprise in session storage
+    sessionStorage.setItem("selectedEnterprise", JSON.stringify(enterprise));
+
+    // Store notification data for after reload
+    sessionStorage.setItem("showEnterpriseNotification", JSON.stringify({
+      message: "Successfully switched to another enterprise.",
+      type: "success"
+    }));
+
+    // Close container
+    setShowContainer(false);
+
+    // Reload the page immediately
+    window.location.reload();
+  };
+  const getEnterpriseAvatarStyle = index => {
+    if (containerData !== null && containerData !== void 0 && containerData.avatarColors && containerData.avatarColors.length > 0) {
+      // Use modulo to cycle through colors
+      const colorIndex = index % containerData.avatarColors.length;
+      return containerData.avatarColors[colorIndex];
+    }
+
+    // Fallback to enterprise's own color if no avatarColors provided
+    return {
+      backgroundColor: enterprise.iconBgColor || "#1890ff",
+      color: "#fff"
+    };
+  };
+  const handleManageProfile = () => {
+    setShowContainer(false);
+    if (containerData !== null && containerData !== void 0 && containerData.manageProfileReroute) {
+      window.location.href = containerData.manageProfileReroute;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfileSectionContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "profile-icon-container",
+    onMouseEnter: () => setShowTooltip(true),
+    onMouseLeave: () => setShowTooltip(false),
+    onClick: handleProfileClick
+  }, /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: resolveToken(iconBgColor),
+      color: resolveToken(iconColor)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    style: {
+      fontSize: "28px",
+      fontWeight: "500"
+    }
+  }, iconText)), showTooltip && tooltipText && /*#__PURE__*/_react.default.createElement(_styles.Tooltip, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    typography: "type-b2-400"
+  }, tooltipText))), showContainer && containerData && /*#__PURE__*/_react.default.createElement(_styles.ProfileContainerOverlay, {
+    onClick: () => setShowContainer(false),
+    onMouseDown: e => e.target === e.currentTarget && setShowContainer(false)
+  }, /*#__PURE__*/_react.default.createElement(_styles.ProfileContainerModal, {
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_styles.CurrentProfileSection, null, /*#__PURE__*/_react.default.createElement(_styles.ProfileInfoContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ProfileAvatar, {
+    style: {
+      backgroundColor: resolveToken(((_containerData$curren = containerData.currentProfile) === null || _containerData$curren === void 0 ? void 0 : _containerData$curren.iconBgColor) || "primary"),
+      color: resolveToken(((_containerData$curren2 = containerData.currentProfile) === null || _containerData$curren2 === void 0 ? void 0 : _containerData$curren2.iconColor) || "white"),
+      fontSize: "36px",
+      fontWeight: "500"
+    }
+  }, ((_containerData$curren3 = containerData.currentProfile) === null || _containerData$curren3 === void 0 ? void 0 : _containerData$curren3.iconText) || iconText), /*#__PURE__*/_react.default.createElement(_styles.ProfileNameContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, ((_containerData$curren4 = containerData.currentProfile) === null || _containerData$curren4 === void 0 ? void 0 : _containerData$curren4.name) || "Current Profile"), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: "Manage Profile",
+    type: "secondary",
+    onClick: handleManageProfile,
+    style: {
+      width: "fit-content"
+    }
+  })))), containerData.listItems && containerData.listItems.length > 0 && /*#__PURE__*/_react.default.createElement(_styles.EnterpriseSection, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700",
+    style: {
+      marginBottom: "16px"
+    }
+  }, "Switch to Another Enterprise"), /*#__PURE__*/_react.default.createElement(_styles.EnterpriseList, null, containerData.listItems.map((enterprise, index) => {
+    const avatarStyle = getEnterpriseAvatarStyle(index);
+    return /*#__PURE__*/_react.default.createElement(_styles.EnterpriseItem, {
+      key: index,
+      onClick: () => handleListItemSelect(enterprise)
+    }, /*#__PURE__*/_react.default.createElement(_styles.EnterpriseAvatar, {
+      style: {
+        backgroundColor: avatarStyle.backgroundColor,
+        color: avatarStyle.color
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-h2-500"
+    }, enterprise.iconText)), /*#__PURE__*/_react.default.createElement(_styles.EnterpriseContent, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      style: {
+        fontSize: "14px",
+        fontWeight: "700"
+      }
+    }, enterprise.name)), /*#__PURE__*/_react.default.createElement(_styles.EnterpriseArrow, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _ChevronRight.default,
+      size: 20,
+      color: "primary"
+    })));
+  }))))));
+}
+ProfileSection.propTypes = {
+  profileData: _propTypes.default.shape({
+    visible: _propTypes.default.bool,
+    iconText: _propTypes.default.string,
+    iconColor: _propTypes.default.string,
+    iconBgColor: _propTypes.default.string,
+    tooltipText: _propTypes.default.string,
+    mwebTypographyType: _propTypes.default.string,
+    behavior: _propTypes.default.oneOf(["reroute", "open-container"]),
+    containerData: _propTypes.default.shape({
+      currentProfile: _propTypes.default.shape({
+        name: _propTypes.default.string,
+        iconText: _propTypes.default.string,
+        iconColor: _propTypes.default.string,
+        iconBgColor: _propTypes.default.string
+      }),
+      avatarColors: _propTypes.default.arrayOf(_propTypes.default.shape({
+        backgroundColor: _propTypes.default.string,
+        color: _propTypes.default.string
+      })),
+      manageProfileReroute: _propTypes.default.string,
+      listItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+        name: _propTypes.default.string,
+        iconText: _propTypes.default.string,
+        iconBgColor: _propTypes.default.string,
+        reroute: _propTypes.default.string
+      }))
+    })
+  }),
+  onProfileClick: _propTypes.default.func,
+  onShowNotification: _propTypes.default.func
+};
+ProfileSection.defaultProps = {
+  profileData: {
+    visible: false,
+    iconText: "R",
+    iconColor: "primary-content",
+    iconBgColor: "primary",
+    tooltipText: "To manage the sub-admins, go to the Profile section.",
+    mwebTypographyType: "type-h2-500",
+    behavior: "reroute",
+    containerData: null
+  },
+  onProfileClick: () => {},
+  onShowNotification: () => {}
+};
+var _default = exports.default = ProfileSection;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CustomInput = _interopRequireDefault(require("../../../components/oa-component-input/CustomInput"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _MaterialIcon = _interopRequireDefault(require("../../../components/oa-component-icons/MaterialIcon"));
+const _excluded = ["value", "placeholder", "error", "onInputChange", "onPressEnter", "onClear", "onBlur"];
+/* 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; }
+function Search(_ref) {
+  let {
+      value,
+      placeholder,
+      error,
+      onInputChange,
+      onPressEnter,
+      onClear,
+      onBlur
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "searchContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "searchOnly"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    className: "cstSearchIcon",
+    icon: _Search.default,
+    size: 20,
+    color: "placeholder-text"
+  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, _extends({
+    allowClear: true,
+    className: "searchContainerInput",
+    value: value,
+    placeholder: placeholder,
+    onChange: onInputChange,
+    onPressEnter: onPressEnter,
+    onClear: onClear,
+    onBlur: onBlur
+  }, otherProps)), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "searchErrorMsg"
+  }, error)));
+}
+var _default = exports.default = Search;