@salesgenterp/ui-components 0.4.87 → 0.4.89

package/dist/index.js

@@ -4175,30 +4175,30 @@ var APITable = React.forwardRef(function (_ref, ref) {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaperContainer, null, /*#__PURE__*/React__default.createElement(TableStyledContainer, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaperContainer, props, /*#__PURE__*/React__default.createElement(TableStyledContainer, _extends({
     sx: {
       maxHeight: 440
     }
-  }, /*#__PURE__*/React__default.createElement(TableStyled, {
+  }, props), /*#__PURE__*/React__default.createElement(TableStyled, {
     stickyHeader: true,
     "aria-label": "sticky table"
   }, /*#__PURE__*/React__default.createElement(material.TableHead, null, /*#__PURE__*/React__default.createElement(material.TableRow, null, columns.map(function (column) {
-    return /*#__PURE__*/React__default.createElement(TableCellContainer, {
+    return /*#__PURE__*/React__default.createElement(TableCellContainer, _extends({
       key: column.id,
       align: column.align
-    }, column.label);
+    }, props), column.label);
   }))), /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : tableData.data.map(function (row) {
     return /*#__PURE__*/React__default.createElement(material.TableRow, {
       hover: true,
       key: row === null || row === void 0 ? void 0 : row[(props === null || props === void 0 ? void 0 : props.rowKey) || 'id']
     }, columns.map(function (column) {
       var value = row[column.id];
-      return /*#__PURE__*/React__default.createElement(TableCellContainer, {
+      return /*#__PURE__*/React__default.createElement(TableCellContainer, _extends({
         key: column.id,
         align: column.align
-      }, column.format ? column.format(value, row) : value);
+      }, props), column.format ? column.format(value, row) : value);
     }));
-  })))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, {
+  })))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, _extends({
     rowsPerPageOptions: [10, 20, 50, 100],
     component: "div",
     count: tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination = tableData.pagination) === null || _tableData$pagination === void 0 ? void 0 : _tableData$pagination.total,
@@ -4206,24 +4206,24 @@ var APITable = React.forwardRef(function (_ref, ref) {
     page: (tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination3 = tableData.pagination) === null || _tableData$pagination3 === void 0 ? void 0 : _tableData$pagination3.current) - 1,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  })));
+  }, props))));
 });
 var PaperContainer = styled(material.Paper)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n"])), function (props) {
-  return props.secondaryColor || '#2B2B4048';
+  return props.secondaryColor;
 }, function (props) {
-  return props.primaryColor || '#fff';
+  return props.secondaryColor ? '#fff' : '#000';
 });
-var TableStyledContainer = styled(material.TableContainer)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
-var TableStyled = styled(material.Table)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
+var TableStyledContainer = styled(material.TableContainer)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px 20px 0 0 !important;\n"])));
+var TableStyled = styled(material.Table)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose([""])));
 var TableCellContainer = styled(material.TableCell)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
-  return props.secondaryColor || '#2B2B4048';
+  return props.secondaryColor;
 }, function (props) {
-  return props.primaryColor || '#fff';
+  return props.secondaryColor ? '#fff' : '#000';
 });
-var TablePaginationContainer = styled(material.TablePagination)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
-  return props.secondaryColor || '#2B2B4048';
+var TablePaginationContainer = styled(material.TablePagination)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 0 0 20px 20px !important;\n"])), function (props) {
+  return props.secondaryColor;
 }, function (props) {
-  return props.primaryColor || '#fff';
+  return props.secondaryColor ? '#fff' : '#000';
 });
 
 var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$2, _templateObject9$2;
@@ -4231,9 +4231,11 @@ var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$
 var Dashboard = function Dashboard(_ref) {
   var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4;
 
-  var primaryColor = _ref.primaryColor,
-      apiEndPoint = _ref.apiEndPoint,
-      token = _ref.token;
+  var apiEndPoint = _ref.apiEndPoint,
+      token = _ref.token,
+      primaryColor = _ref.primaryColor,
+      secondaryColor = _ref.secondaryColor,
+      backgroundColor = _ref.backgroundColor;
 
   var _useState = React.useState({}),
       customerData = _useState[0],
@@ -4324,12 +4326,26 @@ var Dashboard = function Dashboard(_ref) {
       return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Button, {
         onClick: function onClick() {
           return openInvoiceData();
+        },
+        style: {
+          color: primaryColor
+        }
+      }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, {
+        style: {
+          fontSize: 26
         }
-      }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, null)), /*#__PURE__*/React__default.createElement(material.Button, {
+      })), /*#__PURE__*/React__default.createElement(material.Button, {
         onClick: function onClick() {
           return downloadInvoice(value);
+        },
+        style: {
+          color: primaryColor
+        }
+      }, /*#__PURE__*/React__default.createElement(md.MdOutlineFileDownload, {
+        style: {
+          fontSize: 26
         }
-      }, /*#__PURE__*/React__default.createElement(md.MdOutlineFileDownload, null)));
+      })));
     }
   }];
   React.useEffect(function () {
@@ -4359,12 +4375,19 @@ var Dashboard = function Dashboard(_ref) {
     })();
   }, []);
   var totalDataSource = convertCamCaseToSnake(dashboardData);
