@3sc/common-component 0.0.2 → 0.0.4

package/dist/App.js

@@ -10,10 +10,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function App() {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "App"
-  }, "hello", /*#__PURE__*/_react.default.createElement(_modules.Notification, {
-    tenantId: "e9cbadf0-a2c3-4f0b-b358-e9368ccd093c",
-    buId: "1b97f147-5c15-4bd4-9d5d-8a63129caf3d",
-    snopId: "dee67439-9306-408a-b79c-99c4265dc5a3"
-  }));
+  }, "hello", /*#__PURE__*/_react.default.createElement(_modules.Notification, null));
 }
-var _default = exports.default = App;
+var _default = exports.default = App; // tenantId="9a33965c-162a-4089-8cb1-5e631e3cdd8a"
+// buId="d628f9a3-1968-4102-b578-727616b382f3"
+// snopId="13a53238-f493-41a5-9d17-7b95aeed7964"

package/dist/components/alert/alert-body.js

@@ -0,0 +1,153 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _ErrorMsg = _interopRequireDefault(require("../../utils/ErrorMsg"));
+var _inputField = _interopRequireDefault(require("../input-field"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+var _Constant = require("../../utils/Constant");
+var _card = _interopRequireDefault(require("../notification-card/card"));
+var _commonFun = require("../../helper/common-fun");
+var _myPagination = _interopRequireDefault(require("../my-pagination"));
+var _logs = _interopRequireDefault(require("../my-pagination/logs"));
+var _reactSelect = _interopRequireDefault(require("../select-field/react-select"));
+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; }
+const AlertBody = _ref => {
+  let {
+    loading,
+    isEmpty,
+    data,
+    handleShowDetails: _handleShowDetails,
+    handleRead: _handleRead,
+    handleRefresh
+  } = _ref;
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [page, setPage] = (0, _react.useState)(1);
+  const [rowPerPage, setRowPerPage] = (0, _react.useState)(10);
+  const [total, setTotal] = (0, _react.useState)(0);
+  const [newData, setNewData] = (0, _react.useState)([]);
+  const [selectedAlert, setSelectedAlert] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (inputValue) {
+      const newData = (0, _commonFun.searchByKeyArr)(data, _Constant.alertSearchKey, inputValue);
+      setNewData((0, _commonFun.dataSlice)(newData, page, rowPerPage));
+      setTotal(newData.length);
+      return;
+    }
+    setNewData((0, _commonFun.dataSlice)(data, page, rowPerPage));
+    setTotal(data.length);
+  }, [inputValue, data, page, rowPerPage]);
+  const handleSelectChange = e => {
+    setPage(1);
+    setRowPerPage(e.value);
+  };
+  const handleChangePage = page => {
+    setPage(page);
+  };
+  const handleSearch = e => {
+    const value = e.target.value;
+    if (value) setPage(1);
+    setInputValue(value);
+  };
+
+  // checkbox handler
+  const handleCheckboxChange = (e, value) => {
+    const checked = e.target.checked;
+    if (checked) {
+      setSelectedAlert(prev => [...prev, value]);
+    } else {
+      setSelectedAlert(prev => prev.filter(item => item !== value));
+    }
+  };
+  const handleAllRead = () => {
+    _handleRead(selectedAlert);
+    setSelectedAlert([]);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
+    dividers: true,
+    sx: {
+      pt: "0 !important"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: loading || isEmpty ? {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 320
+    } : {}
+  }, loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, null) : isEmpty ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: "no-record"
+  }, _ErrorMsg.default.NRF) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "sticky-input-select"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: "flex",
+      gap: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_inputField.default, {
+    value: inputValue,
+    onChange: handleSearch,
+    label: "Search",
+    focused: true,
+    adornmentIcon: {
+      startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+        position: "start"
+      }, /*#__PURE__*/_react.default.createElement(_Search.default, null))
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    value: {
+      value: rowPerPage,
+      label: "Show ".concat(rowPerPage, " Rows")
+    },
+    option: _Constant.optionRow,
+    handleSelectChange: handleSelectChange
+  }), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    color: "primary",
+    onClick: handleRefresh
+  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, {
+    fontSize: "medium"
+  }))), /*#__PURE__*/_react.default.createElement(_logs.default, {
+    start: page * rowPerPage - rowPerPage + 1,
+    end: page * rowPerPage > total ? total : page * rowPerPage,
+    total: total
+  })), newData.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_card.default, {
+      key: index,
+      isCheckBox: true,
+      title: item.message,
+      subTitle: (0, _commonFun.fullFormatDate)(item.createdAt),
+      isRead: item.isRead,
+      handleShowDetails: () => _handleShowDetails(item.id),
+      handleRead: () => _handleRead([item.id]),
+      subType: item.sub_type,
+      isSubType: true,
+      selectedAlert: selectedAlert,
+      id: item.id,
+      handleCheckboxChange: handleCheckboxChange
+    });
+  })))), !(loading || isEmpty) && /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
+    sx: {
+      justifyContent: "space-between",
+      gap: 1
+    },
+    className: "action-show-all-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_myPagination.default, {
+    page: page,
+    rowPerPage: rowPerPage,
+    total: total,
+    handleChangePage: handleChangePage,
+    isMarkAllRead: true,
+    selectedAlert: selectedAlert,
+    handleAllRead: handleAllRead
+  })));
+};
+var _default = exports.default = AlertBody;

