@3sc/common-component 0.0.2 → 0.0.3

package/dist/components/alert/table-detail.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _Constant = require("../../utils/Constant");
+var _sortIcon = _interopRequireDefault(require("../sort-icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TableDetail = _ref => {
+  var _Object$entries;
+  let {
+    data,
+    handleSort,
+    sortDir,
+    sortKey
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("table", {
+    className: "table"
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, (_Object$entries = Object.entries(_Constant.detailsHeadObj)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map((_ref2, index) => {
+    let [col, colKey] = _ref2;
+    return /*#__PURE__*/_react.default.createElement("th", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: () => handleSort(colKey)
+    }, col, /*#__PURE__*/_react.default.createElement(_sortIcon.default, {
+      column: colKey,
+      sortKey: sortKey,
+      sortDir: sortDir
+    })));
+  }))), /*#__PURE__*/_react.default.createElement("tbody", null, data.map((item, index) => /*#__PURE__*/_react.default.createElement("tr", {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement("td", null, item.sku_name), /*#__PURE__*/_react.default.createElement("td", null, item.node), /*#__PURE__*/_react.default.createElement("td", null, item.channel_name)))));
+};
+var _default = exports.default = TableDetail;

package/dist/components/input-field/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+const _excluded = ["adornmentIcon"];
+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 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+const CustomizeTextField = (0, _styles.styled)(_material.TextField)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    "& .MuiInputBase-root": {
+      height: "3.52rem"
+    },
+    "& .MuiFormLabel-root": {
+      color: "".concat(theme.palette.input.border, " !important"),
+      fontSize: "1rem",
+      marginTop: "0.4rem"
+    },
+    "& label.Mui-focused": {
+      color: theme.palette.input.color
+    },
+    "& .MuiInput-underline:after": {
+      borderBottomColor: theme.palette.input.border,
+      borderBottomWidth: "0.1rem"
+    },
+    "& .MuiOutlinedInput-root": {
+      "& fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      },
+      "&:hover fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      }
+    }
+  };
+});
+const InputField = _ref2 => {
+  let {
+      adornmentIcon
+    } = _ref2,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(CustomizeTextField, _extends({}, otherProps, {
+    InputProps: _objectSpread({}, adornmentIcon ? adornmentIcon : {})
+  }));
+};
+var _default = exports.default = InputField;

package/dist/components/my-dialog.js

@@ -9,8 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
 var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _colors = require("@mui/material/colors");
-const _excluded = ["title", "children", "onRefresh", "loading", "handleShowAll", "handleMarkAllAsRead", "isMarkAllAsRead"];
+var _Constant = require("../utils/Constant");
+const _excluded = ["title", "subTitle", "children", "onRefresh", "onClose", "loading", "handleShowAll", "handleMarkAllAsRead", "isMarkAllAsRead", "width", "headerIconType", "isDialogActionShow", "className"];
 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; }
