@salesgenterp/ui-components 0.4.94 → 0.4.96

package/dist/index.js

@@ -23,10 +23,10 @@ var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
 var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
+var styles = require('@mui/material/styles');
 var moment = _interopDefault(require('moment'));
 var lodash = require('lodash');
 var axios = _interopDefault(require('axios'));
-var styles = require('@mui/styles');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -3558,7 +3558,6 @@ var getLocalTime = function getLocalTime(_ref) {
   return convertedTime;
 };
 function hexToRgbA(hex) {
-  console.log('hex: ', hex);
   var c;
 
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
@@ -3719,7 +3718,7 @@ var API = function API(apiData) {
         }
 
         var apiUrl = ("/" + url).replace(/\/\//g, '/');
-        var accessToken = getItem(ACCESS_TOKEN) || token;
+        var accessToken = token;
         var requestHeaders = headers;
 
         if (byPassAuthAPIs.indexOf(url) === -1) {
@@ -4523,6 +4522,7 @@ var Dashboard = function Dashboard(_ref) {
   }))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true,
+    fontColor: fontColor,
     backgroundColor: backgroundColor
   }, "Recent Orders")), /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
@@ -4556,7 +4556,7 @@ var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _tagge
 var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
-var CardMediaContainer = styled(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n"])));
+var CardMediaContainer = styled(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  max-width: 150px;\n"])));
 var CardContainer = styled(material.Stack)(_templateObject6$8 || (_templateObject6$8 = _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;
 });
@@ -4570,7 +4570,7 @@ var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObje
 });
 var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
 
-var _templateObject$b, _templateObject2$b;
+var _templateObject$b;
 
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
@@ -4610,8 +4610,8 @@ var SideMenuItem = function SideMenuItem(props) {
       Icon = props.Icon,
       _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items,
-      primaryColor = props.primaryColor;
-  var classes = useStyles();
+      primaryColor = props.primaryColor,
+      list = props.list;
   var isExpandable = items && items.length > 0;
 
   var _React$useState = React__default.useState(false),
@@ -4623,10 +4623,11 @@ var SideMenuItem = function SideMenuItem(props) {
   }
 
   var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponentContainer, {
-    className: classes.menuItem,
     link: link,
     onClick: handleClick,
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    open: open,
+    list: list
   }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
     primary: name,
     inset: !Icon
@@ -4641,27 +4642,29 @@ var SideMenuItem = function SideMenuItem(props) {
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
-      primaryColor: primaryColor
+      primaryColor: primaryColor,
+      list: true
     }));
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-
-var useStyles = styles.makeStyles(function (theme) {
-  return styles.createStyles({
-    menuItem: {
-      '&.active': {
-        background: 'rgba(0, 0, 0, 0.08)',
-        '& .MuiListItemIcon-root': {
-          color: '#fff'
-        }
-      }
+var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(function (_ref) {
+  var primaryColor = _ref.primaryColor,
+      list = _ref.list;
+  return {
+    background: list ? "rgba(" + hexToRgbA(primaryColor) + ",0.9)" : "rgba(" + hexToRgbA(primaryColor) + ")",
+    color: '#fff',
+    '& .MuiTypography-root': {
+      fontWeight: '600 '
+    },
+    '&:hover': {
+      background: "rgba(" + hexToRgbA(primaryColor) + ",0.8)"
+    },
+    '& svg': {
+      fontSize: 22
     }
-  });
-});
-var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n"])));
-var SideMenuItemComponentContainer = styled(SideMenuItemComponent)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  background: rgba(", ", 0.8) !important;\n  font-weight: 600;\n"])), function (props) {
-  return hexToRgbA(props.primaryColor);
+  };
 });
 
 var sideMenuItems = [{
@@ -4742,41 +4745,121 @@ var SideMenu = function SideMenu(props) {
   }));
 };
 
-var _templateObject$c, _templateObject2$c, _templateObject3$b;
+var _templateObject$c, _templateObject2$b, _templateObject3$b;
+var drawerWidth = 240;
 
 var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
       apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
       _ref$token = _ref.token,
-      token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTA4MTY4NiwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUwNDU2ODYsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.hSh-gHrQHVRjEAnHEpcRwNN0XcGdyZr6G2dINAHC9Ns' : _ref$token,
+      token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTEyMDI3MywidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUwODQyNzMsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.GyaYBPaX9soFHLVPX_tSC81PhienH1qPFhfghVss91k' : _ref$token,
       _ref$primaryColor = _ref.primaryColor,
       primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
       secondaryColor = _ref.secondaryColor,
       backgroundColor = _ref.backgroundColor,
       _ref$fontColor = _ref.fontColor,
-      fontColor = _ref$fontColor === void 0 ? '#000000D9' : _ref$fontColor;
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$2, {
-    primaryColor: primaryColor
+      fontColor = _ref$fontColor === void 0 ? '#000' : _ref$fontColor,
+      backgroundImage = _ref.backgroundImage;
+
+  var _useState = React.useState(true),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handleDrawerOpen = function handleDrawerOpen() {
+    setOpen(function (prev) {
+      return !prev;
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$2, {
+    primaryColor: primaryColor,
+    sx: {
+      display: 'flex'
+    },
+    backgroundImage: backgroundImage
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
-    variant: "permanent",
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    sx: {
+      width: drawerWidth,
+      flexShrink: 0,
+      '& .MuiDrawer-paper': {
+        width: drawerWidth,
+        boxSizing: 'border-box'
+      }
+    },
+    variant: "persistent",
+    anchor: "left",
+    open: open
   }, /*#__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, {
+  })), /*#__PURE__*/React__default.createElement(Main, {
+    open: open,
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Toolbar, {
+    style: {
+      padding: '0 2px',
+      minHeight: 32
+    }
+  }, /*#__PURE__*/React__default.createElement(material.IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26,
+        color: fontColor
+      }
+    }
+  }, open ? /*#__PURE__*/React__default.createElement(md.MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(md.MdMenu, null)), /*#__PURE__*/React__default.createElement(TypographyContainer$1, {
+    variant: "h6",
+    noWrap: true,
+    component: "div",
+    fontColor: fontColor
+  }, "Dashboard"))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
     token: token,
     primaryColor: primaryColor,
     secondaryColor: secondaryColor,
     backgroundColor: backgroundColor,
     fontColor: fontColor
-  })))));
+  }))))));
 };
-var Root$2 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var Main = styled.main(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  overflow: auto;\n  background-color: ", ";\n  padding: 0 2rem;\n"])), function (props) {
-  return props.backgroundColor;
+var Root$2 = styled(material.Box)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding: 2rem;\n"])), function (props) {
+  return props.backgroundImage;
 });
-var ContainerDrawer = styled(material.Drawer)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    white-space: nowrap;\n    width: 240px;\n    // background-color: ", "60;\n    color: #fff;\n    z-index: 1;\n  }\n"])), function (props) {
-  return props.primaryColor;
+var Main = styles.styled('main', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'open';
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      open = _ref2.open,
+      backgroundColor = _ref2.backgroundColor;
+  return _extends({
+    flexGrow: 1,
+    padding: "0 " + theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    marginLeft: "-" + drawerWidth + "px"
+  }, open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    marginLeft: 0
+  }, {
+    background: backgroundColor
+  });
+});
+var ContainerDrawer = styled(material.Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 240px;\n    z-index: 1;\n    overflow: hidden;\n  }\n"])), function (props) {
+  return props.open && '2rem';
+});
+var TypographyContainer$1 = styled(material.Typography)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.fontColor;
 });
 
 var Breakpoint = function Breakpoint() {};