oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,84 @@
+"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, _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;
+        }
+      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,85 @@
+"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"));
+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;
+  let {
+    modal,
+    onCancel,
+    onFooterAction
+  } = _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 {
+      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: 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)
+  }, 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,87 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+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 {Function} props.onProfileClick - Function to call when profile is clicked
+ *
+ * @returns {JSX.Element} Profile section component
+ */
+function ProfileSection(_ref) {
+  let {
+    profileData,
+    onProfileClick
+  } = _ref;
+  const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
+  if (!(profileData !== null && profileData !== void 0 && profileData.visible)) {
+    return null;
+  }
+  const {
+    iconText,
+    iconColor,
+    iconBgColor,
+    tooltipText
+  } = profileData;
+  const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfileSectionContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "profile-icon-container",
+    onMouseEnter: () => setShowTooltip(true),
+    onMouseLeave: () => setShowTooltip(false),
+    onClick: onProfileClick
+  }, /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: resolveToken(iconBgColor),
+      color: resolveToken(iconColor)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    typography: "type-h2-500"
+  }, iconText)), showTooltip && /*#__PURE__*/_react.default.createElement(_styles.Tooltip, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    typography: "type-b2-400"
+  }, tooltipText))));
+}
+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
+  }),
+  onProfileClick: _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."
+  },
+  onProfileClick: () => {}
+};
+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;

package/build/layout/GenricLayOut/components/StaticFilter.css

@@ -0,0 +1,73 @@
+.quick-filter-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+ul.quick-filter-buttons {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+ul.quick-filter-buttons li {
+  cursor: pointer;
+  border: solid 1px #014fc5;
+  padding: 10px 24px;
+  color: #014fc5;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  border-radius: 24px;
+  background: #fff;
+}
+
+ul.quick-filter-buttons li.selected {
+  background: #014fc5;
+  border: none;
+  color: #fff;
+}
+
+.appliedFiltersContainer {
+  border-radius: 8px;
+  padding: 12px;
+  width: 100%;
+  background: #f6f6f6;
+  margin-bottom: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.appliedFilterTag {
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  padding: 8px;
+  background: #fff;
+  display: flex;
+  margin: 0;
+}
+
+
+@media only screen and (max-width: 600px) {
+  .quick-filter-container {
+    white-space: nowrap;
+    margin: 0 0 16px 0;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+ul.quick-filter-buttons {
+  overflow-x: scroll;
+  width: 100%;
+}
+
+
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./StaticFilter.css");
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+// You'll need to create this CSS file
+
+function StaticFilter(_ref) {
+  var _staticFilter$data;
+  let {
+    staticFilter,
+    onFilterSelect
+  } = _ref;
+  if (!(staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) || !(staticFilter !== null && staticFilter !== void 0 && (_staticFilter$data = staticFilter.data) !== null && _staticFilter$data !== void 0 && _staticFilter$data.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "quick-filter-container"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-b2-400"
+  }, "Quick Filters:"), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "quick-filter-buttons"
+  }, staticFilter.data.map(filter => /*#__PURE__*/_react.default.createElement("li", {
+    key: filter.value,
+    onClick: () => onFilterSelect(filter.value),
+    className: "quick-filter-btn ".concat(filter.selected ? "selected" : "")
+  }, filter.label))));
+}
+var _default = exports.default = StaticFilter;