@salesgenterp/ui-components 0.4.84 → 0.4.85

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Stack, Tooltip, TableCell, TableContainer, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, Paper, TableHead as TableHead$1, TablePagination, Typography, Card, CardContent, CardMedia, Collapse, Divider, List, ListItemIcon, ListItemText, ListItem, CssBaseline, Drawer, Container } from '@mui/material';
+import { Stack, Tooltip, TableCell, TableContainer as TableContainer$1, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, TableHead as TableHead$1, Paper, TablePagination, Typography, CardMedia, Card, CardContent, Button, ListItemIcon, Collapse, Divider, List, ListItemText, ListItem, CssBaseline, Drawer } from '@mui/material';
 import React__default, { useState, useEffect, createElement, forwardRef } from 'react';
 import { GrClose, GrRadialSelected, GrStackOverflow } from 'react-icons/gr';
 import 'react-icons/gi';
@@ -15,14 +15,15 @@ import TableRow$1 from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { BiNotepad, BiWallet } from 'react-icons/bi';
 import { CgProfile } from 'react-icons/cg';
-import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdCall, MdEmail, MdMonetizationOn, MdExpandMore, MdExpandLess, MdDashboard } from 'react-icons/md';
+import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdOutlineCall, MdMailOutline, MdMonetizationOn, MdRemoveRedEye, MdOutlineFileDownload, MdExpandMore, MdExpandLess, MdDashboard } from 'react-icons/md';
 import { Controller, useForm } from 'react-hook-form';
 import { HiOutlineChevronDown } from 'react-icons/hi';
 import Cards from 'react-credit-cards';
 import { FiTruck } from 'react-icons/fi';
-import { makeStyles, createStyles } from '@mui/styles';
+import moment from 'moment';
 import { isEmpty, get, isPlainObject } from 'lodash';
 import axios from 'axios';
+import { makeStyles, createStyles } from '@mui/styles';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -56,10 +57,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 = {};
@@ -256,7 +253,7 @@ var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTempl
 var CartTableCell = styled(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;
 });