@@ -21,7 +23,6 @@ const CustomizeDialog = (0, _styles.styled)(_material.Dialog)(_ref => {
   } = _ref;
   return {
     "& .MuiPaper-root": {
-      width: 350,
       borderRadius: 8,
       border: "1px solid ".concat(_colors.grey[50]),
       boxShadow: theme.shadows[5]
@@ -37,38 +38,75 @@ const CustomizeDialog = (0, _styles.styled)(_material.Dialog)(_ref => {
 const MyDialog = _ref2 => {
   let {
       title,
+      subTitle,
       children,
       onRefresh,
+      onClose,
       loading,
       handleShowAll,
       handleMarkAllAsRead,
-      isMarkAllAsRead
+      isMarkAllAsRead,
+      width,
+      headerIconType,
+      isDialogActionShow,
+      className
     } = _ref2,
     otherProps = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement(CustomizeDialog, _extends({}, otherProps, {
-    className: "notification-dialog"
+  const headerIcon = () => {
+    switch (headerIconType) {
+      case _Constant.HEADER_ICON_TYPE.REFRESH:
+        return /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+          disabled: loading,
+          "aria-label": "close",
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "primary.main"
+          },
+          onClick: onRefresh
+        }, /*#__PURE__*/_react.default.createElement(_Refresh.default, {
+          fontSize: "medium"
+        }));
+      case _Constant.HEADER_ICON_TYPE.CLOSE:
+        return /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+          "aria-label": "close",
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "primary.main"
+          },
+          onClick: onClose
+        }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+          fontSize: "medium"
+        }));
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(CustomizeDialog, _extends({
+    maxWidth: "md",
+    onClose: onClose
+  }, otherProps, {
+    className: ["notification-dialog", className].join(" ")
   }), /*#__PURE__*/_react.default.createElement(_material.DialogTitle, {
     sx: {
-      p: 1
+      p: 1,
+      display: "flex"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      gap: 1,
+      display: "flex"
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h6",
     className: "title"
-  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    disabled: loading,
-    "aria-label": "close",
-    sx: {
-      position: "absolute",
-      right: 8,
-      top: 8,
-      color: "primary.main"
-    },
-    onClick: onRefresh
-  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, {
-    fontSize: "small"
-  })))), /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
-    dividers: true
-  }, children), /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    className: "title sub-title"
+  }, subTitle)), headerIcon())), children, isDialogActionShow && /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
     className: "dialog-action"
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: handleShowAll,

package/dist/components/my-pagination/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
+var _material = require("@mui/material");
+var _logs = _interopRequireDefault(require("./logs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MyPagination = _ref => {
+  let {
+    page,
+    rowPerPage,
+    total,
+    handleChangePage,
+    isLogo,
+    isMarkAllRead
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+    count: Math.ceil(total / rowPerPage),
+    page: page,
+    onChange: (_, page) => {
+      handleChangePage(page);
+    },
+    sx: {
+      margin: "1rem 0",
+      "& .MuiPaginationItem-root": {
+        fontSize: "1.25rem",
+        "& .MuiSvgIcon-root": {
+          fontSize: "2.2rem",
+          color: "primary.main"
+        }
+      }
+    },
+    color: "primary",
+    shape: "rounded",
+    showFirstButton: true,
+    showLastButton: true
+  }), isLogo && /*#__PURE__*/_react.default.createElement(_logs.default, {
+    start: page * rowPerPage - rowPerPage + 1,
+    end: page * rowPerPage > total ? total : page * rowPerPage,
+    total: total
+  }), isMarkAllRead && /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    className: "view-all"
+  }, "Mark Read"));
+};
+var _default = exports.default = MyPagination;

package/dist/components/my-pagination/logs.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Logs = _ref => {
+  let {
+    start,
+    end,
+    total
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    component: "h1",
+    sx: {
+      fontSize: "1.5rem",
+      fontWeight: 500
+    }
+  }, start, " - ", end, " of ", total, " logs");
+};
+var _default = exports.default = Logs;

package/dist/components/notification-card/card.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _colors = require("@mui/material/colors");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Card = _ref => {
+  let {
+    type,
+    title,
+    subTitle,
+    subType,
+    isRead,
+    handleShowDetails,
+    handleRead,
+    isCheckBox,
+    isSubType
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "card"
+  }, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "start",
+    gap: 1
+  }, type && /*#__PURE__*/_react.default.createElement(_material.Badge, {
+    color: type,
+    variant: "dot",
+    className: "badge"
+  }), isCheckBox && /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+    disabled: isRead
+  }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    component: "span",
+    className: ["title-card", isRead && "read"].join(" ")
+  }, title)), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "start",
+    gap: 1
+  }, isSubType && /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    label: subType,
+    variant: "filled",
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: "primary.main",
+      ml: 5
+    }
+  }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body2",
+    component: "div",
+    className: ["sub-title", isRead && "read"].join(" ")
+  }, subTitle)), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "end",
+    gap: 1
+  }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    onClick: handleShowDetails,
+    label: "Show Details",
+    component: "button",
+    variant: "filled",
+    clickable: true,
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: _colors.blue[500]
+    }
+  }), !isRead && /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    onClick: handleRead,
+    label: "Mark as Read",
+    component: "button",
+    variant: "filled",
+    clickable: true,
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: "primary.main"
+    }
+  })));
+};
+var _default = exports.default = Card;
+Card.propTypes = {
+  type: _propTypes.default.string,
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.string,
+  isRead: _propTypes.default.bool,
+  handleShowDetails: _propTypes.default.func,
+  handleRead: _propTypes.default.func
+};