-  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer, {
-    primaryColor: primaryColor
+  return /*#__PURE__*/React__default.createElement(Root, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer, {
+    primaryColor: primaryColor,
+    backgroundColor: backgroundColor
   }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("strong", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h4",
-    gutterBottom: true
-  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(CardContainer, null, /*#__PURE__*/React__default.createElement(material.CardContent, {
+    gutterBottom: true,
+    backgroundColor: backgroundColor
+  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(CardContainer, {
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor
+  }, /*#__PURE__*/React__default.createElement(material.CardContent, {
     style: {
       padding: '2rem'
     }
@@ -4386,7 +4409,8 @@ var Dashboard = function Dashboard(_ref) {
     md: 8,
     lg: 10
   }, /*#__PURE__*/React__default.createElement(MeetContainer, {
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor
   }, /*#__PURE__*/React__default.createElement("strong", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
@@ -4397,7 +4421,11 @@ var Dashboard = function Dashboard(_ref) {
     lg: 4
   }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
-    gutterBottom: true
+    gutterBottom: true,
+    backgroundColor: secondaryColor,
+    style: {
+      background: 'none'
+    }
   }, /*#__PURE__*/React__default.createElement(md.MdPersonOutline, {
     style: {
       fontSize: '3rem',
@@ -4411,7 +4439,11 @@ var Dashboard = function Dashboard(_ref) {
     lg: 4
   }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
-    gutterBottom: true
+    gutterBottom: true,
+    backgroundColor: secondaryColor,
+    style: {
+      background: 'none'
+    }
   }, /*#__PURE__*/React__default.createElement(md.MdOutlineCall, {
     style: {
       fontSize: '3rem',
@@ -4425,7 +4457,11 @@ var Dashboard = function Dashboard(_ref) {
     lg: 4
   }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
-    gutterBottom: true
+    gutterBottom: true,
+    backgroundColor: secondaryColor,
+    style: {
+      background: 'none'
+    }
   }, /*#__PURE__*/React__default.createElement(md.MdMailOutline, {
     style: {
       fontSize: '3rem',
@@ -4448,11 +4484,13 @@ var Dashboard = function Dashboard(_ref) {
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(TotalContainer, {
       flexDirection: "row",
-      justifyContent: "space-between"
+      justifyContent: "space-between",
+      secondaryColor: secondaryColor
     }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value))), /*#__PURE__*/React__default.createElement("div", null, isAmount ? /*#__PURE__*/React__default.createElement(md.MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(gr.GrStackOverflow, null))));
   }))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
-    gutterBottom: true
+    gutterBottom: true,
+    backgroundColor: backgroundColor
   }, "Recent Orders")), /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     pagination: false,
@@ -4466,28 +4504,33 @@ var Dashboard = function Dashboard(_ref) {
       apiEndPoint: apiEndPoint,
       token: token
     },
-    rowKey: 'masterProductId'
+    rowKey: 'masterProductId',
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    backgroundColor: backgroundColor
   })));
 };
 var Root = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 2rem;\n"])), function (props) {
-  return props.backgroundColor || '#1F1B1B';
+  return props.backgroundColor;
 });
 var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  strong {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
-  return props.primaryColor || '#fff';
+  return props.primaryColor;
 });
-var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  strong {\n    color: #fff;\n    font-size: 2rem;\n  }\n"])), function (props) {
+var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  strong {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
   return props.primaryColor;
+}, function (props) {
+  return props.secondaryColor ? '#fff' : '#000';
 });
 var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
-  return props.primaryColor || '#fff';
+  return props.backgroundColor ? '#fff' : '#000';
 });
 var CardMediaContainer = styled(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n"])));
 var CardContainer = styled(material.Card)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 20px !important;\n  margin: 1.2rem 0;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
-  return props.secondaryColor || '#2B2B4048';
+  return props.secondaryColor;
 });
 var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n"])));
 var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  p {\n    font-size: 18px;\n    font-weight: 600;\n    color: #fff;\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 27px;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 38px;\n    color: #fff;\n  }\n"])), function (props) {
-  return props.secondaryColor || '#2B2B4048';
+  return props.secondaryColor;
 });
 var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
 
@@ -4601,7 +4644,11 @@ var AccountDetails = function AccountDetails(_ref) {
       _ref$token = _ref.token,
       token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NDk5MzU2OCwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjQ5NTc1NjgsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.AZ9BKlpRSQwQtTztiPu8VEYjd3N0zCa6lmKFEtXr8JU' : _ref$token,
       _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor;
+      primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
+      _ref$secondaryColor = _ref.secondaryColor,
+      secondaryColor = _ref$secondaryColor === void 0 ? '#26232F' : _ref$secondaryColor,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? '#1F1B1B' : _ref$backgroundColor;
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$1, {
     primaryColor: primaryColor
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
@@ -4610,12 +4657,14 @@ var AccountDetails = function AccountDetails(_ref) {
   }, /*#__PURE__*/React__default.createElement(SideMenu, {
     primaryColor: primaryColor
   })), /*#__PURE__*/React__default.createElement(Main, null, /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
-    primaryColor: primaryColor,
     apiEndPoint: apiEndPoint,
-    token: token
+    token: token,
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    backgroundColor: backgroundColor
   })))));
 };
-var Root$1 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: ", "30;\n"])), function (props) {
+var Root$1 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  // background-color: ", "30;\n"])), function (props) {
   return props.primaryColor || '#535454';
 });
 var Main = styled.main(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  overflow: auto;\n"])));