package/dist/components/alert/details-body.js

@@ -0,0 +1,128 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _ErrorMsg = _interopRequireDefault(require("../../utils/ErrorMsg"));
+var _inputField = _interopRequireDefault(require("../input-field"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _Constant = require("../../utils/Constant");
+var _myPagination = _interopRequireDefault(require("../my-pagination"));
+var _tableDetail = _interopRequireDefault(require("./table-detail"));
+var _commonFun = require("../../helper/common-fun");
+var _reactSelect = _interopRequireDefault(require("../select-field/react-select"));
+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; }
+const DetailsBody = _ref => {
+  let {
+    loading,
+    isEmpty,
+    data
+  } = _ref;
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [page, setPage] = (0, _react.useState)(1);
+  const [rowPerPage, setRowPerPage] = (0, _react.useState)(10);
+  const [total, setTotal] = (0, _react.useState)(0);
+  const [newData, setNewData] = (0, _react.useState)([]);
+  const [sortDir, setSortDir] = (0, _react.useState)(false);
+  const [sortKey, setSortKey] = (0, _react.useState)("");
+  (0, _react.useEffect)(() => {
+    if (inputValue || sortKey) {
+      const newData = (0, _commonFun.searchByKeyArr)(data, _Constant.detailsSearchKey, inputValue);
+      if (sortKey) {
+        const sortedData = (0, _commonFun.sortByKeyArr)(newData, sortKey, sortDir ? "asc" : "desc");
+        setNewData((0, _commonFun.dataSlice)(sortedData, page, rowPerPage));
+        setTotal(sortedData.length);
+        return;
+      }
+      setNewData((0, _commonFun.dataSlice)(newData, page, rowPerPage));
+      setTotal(newData.length);
+      return;
+    }
+    setNewData((0, _commonFun.dataSlice)(data, page, rowPerPage));
+    setTotal(data.length);
+  }, [inputValue, data, page, rowPerPage, sortDir, sortKey]);
+  const handleSelectChange = e => {
+    setPage(1);
+    setRowPerPage(e.value);
+  };
+  const handleChangePage = page => {
+    setPage(page);
+  };
+  const handleSearch = e => {
+    const value = e.target.value;
+    if (value) setPage(1);
+    setInputValue(value);
+  };
+
+  // sort function
+  const handleSort = key => {
+    setSortDir(!sortDir);
+    setSortKey(key);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
+    dividers: true,
+    sx: {
+      pt: "0 !important"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: loading || isEmpty ? {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 320
+    } : {}
+  }, loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, null) : isEmpty ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: "no-record"
+  }, _ErrorMsg.default.NRF) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "sticky-input-select"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: "flex",
+      gap: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_inputField.default, {
+    value: inputValue,
+    onChange: handleSearch,
+    label: "Search",
+    focused: true,
+    adornmentIcon: {
+      startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+        position: "start"
+      }, /*#__PURE__*/_react.default.createElement(_Search.default, null))
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    value: {
+      value: rowPerPage,
+      label: "Show ".concat(rowPerPage, " Rows")
+    },
+    option: _Constant.optionRow,
+    handleSelectChange: handleSelectChange
+  }))), newData.length === 0 ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: "no-record"
+  }, _ErrorMsg.default.NRF) : /*#__PURE__*/_react.default.createElement(_tableDetail.default, {
+    data: newData,
+    handleSort: handleSort,
+    sortDir: sortDir,
+    sortKey: sortKey
+  })))), !(loading || isEmpty) && /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
+    sx: {
+      justifyContent: "space-between",
+      gap: 1
+    },
+    className: "action-show-all-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_myPagination.default, {
+    page: page,
+    rowPerPage: rowPerPage,
+    total: total,
+    handleChangePage: handleChangePage,
+    isLogo: true
+  })));
+};
+var _default = exports.default = DetailsBody;

