@salesgenterp/ui-components 0.4.83 → 0.4.85

package/dist/index.js

@@ -23,9 +23,10 @@ var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
 var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
-var styles = require('@mui/styles');
+var moment = _interopDefault(require('moment'));
 var lodash = require('lodash');
 var axios = _interopDefault(require('axios'));
+var styles = require('@mui/styles');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -59,10 +60,6 @@ function _setPrototypeOf(o, p) {
   return _setPrototypeOf(o, p);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -289,7 +286,7 @@ function createCommonjsModule(fn, module) {
  */
 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment$1=e;var Lazy=t;var Memo=r;var Portal=d;
 var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
 var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
 var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
@@ -301,7 +298,7 @@ var reactIs_production_min = {
 	ContextProvider: ContextProvider,
 	Element: Element,
 	ForwardRef: ForwardRef,
-	Fragment: Fragment,
+	Fragment: Fragment$1,
 	Lazy: Lazy,
 	Memo: Memo,
 	Portal: Portal,
@@ -3461,6 +3458,27 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   }));
 };
 
+var API_END_POINT = 'https://dev.salesgent.xyz/api';
+var STORAGE_KEYS = {
+  ACCESS_TOKEN: 'accessToken',
+  REFRESH_TOKEN: 'refreshToken',
+  TABLE_STATE: 'TABLE_STATE',
+  TABLE_DATA: 'TABLE_DATA'
+};
+var API_STATUSES = Object.freeze({
+  PENDING: 'PENDING',
+  LOADING: 'LOADING',
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR'
+});
+var DATE_FORMATS = {
+  DEFAULT_DATE_TIME_FORMAT: 'YYYY-MM-DD HH:mm:ss',
+  TIMESTAMP_FORMAT: 'MM-DD-YY hh:mm A',
+  LIST_DATE_TIME_FORMAT: 'YYYY-MM-DD hh:mm A',
+  DEFAULT_DATE_FORMAT: 'YYYY-MM-DD',
+  TIME: 'hh:mm:ss A'
+};
+
 var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
   var data = [];
   var i = 1;
@@ -3476,6 +3494,37 @@ var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
   });
   return data;
 };
+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;
+
+  if (!time) {
+    return time;
+  }
+
+  var convertedTime = moment.utc(time).clone().local();
+
+  if (!isMoment) {
+    convertedTime = convertedTime.format(format);
+  }
+
+  return convertedTime;
+};
 
 // A type of promise-like that resolves synchronously and supports only one observer
 
@@ -3536,20 +3585,6 @@ var erLocalStorage = {
   }
 };
 
