@salesgenterp/ui-components 0.4.97 → 0.4.98

package/dist/index.js

@@ -32,26 +32,21 @@ 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 _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -59,27 +54,25 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
 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;
 }
-
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
   }
-
   strings.raw = raw;
   return strings;
 }
@@ -116,14 +109,13 @@ var CartDrawerLoader = styled.div(_templateObject3$1 || (_templateObject3$1 = _t
 
 var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   var _product$cartStandard, _product$standardPric;
-
   var product = _ref.product,
-      color = _ref.color,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRedirect = _ref.handleRedirect,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      loading = _ref.loading;
+    color = _ref.color,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRedirect = _ref.handleRedirect,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
@@ -173,16 +165,15 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
 
 var CartDrawer = function CartDrawer(_ref) {
   var _cartData$cartLineIte, _cartData$totalCartPr;
-
   var cartData = _ref.cartData,
-      maxWidth = _ref.maxWidth,
-      color = _ref.color,
-      handleRedirect = _ref.handleRedirect,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleClose = _ref.handleClose,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl;
+    maxWidth = _ref.maxWidth,
+    color = _ref.color,
+    handleRedirect = _ref.handleRedirect,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleClose = _ref.handleClose,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
   }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
@@ -253,6 +244,7 @@ var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTem
 });
 var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* margin-bottom: 2em; */\n  margin-left: 2.3em;\n  margin-top: 2em;\n\n  h1 {\n    font-weight: 600;\n    font-size: 2.0375em;\n    text-transform: capitalize;\n    color: inherit;\n    /* margin-bottom: 1em; */\n  }\n  p {\n    font-size: 0.875em;\n    color: black;\n    margin-top: 0.5em;\n  }\n"])));
 var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 40%;\n  left: 47%;\n  display: grid;\n  place-items: center;\n  z-index: 3;\n"])));
+
 var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  && {\n    padding-bottom: 1em !important;\n    border: none !important;\n    /* font-size: 0.75em; */\n    font-size: 1em;\n    color: rgba(98, 95, 95, 1);\n    background: ", ";\n    font-family: 'karla-fonts';\n  }\n  span {\n    font-size: 0.75em;\n    font-weight: 600;\n  }\n"])), function (props) {
   return "" + props.bg;
 });
@@ -1386,19 +1378,17 @@ var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObj
 var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-family: 'karla-fonts';\n    font-size: 1em;\n  }\n"])));
 var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  height: 1.7em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  div {\n    /* width:30px; */\n    min-height: 100%;\n    aspect-ratio: 1.15/1;\n    display: grid;\n    place-items: center;\n    font-size: 0.65em;\n    color: white;\n    background-color: #323232;\n    cursor: pointer;\n  }\n  .price {\n    background: transparent;\n    cursor: auto;\n    background: #ffffff;\n    border: 1px solid #ebebeb;\n    p {\n      color: #5e5c5c;\n      font-size: 0.685em;\n      font-weight: 500;\n    }\n  }\n  .add {\n    background-color: #ebebeb;\n    color: #323232;\n  }\n"])));
 var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
-
 var CardRow = function CardRow(_ref) {
   var _styles$price, _styles$Btn, _styles$name, _styles$name2, _row$standardPrice, _row$subtotal;
-
   var row = _ref.row,
-      isItemSelected = _ref.isItemSelected,
-      handleClick = _ref.handleClick,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      loading = _ref.loading,
-      imgSize = _ref.imgSize,
-      styles = _ref.styles;
+    isItemSelected = _ref.isItemSelected,
+    handleClick = _ref.handleClick,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    loading = _ref.loading,
+    imgSize = _ref.imgSize,
+    styles = _ref.styles;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartTableRow, {
@@ -1535,19 +1525,17 @@ var headCells = [{
 
 function EnhancedTableHead(props) {
   var onSelectAllClick = props.onSelectAllClick,
-      order = props.order,
-      orderBy = props.orderBy,
-      numSelected = props.numSelected,
-      rowCount = props.rowCount,
-      onRequestSort = props.onRequestSort,
-      styles = props.styles;
-
+    order = props.order,
+    orderBy = props.orderBy,
+    numSelected = props.numSelected,
+    rowCount = props.rowCount,
+    onRequestSort = props.onRequestSort,
+    styles = props.styles;
   var createSortHandler = function createSortHandler(property) {
     return function (event) {
       onRequestSort(event, property);
     };
   };
-
   return /*#__PURE__*/React.createElement(TableHead, {
     className: "CartnoBelowSm"
   }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
@@ -1584,7 +1572,6 @@ function EnhancedTableHead(props) {
     }, headCell.label) : /*#__PURE__*/React.createElement("span", null, headCell.label));
   })));
 }
-
 EnhancedTableHead.propTypes = {
   numSelected: propTypes.number.isRequired,
   onRequestSort: propTypes.func.isRequired,
@@ -1593,55 +1580,48 @@ EnhancedTableHead.propTypes = {
   orderBy: propTypes.string.isRequired,
   rowCount: propTypes.number.isRequired
 };
+
 function EnhancedTable(_ref) {
   var _styles$scroll, _styles$scroll2;
-
   var cartData = _ref.cartData,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRemoveAll = _ref.handleRemoveAll,
-      styles = _ref.styles;
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRemoveAll = _ref.handleRemoveAll,
+    styles = _ref.styles;
   var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
     return _extends({}, li, {
       subtotal: li.standardPrice * li.quantity
     });
   });
-
   var _React$useState = React.useState('asc'),
-      order = _React$useState[0],
-      setOrder = _React$useState[1];
-
+    order = _React$useState[0],
+    setOrder = _React$useState[1];
   var _React$useState2 = React.useState('calories'),
-      orderBy = _React$useState2[0],
-      setOrderBy = _React$useState2[1];
-
+    orderBy = _React$useState2[0],
+    setOrderBy = _React$useState2[1];
   var _React$useState3 = React.useState([]),
-      selected = _React$useState3[0],
-      setSelected = _React$useState3[1];
-
+    selected = _React$useState3[0],
+    setSelected = _React$useState3[1];
   var _React$useState4 = React.useState(cartList),
-      cartArray = _React$useState4[0],
-      setCartArray = _React$useState4[1];
+    cartArray = _React$useState4[0],
+    setCartArray = _React$useState4[1];
 
   var Sort = function Sort() {
     var newArray = cartArray || [];
     var li = orderBy;
-
     if (order === 'asc') {
       newArray.sort(function (a, b) {
         return a[li] - b[li];
       });
       return setCartArray(newArray);
     }
-
     newArray.sort(function (a, b) {
       return b[li] - a[li];
     });
     return setCartArray(newArray);
   };
-
   React.useEffect(function () {
     Sort();
   }, [order, orderBy]);
@@ -1661,13 +1641,10 @@ function EnhancedTable(_ref) {
       setSelected(newSelected);
       return;
     }
-
     setSelected([]);
   };