package/dist/components/alert/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.promise.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _bell = _interopRequireDefault(require("../bell"));
@@ -15,15 +18,22 @@ require("./style.scss");
 var _myContext = require("../../config/my-context");
 var _notification = require("../../services/notification");
 var _StatusCode = _interopRequireDefault(require("../../utils/StatusCode"));
+var _notificationCard = _interopRequireDefault(require("../notification-card"));
+var _commonFun = require("../../helper/common-fun");
+var _ActionType = _interopRequireDefault(require("../../utils/ActionType"));
+var _ErrorMsg = _interopRequireDefault(require("../../utils/ErrorMsg"));
+var _Constant = require("../../utils/Constant");
+var _alertBody = _interopRequireDefault(require("./alert-body"));
+var _detailsBody = _interopRequireDefault(require("./details-body"));
 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; }
-const Alert = _ref => {
-  let {
-    tenantId,
-    buId,
-    snopId
-  } = _ref;
+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); }
+const Alert = () => {
   const dispatch = (0, _react.useContext)(_myContext.TasksDispatchContext);
   const {
     loading,
@@ -31,77 +41,223 @@ const Alert = _ref => {
     isMarkAllAsRead
   } = (0, _react.useContext)(_myContext.TasksContext);
   const [open, setOpen] = (0, _react.useState)(false);
+  const [showAllAlert, setShowAllAlert] = (0, _react.useState)(false);
+  const [showDetails, setShowDetails] = (0, _react.useState)(false);
+  const [detailsData, setDetailsData] = (0, _react.useState)({});
+  const isEmpty = data.length === 0;
   const fetchNotification = (0, _react.useCallback)(async () => {
     dispatch({
-      type: "loading",
+      type: _ActionType.default.LOADING,
       loading: true
     });
     dispatch({
-      type: "success",
+      type: _ActionType.default.SUCCESS,
       data: []
     });
+    dispatch({
+      type: _ActionType.default.MARK_ALL_AS_READ,
+      isMarkAllAsRead: {
+        count: 0,
+        boo: false
+      }
+    });
     try {
-      const res = await (0, _notification.getNotification)({
-        tenantId,
-        buId,
-        snopId
-      });
+      const res = await (0, _notification.getNotification)();
       if (res.status === _StatusCode.default.OK) {
-        var _res$data;
+        var _res$data, _res$data2;
         dispatch({
-          type: "success",
+          type: _ActionType.default.SUCCESS,
           data: ((_res$data = res.data) === null || _res$data === void 0 || (_res$data = _res$data.responseData) === null || _res$data === void 0 ? void 0 : _res$data.response) || []
         });
+        const isMarkAll = (0, _commonFun.detectMarkAllAsRead)(((_res$data2 = res.data) === null || _res$data2 === void 0 || (_res$data2 = _res$data2.responseData) === null || _res$data2 === void 0 ? void 0 : _res$data2.response) || []);
+        dispatch({
+          type: _ActionType.default.MARK_ALL_AS_READ,
+          isMarkAllAsRead: {
+            count: isMarkAll,
+            boo: isMarkAll > 0
+          }
+        });
       }
     } catch (err) {
       dispatch({
-        type: "error",
-        error: "Something went wrong!"
+        type: _ActionType.default.ERROR,
+        error: _ErrorMsg.default.SWR
       });
     } finally {
       dispatch({
-        type: "loading",
+        type: _ActionType.default.LOADING,
         loading: false
       });
     }
-  }, [tenantId, buId, snopId, dispatch]);
+  }, [dispatch]);
   (0, _react.useEffect)(() => {
     fetchNotification();
   }, [fetchNotification]);
-  const handleOpen = () => {
-    setOpen(!open);
-  };
+  const handleOpen = () => setOpen(!open);
   const handleClose = () => setOpen(!open);
+  const handleShowAllAlert = () => setShowAllAlert(!showAllAlert);
+  const handleHideAllAlert = () => setShowAllAlert(!showAllAlert);
+  const handleOpenDetails = () => setShowDetails(!showDetails);
+  const handleHideDetails = () => setShowDetails(!showDetails);
   const handleRefresh = () => {
     fetchNotification();
   };
