@salesgenterp/ui-components 0.4.77 → 0.4.78

package/dist/index.js

@@ -23,6 +23,16 @@ 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 lodash = require('lodash');
+var axios = _interopDefault(require('axios'));
+var DashboardIcon = _interopDefault(require('@mui/icons-material/Dashboard'));
+require('@mui/icons-material/ShoppingCart');
+require('@mui/icons-material/People');
+require('@mui/icons-material/BarChart');
+require('@mui/icons-material/LibraryBooks');
+var ExpandLessIcon = _interopDefault(require('@mui/icons-material/ExpandLess'));
+var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -56,6 +66,25 @@ 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 = {};
+  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);
@@ -267,7 +296,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;
@@ -279,7 +308,7 @@ var reactIs_production_min = {
 	ContextProvider: ContextProvider,
 	Element: Element,
 	ForwardRef: ForwardRef,
-	Fragment: Fragment,
+	Fragment: Fragment$1,
 	Lazy: Lazy,
 	Memo: Memo,
 	Portal: Portal,
@@ -3439,6 +3468,975 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   }));
 };
 
+var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
+  var data = [];
+  var i = 1;
+  Object.keys(child).map(function (k) {
+    var result = k.replace(/([A-Z])/g, ' $1');
+    var dataIndex = {
+      key: i.toString(),
+      name: result.charAt(0).toUpperCase() + result.slice(1),
+      value: child[k]
+    };
+    data.push(dataIndex);
+    i++;
+  });
+  return data;
+};
+
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+var erLocalStorage = {
+  setItem: function setItem(key, value) {
+    localStorage.setItem(key, value);
+  },
+  getItem: function getItem(key) {
+    return localStorage.getItem(key);
+  },
+  removeItem: function removeItem(key) {
+    localStorage.removeItem(key);
+  },
+  setJSONItem: function setJSONItem(key, value) {
+    value = JSON.stringify(value);
+    localStorage.setItem(key, value);
+  },
+  getJSONItem: function getJSONItem(key) {
+    var returnValue = {};
+
+    try {
+      returnValue = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : {};
+    } catch (e) {
+      console.error(e);
+    }
+
+    return returnValue;
+  }
+};
+
+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;
+  return (getJSONItem(STORAGE_KEYS.TABLE_STATE) || {})[tableId] || {
+    filters: {}
+  };
+};
+
+var ErCache = /*#__PURE__*/function () {
+  function ErCache() {
+    this.sessionStorage = 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));
+    } catch (e) {
+      return {};
+    }
+  };
+
+  _proto.removeItem = function removeItem(key) {
+    this.sessionStorage.removeItem(key);
+  };
+
+  _proto.setItem = function setItem(_ref) {
+    var key = _ref.key,
+        value = _ref.value;
+    return this.sessionStorage.setItem(key, value);
+  };
+
+  _proto.setJSONItem = function setJSONItem(_ref2) {
+    var key = _ref2.key,
+        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$1 = erLocalStorage.getJSONItem,
+    setItem = erLocalStorage.setItem;
+var ACCESS_TOKEN = STORAGE_KEYS.ACCESS_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;
+  return API_CACHE_PREFIX + "_" + path + "_" + JSON.stringify(queryParams);
+};
+
+var getAPICacheData = function getAPICacheData(_ref2) {
+  var path = _ref2.path,
+      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;
+  erCache.setJSONItem({
+    key: getKeyFromPath({
+      path: path,
+      queryParams: queryParams
+    }),
+    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;
+    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 = getItem(ACCESS_TOKEN) || 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NDkxNzA2NiwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjQ4ODEwNjYsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.zpK0A-qiWg32jBKHo0ddnuUBD1-S8ZlmZvUAYNUdaWg';
+        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 + apiUrl;
+        }
+
+        var _temp = function () {
+          if (cache && getAPICacheData({
+            path: apiUrl,
+            queryParams: queryParams
+          })) {
+            response = getAPICacheData({
+              path: apiUrl,
+              queryParams: queryParams
+            });
+          } else {
+            return Promise.resolve(axios.request({
+              method: method || 'GET',
+              url: apiUrl,
+              data: formData || body,
+              params: queryParams,
+              headers: requestHeaders,
+              cancelToken: source.token,
+              responseType: responseTypeData ? responseTypeData : null
+            })).then(function (_axios$request) {
+              response = _axios$request;
+
+              if (cache) {
+                setAPIDataToCache({
+                  path: apiUrl,
+                  queryParams: queryParams,
+                  data: response
+                });
+              }
+            });
+          }
+        }();
+
+        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 {
+              console.log('Exception on API call', url, exception);
+              return Promise.resolve(handleError({
+                exception: exception,
+                url: url,
+                apiData: apiData,
+                hideErrorMessage: hideErrorMessage
+              }));
+            }
+          }();
+        }
+
+        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({
+                  exception: exception,
+                  url: url,
+                  apiData: apiData,
+                  hideErrorMessage: true
+                })).then(function (_await$handleError) {
+                  _exit = true;
+                  return _await$handleError;
+                });
+              }
+            }();
+          }
+        }();
+
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+      });
+    }, function (_wasThrown, _result) {
+      if (_wasThrown) throw _result;
+      return _result;
+    }));
+  } catch (e) {
+    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,
+    body: body,
+    method: 'put'
+  }, options));
+};
+
+API.patch = function (url, body, options) {
+  return API(_extends({
+    url: url,
+    body: body,
+    method: 'patch'
+  }, options));
+};
+
+API.post = function (url, body, options) {
+  return API(_extends({
+    url: url,
+    body: body,
+    method: 'post'
+  }, options));
+};
+
+API["delete"] = function (url, body, options) {
+  return API(_extends({
+    url: url,
+    body: body,
+    method: 'delete'
+  }, options));
+};
+
+var handle401Error = function handle401Error(_ref4) {
+  var apiData = _ref4.apiData,
+      exception = _ref4.exception;
+
+  try {
+    return Promise.resolve(_catch(function () {
+      var _accessToken$refreshT = {
+        accessToken: getJSONItem$1(ACCESS_TOKEN),
+        refreshToken: getItem(REFRESH_TOKEN)
+      },
+          oldAccessToken = _accessToken$refreshT.accessToken,
+          oldRefreshToken = _accessToken$refreshT.refreshToken;
+      return Promise.resolve(API({
+        url: '/refreshToken',
+        hideErrorMessage: true,
+        headers: {
+          refreshToken: oldRefreshToken,
+          Authorization: "Bearer " + oldAccessToken
+        }
+      })).then(function (_ref5) {
+        var accessToken = _ref5.access,
+            refreshToken = _ref5.refresh;
+        setItem(ACCESS_TOKEN, accessToken);
+        setItem(REFRESH_TOKEN, refreshToken);
+
+        if (apiData.throwErrorOnTokenTimeout) {
+          exception.reason = 'resetRefreshToken';
+          throw exception;
+        } else {
+          return Promise.resolve(API(apiData));
+        }
+      });
+    }, function () {
+      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;
+
+  try {
+    var _apiData$throwExcepti = apiData.throwException,
+        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 () {
+          return Promise.resolve(handle401Error({
+            apiData: apiData,
+            exception: exception
+          }));
+        }, function (e) {
+          alert(e);
+
+          if (throwException) {
+            throw exception;
+          }
+        });
+      } else {
+        if (!hideErrorMessage) {
+          var errMessage = errorMessage;
+
+          if (showAPIError) {
+            errMessage = lodash.get(exception, 'response.data.message');
+          }
+
+          alert(errMessage);
+        }
+
+        if (throwException) {
+          throw exception;
+        }
+      }
+    }());
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var _excluded = ["apiData", "columns", "listUpdate", "onDataLoad", "expandedRowRender", "onDataLoadError", "pagination", "extraFilterParams", "setExtraFilterParams", "cacheFilters", "tableId", "asyncService", "tableDataList", "filterData"];
+var APITable = React.forwardRef(function (_ref, ref) {
+  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);
+
+  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);
+
+  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];
+
+  console.log('tableData: ', tableData);
+
+  var setTableDataOnRef = function setTableDataOnRef() {
+    if (ref) {
+      ref.current = {
+        setTableData: setTableData,
+        tableData: tableData
+      };
+    }
+  };
+
+  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
+    }));
+    setTimeout(function () {
+      return loadDataSource({
+        pagination: newPagination
+      });
+    }, 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) {
+          return column.dataIndex === filterKey;
+        });
+        var queryKey = filterColumn.filterIndex || filterColumn.dataIndex;
+        resultFilters[queryKey] = filters[filterKey] && filters[filterKey].toString ? filters[filterKey].toString() : filters[filterKey];
+      });
+      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;
+      });
+      var queryKey = filterColumn.sortIndex || filterColumn.dataIndex;
+      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;
+
+    (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, {
+              data: responseData,
+              apiStatus: API_STATUSES.SUCCESS,
+              pagination: _extends({}, pagination, {
+                total: apiResponse.totalElements
+              })
+            }));
+            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) {
+              apiResponse = asyncService;
+            } else {
+              return Promise.resolve(API(_extends({}, apiData, {
+                queryParams: queryParams
+              }))).then(function (_API) {
+                apiResponse = _API;
+              });
+            }
+          }();
+
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+        }, function (e) {
+          setTableData(_extends({}, tableData, {
+            apiStatus: API_STATUSES.ERROR
+          }));
+          onDataLoadError && onDataLoadError(e);
+        });
+
+        return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
+      } catch (e) {
+        Promise.reject(e);
+      }
+    })();
+  };
+
+  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Paper, {
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(material.TableContainer, {
+    sx: {
+      maxHeight: 440
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Table, {
+    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, {
+      key: column.id,
+      align: column.align
+    }, column.label);
+  }))), /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : tableData.data.map(function (row) {
+    return /*#__PURE__*/React__default.createElement(material.TableRow, {
+      hover: true,
+      key: row === null || row === void 0 ? void 0 : row[(props === null || props === void 0 ? void 0 : props.rowKey) || 'id']
+    }, columns.map(function (column) {
+      var value = row[column.id];
+      return /*#__PURE__*/React__default.createElement(material.TableCell, {
+        key: column.id,
+        align: column.align
+      }, value);
+    }));
+  })))), /*#__PURE__*/React__default.createElement(material.TablePagination, {
+    rowsPerPageOptions: [10, 20, 50, 100],
+    component: "div",
+    count: tableData === null || tableData === void 0 ? void 0 : tableData.totalElements,
+    rowsPerPage: rowsPerPage,
+    page: page,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage
+  })));
+});
+
+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 columns = [{
+  id: 'orderId',
+  label: 'Order'
+}, {
+  id: 'insertedTimestamp',
+  label: 'Date'
+}, {
+  id: 'customerName',
+  label: 'Ship To'
+}, {
+  id: 'totalAmount',
+  label: 'Total Amount'
+}, {
+  id: 'dueBalance',
+  label: 'Total Due'
+}, {
+  id: 'status',
+  label: 'Status'
+}, {
+  id: 'trackingNumber',
+  label: 'Tracking Number'
+}, {
+  id: 'orderId'
+}, {
+  id: 'orderId'
+}];
+
+var Dashboard = function Dashboard(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  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",
+    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, {
+    container: true,
+    spacing: 4
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 4,
+    lg: 2
+  }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
+    component: "img",
+    image: "/images/imgnotfound.jpeg",
+    alt: "image"
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    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, {
+    container: true,
+    spacing: 4
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 6,
+    lg: 4
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    variant: "h5",
+    gutterBottom: true
+  }, /*#__PURE__*/React__default.createElement(md.MdPersonOutline, null), "Alok Patel")), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 6,
+    lg: 4
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    variant: "h5",
+    gutterBottom: true
+  }, /*#__PURE__*/React__default.createElement(md.MdCall, null), "+91 1234567890")), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 6,
+    lg: 4
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    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, {
+    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,
+      xs: 6,
+      md: 4,
+      lg: 3,
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__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, {
+    cacheFilters: true,
+    pagination: false,
+    scroll: {
+      x: 1000
+    },
+    tableId: "master-child-map",
+    columns: columns,
+    apiData: {
+      url: "/ecommerce/dashboard/orderTable"
+    },
+    rowKey: 'masterProductId'
+  }));
+};
+
+var SideMenuItemComponent = function SideMenuItemComponent(props) {
+  var className = props.className,
+      onClick = props.onClick,
+      link = props.link,
+      children = props.children;
+
+  if (!link || typeof link !== 'string') {
+    return /*#__PURE__*/React__default.createElement(material.ListItem, {
+      button: true,
+      className: className,
+      children: children,
+      onClick: onClick
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement(material.ListItem, {
+    button: true,
+    className: className,
+    children: children,
+    component: React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement("p", _extends({
+        exact: true
+      }, props, {
+        innerRef: ref
+      }));
+    }),
+    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;
+  var classes = useStyles();
+  var isExpandable = items && items.length > 0;
+
+  var _React$useState = React__default.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  function handleClick() {
+    setOpen(!open);
+  }
+
+  var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponent, {
+    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, {
+    primary: name,
+    inset: !Icon
+  }), isExpandable && !open && /*#__PURE__*/React__default.createElement(ExpandMoreIcon, null), isExpandable && open && /*#__PURE__*/React__default.createElement(ExpandLessIcon, null));
+  var MenuItemChildren = isExpandable ? /*#__PURE__*/React__default.createElement(material.Collapse, {
+    "in": open,
+    timeout: "auto",
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement(material.Divider, null), /*#__PURE__*/React__default.createElement(material.List, {
+    component: "div",
+    disablePadding: true
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
+      key: index
+    }));
+  }))) : null;
+  return /*#__PURE__*/React__default.createElement(Fragment, null, MenuItemRoot, MenuItemChildren);
+};
+
+var useStyles = styles.makeStyles(function (theme) {
+  return styles.createStyles({
+    menuItem: {
+      '&.active': {
+        background: 'rgba(0, 0, 0, 0.08)',
+        '& .MuiListItemIcon-root': {
+          color: '#fff'
+        }
+      }
+    },
+    menuItemIcon: {
+      color: '#97c05c'
+    }
+  });
+});
+
+var sideMenuItems = [{
+  name: 'Dashboard',
+  Icon: DashboardIcon
+}];
+
+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, {
+      key: index
+    }));
+  }));
+};
+
+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 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, {
+    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)))));
+};
+
+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 Breakpoint = function Breakpoint() {};
 
 Breakpoint.xs = 'xs';
@@ -3544,6 +4542,7 @@ function useGridSize() {
   return layout;
 }
 
+exports.AccountDetails = AccountDetails;
 exports.Breakpoint = Breakpoint;
 exports.CartDrawer = CartDrawer;
 exports.CartPageComponent = CartPageComponent;