-
   var handleClick = function handleClick(event, product) {
     var includes = selected.includes(product);
-
     if (includes) {
       var removedId = selected.filter(function (item) {
         return item.productId !== (product === null || product === void 0 ? void 0 : product.productId);
@@ -1680,11 +1657,9 @@ function EnhancedTable(_ref) {
       setSelected([].concat(selected, [product]));
     }
   };
-
   var isSelected = function isSelected(name) {
     return selected.includes(name);
   };
-
   React.useEffect(function () {
     setCartArray(cartList);
   }, [cartData]);
@@ -1739,6 +1714,7 @@ function EnhancedTable(_ref) {
 }
 
 var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
+
 var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
 var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
   return props.width || 'auto';
@@ -1753,13 +1729,12 @@ var CloseBtn = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTem
 
 var CartPageProductCard = function CartPageProductCard(_ref) {
   var _item$standardPrice;
-
   var item = _ref.item,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      loading = _ref.loading,
-      imgSize = _ref.imgSize;
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    loading = _ref.loading,
+    imgSize = _ref.imgSize;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
@@ -1797,14 +1772,13 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
 
 var CartPageMainRetail = function CartPageMainRetail(_ref) {
   var _cartData$cartLineIte;
-
   var retail = _ref.retail,
-      cartData = _ref.cartData,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      styles = _ref.styles;
+    cartData = _ref.cartData,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    styles = _ref.styles;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "scrollDiv"
   }, /*#__PURE__*/React__default.createElement(CardsBox, {
@@ -1877,19 +1851,18 @@ var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$4 || (_temp
 
 var CartSummary = function CartSummary(_ref) {
   var _cartSummary$input, _cartSummary$input2, _ref2;
-
   var _ref$retail = _ref.retail,
-      retail = _ref$retail === void 0 ? true : _ref$retail,
-      shippingData = _ref.shippingData,
-      selectedShipping = _ref.selectedShipping,
-      setShipping = _ref.setShipping,
-      clickRedirect = _ref.clickRedirect,
-      subtotal = _ref.subtotal,
-      styles = _ref.styles,
-      totalCartPrice = _ref.totalCartPrice,
-      loading = _ref.loading;
+    retail = _ref$retail === void 0 ? true : _ref$retail,
+    shippingData = _ref.shippingData,
+    selectedShipping = _ref.selectedShipping,
+    setShipping = _ref.setShipping,
+    clickRedirect = _ref.clickRedirect,
+    subtotal = _ref.subtotal,
+    styles = _ref.styles,
+    totalCartPrice = _ref.totalCartPrice,
+    loading = _ref.loading;
   var cartSummary = styles.cartSummary,
-      Btn = styles.Btn;
+    Btn = styles.Btn;
   return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
     background: cartSummary.bg,
     color: cartSummary.color
@@ -1909,7 +1882,6 @@ var CartSummary = function CartSummary(_ref) {
     justify: "flex-start"
   }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
     var _li$amount;
-
     return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
       key: i,
       selected: li.id === selectedShipping.id,
@@ -1962,17 +1934,17 @@ var CartSummary = function CartSummary(_ref) {
 
 var CartPageComponent = function CartPageComponent(_ref) {
   var retail = _ref.retail,
-      shippingData = _ref.shippingData,
-      selectedShipping = _ref.selectedShipping,
-      setShipping = _ref.setShipping,
-      clickRedirect = _ref.clickRedirect,
-      cartData = _ref.cartData,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRemoveAll = _ref.handleRemoveAll,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      styles = _ref.styles;
+    shippingData = _ref.shippingData,
+    selectedShipping = _ref.selectedShipping,
+    setShipping = _ref.setShipping,
+    clickRedirect = _ref.clickRedirect,
+    cartData = _ref.cartData,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRemoveAll = _ref.handleRemoveAll,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    styles = _ref.styles;
   return /*#__PURE__*/React__default.createElement(CartPageSection, {
     bg: styles.bg,
     retail: retail
@@ -2031,10 +2003,10 @@ var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedT
 
 var CheckoutSummary = function CheckoutSummary(_ref) {
   var total = _ref.total,
-      billingInformation = _ref.billingInformation,
-      shippingInformation = _ref.shippingInformation,
-      paymentMethod = _ref.paymentMethod,
-      shippingMethod = _ref.shippingMethod;
+    billingInformation = _ref.billingInformation,
+    shippingInformation = _ref.shippingInformation,
+    paymentMethod = _ref.paymentMethod,
+    shippingMethod = _ref.shippingMethod;
   return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
     className: "text"
   }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
@@ -2115,8 +2087,10 @@ var DeliveryOption = styled.div(_templateObject10 || (_templateObject10 = _tagge
 }, function (props) {
   return props.hovered ? '800' : '700';
 });
+
 var CreditCard = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n"])));
 var PaymentLi = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 1.5em;\n  cursor: pointer;\n  .circle {\n    /* background: #323232; */\n    width: 16px;\n    height: 16px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    border: 1px solid #323232;\n    margin-right: 1em;\n  }\n  .innerCircle {\n    background: #323232;\n    border-radius: 50%;\n    width: 6px;\n    height: 6px;\n  }\n  p {\n    font-size: 1em;\n    color: black;\n    text-transform: capitalize;\n    font-weight: 500;\n  }\n"])));
+
 var StyledTableRow = styled(material.TableRow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 700;\n    }\n    /* .sm {\n      font-weight: 600;\n    } */\n    .bolder {\n      font-weight: 800;\n      font-size: 1em;\n    }\n    @media only screen and (max-width: 640px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 10px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n      .bolder {\n        font-size: 12px;\n      }\n    }\n  }\n"])), function (props) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
 });
@@ -2128,10 +2102,10 @@ var BottomGrid = styled(material.Grid)(_templateObject15 || (_templateObject15 =
 var CheckoutInput = function CheckoutInput(_ref) {
   var controlls = _ref.controlls;
   var placeholder = controlls.placeholder,
-      _controlls$autoFocus = controlls.autoFocus,
-      autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
-      showIcon = controlls.showIcon,
-      type = controlls.type;
+    _controlls$autoFocus = controlls.autoFocus,
+    autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
+    showIcon = controlls.showIcon,
+    type = controlls.type;
   return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
     defaultValue: "",
     render: function render(_ref2) {
@@ -2139,7 +2113,8 @@ var CheckoutInput = function CheckoutInput(_ref) {
       return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
         placeholder: placeholder,
         variant: "outlined",
-        required: true,
+        required: true
+        ,
         InputProps: showIcon ? {
           startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
             position: "start"
@@ -2156,14 +2131,14 @@ var CheckoutInput = function CheckoutInput(_ref) {
 var CheckoutSelect = function CheckoutSelect(_ref3) {
   var controlls = _ref3.controlls;
   var key = controlls.key,
-      List = controlls.List,
-      name = controlls.name,
-      control = controlls.control,
-      _controlls$val = controlls.val,
-      val = _controlls$val === void 0 ? 'id' : _controlls$val,
-      _controlls$autoFocus2 = controlls.autoFocus,
-      autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2,
-      defaultValue = controlls.defaultValue;
+    List = controlls.List,
+    name = controlls.name,
+    control = controlls.control,
+    _controlls$val = controlls.val,
+    val = _controlls$val === void 0 ? 'id' : _controlls$val,
+    _controlls$autoFocus2 = controlls.autoFocus,
+    autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2,
+    defaultValue = controlls.defaultValue;
   return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, console.log(defaultValue), /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -2171,10 +2146,13 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
     render: function render(_ref4) {
       var field = _ref4.field;
       return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
-        fullWidth: true,
-        select: true,
+        fullWidth: true
+        ,
+        select: true
+        ,
         displayEmpty: true,
-        required: true,
+        required: true
+        ,
         autoFocus: autoFocus
       }, field), /*#__PURE__*/React__default.createElement(material.MenuItem, {
         value: ""
@@ -2190,12 +2168,12 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
 
 var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
   var text = _ref.text,
-      username = _ref.username,
-      icon = _ref.icon,
-      single = _ref.single,
-      closed = _ref.closed,
-      handleClick = _ref.handleClick,
-      withoutIcon = _ref.withoutIcon;
+    username = _ref.username,
+    icon = _ref.icon,
+    single = _ref.single,
+    closed = _ref.closed,
+    handleClick = _ref.handleClick,
+    withoutIcon = _ref.withoutIcon;
   return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
     single: single,
     username: username,
@@ -2233,18 +2211,15 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
 
 var Step0 = function Step0(_ref) {
   var loading = _ref.loading,
-      userName = _ref.userName,
-      handleLogin = _ref.handleLogin,
-      clickRedirect = _ref.clickRedirect;
-
+    userName = _ref.userName,
+    handleLogin = _ref.handleLogin,
+    clickRedirect = _ref.clickRedirect;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit;
-
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit;
   var onSubmit = function onSubmit(data) {
     handleLogin(data);
   };
-
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'welcome',
     username: userName,
@@ -2310,9 +2285,9 @@ var Step0 = function Step0(_ref) {
 
 var ButtonRow = function ButtonRow(_ref) {
   var handleBack = _ref.handleBack,
-      handleNext = _ref.handleNext,
-      backDisabled = _ref.backDisabled,
-      nextDisabled = _ref.nextDisabled;
+    handleNext = _ref.handleNext,
+    backDisabled = _ref.backDisabled,
+    nextDisabled = _ref.nextDisabled;
   return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
     disabledBack: backDisabled,
     disabledNext: nextDisabled
@@ -2337,8 +2312,8 @@ var ButtonRow = function ButtonRow(_ref) {
 
 var StoreForm = function StoreForm(_ref) {
   var control = _ref.control,
-      _onSubmit = _ref.onSubmit,
-      handleSubmit = _ref.handleSubmit;
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     columnSpacing: 1,
@@ -2410,10 +2385,10 @@ var StoreForm = function StoreForm(_ref) {
 
 var AddressForm = function AddressForm(_ref) {
   var control = _ref.control,
-      countries = _ref.countries,
-      states = _ref.states,
-      _onSubmit = _ref.onSubmit,
-      handleSubmit = _ref.handleSubmit;
+    countries = _ref.countries,
+    states = _ref.states,
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
@@ -2514,32 +2489,27 @@ var AddressForm = function AddressForm(_ref) {
 
 var Step1 = function Step1(_ref) {
   var _addressList$, _addressList, _addressList2;
-
   var handleNext = _ref.handleNext,
-      setShipping = _ref.setShipping,
-      setBilling = _ref.setBilling,
-      addStore = _ref.addStore,
-      addStoreAddress = _ref.addStoreAddress,
-      stores = _ref.stores,
-      selectedStore = _ref.selectedStore,
-      setSelectedStore = _ref.setSelectedStore,
-      countries = _ref.countries,
-      setSelectedCountry = _ref.setSelectedCountry,
-      states = _ref.states;
-
+    setShipping = _ref.setShipping,
+    setBilling = _ref.setBilling,
+    addStore = _ref.addStore,
+    addStoreAddress = _ref.addStoreAddress,
+    stores = _ref.stores,
+    selectedStore = _ref.selectedStore,
+    setSelectedStore = _ref.setSelectedStore,
+    countries = _ref.countries,
+    setSelectedCountry = _ref.setSelectedCountry,
+    states = _ref.states;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit;
-
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit;
   var _useState = React.useState(false),
-      showShipping = _useState[0],
-      setShowShipping = _useState[1];
-
+    showShipping = _useState[0],
+    setShowShipping = _useState[1];
   var _useForm2 = reactHookForm.useForm(),
-      addressControl = _useForm2.control,
-      watch = _useForm2.watch,
-      handleSubmitAddress = _useForm2.handleSubmit;
-
+    addressControl = _useForm2.control,
+    watch = _useForm2.watch,
+    handleSubmitAddress = _useForm2.handleSubmit;
   var StoresList = [].concat(stores, [{
     storeName: 'Add Store',
     id: 99999999
@@ -2549,7 +2519,6 @@ var Step1 = function Step1(_ref) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
   var addressList = [];
-
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
       address1: 'Add billing Address',
@@ -2561,21 +2530,17 @@ var Step1 = function Step1(_ref) {
       id: 99999999
     }];
   }
-
   var _useState2 = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
-      address = _useState2[0],
-      setAddress = _useState2[1];
-
+    address = _useState2[0],
+    setAddress = _useState2[1];
   var onSubmit = function onSubmit(data) {
     var _stores$;
-
     addStore(data);
     setSelectedStore((_stores$ = stores[0]) === null || _stores$ === void 0 ? void 0 : _stores$.id);
   };
 
   var addAddress = function addAddress(data) {
     var _addressList$2;
-
     addStoreAddress(data);
     setAddress((_addressList$2 = addressList[0]) === null || _addressList$2 === void 0 ? void 0 : _addressList$2.id);
   };
@@ -2585,13 +2550,11 @@ var Step1 = function Step1(_ref) {
     setShipping(showShipping);
     handleNext();
   };
-
   React.useEffect(function () {
     setSelectedCountry(selectedCountry);
   }, [selectedCountry]);
   React.useEffect(function () {
     var _addressList$3;
-
     setAddress((_addressList$3 = addressList[0]) === null || _addressList$3 === void 0 ? void 0 : _addressList$3.id);
   }, [selectedStore]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
@@ -2664,7 +2627,8 @@ var Step1 = function Step1(_ref) {
     checked: showShipping,
     icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
     checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
-  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow, {
+  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow
+  , {
     backDisabled: true,
     handleNext: function handleNext() {
       next();
@@ -2675,35 +2639,30 @@ var Step1 = function Step1(_ref) {
 
 var Step2 = function Step2(_ref) {
   var _addressList$, _addressList;
-
   var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      options = _ref.options,
-      setShipping = _ref.setShipping,
-      countries = _ref.countries,
-      states = _ref.states,
-      addShipping = _ref.addShipping,
-      setSelectedCountry = _ref.setSelectedCountry,
-      showShipping = _ref.showShipping,
-      selectedStore = _ref.selectedStore,
-      stores = _ref.stores;
-
+    _handleNext = _ref.handleNext,
+    options = _ref.options,
+    setShipping = _ref.setShipping,
+    countries = _ref.countries,
+    states = _ref.states,
+    addShipping = _ref.addShipping,
+    setSelectedCountry = _ref.setSelectedCountry,
+    showShipping = _ref.showShipping,
+    selectedStore = _ref.selectedStore,
+    stores = _ref.stores;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit,
-      resetField = _useForm.resetField,
-      watch = _useForm.watch;
-
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit,
+    resetField = _useForm.resetField,
+    watch = _useForm.watch;
   var _React$useState = React__default.useState(options[0]),
-      method = _React$useState[0],
-      setmethod = _React$useState[1];
-
+    method = _React$useState[0],
+    setmethod = _React$useState[1];
   var selectedCountry = watch('country');
   var selectedStores = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
   var addressList = [];
-
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
       address1: 'Add Address',
@@ -2715,23 +2674,20 @@ var Step2 = function Step2(_ref) {
       id: 99999999
     }];
   }
-
   var _useState = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
-      address = _useState[0],
-      setAddress = _useState[1];
+    address = _useState[0],
+    setAddress = _useState[1];
 
   var onSubmit = function onSubmit(data) {
     console.log(data);
     addShipping(data);
     resetField('shippingAddress');
   };
-
   React.useEffect(function () {
     setSelectedCountry(selectedCountry);
   }, [selectedCountry]);
   React.useEffect(function () {
     var _addressList$2;
-
     setAddress((_addressList$2 = addressList[0]) === null || _addressList$2 === void 0 ? void 0 : _addressList$2.id);
   }, [selectedStore]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
@@ -2769,11 +2725,11 @@ var Step2 = function Step2(_ref) {
   })), /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "column",
     width: "100%",
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+    ,
     paddingBottom: '2em'
   }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
     var _option$amount;
-
     return /*#__PURE__*/React__default.createElement(DeliveryOption, {
       hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
       onClick: function onClick() {
@@ -2793,7 +2749,6 @@ var Step2 = function Step2(_ref) {
     handleBack: handleBack,
     handleNext: function handleNext() {
       setShipping(address, method);
-
       _handleNext();
     },
     nextDisabled: showShipping && !address || (address === null || address === void 0 ? void 0 : address.id) === 99999999
@@ -2802,8 +2757,8 @@ var Step2 = function Step2(_ref) {
 
 var CreditCardForm = function CreditCardForm(_ref) {
   var handleChange = _ref.handleChange,
-      handleFocus = _ref.handleFocus,
-      handleSave = _ref.handleSave;
+    handleFocus = _ref.handleFocus,
+    handleSave = _ref.handleSave;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
@@ -2873,14 +2828,11 @@ var CreditCardForm = function CreditCardForm(_ref) {
 
 var PaymentForm = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(PaymentForm, _React$Component);
-
   function PaymentForm() {
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
       cvc: '',
@@ -2889,32 +2841,24 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
       name: '',
       number: ''
     };
-
     _this.handleInputFocus = function (e) {
       _this.setState({
         focus: e.target.name
       });
     };
-
     _this.handleInputChange = function (e) {
       var _this$setState;
-
       var _e$target = e.target,
-          name = _e$target.name,
-          value = _e$target.value;
-
+        name = _e$target.name,
+        value = _e$target.value;
       _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
     };
-
     _this.handleSave = function (e) {
       console.log(e);
     };
-
     return _this;
   }
-
   var _proto = PaymentForm.prototype;
-
   _proto.render = function render() {
     return /*#__PURE__*/React__default.createElement("div", {
       id: "PaymentForm"
@@ -2931,31 +2875,26 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
       handleSave: this.props.handleSave(this.state)
     }));
   };
-
   return PaymentForm;
 }(React__default.Component);
 
 var Step3 = function Step3(_ref) {
   var _selectedMethod$name;
-
   var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      setPaymentDetails = _ref.setPaymentDetails,
-      payments = _ref.payments,
-      storeCredits = _ref.storeCredits,
-      total = _ref.total;
-
+    _handleNext = _ref.handleNext,
+    setPaymentDetails = _ref.setPaymentDetails,
+    payments = _ref.payments,
+    storeCredits = _ref.storeCredits,
+    total = _ref.total;
   var _useState = React.useState(payments && payments[0]),
-      selectedMethod = _useState[0],
-      setSelectedMethod = _useState[1];
-
+    selectedMethod = _useState[0],
+    setSelectedMethod = _useState[1];
   var _useState2 = React.useState(true),
-      useStoreCr = _useState2[0],
-      setUseStoreCr = _useState2[1];
-
+    useStoreCr = _useState2[0],
+    setUseStoreCr = _useState2[1];
   var _useState3 = React.useState(null),
-      card = _useState3[0],
-      setCard = _useState3[1];
+    card = _useState3[0],
+    setCard = _useState3[1];
   var isCard = selectedMethod === null || selectedMethod === void 0 ? void 0 : (_selectedMethod$name = selectedMethod.name) === null || _selectedMethod$name === void 0 ? void 0 : _selectedMethod$name.toLowerCase().includes('card');
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Payments Method',
@@ -2988,7 +2927,6 @@ var Step3 = function Step3(_ref) {
     className: "bold"
   }, "$", storeCredits === null || storeCredits === void 0 ? void 0 : storeCredits.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
     var _payment$name;
-
     if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: i
@@ -3028,7 +2966,6 @@ var Step3 = function Step3(_ref) {
     handleBack: handleBack,
     handleNext: function handleNext() {
       setPaymentDetails(useStoreCr, useStoreCr && storeCredits > total ? null : selectedMethod, isCard && card);
-
       _handleNext();
     }
   })));
@@ -3036,21 +2973,18 @@ var Step3 = function Step3(_ref) {
 
 var Step4 = function Step4(_ref) {
   var _cartData$cartLineIte, _cartData$totalCartPr;
-
   var handleBack = _ref.handleBack,
-      cartData = _ref.cartData,
-      clickRedirect = _ref.clickRedirect,
-      loading = _ref.loading,
-      placeOrder = _ref.placeOrder,
-      storeCredits = _ref.storeCredits;
-
+    cartData = _ref.cartData,
+    clickRedirect = _ref.clickRedirect,
+    loading = _ref.loading,
+    placeOrder = _ref.placeOrder,
+    storeCredits = _ref.storeCredits;
   var _React$useState = React__default.useState(false),
-      checked = _React$useState[0],
-      setChecked = _React$useState[1];
-
+    checked = _React$useState[0],
+    setChecked = _React$useState[1];
   var _React$useState2 = React__default.useState(''),
-      comments = _React$useState2[0],
-      setComments = _React$useState2[1];
+    comments = _React$useState2[0],
+    setComments = _React$useState2[1];
   var storeCr = storeCredits > (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) ? cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice : storeCredits;
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Order Review',
@@ -3063,7 +2997,6 @@ var Step4 = function Step4(_ref) {
     size: "small"
   }, /*#__PURE__*/React__default.createElement(material.TableBody, null, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (row, i) {
     var _row$standardPrice, _ref2;
-
     return /*#__PURE__*/React__default.createElement(StyledTableRow, {
       key: row.name,
       colored: i % 2 === 0
@@ -3221,7 +3154,6 @@ var Step4 = function Step4(_ref) {
   }, "back"), /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick(e) {
       e.preventDefault();
-
       if (checked) {
         placeOrder(comments);
       } else {
@@ -3274,41 +3206,40 @@ var steps = [{
     });
   }
 }];
-
 var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   var currStep = _ref.currStep,
-      handleNext = _ref.handleNext,
-      handleBack = _ref.handleBack,
-      loading = _ref.loading,
-      handleLogin = _ref.handleLogin,
-      userName = _ref.userName,
-      addStore = _ref.addStore,
-      setBilling = _ref.setBilling,
-      setShowShipping = _ref.setShowShipping,
-      userStores = _ref.userStores,
-      selectedStore = _ref.selectedStore,
-      setSelectedStore = _ref.setSelectedStore,
-      addStoreAddress = _ref.addStoreAddress,
-      setSelectedCountry = _ref.setSelectedCountry,
-      countries = _ref.countries,
-      states = _ref.states,
-      setShipping = _ref.setShipping,
-      showShipping = _ref.showShipping,
-      deliveryOptions = _ref.deliveryOptions,
-      setPaymentDetails = _ref.setPaymentDetails,
-      paymentMethods = _ref.paymentMethods,
-      storeCredits = _ref.storeCredits,
-      selectedStoreCredits = _ref.selectedStoreCredits,
-      cartData = _ref.cartData,
-      vat = _ref.vat,
-      clickRedirect = _ref.clickRedirect,
-      ordering = _ref.ordering,
-      deliveryCharges = _ref.deliveryCharges,
-      placeOrder = _ref.placeOrder,
-      shippingAddress = _ref.shippingAddress,
-      billingAddress = _ref.billingAddress,
-      selectedPaymentMethod = _ref.selectedPaymentMethod,
-      shippingMethod = _ref.shippingMethod;
+    handleNext = _ref.handleNext,
+    handleBack = _ref.handleBack,
+    loading = _ref.loading,
+    handleLogin = _ref.handleLogin,
+    userName = _ref.userName,
+    addStore = _ref.addStore,
+    setBilling = _ref.setBilling,
+    setShowShipping = _ref.setShowShipping,
+    userStores = _ref.userStores,
+    selectedStore = _ref.selectedStore,
+    setSelectedStore = _ref.setSelectedStore,
+    addStoreAddress = _ref.addStoreAddress,
+    setSelectedCountry = _ref.setSelectedCountry,
+    countries = _ref.countries,
+    states = _ref.states,
+    setShipping = _ref.setShipping,
+    showShipping = _ref.showShipping,
+    deliveryOptions = _ref.deliveryOptions,
+    setPaymentDetails = _ref.setPaymentDetails,
+    paymentMethods = _ref.paymentMethods,
+    storeCredits = _ref.storeCredits,
+    selectedStoreCredits = _ref.selectedStoreCredits,
+    cartData = _ref.cartData,
+    vat = _ref.vat,
+    clickRedirect = _ref.clickRedirect,
+    ordering = _ref.ordering,
+    deliveryCharges = _ref.deliveryCharges,
+    placeOrder = _ref.placeOrder,
+    shippingAddress = _ref.shippingAddress,
+    billingAddress = _ref.billingAddress,
+    selectedPaymentMethod = _ref.selectedPaymentMethod,
+    shippingMethod = _ref.shippingMethod;
   return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout"
   }, /*#__PURE__*/React__default.createElement(material.Stack, {
@@ -3395,7 +3326,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleNext: handleNext,
       setShipping: setShowShipping,
       setBilling: setBilling,
-      stores: userStores,
+      stores: userStores
+      ,
       addStore: addStore,
       selectedStore: selectedStore,
       setSelectedStore: setSelectedStore,
@@ -3417,7 +3349,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setShipping: setShipping,
       showShipping: showShipping,
       selectedStore: selectedStore,
-      stores: userStores,
+      stores: userStores
+      ,
       addShipping: addStoreAddress,
       setSelectedCountry: setSelectedCountry
     })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
@@ -3512,9 +3445,10 @@ var DATE_FORMATS = {
 };
 
 var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
+  var _Object$keys;
   var data = [];
   var i = 1;
-  Object.keys(child).map(function (k) {
+  Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(child)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (k) {
     var result = k.replace(/([A-Z])/g, ' $1');
     var dataIndex = {
       key: i.toString(),
@@ -3528,49 +3462,38 @@ var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
 };
 var renderMoney = function renderMoney(value) {
   var returnValue = '$0.00';
-
   try {
     if (value) {
       var _Math$abs, _Math$abs$toFixed, _value$toFixed;
-
       returnValue = value < 0 ? "-$" + ((_Math$abs = Math.abs(value)) === null || _Math$abs === void 0 ? void 0 : (_Math$abs$toFixed = _Math$abs.toFixed(2)) === null || _Math$abs$toFixed === void 0 ? void 0 : _Math$abs$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',')) : "$" + ((_value$toFixed = value.toFixed(2)) === null || _value$toFixed === void 0 ? void 0 : _value$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
     }
   } catch (e) {}
-
   return returnValue;
 };
 var getLocalTime = function getLocalTime(_ref) {
   var time = _ref.time,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
-      isMoment = _ref.isMoment;
-
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
+    isMoment = _ref.isMoment;
   if (!time) {
     return time;
   }
-
   var convertedTime = moment.utc(time).clone().local();
-
   if (!isMoment) {
     convertedTime = convertedTime.format(format);
   }
-
   return convertedTime;
 };
 function hexToRgbA(hex) {
   var c;
-
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
     c = hex.substring(1).split('');
-
     if (c.length == 3) {
       c = [c[0], c[0], c[1], c[1], c[2], c[2]];
     }
-
     c = '0x' + c.join('');
     return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
   }
-
   throw new Error('Bad Hex');
 }
 
@@ -3590,13 +3513,11 @@ var erLocalStorage = {
   },
   getJSONItem: function getJSONItem(key) {
     var returnValue = {};
-
     try {
       returnValue = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : {};
     } catch (e) {
       console.error(e);
     }
-
     return returnValue;
   }
 };
@@ -3605,13 +3526,10 @@ var ErCache = /*#__PURE__*/function () {
   function ErCache() {
     this.sessionStorage = typeof window !== 'undefined' ? window.sessionStorage : {};
   }
-
   var _proto = ErCache.prototype;
-
   _proto.getItem = function getItem(key) {
     return this.sessionStorage.getItem(key);
   };
-
   _proto.getJSONItem = function getJSONItem(key) {
     try {
       return JSON.parse(this.sessionStorage.getItem(key));
@@ -3619,61 +3537,52 @@ var ErCache = /*#__PURE__*/function () {
       return {};
     }
   };
-
   _proto.removeItem = function removeItem(key) {
     this.sessionStorage.removeItem(key);
   };
-
   _proto.setItem = function setItem(_ref) {
     var key = _ref.key,
-        value = _ref.value;
+      value = _ref.value;
     return this.sessionStorage.setItem(key, value);
   };
-
   _proto.setJSONItem = function setJSONItem(_ref2) {
     var key = _ref2.key,
-        value = _ref2.value;
-
+      value = _ref2.value;
     try {
       return this.sessionStorage.setItem(key, JSON.stringify(value));
     } catch (e) {
       console.error(e);
     }
   };
-
   return ErCache;
 }();
-
 var erCache = new ErCache();
 
 var getItem = erLocalStorage.getItem,
-    getJSONItem = erLocalStorage.getJSONItem,
-    setItem = erLocalStorage.setItem;
+  getJSONItem = erLocalStorage.getJSONItem,
+  setItem = erLocalStorage.setItem;
 var ACCESS_TOKEN = STORAGE_KEYS.ACCESS_TOKEN,
-    REFRESH_TOKEN = STORAGE_KEYS.REFRESH_TOKEN;
+  REFRESH_TOKEN = STORAGE_KEYS.REFRESH_TOKEN;
 var byPassAuthAPIs = ['/authenticate'];
 var API_CACHE_PREFIX = 'API_CACHE';
-
 var getKeyFromPath = function getKeyFromPath(_ref) {
   var path = _ref.path,
-      queryParams = _ref.queryParams;
+    queryParams = _ref.queryParams;
   return API_CACHE_PREFIX + "_" + path + "_" + JSON.stringify(queryParams);
 };
-
 var getAPICacheData = function getAPICacheData(_ref2) {
   var path = _ref2.path,
-      queryParams = _ref2.queryParams;
+    queryParams = _ref2.queryParams;
   var cachedData = erCache.getJSONItem(getKeyFromPath({
     path: path,
     queryParams: queryParams
   }));
   return lodash.isEmpty(cachedData) ? null : cachedData;
 };
-
 var setAPIDataToCache = function setAPIDataToCache(_ref3) {
   var path = _ref3.path,
-      queryParams = _ref3.queryParams,
-      data = _ref3.data;
+    queryParams = _ref3.queryParams,
+    data = _ref3.data;
   erCache.setJSONItem({
     key: getKeyFromPath({
       path: path,
@@ -3682,66 +3591,56 @@ var setAPIDataToCache = function setAPIDataToCache(_ref3) {
     value: data
   });
 };
-
 var CancelToken = axios.CancelToken;
 var source;
-
 var API = function API(apiData) {
   try {
     var url = apiData.url,
-        method = apiData.method,
-        _apiData$queryParams = apiData.queryParams,
-        queryParams = _apiData$queryParams === void 0 ? {} : _apiData$queryParams,
-        formData = apiData.formData,
-        body = apiData.body,
-        isCancelToken = apiData.isCancelToken,
-        cache = apiData.cache,
-        _apiData$headers = apiData.headers,
-        headers = _apiData$headers === void 0 ? {} : _apiData$headers,
-        successMessage = apiData.successMessage,
-        hideErrorMessage = apiData.hideErrorMessage,
-        responseTypeData = apiData.responseTypeData,
-        apiEndPoint = apiData.apiEndPoint,
-        token = apiData.token;
+      method = apiData.method,
+      _apiData$queryParams = apiData.queryParams,
+      queryParams = _apiData$queryParams === void 0 ? {} : _apiData$queryParams,
+      formData = apiData.formData,
+      body = apiData.body,
+      isCancelToken = apiData.isCancelToken,
+      cache = apiData.cache,
+      _apiData$headers = apiData.headers,
+      headers = _apiData$headers === void 0 ? {} : _apiData$headers,
+      successMessage = apiData.successMessage,
+      hideErrorMessage = apiData.hideErrorMessage,
+      responseTypeData = apiData.responseTypeData,
+      apiEndPoint = apiData.apiEndPoint,
+      token = apiData.token;
     return Promise.resolve(_finallyRethrows(function () {
       return _catch(function () {
         function _temp2() {
           if (successMessage) {
             alert(successMessage);
           }
-
           if (responseTypeData) {
             return response.data;
           } else {
             return response.data.result;
           }
         }
-
         var apiUrl = ("/" + url).replace(/\/\//g, '/');
         var accessToken = token;
         var requestHeaders = headers;
-
         if (byPassAuthAPIs.indexOf(url) === -1) {
           requestHeaders = _extends({}, headers, {
             Authorization: "Bearer " + accessToken,
             Accept: "application/json, text/plain"
           });
         }
-
         var response;
-
         if (isCancelToken && typeof source != typeof undefined) {
           source.cancel();
         }
-
         source = CancelToken.source();
-
         if (apiUrl.indexOf('/services') === 0) {
           queryParams.token = accessToken;
         } else {
           apiUrl = "" + (API_END_POINT || apiEndPoint) + apiUrl;
         }
-
         var _temp = function () {
           if (cache && getAPICacheData({
             path: apiUrl,
@@ -3762,7 +3661,6 @@ var API = function API(apiData) {
               responseType: responseTypeData ? responseTypeData : null
             })).then(function (_axios$request) {
               response = _axios$request;
-
               if (cache) {
                 setAPIDataToCache({
                   path: apiUrl,
@@ -3773,11 +3671,9 @@ var API = function API(apiData) {
             });
           }
         }();
-
         return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       }, function (exception) {
         var _exit = false;
-
         function _temp4(_result3) {
           return _exit ? _result3 : function () {
             if (axios.isCancel(exception)) {} else {
@@ -3791,15 +3687,12 @@ var API = function API(apiData) {
             }
           }();
         }
-
         var exceptionResponse = exception.response;
-
         var _temp3 = function () {
           if (exceptionResponse.data.hasError) {
             if (url != '/employee') {
               alert(exceptionResponse.data.error.message);
             }
-
             return function () {
               if (exceptionResponse.data.exception) {
                 return Promise.resolve(handleError({
@@ -3815,7 +3708,6 @@ var API = function API(apiData) {
             }();
           }
         }();
-
         return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       });
     }, function (_wasThrown, _result) {
@@ -3826,14 +3718,12 @@ var API = function API(apiData) {
     return Promise.reject(e);
   }
 };
-
 API.get = function (url, options) {
   return API(_extends({
     url: url,
     method: 'get'
   }, options));
 };
-
 API.put = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3841,7 +3731,6 @@ API.put = function (url, body, options) {
     method: 'put'
   }, options));
 };
-
 API.patch = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3849,7 +3738,6 @@ API.patch = function (url, body, options) {
     method: 'patch'
   }, options));
 };
-
 API.post = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3857,7 +3745,6 @@ API.post = function (url, body, options) {
     method: 'post'
   }, options));
 };
-
 API["delete"] = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3865,19 +3752,17 @@ API["delete"] = function (url, body, options) {
     method: 'delete'
   }, options));
 };
-
 var handle401Error = function handle401Error(_ref4) {
   var apiData = _ref4.apiData,
-      exception = _ref4.exception;
-
+    exception = _ref4.exception;
   try {
     return Promise.resolve(_catch(function () {
       var _accessToken$refreshT = {
-        accessToken: getJSONItem(ACCESS_TOKEN),
-        refreshToken: getItem(REFRESH_TOKEN)
-      },
-          oldAccessToken = _accessToken$refreshT.accessToken,
-          oldRefreshToken = _accessToken$refreshT.refreshToken;
+          accessToken: getJSONItem(ACCESS_TOKEN),
+          refreshToken: getItem(REFRESH_TOKEN)
+        },
+        oldAccessToken = _accessToken$refreshT.accessToken,
+        oldRefreshToken = _accessToken$refreshT.refreshToken;
       return Promise.resolve(API({
         url: '/refreshToken',
         hideErrorMessage: true,
@@ -3887,10 +3772,9 @@ var handle401Error = function handle401Error(_ref4) {
         }
       })).then(function (_ref5) {
         var accessToken = _ref5.access,
-            refreshToken = _ref5.refresh;
+          refreshToken = _ref5.refresh;
         setItem(ACCESS_TOKEN, accessToken);
         setItem(REFRESH_TOKEN, refreshToken);
-
         if (apiData.throwErrorOnTokenTimeout) {
           exception.reason = 'resetRefreshToken';
           throw exception;
@@ -3902,29 +3786,25 @@ var handle401Error = function handle401Error(_ref4) {
       var isWindow = typeof window !== 'undefined';
       isWindow && window.dispatchEvent(new Event('authError'));
       exception.message = 'Your session is expired, please login again to continue.';
-
       if (exception.reason) {
         exception.message = '';
       }
-
       throw exception;
     }));
   } catch (e) {
     return Promise.reject(e);
   }
 };
-
 var handleError = function handleError(_ref6) {
   var exception = _ref6.exception,
-      url = _ref6.url,
-      apiData = _ref6.apiData,
-      hideErrorMessage = _ref6.hideErrorMessage;
-
+    url = _ref6.url,
+    apiData = _ref6.apiData,
+    hideErrorMessage = _ref6.hideErrorMessage;
   try {
     var _apiData$throwExcepti = apiData.throwException,
-        throwException = _apiData$throwExcepti === void 0 ? true : _apiData$throwExcepti,
-        errorMessage = apiData.errorMessage,
-        showAPIError = apiData.showAPIError;
+      throwException = _apiData$throwExcepti === void 0 ? true : _apiData$throwExcepti,
+      errorMessage = apiData.errorMessage,
+      showAPIError = apiData.showAPIError;
     return Promise.resolve(function () {
       if (exception.response && (exception.response.status === 401 || exception.response.status === 403) && url !== '/checkLogin' && url !== '/employee' && url !== '/authenticate' && url !== '/refreshToken') {
         return _catch(function () {
@@ -3934,7 +3814,6 @@ var handleError = function handleError(_ref6) {
           }));
         }, function (e) {
           alert(e);
-
           if (throwException) {
             throw exception;
           }
@@ -3942,14 +3821,11 @@ var handleError = function handleError(_ref6) {
       } else {
         if (!hideErrorMessage) {
           var errMessage = errorMessage;
-
           if (showAPIError) {
             errMessage = lodash.get(exception, 'response.data.message');
           }
-
           alert(errMessage);
         }
-
         if (throwException) {
           throw exception;
         }
@@ -3967,13 +3843,18 @@ var loadCachedTableState = function loadCachedTableState(_ref2) {
     filters: {}
   };
 };
-var getcsvData = function getcsvData(url) {
+var getcsvData = function getcsvData(_ref3) {
+  var url = _ref3.url,
+    apiEndPoint = _ref3.apiEndPoint,
+    token = _ref3.token;
   try {
     return Promise.resolve(_catch(function () {
       return Promise.resolve(API({
         method: 'GET',
         url: url,
-        responseTypeData: 'blob'
+        responseTypeData: 'blob',
+        apiEndPoint: apiEndPoint,
+        token: token
       }));
     }, function () {
       message.error('Error in getting csv data.');
@@ -3983,59 +3864,60 @@ var getcsvData = function getcsvData(url) {
   }
 };
 
-var _templateObject$9, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7;
+var _templateObject$9;
+var Loader$1 = function Loader(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    color: "inherit"
+  }), ";"));
+};
+var LoaderContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  & > div {\n    margin: auto;\n    width: 50px;\n    height: 50px;\n  }\n"])));
 
+var _templateObject$a, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7;
 var _excluded = ["apiData", "columns", "listUpdate", "onDataLoad", "expandedRowRender", "onDataLoadError", "pagination", "extraFilterParams", "setExtraFilterParams", "cacheFilters", "tableId", "asyncService", "tableDataList", "filterData"];
 var APITable = React.forwardRef(function (_ref, ref) {
-  var _tableData$pagination, _tableData$pagination2, _tableData$pagination3;
-
+  var _tableData$data, _tableData$data2, _tableData$pagination, _tableData$pagination2, _tableData$pagination3;
   var apiData = _ref.apiData,
-      columns = _ref.columns,
-      listUpdate = _ref.listUpdate,
-      onDataLoad = _ref.onDataLoad,
-      onDataLoadError = _ref.onDataLoadError,
-      pagination = _ref.pagination,
-      _ref$extraFilterParam = _ref.extraFilterParams,
-      extraFilterParams = _ref$extraFilterParam === void 0 ? {} : _ref$extraFilterParam,
-      setExtraFilterParams = _ref.setExtraFilterParams,
-      tableId = _ref.tableId,
-      asyncService = _ref.asyncService,
-      tableDataList = _ref.tableDataList,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    columns = _ref.columns,
+    listUpdate = _ref.listUpdate,
+    onDataLoad = _ref.onDataLoad,
+    onDataLoadError = _ref.onDataLoadError,
+    pagination = _ref.pagination,
+    _ref$extraFilterParam = _ref.extraFilterParams,
+    extraFilterParams = _ref$extraFilterParam === void 0 ? {} : _ref$extraFilterParam,
+    setExtraFilterParams = _ref.setExtraFilterParams,
+    tableId = _ref.tableId,
+    asyncService = _ref.asyncService,
+    tableDataList = _ref.tableDataList,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var getJSONItem = erLocalStorage.getJSONItem;
   var tableCache = getJSONItem(STORAGE_KEYS.TABLE_DATA);
-
   var _useState = React.useState({
-    data: [],
-    pagination: {
-      current: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache.currentPage : 1,
-      showSizeChanger: true,
-      pageSize: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache === null || tableCache === void 0 ? void 0 : tableCache.pageSize : 20,
-      size: 'default'
-    },
-    apiStatus: API_STATUSES.PENDING
-  }),
-      tableData = _useState[0],
-      setTableData = _useState[1];
-
+      data: [],
+      pagination: {
+        current: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache.currentPage : 1,
+        showSizeChanger: true,
+        pageSize: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache === null || tableCache === void 0 ? void 0 : tableCache.pageSize : 20,
+        size: 'default'
+      },
+      apiStatus: API_STATUSES.PENDING
+    }),
+    tableData = _useState[0],
+    setTableData = _useState[1];
   var handleChangePage = function handleChangePage(event, newPage) {
     var pagination = _extends({}, tableData === null || tableData === void 0 ? void 0 : tableData.pagination, {
       current: newPage + 1
     });
-
     setTableData(_extends({}, tableData, {
       pagination: pagination
     }));
     handleTableChange(pagination);
   };
-
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     var pagination = _extends({}, tableData === null || tableData === void 0 ? void 0 : tableData.pagination, {
       pageSize: +event.target.value,
       current: 1
     });
-
     setTableData(_extends({}, tableData, {
       pagination: pagination
     }));
@@ -4050,18 +3932,15 @@ var APITable = React.forwardRef(function (_ref, ref) {
       };
     }
   };
-
   setTableDataOnRef();
   React.useEffect(function () {
     setTableDataOnRef();
-
     if (tableDataList) {
       tableDataList(tableData);
     }
   }, [tableData, ref]);
   React.useEffect(function () {
     var newPagination = _extends({}, tableData.pagination, pagination || {});
-
     setTableData(_extends({}, tableData, {
       pagination: newPagination
     }));
@@ -4071,10 +3950,8 @@ var APITable = React.forwardRef(function (_ref, ref) {
       });
     }, 200);
   }, [listUpdate, pagination]);
-
   var getFilterQueryParams = function getFilterQueryParams(filters) {
     var resultFilters = {};
-
     if (lodash.isPlainObject(filters)) {
       Object.keys(filters).forEach(function (filterKey) {
         var filterColumn = columns.find(function (column) {
@@ -4085,13 +3962,10 @@ var APITable = React.forwardRef(function (_ref, ref) {
       });
       setExtraFilterParams && setExtraFilterParams(_extends({}, extraFilterParams, resultFilters));
     }
-
     return resultFilters;
   };
-
   var getSortQueryParams = function getSortQueryParams(sort) {
     var resultSorters = {};
-
     if (sort) {
       var filterColumn = columns.find(function (column) {
         return column.dataIndex === sort;
@@ -4100,31 +3974,25 @@ var APITable = React.forwardRef(function (_ref, ref) {
       resultSorters.sort = queryKey;
       setExtraFilterParams && setExtraFilterParams(_extends({}, extraFilterParams, resultSorters));
     }
-
     return resultSorters;
   };
-
   var loadDataSource = function loadDataSource(_temp) {
     var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$pagination = _ref2.pagination,
-        pagination = _ref2$pagination === void 0 ? tableData.pagination : _ref2$pagination,
-        filters = _ref2.filters,
-        sort = _ref2.sort,
-        sortDirection = _ref2.sortDirection;
-
+      _ref2$pagination = _ref2.pagination,
+      pagination = _ref2$pagination === void 0 ? tableData.pagination : _ref2$pagination,
+      filters = _ref2.filters,
+      sort = _ref2.sort,
+      sortDirection = _ref2.sortDirection;
     (function () {
       try {
         if (tableData.apiStatus === API_STATUSES.LOADING) {
           return;
         }
-
         setTableData(_extends({}, tableData, {
           apiStatus: API_STATUSES.LOADING
         }));
-
         var _temp5 = _catch(function () {
           var _ref3;
-
           function _temp3() {
             var responseData = apiResponse.content || apiResponse.sliderImageList || apiResponse;
             setTableData(_extends({}, tableData, {
@@ -4136,19 +4004,16 @@ var APITable = React.forwardRef(function (_ref, ref) {
             }));
             onDataLoad && onDataLoad(responseData);
           }
-
           var cachedTableState = loadCachedTableState({
             tableId: tableId
           });
           filters = _extends({}, cachedTableState.filters, filters);
           var apiResponse;
-
           var queryParams = _extends({
             page: pagination.current - 1,
             size: pagination.pageSize,
             sortDirection: sortDirection
           }, getSortQueryParams(sort), (_ref3 = apiData || {}) === null || _ref3 === void 0 ? void 0 : _ref3.queryParams, getFilterQueryParams(filters), extraFilterParams);
-
           var _temp2 = function () {
             if (asyncService) {
               return Promise.resolve(asyncService({
@@ -4164,7 +4029,6 @@ var APITable = React.forwardRef(function (_ref, ref) {
               });
             }
           }();
-
           return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
         }, function (e) {
           setTableData(_extends({}, tableData, {
@@ -4172,14 +4036,12 @@ var APITable = React.forwardRef(function (_ref, ref) {
           }));
           onDataLoadError && onDataLoadError(e);
         });
-
         return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
       } catch (e) {
         Promise.reject(e);
       }
     })();
   };
-
   var handleTableChange = function handleTableChange(pagination, filters, sorter) {
     var sortDirection;
     var sort;
@@ -4190,8 +4052,7 @@ var APITable = React.forwardRef(function (_ref, ref) {
       filters: filters
     });
   };
-
-  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement(PaperContainer, props, /*#__PURE__*/React__default.createElement(TableStyledContainer, _extends({
+  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement(PaperContainer, props, props.tableHeaderContent, /*#__PURE__*/React__default.createElement(TableStyledContainer, _extends({
     sx: {
       maxHeight: 600
     }
@@ -4202,8 +4063,10 @@ var APITable = React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default.createElement(TableCellContainer, _extends({
       key: column.id,
       align: column.align
-    }, props), column.label);
-  }))), /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : tableData.data.map(function (row) {
+    }, props, {
+      titleHeader: true
+    }), column.label);
+  }))), (tableData === null || tableData === void 0 ? void 0 : (_tableData$data = tableData.data) === null || _tableData$data === void 0 ? void 0 : _tableData$data.length) > 0 ? /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : (_tableData$data2 = tableData.data) === null || _tableData$data2 === void 0 ? void 0 : _tableData$data2.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']
@@ -4214,7 +4077,11 @@ var APITable = React.forwardRef(function (_ref, ref) {
         align: column.align
       }, props), column.format ? column.format(value, row) : value);
     }));
-  })))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, _extends({
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'block'
+    }
+  }, /*#__PURE__*/React__default.createElement(Loader$1, null)))), /*#__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,
@@ -4224,69 +4091,76 @@ var APITable = React.forwardRef(function (_ref, ref) {
     onRowsPerPageChange: handleChangeRowsPerPage
   }, props))));
 });
-var Root = styled(material.Stack)(_templateObject$9 || (_templateObject$9 = _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) {
+var Root = styled(material.Stack)(_templateObject$a || (_templateObject$a = _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;
 });
-var PaperContainer = styled(material.Paper)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
+var PaperContainer = styled(material.Paper)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n  box-shadow: 0px 0px 4px 0px;\n  padding: 1rem;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
 });
 var TableStyledContainer = styled(material.TableContainer)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px 20px 0 0 !important;\n"])));
-var TableStyled = styled(material.Table)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose([""])));
-var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
+var TableStyled = styled(material.Table)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  font-family: Poppins !important;\n  background-color: ", " !important;\n  color: ", " !important;\n  font-weight: ", ";\n  padding: 12px !important;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
+}, function (props) {
+  return props.titleHeader && '600 !important';
 });
-var TablePaginationContainer = styled(material.TablePagination)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 0 0 20px 20px !important;\n"])), function (props) {
+var TablePaginationContainer = styled(material.TablePagination)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 0 0 20px 20px !important;\n  .MuiSelect-select,\n  p {\n    font-family: Poppins !important;\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
 });
 
-var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$5, _templateObject8$2, _templateObject9$2;
-
+var _templateObject$b, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$5, _templateObject8$2, _templateObject9$2, _templateObject10$1, _templateObject11$1;
 var Dashboard = function Dashboard(_ref) {
-  var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4;
-
+  var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4, _customerData$custome5, _customerData$custome6, _customerData$custome7;
   var apiEndPoint = _ref.apiEndPoint,
-      token = _ref.token,
-      primaryColor = _ref.primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      backgroundColor = _ref.backgroundColor,
-      fontColor = _ref.fontColor;
-
+    serviceApiEndPoint = _ref.serviceApiEndPoint,
+    token = _ref.token,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    backgroundColor = _ref.backgroundColor,
+    fontColor = _ref.fontColor;
   var _useState = React.useState({}),
-      customerData = _useState[0],
-      setCustomerData = _useState[1];
-
+    customerData = _useState[0],
+    setCustomerData = _useState[1];
   var _useState2 = React.useState({}),
-      dashboardData = _useState2[0],
-      setDashboardData = _useState2[1];
-
-  var _useState3 = React.useState([null, null]);
-
-  var getJSONItem = erLocalStorage.getJSONItem;
-  var STORE_IDS = STORAGE_KEYS.STORE_IDS;
-
-  var openInvoiceData = function openInvoiceData(orderId) {};
-
+    dashboardData = _useState2[0],
+    setDashboardData = _useState2[1];
+  var _useState3 = React.useState({
+      open: false,
+      url: ''
+    }),
+    invoiceModal = _useState3[0],
+    setInvoiceModal = _useState3[1];
+  var defaultStoreId = (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerStoreDtoListt) === null || _customerData$custome === void 0 ? void 0 : (_customerData$custome2 = _customerData$custome.find(function (data) {
+    return (data === null || data === void 0 ? void 0 : data.defaultStore) === true;
+  })) === null || _customerData$custome2 === void 0 ? void 0 : _customerData$custome2.id) || 2;
+  var storeIdList = (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome3 = customerData.customerStoreDtoListtt) === null || _customerData$custome3 === void 0 ? void 0 : _customerData$custome3.map(function (data) {
+    return data.id;
+  }).join(',')) || '1,2,46,47,48,49,50,51,52,53,54';
+  var openInvoiceData = function openInvoiceData(orderId) {
+    serviceApiEndPoint && setInvoiceModal({
+      open: true,
+      url: serviceApiEndPoint + "/sales-order/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList
+    });
+  };
   var downloadInvoice = function downloadInvoice(orderId) {
     try {
-      var _getStoreIdsData$stor;
-
-      var getStoreIdsData = getJSONItem(STORE_IDS);
-      var storeIdList = (getStoreIdsData === null || getStoreIdsData === void 0 ? void 0 : (_getStoreIdsData$stor = getStoreIdsData.storeIds) === null || _getStoreIdsData$stor === void 0 ? void 0 : _getStoreIdsData$stor.map(function (data) {
-        return data.id;
-      }).join(',')) || 1;
-      var url1 = "/ecommerce/order/" + orderId + "/export/csv?storeIds=" + storeIdList;
-      return Promise.resolve(getcsvData(url1)).then(function (data) {
+      var url = "/ecommerce/order/" + orderId + "/export/csv?storeIds=" + storeIdList;
+      return Promise.resolve(getcsvData({
+        url: url,
+        apiEndPoint: apiEndPoint,
+        token: token
+      })).then(function (data) {
         if (data) {
           var blob = new Blob([data]);
-          var url = window.URL.createObjectURL(blob);
+          var url1 = window.URL.createObjectURL(blob);
           var link = document.createElement('a');
-          link.href = url;
+          link.href = url1;
           link.setAttribute('download', "invoice-" + orderId + ".xlsx");
           document.body.appendChild(link);
           link.click();
@@ -4296,7 +4170,6 @@ var Dashboard = function Dashboard(_ref) {
       return Promise.reject(e);
     }
   };
-
   var columns = [{
     id: 'orderId',
     label: 'Order'
@@ -4327,14 +4200,14 @@ var Dashboard = function Dashboard(_ref) {
     id: 'status',
     label: 'Status',
     format: function format(value) {
-      return /*#__PURE__*/React__default.createElement(Fragment, null, value);
+      return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(StatusContainer, null, value));
     }
   }, {
     id: 'trackingNumber',
     label: 'Tracking Number',
     format: function format(value, _ref2) {
       var trackingNumber = _ref2.trackingNumber,
-          trackingNumberUrl = _ref2.trackingNumberUrl;
+        trackingNumberUrl = _ref2.trackingNumberUrl;
       return /*#__PURE__*/React__default.createElement("a", {
         href: trackingNumberUrl,
         target: '_blank'
@@ -4345,27 +4218,29 @@ var Dashboard = function Dashboard(_ref) {
     label: 'Action',
     align: 'center',
     format: function format(value) {
-      return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Button, {
+      return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.IconButton, {
         onClick: function onClick() {
-          return openInvoiceData();
+          return openInvoiceData(value);
         },
         style: {
-          color: primaryColor
+          color: primaryColor,
+          padding: 2
         }
       }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, {
         style: {
-          fontSize: '2rem'
+          fontSize: '1.6rem'
         }
-      })), /*#__PURE__*/React__default.createElement(material.Button, {
+      })), /*#__PURE__*/React__default.createElement(material.IconButton, {
         onClick: function onClick() {
           return downloadInvoice(value);
         },
         style: {
-          color: primaryColor
+          color: primaryColor,
+          padding: 2
         }
       }, /*#__PURE__*/React__default.createElement(md.MdOutlineFileDownload, {
         style: {
-          fontSize: 26
+          fontSize: '1.6rem'
         }
       })));
     }
@@ -4389,20 +4264,19 @@ var Dashboard = function Dashboard(_ref) {
             });
           });
         }, function () {});
-
         return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
       } catch (e) {
         Promise.reject(e);
       }
     })();
   }, []);
-  var totalDataSource = convertCamCaseToSnake(dashboardData);
+  var totalDataSource = convertCamCaseToSnake(dashboardData) || [];
   return /*#__PURE__*/React__default.createElement(Root$1, {
     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("b", 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, {
+  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("b", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome4 = customerData.customerDto) === null || _customerData$custome4 === void 0 ? void 0 : _customerData$custome4.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h4",
     gutterBottom: true,
     backgroundColor: backgroundColor,
@@ -4428,7 +4302,7 @@ var Dashboard = function Dashboard(_ref) {
     lg: 2
   }, /*#__PURE__*/React__default.createElement(CardMediaContainer, {
     component: "img",
-    image: "/images/imgnotfound.jpeg",
+    image: "/images/userImage.png",
     alt: "image"
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
@@ -4439,7 +4313,7 @@ var Dashboard = function Dashboard(_ref) {
     primaryColor: primaryColor,
     secondaryColor: secondaryColor,
     fontColor: fontColor
-  }, /*#__PURE__*/React__default.createElement("b", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement("b", null, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("b", null, "Meet Your ")), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -4461,7 +4335,7 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome2 = customerData.customerDto) === null || _customerData$custome2 === void 0 ? void 0 : _customerData$custome2.salesRepresentativeName) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome5 = customerData.customerDto) === null || _customerData$custome5 === void 0 ? void 0 : _customerData$custome5.salesRepresentativeName) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 6,
@@ -4480,7 +4354,7 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome3 = customerData.customerDto) === null || _customerData$custome3 === void 0 ? void 0 : _customerData$custome3.salesRepresentativePhone) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome6 = customerData.customerDto) === null || _customerData$custome6 === void 0 ? void 0 : _customerData$custome6.salesRepresentativePhone) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 6,
@@ -4499,12 +4373,11 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome4 = customerData.customerDto) === null || _customerData$custome4 === void 0 ? void 0 : _customerData$custome4.salesRepresentativeEmail) || 'N/A'))))))), /*#__PURE__*/React__default.createElement(TotalRoot, null, /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome7 = customerData.customerDto) === null || _customerData$custome7 === void 0 ? void 0 : _customerData$custome7.salesRepresentativeEmail) || 'N/A'))))))), /*#__PURE__*/React__default.createElement(TotalRoot, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
     var _data$name, _data$name2, _data$name3;
-
     var isAmount = (data === null || data === void 0 ? void 0 : (_data$name = data.name) === null || _data$name === void 0 ? void 0 : _data$name.indexOf('Amount')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name2 = data.name) === null || _data$name2 === void 0 ? void 0 : _data$name2.indexOf('Credit')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name3 = data.name) === null || _data$name3 === void 0 ? void 0 : _data$name3.indexOf('Price')) > 1;
     return /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true,
@@ -4520,13 +4393,32 @@ var Dashboard = function Dashboard(_ref) {
       secondaryColor: secondaryColor,
       fontColor: fontColor
     }, /*#__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,
-    fontColor: fontColor,
-    backgroundColor: backgroundColor
-  }, "Recent Orders")), /*#__PURE__*/React__default.createElement(APITable, {
+  }))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(InvoiceDialog, {
+    onClose: function onClose() {
+      return setInvoiceModal({
+        open: false
+      });
+    },
+    "aria-labelledby": "customized-dialog-title",
+    open: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.open,
+    maxWidth: "lg"
+  }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
+    dividers: true
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    src: invoiceModal.url
+  }))), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
+    tableHeaderContent: /*#__PURE__*/React__default.createElement(TypographyContainer, {
+      variant: "h5",
+      gutterBottom: true,
+      fontColor: fontColor,
+      style: {
+        fontWeight: 600,
+        color: primaryColor,
+        padding: '1rem 0',
+        margin: 0
+      }
+    }, "Recent Orders"),
     pagination: false,
     scroll: {
       x: 1000
@@ -4545,24 +4437,24 @@ var Dashboard = function Dashboard(_ref) {
     fontColor: fontColor
   })));
 };
-var Root$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose([""])));
-var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  b {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
+var Root$1 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose([""])));
+var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  b {\n    color: ", ";\n    font-size: 2.5rem;\n    font-family: Poppins;\n  }\n"])), function (props) {
   return props.primaryColor;
 });
-var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  b {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
+var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  font-family: Poppins;\n  span > b {\n    color: ", ";\n    font-size: 2rem;\n  }\n  b {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 }, function (props) {
   return props.fontColor;
 });
-var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  font-family: Poppins !important;\n"])), function (props) {
   return props.fontColor;
 });
 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;
 });
-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  :hover {\n    background-color: ", ";\n    p,\n    h3,\n    svg {\n      color: #fff;\n    }\n  }\n  p {\n    font-size: 1.2rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 2rem;\n    color: ", ";\n  }\n"])), function (props) {
+var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 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  font-family: Poppins !important;\n  :hover {\n    background-color: ", ";\n    p,\n    h3,\n    svg {\n      color: #fff;\n    }\n  }\n  p {\n    font-size: 1.2rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 2rem;\n    color: ", ";\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.primaryColor;
@@ -4571,16 +4463,17 @@ var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObje
 }, function (props) {
   return props.fontColor;
 });
-var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
-
-var _templateObject$b;
+var StatusContainer = styled.span(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  box-shadow: 0px 0px 1px 0px;\n  padding: 2px 4px;\n"])));
+var TableContainer = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
+var InvoiceDialog = styled(material.Dialog)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
 
+var _templateObject$c;
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
-      onClick = props.onClick,
-      link = props.link,
-      children = props.children,
-      primaryColor = props.primaryColor;
+    onClick = props.onClick,
+    link = props.link,
+    children = props.children,
+    primaryColor = props.primaryColor;
 
   if (!link || typeof link !== 'string') {
     return /*#__PURE__*/React__default.createElement(material.ListItem, {
@@ -4606,29 +4499,27 @@ var SideMenuItemComponent = function SideMenuItemComponent(props) {
     to: link
   });
 };
-
 var SideMenuItem = function SideMenuItem(props) {
   var name = props.name,
-      link = props.link,
-      Icon = props.Icon,
-      _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items,
-      primaryColor = props.primaryColor,
-      list = props.list;
+    link = props.link,
+    Icon = props.Icon,
+    _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    primaryColor = props.primaryColor,
+    fontColor = props.fontColor,
+    list = props.list;
   var isExpandable = items && items.length > 0;
-
   var _React$useState = React__default.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
   function handleClick() {
     setOpen(!open);
   }
-
   var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponentContainer, {
     link: link,
     onClick: handleClick,
     primaryColor: primaryColor,
+    fontColor: fontColor,
     open: open,
     list: list
   }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
@@ -4646,26 +4537,30 @@ var SideMenuItem = function SideMenuItem(props) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
       primaryColor: primaryColor,
+      fontColor: fontColor,
       list: true
     }));
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  min-width: 40px !important;\n"])));
 var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(function (_ref) {
   var primaryColor = _ref.primaryColor,
-      list = _ref.list;
+    fontColor = _ref.fontColor,
+    list = _ref.list;
   return {
-    background: list ? "rgba(" + hexToRgbA(primaryColor) + ",0.9)" : "rgba(" + hexToRgbA(primaryColor) + ")",
-    color: '#fff',
+    background: list ? "transparent" : "rgba(" + hexToRgbA(primaryColor) + ")",
+    color: list ? fontColor : '#fff',
     '& .MuiTypography-root': {
-      fontWeight: '600 '
+      fontWeight: '600 ',
+      fontFamily: 'Poppins'
     },
     '&:hover': {
       background: "rgba(" + hexToRgbA(primaryColor) + ",0.8)"
     },
     '& svg': {
-      fontSize: 22
+      fontSize: 22,
+      color: list ? fontColor : '#fff'
     }
   };
 });
@@ -4735,7 +4630,6 @@ var sideMenuItems = [{
     Icon: md.MdLibraryBooks
   }]
 }];
-
 var SideMenu = function SideMenu(props) {
   return /*#__PURE__*/React__default.createElement(material.List, {
     component: "nav",
@@ -4743,45 +4637,73 @@ var SideMenu = function SideMenu(props) {
   }, sideMenuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
-      primaryColor: props.primaryColor
+      primaryColor: props.primaryColor,
+      fontColor: props.fontColor
     }));
   }));
 };
 
-var _templateObject$c, _templateObject2$b, _templateObject3$b;
-var drawerWidth = 240;
-
+var _templateObject$d, _templateObject2$b, _templateObject3$b;
+var drawerWidth = 280;
 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.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 ? '#000' : _ref$fontColor,
-      backgroundImage = _ref.backgroundImage;
-
+    apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
+    _ref$token = _ref.token,
+    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTQzMzY1NywidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUzOTc2NTcsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.R7yg7-FWMy6mvs6WmGjKFwJ6jdn8o7nEeWDIH6BfYFs' : _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,
+    backgroundImage = _ref.backgroundImage;
+  var serviceApiEndPoint = 'https://dev.salesgent.xyz/api'.replace('/api', '/services/pdf');
   var _useState = React.useState(true),
-      open = _useState[0],
-      setOpen = _useState[1];
-
+    open = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = React.useState(false),
+    isNightMode = _useState2[0],
+    setIsNightMode = _useState2[1];
+  var _useState3 = React.useState({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#AFAEB0',
+      backgroundColor: backgroundColor || '#BCBDBF',
+      fontColor: fontColor || '#000000D9',
+      backgroundImage: backgroundImage || '/images/backgroundLight.png'
+    }),
+    colors = _useState3[0],
+    setColors = _useState3[1];
   var handleDrawerOpen = function handleDrawerOpen() {
     setOpen(function (prev) {
       return !prev;
     });
   };
-
+  var handleNightMode = function handleNightMode() {
+    setIsNightMode(function (prev) {
+      return !prev;
+    });
+    isNightMode ? setColors({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#ACAAAE',
+      backgroundColor: backgroundColor || '#BCBDBF',
+      fontColor: fontColor || '#000000D9',
+      backgroundImage: backgroundImage || '/images/backgroundLight.png'
+    }) : setColors({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#26232F',
+      backgroundColor: backgroundColor || '#1F1B1B',
+      fontColor: '#fff',
+      backgroundImage: backgroundImage || '/images/backgroundDark.png'
+    });
+  };
   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,
+    primaryColor: colors.primaryColor,
     sx: {
       display: 'flex'
     },
-    backgroundImage: backgroundImage
+    backgroundImage: colors.backgroundImage
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
-    primaryColor: primaryColor,
+    primaryColor: colors.primaryColor,
     sx: {
       width: drawerWidth,
       flexShrink: 0,
@@ -4794,14 +4716,20 @@ var AccountDetails = function AccountDetails(_ref) {
     anchor: "left",
     open: open
   }, /*#__PURE__*/React__default.createElement(SideMenu, {
-    primaryColor: primaryColor
+    primaryColor: colors.primaryColor,
+    fontColor: colors.fontColor
   })), /*#__PURE__*/React__default.createElement(Main, {
     open: open,
-    backgroundColor: backgroundColor
+    backgroundColor: colors.backgroundColor
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Toolbar, {
     style: {
-      padding: '0 2px',
-      minHeight: 32
+      padding: '10px 0 0 2px',
+      minHeight: 32,
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex'
     }
   }, /*#__PURE__*/React__default.createElement(material.IconButton, {
     color: "inherit",
@@ -4812,24 +4740,37 @@ var AccountDetails = function AccountDetails(_ref) {
       mr: 2,
       '& svg': {
         fontSize: 26,
-        color: fontColor
+        color: colors.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, {
+    fontColor: colors.fontColor
+  }, "Dashboard")), /*#__PURE__*/React__default.createElement(material.IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleNightMode,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26,
+        color: colors.fontColor
+      }
+    }
+  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
+    serviceApiEndPoint: serviceApiEndPoint,
     token: token,
-    primaryColor: primaryColor,
-    secondaryColor: secondaryColor,
-    backgroundColor: backgroundColor,
-    fontColor: fontColor
+    primaryColor: colors.primaryColor,
+    secondaryColor: colors.secondaryColor,
+    backgroundColor: colors.backgroundColor,
+    fontColor: colors.fontColor
   }))))));
 };