-  const handleShowAll = () => {};
-  const handleMarkAllAsRead = () => {};
-  console.log("loading", loading, data);
+  const handleShowAll = () => {
+    handleShowAllAlert();
+  };
+  const handleShowDetails = id => {
+    const filterData = data.find(item => item.id === id);
+    setDetailsData(filterData);
+    handleOpenDetails();
+  };
+
+  // mark as read function
+  const handleRead = async id => {
+    if (id.length === 0) return;
+    dispatch({
+      type: _ActionType.default.LOADING,
+      loading: true
+    });
+    try {
+      const res = await (0, _notification.putNotification)(id);
+      if (res.status === _StatusCode.default.OK) {
+        let count = 0;
+        const newData = data.map(item => {
+          if (!item.isRead) count++;
+          if (id.includes(item.id)) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isRead: true
+            });
+          }
+          return item;
+        });
+        dispatch({
+          type: _ActionType.default.MARK_ALL_AS_READ,
+          isMarkAllAsRead: {
+            count: count,
+            boo: count > 0
+          }
+        });
+        dispatch({
+          type: _ActionType.default.SUCCESS,
+          data: newData
+        });
+      }
+    } catch (e) {
+      dispatch({
+        type: _ActionType.default.ERROR,
+        error: _ErrorMsg.default.SWR
+      });
+    } finally {
+      dispatch({
+        type: _ActionType.default.LOADING,
+        loading: false
+      });
+    }
+  };
+
+  // mark all as read function
+  const handleMarkAllAsRead = async () => {
+    const payload = (0, _commonFun.createPayloadMarkAllAsRead)(data);
+    dispatch({
+      type: _ActionType.default.LOADING,
+      loading: true
+    });
+    try {
+      const res = await (0, _notification.putNotification)(payload);
+      if (res.status === _StatusCode.default.OK) {
+        const newData = data.map(item => {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            isRead: true
+          });
+        });
+        dispatch({
+          type: _ActionType.default.SUCCESS,
+          data: newData
+        });
+        dispatch({
+          type: _ActionType.default.MARK_ALL_AS_READ,
+          isMarkAllAsRead: {
+            count: 0,
+            boo: false
+          }
+        });
+      }
+    } catch (e) {
+      dispatch({
+        type: _ActionType.default.ERROR,
+        error: _ErrorMsg.default.SWR
+      });
+    } finally {
+      dispatch({
+        type: _ActionType.default.LOADING,
+        loading: false
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       display: "flex",
       justifyContent: "center"
     }
   }, /*#__PURE__*/_react.default.createElement(_bell.default, {
-    count: (data === null || data === void 0 ? void 0 : data.length) || 0,
+    count: isMarkAllAsRead.count,
     handleClick: handleOpen
   })), /*#__PURE__*/_react.default.createElement(_myDialog.default, {
     title: "Alerts",
     open: open,
-    loading: loading || false,
-    isMarkAllAsRead: isMarkAllAsRead || false,
+    loading: loading,
+    isMarkAllAsRead: isMarkAllAsRead,
     onClose: handleClose,
     onRefresh: handleRefresh,
     handleShowAll: handleShowAll,
-    handleMarkAllAsRead: handleMarkAllAsRead
+    handleMarkAllAsRead: handleMarkAllAsRead,
+    headerIconType: _Constant.HEADER_ICON_TYPE.REFRESH,
+    isDialogActionShow: true,
+    className: "alert-dialog-main"
+  }, /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
+    dividers: true
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: {
+    sx: loading || isEmpty ? {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       height: 320
+    } : {
+      height: 320
     }
-  }, loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, null) : /*#__PURE__*/_react.default.createElement(_material.Box, null, "Alert"))));
+  }, loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, null) : isEmpty ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: "no-record"
+  }, _ErrorMsg.default.NRF) : /*#__PURE__*/_react.default.createElement(_notificationCard.default, {
+    data: (0, _commonFun.filterAlertData)(data),
+    handleRead: handleRead,
+    handleShowDetails: handleShowDetails
+  })))), /*#__PURE__*/_react.default.createElement(_myDialog.default, {
+    title: "Alerts",
+    open: showAllAlert,
+    loading: loading,
+    onClose: handleHideAllAlert,
+    onRefresh: handleRefresh,
+    headerIconType: _Constant.HEADER_ICON_TYPE.CLOSE,
+    className: "alert-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_alertBody.default, {
+    loading: loading,
+    isEmpty: isEmpty,
+    data: data,
+    handleRefresh: handleRefresh,
+    handleShowDetails: handleShowDetails,
+    handleRead: handleRead
+  })), /*#__PURE__*/_react.default.createElement(_myDialog.default, {
+    title: detailsData === null || detailsData === void 0 ? void 0 : detailsData.message,
+    subTitle: detailsData === null || detailsData === void 0 ? void 0 : detailsData.remark,
+    open: showDetails,
+    onClose: handleHideDetails,
+    headerIconType: _Constant.HEADER_ICON_TYPE.CLOSE,
+    className: "alert-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_detailsBody.default, {
+    loading: loading,
+    isEmpty: isEmpty,
+    data: (detailsData === null || detailsData === void 0 ? void 0 : detailsData.notificationDetails) || []
+  })));
 };
 var _default = exports.default = Alert;