oa-componentbook 1.0.1-stage.438 → 1.0.1-stage.439

package/build/components/oa-component-document-details-panel/DocumentDetailsPanel.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _templateObject;
+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) } })); }
+/**
+ * Styled container for the details panel
+ */
+const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #fff;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  .panel-title {\n    margin: 0 0 24px 0;\n  }\n\n  .section-header {\n    background: var(--color-tertiary-background, #f5f5f5);\n    padding: 12px 16px;\n  }\n\n  .details-table {\n    width: 100%;\n  }\n\n  .details-row {\n    display: flex;\n    border-bottom: 1px solid var(--color-border, #f0f0f0);\n    padding: 16px 0;\n  }\n\n  .details-label {\n    width: 140px;\n    min-width: 100px;\n    flex-shrink: 0;\n  }\n\n  .details-value {\n    flex: 1;\n    word-break: break-word;\n    font-weight: 500;\n  }\n\n  .details-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--color-border, #e8e8e8);\n  }\n\n  .children-container {\n    margin-top: 24px;\n  }\n"])));
+
+/**
+ * DocumentDetailsPanel Component
+ *
+ * A reusable panel for displaying document/invoice details with key-value pairs.
+ * Can be used standalone or as children of DocumentSideDrawer, Modal, etc.
+ * Uses existing Typography and CustomButton components.
+ *
+ * @example
+ * // Standalone usage
+ * <DocumentDetailsPanel
+ *   title="Check if the below details are correct"
+ *   sectionTitle="INVOICE DETAILS"
+ *   details={[
+ *     { label: 'Date', value: '17 Nov 2025' },
+ *     { label: 'Invoice Number', value: 'IEXPS8790L' },
+ *   ]}
+ *   actions={[
+ *     { label: 'Download Invoice', onClick: () => {}, icon: <MaterialIcon icon={GetAppIcon} /> },
+ *   ]}
+ * />
+ *
+ * @example
+ * // With DocumentSideDrawer
+ * <DocumentSideDrawer title="VALIDATE" documentConfig={...}>
+ *   <DocumentDetailsPanel
+ *     title="Verify the details"
+ *     details={[...]}
+ *     actions={[...]}
+ *   />
+ * </DocumentSideDrawer>
+ */
+function DocumentDetailsPanel(_ref) {
+  let {
+    title,
+    sectionTitle,
+    details,
+    actions,
+    children,
+    className,
+    style
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(PanelContainer, {
+    className: className,
+    style: style
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "panel-title"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, title)), sectionTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "section-header"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, sectionTitle)), details && details.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-table"
+  }, details.map((detail, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-row",
+    key: detail.key || index
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-label"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, detail.label)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-value"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "primary-content"
+  }, detail.value))))), actions && actions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-actions"
+  }, actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action.key || index,
+    label: action.label,
+    onClick: action.onClick,
+    type: "text-only",
+    size: "medium",
+    iconConfig: {
+      icon: action.icon || null,
+      position: 'left'
+    }
+  }))), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "children-container"
+  }, children));
+}
+DocumentDetailsPanel.propTypes = {
+  /** Title text displayed at the top of the panel */
+  title: _propTypes.default.string,
+  /** Section header text (e.g., "INVOICE DETAILS") */
+  sectionTitle: _propTypes.default.string,
+  /** Array of detail items to display as key-value pairs */
+  details: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
+  })),
+  /** Array of action buttons/links to display */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    icon: _propTypes.default.node
+  })),
+  /** Additional content to render below the details */
+  children: _propTypes.default.node,
+  /** Additional CSS class */
+  className: _propTypes.default.string,
+  /** Inline styles */
+  style: _propTypes.default.object
+};
+DocumentDetailsPanel.defaultProps = {
+  title: null,
+  sectionTitle: null,
+  details: [],
+  actions: [],
+  children: null,
+  className: '',
+  style: {}
+};
+var _default = exports.default = DocumentDetailsPanel;

package/build/components/oa-component-progress-bar/CustomProgressBar.js

@@ -18,7 +18,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} totalStep - The total number of steps in the progress.
  * @param {string} headingColor - The color used for the step text heading.
  * @param {string} barColor - The color used for the progress bar.
- * @param {boolean} showStepText - Whether to display the step text (Step X out of Y).
  *
  * @returns {React.ReactElement} A component displaying the current progress.
  */