package/dist/components/notification-card/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _card = _interopRequireDefault(require("./card"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _commonFun = require("../../helper/common-fun");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const NotificationCard = _ref => {
+  let {
+    data,
+    handleRead: _handleRead,
+    handleShowDetails: _handleShowDetails
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, null, data.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_card.default, {
+      key: index,
+      type: "success",
+      title: item.message,
+      subTitle: (0, _commonFun.fullFormatDate)(item.createdAt),
+      isRead: item.isRead,
+      handleShowDetails: () => _handleShowDetails(item.id),
+      handleRead: () => _handleRead(item.id)
+    });
+  }));
+};
+var _default = exports.default = NotificationCard;
+NotificationCard.propTypes = {
+  data: _propTypes.default.array,
+  handleRead: _propTypes.default.func,
+  handleShowDetails: _propTypes.default.func
+};

package/dist/components/select-field/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const BootstrapInput = (0, _styles.styled)(_material.InputBase)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    "& .MuiInputBase-input": {
+      color: theme.palette.input.border,
+      borderRadius: 4,
+      position: "relative",
+      backgroundColor: theme.palette.background.paper,
+      border: "1px solid ".concat(theme.palette.input.border),
+      fontSize: ".9rem",
+      fontWeight: 500,
+      fontFamily: "Montserrat, sans-serif",
+      padding: "11px 26px 10px 12px",
+      transition: theme.transitions.create(["border-color", "box-shadow"])
+    }
+  };
+});
+const SelectField = _ref2 => {
+  let {
+    option,
+    value,
+    handleSelectChange
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    sx: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Select, {
+    onChange: handleSelectChange,
+    value: value,
+    size: "small",
+    input: /*#__PURE__*/_react.default.createElement(BootstrapInput, null),
+    sx: {
+      "& .MuiSelected": {
+        color: "primary.main"
+      }
+    }
+  }, option.map((item, index) => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    key: index,
+    value: item.value
+  }, item.label))));
+};
+var _default = exports.default = SelectField;

package/dist/components/sort-icon/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SortIcon = _ref => {
+  let {
+    sortKey,
+    sortDir,
+    column
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sortKey === column ? !sortDir ? /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-arrow-up",
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-arrow-down",
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-sort",
+    "aria-hidden": "true"
+  })));
+};
+var _default = exports.default = SortIcon;

package/dist/config/my-context.js

@@ -8,6 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TasksDispatchContext = exports.TasksContext = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
+var _ActionType = _interopRequireDefault(require("../utils/ActionType"));
+var _ErrorMsg = _interopRequireDefault(require("../utils/ErrorMsg"));
+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 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; }
@@ -31,27 +34,31 @@ function MyContext(_ref) {
 var _default = exports.default = MyContext;
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "loading":
+    case _ActionType.default.LOADING:
       return _objectSpread(_objectSpread({}, tasks), {}, {
         loading: action.loading
       });
-    case "success":
+    case _ActionType.default.SUCCESS:
       {
         return _objectSpread(_objectSpread({}, tasks), {}, {
           data: action.data
         });
       }
-    case "error":
+    case _ActionType.default.MARK_ALL_AS_READ:
+      return _objectSpread(_objectSpread({}, tasks), {}, {
+        isMarkAllAsRead: action.isMarkAllAsRead
+      });
+    case _ActionType.default.ERROR:
       return _objectSpread(_objectSpread({}, tasks), {}, {
         error: action.error
       });
     default:
-      throw new Error("Unhandled action type: ".concat(action));
+      throw new Error("".concat(_ErrorMsg.default.UNHANDLED, ": ").concat(action));
   }
 }
 const initialTasks = {
   loading: false,
   data: [],
   error: "",
-  isMarkAllAsRead: true
+  isMarkAllAsRead: false
 };