-var API_END_POINT = 'https://dev.salesgent.xyz/api';
-var STORAGE_KEYS = {
-  ACCESS_TOKEN: 'accessToken',
-  REFRESH_TOKEN: 'refreshToken',
-  TABLE_STATE: 'TABLE_STATE',
-  TABLE_DATA: 'TABLE_DATA'
-};
-var API_STATUSES = Object.freeze({
-  PENDING: 'PENDING',
-  LOADING: 'LOADING',
-  SUCCESS: 'SUCCESS',
-  ERROR: 'ERROR'
-});
-
 var getJSONItem = erLocalStorage.getJSONItem;
 var loadCachedTableState = function loadCachedTableState(_ref2) {
   var tableId = _ref2.tableId;
@@ -3560,7 +3595,7 @@ var loadCachedTableState = function loadCachedTableState(_ref2) {
 
 var ErCache = /*#__PURE__*/function () {
   function ErCache() {
-    this.sessionStorage = window.sessionStorage;
+    this.sessionStorage = typeof window !== 'undefined' ? window.sessionStorage : {};
   }
 
   var _proto = ErCache.prototype;
@@ -3673,7 +3708,7 @@ var API = function API(apiData) {
         }
 
         var apiUrl = ("/" + url).replace(/\/\//g, '/');
-        var accessToken = getItem(ACCESS_TOKEN) || 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NDkyNDE0MywidXNlcklkIjoyNDU1LCJpYXQiOjE2NjQ4ODgxNDMsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.W_3ct4vGwIr9ptECZ8mJomvwLhzhGjTmVVK6Htdog8g';
+        var accessToken = getItem(ACCESS_TOKEN) || 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NDk5MzU2OCwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjQ5NTc1NjgsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.AZ9BKlpRSQwQtTztiPu8VEYjd3N0zCa6lmKFEtXr8JU';
         var requestHeaders = headers;
 
         if (byPassAuthAPIs.indexOf(url) === -1) {
@@ -3915,8 +3950,12 @@ var handleError = function handleError(_ref6) {
   }
 };
 
+var _templateObject$9, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$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 apiData = _ref.apiData,
       columns = _ref.columns,
       listUpdate = _ref.listUpdate,
@@ -3931,25 +3970,6 @@ var APITable = React.forwardRef(function (_ref, ref) {
       tableDataList = _ref.tableDataList,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  console.log('columns: ', columns);
-
-  var _React$useState = React__default.useState(0),
-      page = _React$useState[0],
-      setPage = _React$useState[1];
-
-  var _React$useState2 = React__default.useState(10),
-      rowsPerPage = _React$useState2[0],
-      setRowsPerPage = _React$useState2[1];
-
-  var handleChangePage = function handleChangePage(event, newPage) {
-    setPage(newPage);
-  };
-
-  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
-
   var getJSONItem = erLocalStorage.getJSONItem;
   var tableCache = getJSONItem(STORAGE_KEYS.TABLE_DATA);
 
@@ -3966,7 +3986,28 @@ var APITable = React.forwardRef(function (_ref, ref) {
       tableData = _useState[0],
       setTableData = _useState[1];
 
-  console.log('tableData: ', tableData);
+  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
+    }));
+    handleTableChange(pagination);
+  };
 
   var setTableDataOnRef = function setTableDataOnRef() {
     if (ref) {
@@ -4077,7 +4118,11 @@ var APITable = React.forwardRef(function (_ref, ref) {
 
           var _temp2 = function () {
             if (asyncService) {
-              apiResponse = asyncService;
+              return Promise.resolve(asyncService({
+                queryParams: queryParams
+              })).then(function (_asyncService) {
+                apiResponse = _asyncService;
+              });
             } else {
               return Promise.resolve(API(_extends({}, apiData, {
                 queryParams: queryParams
@@ -4102,19 +4147,26 @@ var APITable = React.forwardRef(function (_ref, ref) {
     })();
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(material.Paper, {
-    sx: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(material.TableContainer, {
+  var handleTableChange = function handleTableChange(pagination, filters, sorter) {
+    var sortDirection;
+    var sort;
+    loadDataSource({
+      sort: sort,
+      sortDirection: sortDirection,
+      pagination: pagination,
+      filters: filters
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaperContainer, null, /*#__PURE__*/React__default.createElement(TableStyledContainer, {
     sx: {
       maxHeight: 440
     }
-  }, /*#__PURE__*/React__default.createElement(material.Table, {
+  }, /*#__PURE__*/React__default.createElement(TableStyled, {
     stickyHeader: true,
     "aria-label": "sticky table"
   }, /*#__PURE__*/React__default.createElement(material.TableHead, null, /*#__PURE__*/React__default.createElement(material.TableRow, null, columns.map(function (column) {
-    return /*#__PURE__*/React__default.createElement(material.TableCell, {
+    return /*#__PURE__*/React__default.createElement(TableCellContainer, {
       key: column.id,
       align: column.align
     }, column.label);
@@ -4124,72 +4176,145 @@ var APITable = React.forwardRef(function (_ref, ref) {
       key: row === null || row === void 0 ? void 0 : row[(props === null || props === void 0 ? void 0 : props.rowKey) || 'id']
     }, columns.map(function (column) {
       var value = row[column.id];
-      return /*#__PURE__*/React__default.createElement(material.TableCell, {
+      return /*#__PURE__*/React__default.createElement(TableCellContainer, {
         key: column.id,
         align: column.align
-      }, value);
+      }, column.format ? column.format(value, row) : value);
     }));
-  })))), /*#__PURE__*/React__default.createElement(material.TablePagination, {
+  })))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, {
     rowsPerPageOptions: [10, 20, 50, 100],
     component: "div",
-    count: tableData === null || tableData === void 0 ? void 0 : tableData.totalElements,
-    rowsPerPage: rowsPerPage,
-    page: page,
+    count: tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination = tableData.pagination) === null || _tableData$pagination === void 0 ? void 0 : _tableData$pagination.total,
+    rowsPerPage: tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination2 = tableData.pagination) === null || _tableData$pagination2 === void 0 ? void 0 : _tableData$pagination2.pageSize,
+    page: (tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination3 = tableData.pagination) === null || _tableData$pagination3 === void 0 ? void 0 : _tableData$pagination3.current) - 1,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
   })));
 });
+var PaperContainer = styled(material.Paper)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n"])), function (props) {
+  return props.secondaryColor || '#2B2B4048';
+}, function (props) {
+  return props.primaryColor || '#fff';
+});
+var TableStyledContainer = styled(material.TableContainer)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
+var TableStyled = styled(material.Table)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
+var TableCellContainer = styled(material.TableCell)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
+  return props.secondaryColor || '#2B2B4048';
+}, function (props) {
+  return props.primaryColor || '#fff';
+});
+var TablePaginationContainer = styled(material.TablePagination)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
+  return props.secondaryColor || '#2B2B4048';
+}, function (props) {
+  return props.primaryColor || '#fff';
+});
+
+var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$2, _templateObject9$2;
 
-var _templateObject$9;
-var TotalContainer = styled(material.Stack)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  border: 1px solid red;\n  border-radius: 20px;\n  padding: 14px;\n"])));
-var totalData = {
-  totalAmount: '10622',
-  totalOrder: '622',
-  totalReturnAmount: '622',
-  totalReturn: '622',
-  availableStoreCredit: '622',
-  totalCreditReceived: '622',
-  totalItemOrder: '622',
-  avgOrderTotal: '622'
+var openInvoiceData = function openInvoiceData(orderId) {};
+
+var downloadInvoice = function downloadInvoice(orderId) {
+  return Promise.resolve();
 };
+
 var columns = [{
   id: 'orderId',
   label: 'Order'
 }, {
   id: 'insertedTimestamp',
-  label: 'Date'
+  label: 'Date',
+  format: function format(value) {
+    return getLocalTime({
+      time: value
+    });
+  }
 }, {
   id: 'customerName',
   label: 'Ship To'
 }, {
   id: 'totalAmount',
-  label: 'Total Amount'
+  label: 'Total Amount',
+  format: function format(value) {
+    return renderMoney(value);
+  }
 }, {
   id: 'dueBalance',
-  label: 'Total Due'
+  label: 'Total Due',
+  format: function format(value) {
+    return renderMoney(value);
+  }
 }, {
   id: 'status',
-  label: 'Status'
+  label: 'Status',
+  format: function format(value) {
+    return /*#__PURE__*/React__default.createElement(Fragment, null, value);
+  }
 }, {
   id: 'trackingNumber',
-  label: 'Tracking Number'
-}, {
-  id: 'orderId'
+  label: 'Tracking Number',
+  format: function format(value, _ref) {
+    var trackingNumber = _ref.trackingNumber,
+        trackingNumberUrl = _ref.trackingNumberUrl;
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: trackingNumberUrl,
+      target: '_blank'
+    }, trackingNumber);
+  }
 }, {
-  id: 'orderId'
+  id: 'orderId',
+  label: 'Action',
+  align: 'center',
+  format: function format(value) {
+    return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Button, {
+      onClick: function onClick() {
+        return openInvoiceData();
+      }
+    }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, null)), /*#__PURE__*/React__default.createElement(material.Button, {
+      onClick: function onClick() {
+        return downloadInvoice();
+      }
+    }, /*#__PURE__*/React__default.createElement(md.MdOutlineFileDownload, null)));
+  }
 }];
 
-var Dashboard = function Dashboard(_ref) {
-  _objectDestructuringEmpty(_ref);
+var Dashboard = function Dashboard(_ref2) {
+  var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4;
 
-  var totalDataSource = convertCamCaseToSnake(totalData);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Typography, {
-    variant: "h3",
-    gutterBottom: true
-  }, "Hello Rohit"), /*#__PURE__*/React__default.createElement(material.Typography, {
-    variant: "h5",
+  var primaryColor = _ref2.primaryColor;
+
+  var _useState = React.useState({}),
+      customerData = _useState[0],
+      setCustomerData = _useState[1];
+
+  var _useState2 = React.useState({}),
+      dashboardData = _useState2[0],
+      setDashboardData = _useState2[1];
+
+  React.useEffect(function () {
+    try {
+      try {
+        API.get('/ecommerce/customer').then(function (response) {
+          setCustomerData(response);
+        });
+        API.get('/ecommerce/dashboard').then(function (response) {
+          setDashboardData(response);
+        });
+      } catch (error) {}
+    } catch (e) {
+      Promise.reject(e);
+    }
+  }, []);
+  var totalDataSource = convertCamCaseToSnake(dashboardData);
+  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer, {
+    primaryColor: primaryColor
+  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("strong", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
+    variant: "h4",
     gutterBottom: true
-  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(material.Card, null, /*#__PURE__*/React__default.createElement(material.CardContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(CardContainer, null, /*#__PURE__*/React__default.createElement(material.CardContent, {
+    style: {
+      padding: '2rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -4197,7 +4322,7 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 4,
     lg: 2
-  }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
+  }, /*#__PURE__*/React__default.createElement(CardMediaContainer, {
     component: "img",
     image: "/images/imgnotfound.jpeg",
     alt: "image"
@@ -4206,10 +4331,9 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 8,
     lg: 10
-  }, /*#__PURE__*/React__default.createElement(material.Typography, {
-    variant: "h5",
-    gutterBottom: true
-  }, "Meet Your Account Representative"), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(MeetContainer, {
+    primaryColor: primaryColor
+  }, /*#__PURE__*/React__default.createElement("strong", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -4217,26 +4341,44 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(md.MdPersonOutline, null), "Alok Patel")), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(md.MdPersonOutline, {
+    style: {
+      fontSize: '3rem',
+      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, {
     item: true,
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(md.MdCall, null), "+91 1234567890")), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(md.MdOutlineCall, {
+    style: {
+      fontSize: '3rem',
+      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, {
     item: true,
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(md.MdEmail, null), "AlokPatel@gmail.com"))))))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(md.MdMailOutline, {
+    style: {
+      fontSize: '3rem',
+      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, {
     container: true,
     spacing: 4
   }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
@@ -4253,8 +4395,11 @@ var Dashboard = function Dashboard(_ref) {
     }, /*#__PURE__*/React__default.createElement(TotalContainer, {
       flexDirection: "row",
       justifyContent: "space-between"
-    }, /*#__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 ? '$' : '') + (data === null || data === void 0 ? void 0 : data.value))), isAmount ? /*#__PURE__*/React__default.createElement(md.MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(gr.GrStackOverflow, null)));
-  }))), /*#__PURE__*/React__default.createElement(APITable, {
+    }, /*#__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
+  }, "Recent Orders")), /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     pagination: false,
     scroll: {
@@ -4266,8 +4411,31 @@ var Dashboard = function Dashboard(_ref) {
       url: "/ecommerce/dashboard/orderTable"
     },
     rowKey: 'masterProductId'
-  }));
+  })));
 };
+var Root = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 2rem;\n"])), function (props) {
+  return props.backgroundColor || '#1F1B1B';
+});
+var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  strong {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
+  return props.primaryColor || '#fff';
+});
+var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  strong {\n    color: #fff;\n    font-size: 2rem;\n  }\n"])), function (props) {
+  return props.primaryColor;
+});
+var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.primaryColor || '#fff';
+});
+var CardMediaContainer = styled(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n"])));
+var CardContainer = styled(material.Card)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 20px !important;\n  margin: 1.2rem 0;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
+  return props.secondaryColor || '#2B2B4048';
+});
+var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n"])));
+var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  p {\n    font-size: 18px;\n    font-weight: 600;\n    color: #fff;\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 27px;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 38px;\n    color: #fff;\n  }\n"])), function (props) {
+  return props.secondaryColor || '#2B2B4048';
+});
+var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
+
+var _templateObject$b;
 
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
@@ -4320,9 +4488,7 @@ var SideMenuItem = function SideMenuItem(props) {
     className: classes.menuItem,
     link: link,
     onClick: handleClick
-  }, !!Icon && /*#__PURE__*/React__default.createElement(material.ListItemIcon, {
-    className: classes.menuItemIcon
-  }, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
+  }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
     primary: name,
     inset: !Icon
   }), isExpandable && !open && /*#__PURE__*/React__default.createElement(md.MdExpandMore, null), isExpandable && open && /*#__PURE__*/React__default.createElement(md.MdExpandLess, null));
@@ -4350,12 +4516,10 @@ var useStyles = styles.makeStyles(function (theme) {
           color: '#fff'
         }
       }
-    },
-    menuItemIcon: {
-      color: '#97c05c'
     }
   });
 });
+var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n"])));
 
 var sideMenuItems = [{
   name: 'Dashboard',
@@ -4363,10 +4527,8 @@ var sideMenuItems = [{
 }];
 
 var SideMenu = function SideMenu() {
-  var classes = useStyles$1();
   return /*#__PURE__*/React__default.createElement(material.List, {
     component: "nav",
-    className: classes.appMenu,
     disablePadding: true
   }, sideMenuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
@@ -4375,60 +4537,28 @@ var SideMenu = function SideMenu() {
   }));
 };
 
-var drawerWidth = 240;
-var useStyles$1 = styles.makeStyles(function (theme) {
-  return styles.createStyles({
-    appMenu: {
-      width: '100%'
-    },
-    navList: {
-      width: drawerWidth
-    },
-    menuItem: {
-      width: drawerWidth
-    },
-    menuItemIcon: {
-      color: '#97c05c'
-    }
-  });
-});
+var _templateObject$c, _templateObject2$b, _templateObject3$b;
 
 var AccountDetails = function AccountDetails(_ref) {
-  var classes = useStyles$2();
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(material.Drawer, {
+  var _ref$primaryColor = _ref.primaryColor,
+      primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$1, {
+    primaryColor: primaryColor
+  }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
     variant: "permanent",
-    classes: {
-      paper: classes.drawerPaper
-    }
-  }, /*#__PURE__*/React__default.createElement(SideMenu, null)), /*#__PURE__*/React__default.createElement("main", {
-    className: classes.content
-  }, /*#__PURE__*/React__default.createElement(material.Container, {
-    maxWidth: "lg",
-    className: classes.container
-  }, /*#__PURE__*/React__default.createElement(Dashboard, null)))));
+    primaryColor: primaryColor
+  }, /*#__PURE__*/React__default.createElement(SideMenu, {
+    primaryColor: primaryColor
+  })), /*#__PURE__*/React__default.createElement(Main, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Dashboard, {
+    primaryColor: primaryColor
+  })))));
 };
-
-var drawerWidth$1 = 240;
-var useStyles$2 = styles.makeStyles(function (theme) {
-  return {
-    root: {
-      display: 'flex'
-    },
-    drawerPaper: {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: drawerWidth$1,
-      background: '#535454',
-      color: '#fff'
-    },
-    content: {
-      flexGrow: 1,
-      overflow: 'auto'
-    },
-    container: {}
-  };
+var Root$1 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: ", "30;\n"])), function (props) {
+  return props.primaryColor || '#535454';
+});
+var Main = styled.main(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  overflow: auto;\n"])));
+var ContainerDrawer = styled(material.Drawer)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    white-space: nowrap;\n    width: 240px;\n    background-color: ", ";\n    color: #fff;\n    z-index: 9;\n  }\n"])), function (props) {
+  return props.primaryColor || '#535454';
 });
 
 var Breakpoint = function Breakpoint() {};