@@ -27,10 +26,9 @@ function ProgressBar(_ref) {
     currentStep,
     totalStep,
     headingColor,
-    barColor,
-    showStepText
+    barColor
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showStepText && /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "margin-bottom-8"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: headingColor,
@@ -59,14 +57,12 @@ ProgressBar.propTypes = {
   currentStep: _propTypes.default.number,
   totalStep: _propTypes.default.number,
   headingColor: _propTypes.default.string,
-  barColor: _propTypes.default.string,
-  showStepText: _propTypes.default.bool
+  barColor: _propTypes.default.string
 };
 ProgressBar.defaultProps = {
   currentStep: 1,
   totalStep: 1,
   headingColor: 'positive',
-  barColor: 'positive',
-  showStepText: true
+  barColor: 'positive'
 };
 var _default = exports.default = ProgressBar;

package/build/components/oa-component-select/CustomSelect.js

@@ -41,7 +41,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const {
   Option
 } = _antd.Select;
-const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n  \n  /* Fix clear icon position */\n  .ant-select-clear {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    right: 32px;\n    margin-top: 0;\n    transform: translateY(-50%);\n    top: 50%;\n  }\n  \n  /* Ensure suffix icon (dropdown arrow) stays in correct position */\n  .ant-select-arrow {\n    right: 12px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
 
 /**
  * Takes an array of values and an object mapping values to labels and returns an

package/build/components/oa-component-table-with-search-and-filter/TableWithSearchAndFilter.js

@@ -0,0 +1,450 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+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.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CustomTable = _interopRequireDefault(require("../oa-component-table/CustomTable"));
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomDrawer = _interopRequireDefault(require("../oa-component-drawer/CustomDrawer"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
+var _CustomSelect = _interopRequireDefault(require("../oa-component-select/CustomSelect"));
+var _CustomRadio = _interopRequireDefault(require("../oa-component-radio/CustomRadio"));
+var _CustomDatePicker = _interopRequireDefault(require("../oa-component-datepicker/CustomDatePicker"));
+var _styles = require("./styles");
+const _excluded = ["dataSource", "columns", "rowKey", "emptyText"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function 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); }
+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; }
+/**
+ * TableWithSearchAndFilter - A complete table component with search, filters and pagination
+ *
+ * @param {Object} tableProps - Table configuration
+ * @param {Object} searchProps - Search configuration
+ * @param {Object} filterProps - Filter configuration
+ *   @param {boolean} filterProps.show - Show/hide filters
+ *   @param {Array} filterProps.config - Filter field configurations
+ *   @param {Function} filterProps.onApply - Callback when filters are applied
+ *   @param {Function} filterProps.onClear - Callback when filters are cleared
+ *   @param {Function} filterProps.onChange - Callback when any filter value changes (key, value, allFilters, action)
+ *     - action can be: 'search', 'select', 'clear', or 'change'
+ *   @param {boolean} filterProps.loading - Global loading state for all filter selects
+ *   @param {string} filterProps.buttonLabel - Custom filter button label
+ *   @param {string} filterProps.drawerTitle - Custom filter drawer title
+ * @param {Object} paginationProps - Pagination configuration
+ * @param {string} className - Additional CSS class
+ *
+ * Filter Config Options:
+ *   - type: 'select' - Supports `loading`, `showSearch`, `filterOption`, `disabled` properties
+ *   - type: 'radio' - Radio button group
+ *   - type: 'date' - Single date picker
+ *   - type: 'dateRange' - Two date pickers with fields array
+ *   - type: 'group' - Group of fields, each supporting `loading`, `showSearch`, `filterOption`, `disabled` (for select type)
+ */
+function TableWithSearchAndFilter(_ref) {
+  let {
+    tableProps = {},
+    searchProps = {},
+    filterProps = {},
+    paginationProps = {},
+    className = ''
+  } = _ref;
+  // Destructure tableProps with defaults
+  const {
+      dataSource = [],
+      columns = [],
+      rowKey = 'id',
+      emptyText = 'No data found'
+    } = tableProps,
+    restTableProps = _objectWithoutProperties(tableProps, _excluded);
+
+  // Destructure searchProps with defaults
+  const {
+    show: showSearch = true,
+    placeholder: searchPlaceholder = 'Search...',
+    debounceDelay = 500,
+    searchKeys = [],
+    onSearch
+  } = searchProps;
+
+  // Destructure filterProps with defaults
+  const {
+    show: showFilters = true,
+    config: filterConfig = [],
+    onApply: onFiltersApply,
+    onClear: onFiltersClear,
+    onChange: onFilterChange,
+    loading: filtersLoading = false,
+    buttonLabel: filterButtonLabel = 'Filters',
+    drawerTitle: filterDrawerTitle = 'FILTERS'
+  } = filterProps;
+
+  // Destructure paginationProps with defaults
+  const {
+    show: showPagination = true,
+    current = 1,
+    pageSize = 10,
+    total,
+    pageSizeOptions = [10, 20, 50, 100],
+    onChange: onPaginationChange,
+    onShowSizeChange
+  } = paginationProps;
+
+  // Search state
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [filteredData, setFilteredData] = (0, _react.useState)(dataSource);
+  const timerRef = (0, _react.useRef)(null);
+
+  // Filter drawer state
+  const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
+  const [filterValues, setFilterValues] = (0, _react.useState)({});
+  const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
+
+  // Client-side filtering function
+  const applyFiltersAndSearch = (data, search, filters) => {
+    let result = [...data];
+    if (search && searchKeys.length > 0) {
+      const searchLower = search.toLowerCase();
+      result = result.filter(item => searchKeys.some(key => {
+        var _item$key;
+        return (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.toString().toLowerCase().includes(searchLower);
+      }));
+    }
+    Object.entries(filters).forEach(_ref2 => {
+      let [key, value] = _ref2;
+      if (value) {
+        result = result.filter(item => {
+          var _item$key2;
+          return ((_item$key2 = item[key]) === null || _item$key2 === void 0 ? void 0 : _item$key2.toString().toLowerCase()) === value.toString().toLowerCase();
+        });
+      }
+    });
+    setFilteredData(result);
+  };
+
+  // Sync filtered data when dataSource changes
+  (0, _react.useEffect)(() => {
+    applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
+  }, [dataSource]);
+
+  // Search handlers
+  const handleSearchChange = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (debounceDelay === 0) {
+      if (onSearch) {
+        onSearch(value);
+      } else {
+        applyFiltersAndSearch(dataSource, value, appliedFilters);
+      }
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      if (onSearch) {
+        onSearch(value);
+      } else {
+        applyFiltersAndSearch(dataSource, value, appliedFilters);
+      }
+    }, debounceDelay);
+  };
+  const handleSearchPressEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (onSearch) {
+      onSearch(searchValue);
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
+    }
+  };
+  (0, _react.useEffect)(() => () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+
+  // Filter handlers
+  const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
+  const handleCloseFilterDrawer = () => setIsFilterDrawerVisible(false);
+  const handleFilterChange = function handleFilterChange(key, value) {
+    let action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'change';
+    const updatedFilters = _objectSpread(_objectSpread({}, filterValues), {}, {
+      [key]: value
+    });
+    setFilterValues(updatedFilters);
+
+    // Call onChange callback if provided for real-time filter changes
+    if (onFilterChange) {
+      onFilterChange(key, value, updatedFilters, action);
+    }
+  };
+  const handleApplyFilters = () => {
+    setAppliedFilters(_objectSpread({}, filterValues));
+    setIsFilterDrawerVisible(false);
+    if (onFiltersApply) {
+      onFiltersApply(filterValues);
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, filterValues);
+    }
+  };
+  const handleClearFilters = () => {
+    setFilterValues({});
+    setAppliedFilters({});
+    if (onFiltersClear) {
+      onFiltersClear();
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, {});
+    }
+  };
+
+  // Helper function to render CustomSelect (DRY principle)
+  const renderSelect = (fieldKey, fieldConfig) => {
+    const {
+      placeholder,
+      options = [],
+      loading = false,
+      isApiCallInProgress = false,
+      showSearch: fieldShowSearch = false,
+      filterOption,
+      disabled = false
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    const isLoading = filtersLoading || loading || isApiCallInProgress;
+    return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+      placeholder: placeholder || 'Select an option',
+      value: fieldValue || undefined,
+      options: options,
+      onSelectionChange: val => {
+        // If val is null/undefined, it's a clear action
+        const action = val === null || val === undefined ? 'clear' : 'select';
+        handleFilterChange(fieldKey, val, action);
+      },
+      onSearch: searchText => handleFilterChange(fieldKey, searchText, 'search'),
+      onChange: val => {
+        // Catch clear from Ant Design's onChange (passes through {...props})
+        if (val === undefined || val === null) {
+          handleFilterChange(fieldKey, null, 'clear');
+        }
+      },
+      allowClear: true,
+      loading: isLoading,
+      showSearch: fieldShowSearch,
+      filterOption: filterOption,
+      disabled: disabled
+      // notFoundContent={(!isApiCallInProgress && query?.length < 3) ? "Start Typing atleast 3 characters" : (isApiCallInProgress && query?.length > 0) ? "Loading..." : "No data found"}
+    });
+  };
+
+  // Helper function to render CustomDatePicker (DRY principle)
+  const renderDatePicker = (fieldKey, fieldConfig) => {
+    const {
+      placeholder
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomDatePicker.default, {
+      placeholder: placeholder || 'Select date',
+      value: fieldValue,
+      onChange: date => handleFilterChange(fieldKey, date, 'change')
+    });
+  };
+
+  // Helper function to render CustomRadio.Group (DRY principle)
+  const renderRadioGroup = (fieldKey, fieldConfig) => {
+    const {
+      options = []
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+      value: fieldValue,
+      onChange: e => handleFilterChange(fieldKey, e.target.value, 'change')
+    }, options.map(option => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+      key: option.value,
+      value: option.value,
+      label: option.label
+    })));
+  };
+
+  // Render filter input based on type
+  const renderFilterInput = filter => {
+    const {
+      type,
+      key,
+      fields = []
+    } = filter;
+    switch (type) {
+      case 'radio':
+        return renderRadioGroup(key, filter);
+      case 'select':
+        return renderSelect(key, filter);
+      case 'date':
+        return renderDatePicker(key, filter);
+      case 'dateRange':
+        return /*#__PURE__*/_react.default.createElement(_styles.DateRangeContainer, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
+          key: field.key
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label, field.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderDatePicker(field.key, field))));
+      case 'group':
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterGroup, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
+          key: field.key
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label, field.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), field.type === 'select' && renderSelect(field.key, field), field.type === 'date' && renderDatePicker(field.key, field), field.type === 'radio' && renderRadioGroup(field.key, field))));
+      default:
+        return null;
+    }
+  };
+  const displayData = onSearch || onFiltersApply ? dataSource : filteredData;
+  const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
+  return /*#__PURE__*/_react.default.createElement(_styles.TableWithSearchAndFilterContainer, {
+    className: className
+  }, (showSearch || showFilters) && /*#__PURE__*/_react.default.createElement(_styles.Toolbar, null, showSearch && /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    prefix: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Search.default,
+      size: 20,
+      style: {
+        color: '#8c8c8c'
+      }
+    }),
+    placeholder: searchPlaceholder,
+    value: searchValue,
+    onChange: handleSearchChange,
+    onPressEnter: handleSearchPressEnter,
+    allowClear: true,
+    style: {
+      width: '350px',
+      flexShrink: 0
+    }
+  }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: filterButtonLabel,
+    onClick: handleOpenFilterDrawer,
+    type: "secondary",
+    size: "medium",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _FilterList.default
+      }),
+      position: 'left'
+    }
+  })), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: filterDrawerTitle,
+    placement: "right",
+    isBaseDrawer: true,
+    onClose: handleCloseFilterDrawer,
+    open: isFilterDrawerVisible,
+    visible: isFilterDrawerVisible,
+    closable: false,
+    width: 400
+  }, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerContent, null, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerBody, null, filterConfig.length > 0 ? filterConfig.map(filter => /*#__PURE__*/_react.default.createElement(_styles.FilterSection, {
+    key: filter.key
+  }, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, filter.label, filter.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderFilterInput(filter))) : /*#__PURE__*/_react.default.createElement(_styles.FilterSection, null, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, "No filters configured"))), /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerFooter, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: "Clear All",
+    onClick: handleClearFilters,
+    type: "secondary",
+    size: "medium"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: "Apply Filter",
+    onClick: handleApplyFilters,
+    type: "primary",
+    size: "medium"
+  })))), /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+    rowKey: rowKey,
+    dataSource: displayData,
+    columns: columns,
+    pagination: false,
+    emptyText: emptyText
+  }, restTableProps)), showPagination && totalRecords > pageSize && /*#__PURE__*/_react.default.createElement(_styles.PaginationContainer, null, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: current,
+    pageSize: pageSize,
+    total: totalRecords,
+    onChange: onPaginationChange,
+    onShowSizeChange: onShowSizeChange,
+    pageSizeOptions: pageSizeOptions,
+    showSizeChanger: true,
+    showTotal: true
+  })));
+}
+TableWithSearchAndFilter.propTypes = {
+  tableProps: _propTypes.default.shape({
+    dataSource: _propTypes.default.array,
+    columns: _propTypes.default.array.isRequired,
+    rowKey: _propTypes.default.string,
+    emptyText: _propTypes.default.string
+  }),
+  searchProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    placeholder: _propTypes.default.string,
+    debounceDelay: _propTypes.default.number,
+    searchKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+    onSearch: _propTypes.default.func
+  }),
+  filterProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    config: _propTypes.default.array,
+    onApply: _propTypes.default.func,
+    onClear: _propTypes.default.func,
+    onChange: _propTypes.default.func,
+    loading: _propTypes.default.bool,
+    buttonLabel: _propTypes.default.string,
+    drawerTitle: _propTypes.default.string
+  }),
+  paginationProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    current: _propTypes.default.number,
+    pageSize: _propTypes.default.number,
+    total: _propTypes.default.number,
+    pageSizeOptions: _propTypes.default.array,
+    onChange: _propTypes.default.func,
+    onShowSizeChange: _propTypes.default.func
+  }),
+  className: _propTypes.default.string
+};
+TableWithSearchAndFilter.defaultProps = {
+  tableProps: {
+    dataSource: [],
+    rowKey: 'id',
+    emptyText: 'No data found'
+  },
+  searchProps: {
+    show: true,
+    placeholder: 'Search...',
+    debounceDelay: 500,
+    searchKeys: []
+  },
+  filterProps: {
+    show: true,
+    config: [],
+    buttonLabel: 'Filters',
+    drawerTitle: 'FILTERS'
+  },
+  paginationProps: {
+    show: true,
+    current: 1,
+    pageSize: 10,
+    pageSizeOptions: [10, 20, 50, 100]
+  },
+  className: ''
+};
+var _default = exports.default = TableWithSearchAndFilter;