-var CartTableContainer = styled(TableContainer)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  min-height: 460px;\n  padding-right: 1.5em;\n\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n    border: 3px solid;\n    border-color: #fae8e5;\n  }\n  @media screen and (max-width: 750px) {\n    padding: 0;\n  }\n"])), function (props) {
+var CartTableContainer = styled(TableContainer$1)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  min-height: 460px;\n  padding-right: 1.5em;\n\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n    border: 3px solid;\n    border-color: #fae8e5;\n  }\n  @media screen and (max-width: 750px) {\n    padding: 0;\n  }\n"])), function (props) {
   return props.retail ? '12px' : '10px';
 }, function (props) {
   return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
@@ -286,7 +283,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;
@@ -298,7 +295,7 @@ var reactIs_production_min = {
 	ContextProvider: ContextProvider,
 	Element: Element,
 	ForwardRef: ForwardRef,
-	Fragment: Fragment,
+	Fragment: Fragment$1,
 	Lazy: Lazy,
 	Memo: Memo,
 	Portal: Portal,
@@ -3055,7 +3052,7 @@ var Step4 = function Step4(_ref) {
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Order Review',
     icon: 5
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(Table$1, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(TableContainer$1, null, /*#__PURE__*/React__default.createElement(Table$1, {
     "aria-label": "customized table",
     sx: {
       maxHeight: '600px'
@@ -3458,6 +3455,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;
@@ -3473,6 +3491,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
 
@@ -3533,20 +3582,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;
@@ -3670,7 +3705,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) {
@@ -3912,8 +3947,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 = forwardRef(function (_ref, ref) {
+  var _tableData$pagination, _tableData$pagination2, _tableData$pagination3;
+
   var apiData = _ref.apiData,
       columns = _ref.columns,
       listUpdate = _ref.listUpdate,
@@ -3928,25 +3967,6 @@ var APITable = 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);
 
@@ -3963,7 +3983,28 @@ var APITable = 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) {
@@ -4074,7 +4115,11 @@ var APITable = 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
@@ -4099,19 +4144,26 @@ var APITable = forwardRef(function (_ref, ref) {
     })();
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Paper, {
-    sx: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(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(Table$1, {
+  }, /*#__PURE__*/React__default.createElement(TableStyled, {
     stickyHeader: true,
     "aria-label": "sticky table"
   }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableRow, null, columns.map(function (column) {
-    return /*#__PURE__*/React__default.createElement(TableCell, {
+    return /*#__PURE__*/React__default.createElement(TableCellContainer, {
       key: column.id,
       align: column.align
     }, column.label);
@@ -4121,72 +4173,145 @@ var APITable = 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(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(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(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(TableContainer$1)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
+var TableStyled = styled(Table$1)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px !important;\n"])));
+var TableCellContainer = styled(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(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(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(Button, {
+      onClick: function onClick() {
+        return openInvoiceData();
+      }
+    }, /*#__PURE__*/React__default.createElement(MdRemoveRedEye, null)), /*#__PURE__*/React__default.createElement(Button, {
+      onClick: function onClick() {
+        return downloadInvoice();
+      }
+    }, /*#__PURE__*/React__default.createElement(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(Typography, {
-    variant: "h3",
-    gutterBottom: true
-  }, "Hello Rohit"), /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h5",
+  var primaryColor = _ref2.primaryColor;
+
+  var _useState = useState({}),
+      customerData = _useState[0],
+      setCustomerData = _useState[1];
+
+  var _useState2 = useState({}),
+      dashboardData = _useState2[0],
+      setDashboardData = _useState2[1];
+
+  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(Card, null, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(CardContainer, null, /*#__PURE__*/React__default.createElement(CardContent, {
+    style: {
+      padding: '2rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -4194,7 +4319,7 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 4,
     lg: 2
-  }, /*#__PURE__*/React__default.createElement(CardMedia, {
+  }, /*#__PURE__*/React__default.createElement(CardMediaContainer, {
     component: "img",
     image: "/images/imgnotfound.jpeg",
     alt: "image"
@@ -4203,10 +4328,9 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 8,
     lg: 10
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h5",
-    gutterBottom: true
-  }, "Meet Your Account Representative"), /*#__PURE__*/React__default.createElement(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(Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -4214,26 +4338,44 @@ var Dashboard = function Dashboard(_ref) {
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(MdPersonOutline, null), "Alok Patel")), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(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(Grid, {
     item: true,
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(MdCall, null), "+91 1234567890")), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(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(Grid, {
     item: true,
     xs: 12,
     md: 6,
     lg: 4
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h5",
     gutterBottom: true
-  }, /*#__PURE__*/React__default.createElement(MdEmail, null), "AlokPatel@gmail.com"))))))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(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(Grid, {
     container: true,
     spacing: 4
   }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
@@ -4250,8 +4392,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(MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(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(MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(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: {
@@ -4263,8 +4408,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(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(CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n"])));
+var CardContainer = styled(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(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,
@@ -4317,9 +4485,7 @@ var SideMenuItem = function SideMenuItem(props) {
     className: classes.menuItem,
     link: link,
     onClick: handleClick
-  }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIcon, {
-    className: classes.menuItemIcon
-  }, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(ListItemText, {
+  }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(ListItemText, {
     primary: name,
     inset: !Icon
   }), isExpandable && !open && /*#__PURE__*/React__default.createElement(MdExpandMore, null), isExpandable && open && /*#__PURE__*/React__default.createElement(MdExpandLess, null));
@@ -4347,12 +4513,10 @@ var useStyles = makeStyles(function (theme) {
           color: '#fff'
         }
       }
-    },
-    menuItemIcon: {
-      color: '#97c05c'
     }
   });
 });
+var ListItemIconContainer = styled(ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n"])));
 
 var sideMenuItems = [{
   name: 'Dashboard',
@@ -4360,10 +4524,8 @@ var sideMenuItems = [{
 }];
 
 var SideMenu = function SideMenu() {
-  var classes = useStyles$1();
   return /*#__PURE__*/React__default.createElement(List, {
     component: "nav",
-    className: classes.appMenu,
     disablePadding: true
   }, sideMenuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
@@ -4372,60 +4534,28 @@ var SideMenu = function SideMenu() {
   }));
 };
 
-var drawerWidth = 240;
-var useStyles$1 = makeStyles(function (theme) {
-  return 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(CssBaseline, null), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(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(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(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 = 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(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() {};