@3sc/common-component 0.0.2 → 0.0.3

package/dist/App.js

@@ -11,9 +11,9 @@ 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"
+    tenantId: "9a33965c-162a-4089-8cb1-5e631e3cdd8a",
+    buId: "d628f9a3-1968-4102-b578-727616b382f3",
+    snopId: "13a53238-f493-41a5-9d17-7b95aeed7964"
   }));
 }
 var _default = exports.default = App;

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

@@ -0,0 +1,122 @@
+"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 _selectField = _interopRequireDefault(require("../select-field"));
+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"));
+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)([]);
+  (0, _react.useEffect)(() => {
+    setTotal(data.length);
+  }, [data]);
+  const handleSelectChange = e => {
+    const value = e.target.value;
+    console.log(value);
+  };
+  const handleChangePage = page => {
+    console.log(page);
+  };
+  const handleSearch = e => {
+    const value = e.target.value;
+    setInputValue(value);
+  };
+  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(_selectField.default, {
+    value: rowPerPage,
+    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,
+    end: rowPerPage,
+    total: total
+  })), data.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
+    });
+  })))), !(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
+  })));
+};
+var _default = exports.default = AlertBody;

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

@@ -0,0 +1,126 @@
+"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 _selectField = _interopRequireDefault(require("../select-field"));
+var _Constant = require("../../utils/Constant");
+var _myPagination = _interopRequireDefault(require("../my-pagination"));
+var _tableDetail = _interopRequireDefault(require("./table-detail"));
+var _commonFun = require("../../helper/common-fun");
+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 => {
+    const value = e.target.value;
+    setPage(1);
+    setRowPerPage(Number(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(_selectField.default, {
+    value: rowPerPage,
+    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
@@ -15,9 +16,21 @@ 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; }
+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 = _ref => {
   let {
     tenantId,
@@ -31,15 +44,23 @@ 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: 0
+    });
     try {
       const res = await (0, _notification.getNotification)({
         tenantId,
@@ -47,20 +68,25 @@ const Alert = _ref => {
         snopId
       });
       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: isMarkAll
+        });
       }
     } 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
       });
     }
@@ -68,40 +94,160 @@ const Alert = _ref => {
   (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) return;
+    dispatch({
+      type: _ActionType.default.LOADING,
+      loading: true
+    });
+    try {
+      const res = await (0, _notification.putNotification)([id]);
+      if (res.status === _StatusCode.default.OK) {
+        const newData = data.map(item => {
+          if (item.id === id) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isRead: true
+            });
+          }
+          return item;
+        });
+        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: false
+        });
+      }
+    } catch (e) {
+      dispatch({
+        type: _ActionType.default.ERROR,
+        error: _ErrorMsg.default.SWR
+      });
+    } finally {
+      dispatch({
+        type: _ActionType.default.LOADING,
+        loading: false
+      });
+    }
+  };
+  console.log(_ActionType.default.LOADING, isMarkAllAsRead, loading, data);
   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 || 0,
     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;

package/dist/components/alert/style.scss

@@ -3,8 +3,16 @@
   .title {
     color: $secondary-color;
     font-family: Montserrat, sans-serif;
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     font-weight: 600;
+    width: 95%;
+    line-height: 1.2;
+  }
+
+  .sub-title {
+    color: $primary-color;
+    font-weight: 500;
+    margin-top: 0.5rem;
   }
 
   .dialog-action {
@@ -13,10 +21,146 @@
     justify-content: space-between;
 
     .view-all {
-      color: #1d1d1b;
+      color: $secondary-color;
       font-family: Montserrat, sans-serif;
       font-weight: 500;
       text-transform: initial;
+      font-size: 1.2rem;
+    }
+  }
+
+  .card {
+    &:not(:last-child) {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      padding-bottom: 0.5rem;
+    }
+    padding: 0.5rem 0;
+
+    .badge {
+      margin-top: 0.6rem;
+    }
+
+    .title-card {
+      color: $secondary-color;
+      font-family: Montserrat, sans-serif;
+      font-size: 1rem;
+      font-weight: 600;
+      max-height: 2.625rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .sub-title {
+      font-size: 1rem;
+      color: $light-grey;
+      font-family: Montserrat, sans-serif;
+      font-weight: 600;
+      text-align: right;
+      margin: 0.2rem 0;
+    }
+
+    .read {
+      font-weight: 400;
+    }
+  }
+}
+
+.alert-dialog-main {
+  .MuiPaper-root {
+    width: 35rem;
+  }
+
+  .no-record {
+    font-family: Montserrat, sans-serif;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: initial;
+    color: $secondary-color;
+    text-align: center;
+  }
+}
+
+.alert-dialog {
+  .MuiPaper-root {
+    width: 70rem;
+  }
+
+  .no-record {
+    font-family: Montserrat, sans-serif;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: initial;
+    color: $secondary-color;
+    text-align: center;
+  }
+
+  .sticky-input-select {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1;
+    position: sticky;
+    background: #fff;
+    z-index: 1;
+    width: 100%;
+    top: 0;
+    height: 5rem;
+  }
+}
+
+.action-show-all-dialog {
+  .view-all {
+    font-family: Montserrat, sans-serif;
+    font-weight: 500;
+    text-transform: initial;
+    font-size: 1.2rem;
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    th {
+      span {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        cursor: pointer;
+      }
     }
   }
+
+  th,
+  td {
+    border: 0.125rem solid $secondary-color;
+    font-family: Montserrat, sans-serif;
+  }
+
+  th {
+    word-break: break-word;
+    font-weight: 600;
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+    color: $secondary-color;
+    background: $table-header;
+    padding: 0.6rem 1.3125rem;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  td {
+    word-break: break-word;
+    color: $table-td-color;
+    font-size: 1.1rem;
+    line-height: 1.25rem;
+    padding: 0.6rem 1.3125rem;
+  }
 }