package/build/components/oa-component-table-with-search-and-filter/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterGroup = exports.FilterDrawerFooter = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.DateRangeContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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 TableWithSearchAndFilterContainer = exports.TableWithSearchAndFilterContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 16px;\n\n  @media screen and (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"])));
+const FilterSection = exports.FilterSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
+const FilterLabel = exports.FilterLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n  margin-bottom: 12px;\n"])));
+const RequiredMark = exports.RequiredMark = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: #ff4d4f;\n  margin-left: 2px;\n  font-weight: 400;\n"])));
+const PaginationContainer = exports.PaginationContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+const FilterDrawerContent = exports.FilterDrawerContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: calc(100vh - 150px);\n"])));
+const FilterDrawerBody = exports.FilterDrawerBody = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow-y: auto;\n  \n  /* Make radio buttons horizontal */\n  .ant-radio-group {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n  \n  /* Ensure radio wrapper is visible - override line-height: 0 */\n  .ant-radio-wrapper {\n    display: inline-flex !important;\n    align-items: center !important;\n    margin-right: 0 !important;\n    line-height: 1.5 !important;\n  }\n  \n  /* Ensure radio label text is visible */\n  .ant-radio-wrapper span:not(.ant-radio) {\n    line-height: 1.5 !important;\n  }\n  \n  .ant-radio-wrapper p {\n    margin: 0;\n    line-height: 1.5 !important;\n  }\n"])));
+const FilterDrawerFooter = exports.FilterDrawerFooter = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 0;\n  border-top: 1px solid #e8e8e8;\n  margin-top: auto;\n"])));
+const FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n"])));
+const FilterSubLabelText = exports.FilterSubLabelText = _styledComponents.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content, #212121);\n"])));
+const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));