-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) {
+var Root$2 = styled(material.Box)(_templateObject$d || (_templateObject$d = _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 Main = styles.styled('main', {
@@ -4838,8 +4779,8 @@ var Main = styles.styled('main', {
   }
 })(function (_ref2) {
   var theme = _ref2.theme,
-      open = _ref2.open,
-      backgroundColor = _ref2.backgroundColor;
+    open = _ref2.open,
+    backgroundColor = _ref2.backgroundColor;
   return _extends({
     flexGrow: 1,
     padding: "0 " + theme.spacing(3),
@@ -4859,15 +4800,14 @@ var Main = styles.styled('main', {
     borderRadius: 25
   });
 });
-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    border-top-right-radius: 20px;\n  }\n"])), function (props) {
+var ContainerDrawer = styled(material.Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 280px;\n    z-index: 1;\n    overflow: hidden;\n    border-top-right-radius: 20px;\n    background: transparent;\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) {
+var TypographyContainer$1 = styled(material.Typography)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  font-family: Poppins !important;\n"])), function (props) {
   return props.fontColor;
 });
 
 var Breakpoint = function Breakpoint() {};
-
 Breakpoint.xs = 'xs';
 Breakpoint.sm = 'sm';
 Breakpoint.md = 'md';
@@ -4876,7 +4816,6 @@ Breakpoint.xl = 'xl';
 Breakpoint.xxl = 'xxl';
 
 var Variant = function Variant() {};
-
 Variant.ONE = 'one';
 Variant.TWO = 'two';
 Variant.THREE = 'three';
@@ -4885,11 +4824,9 @@ function debounce(func, wait, immediate) {
   var timeout;
   return function () {
     var _this = this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     clearTimeout(timeout);
     timeout = setTimeout(function () {
       timeout = null;
@@ -4901,14 +4838,12 @@ function debounce(func, wait, immediate) {
 
 function useWindowSize() {
   var isWindow = typeof window !== 'undefined';
-
   var _useState = React.useState({
-    width: isWindow ? window.innerWidth : 1200,
-    height: isWindow ? window.innerHeight : 800
-  }),
-      windowSize = _useState[0],
-      setWindowSize = _useState[1];
-
+      width: isWindow ? window.innerWidth : 1200,
+      height: isWindow ? window.innerHeight : 800
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
   React.useEffect(function () {
     var onWindowResize = function onWindowResize() {
       setWindowSize({
@@ -4916,7 +4851,6 @@ function useWindowSize() {
         height: window.innerHeight
       });
     };
-
     var onResize = debounce(onWindowResize, 100);
     window.addEventListener('resize', onResize);
     onWindowResize();
@@ -4930,41 +4864,31 @@ function useWindowSize() {
 var getBreakpoint = function getBreakpoint(_ref) {
   var screen = _ref.width;
   var breakpoint = '';
-
   if (screen <= 320) {
     breakpoint = Breakpoint.xs;
   }
-
   if (screen >= 375) {
     breakpoint = Breakpoint.sm;
   }
-
   if (screen >= 768) {
     breakpoint = Breakpoint.md;
   }
-
   if (screen >= 992) {
     breakpoint = Breakpoint.lg;
   }
-
   if (screen >= 1200) {
     breakpoint = Breakpoint.xl;
   }
-
   if (screen >= 1600) {
     breakpoint = Breakpoint.xxl;
   }
-
   return breakpoint;
 };
-
 function useGridSize() {
   var windowSize = useWindowSize();
-
   var _useState = React.useState(Breakpoint.md),
-      layout = _useState[0],
-      setLayout = _useState[1];
-
+    layout = _useState[0],
+    setLayout = _useState[1];
   React.useEffect(function () {
     setLayout(getBreakpoint(windowSize));
   }, [windowSize]);