package/dist/config/theme.js

@@ -12,6 +12,10 @@ const theme = (0, _material.createTheme)({
     },
     secondary: {
       main: "#1D1D1B"
+    },
+    input: {
+      color: "rgba(0, 0, 0, 0.87)",
+      border: "#ACB2BA"
     }
   }
 });

package/dist/helper/common-fun.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLocalStorage = void 0;
+exports.sortByKeyArr = exports.searchByKeyArr = exports.getLocalStorage = exports.fullFormatDate = exports.filterAlertData = exports.detectMarkAllAsRead = exports.dataSlice = exports.createPayloadMarkAllAsRead = void 0;
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.trim.js");
 const getLocalStorage = key => {
   const value = localStorage.getItem(key);
   if (value) {
@@ -11,4 +15,76 @@ const getLocalStorage = key => {
   }
   return "";
 };
-exports.getLocalStorage = getLocalStorage;
+exports.getLocalStorage = getLocalStorage;
+const fullFormatDate = date => {
+  const currentDate = new Date(date);
+  const options = {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  };
+  const formattedDate = currentDate.toLocaleString("en-US", options);
+  return formattedDate;
+};
+exports.fullFormatDate = fullFormatDate;
+const filterAlertData = data => {
+  const newData = data.sort((a, b) => {
+    if (a.isRead === b.isRead) {
+      return 0;
+    } else if (b.isRead) {
+      return -1;
+    } else {
+      return 1;
+    }
+  }).slice(0, 9);
+  return newData;
+};
+exports.filterAlertData = filterAlertData;
+const detectMarkAllAsRead = data => {
+  let count = 0;
+  for (let i = 0; i < data.length; i++) {
+    if (!data[i].isRead) count++;
+    ;
+  }
+  return count;
+};
+exports.detectMarkAllAsRead = detectMarkAllAsRead;
+const createPayloadMarkAllAsRead = data => {
+  const payload = [];
+  data.forEach(item => {
+    if (!item.isRead) {
+      payload.push(item.id);
+    }
+  });
+  return payload;
+};
+exports.createPayloadMarkAllAsRead = createPayloadMarkAllAsRead;
+const searchByKeyArr = (data, keyArr, value) => {
+  const newData = data.filter(item => {
+    return keyArr.some(key => {
+      return item[key].toLowerCase().includes(value.trim().toLowerCase());
+    });
+  });
+  return newData;
+};
+exports.searchByKeyArr = searchByKeyArr;
+const sortByKeyArr = (data, key, order) => {
+  const newData = data.sort((a, b) => {
+    if (order === "asc") {
+      return a[key].toLowerCase().localeCompare(b[key].toLowerCase());
+    } else {
+      return b[key].toLowerCase().localeCompare(a[key].toLowerCase());
+    }
+  });
+  return newData;
+};
+exports.sortByKeyArr = sortByKeyArr;
+const dataSlice = (data, page, rowPerPage) => {
+  const newData = data.slice((page - 1) * rowPerPage, page * rowPerPage);
+  return newData;
+};
+exports.dataSlice = dataSlice;

package/dist/sass/_colors.scss

@@ -1,2 +1,7 @@
 $primary-color: #E94F1C;
-$secondary-color: #1D1D1B;
+$secondary-color: #1D1D1B;
+$light-grey: #ACB2BA;
+$table-header: #efefef;
+$table-td-color: #212529;
+
+// other variables