contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/pages/Dashboard/index.js

@@ -1,242 +1,472 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Dashboard = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _MetricCard = require("../../atoms/MetricCard");
+
 var _DashboardMetric = require("../../organisms/DashboardMetric");
+
 var _react = require("react");
+
 var _Loading = require("../../atoms/Loading");
+
 var _CustomSelect = require("../../molecules/CustomSelect");
+
 var _dashboardUtils = require("./dashboardUtils");
+
 var _axios = _interopRequireDefault(require("axios"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Dashboard = _ref => {
+
+var Dashboard = function Dashboard(_ref) {
   var _company$financedReta, _metricsData$;
-  let {
-    jwt,
-    user,
-    company
-  } = _ref;
-  const [metricsData, setMetricsData] = (0, _react.useState)([]);
-  const [productsByStatus, setProductsByStatus] = (0, _react.useState)({});
-  const [requiredProducts, setRequiredProducts] = (0, _react.useState)([]);
-  const [orderByStatus, setOrderByStatus] = (0, _react.useState)({
+
+  var jwt = _ref.jwt,
+      user = _ref.user,
+      company = _ref.company;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      metricsData = _useState2[0],
+      setMetricsData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      productsByStatus = _useState4[0],
+      setProductsByStatus = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      requiredProducts = _useState6[0],
+      setRequiredProducts = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
     retailerId: null,
     startDate: null,
     endDate: null
-  });
-  const [orderByRequired, setOrderByRequired] = (0, _react.useState)({
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      orderByStatus = _useState8[0],
+      setOrderByStatus = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
     retailerId: null,
     startDate: null,
     endDate: null
-  });
-  const [retailers, setRetailers] = (0, _react.useState)([]);
-  const [loading, setLoading] = (0, _react.useState)(true);
-  const [providers, setProviders] = (0, _react.useState)([]);
-  const [categories, setCategories] = (0, _react.useState)([]);
-  const [retailerId, setRetailerId] = (0, _react.useState)([]);
-  const [categoryId, setCategoryId] = (0, _react.useState)([]);
-  const [companyId, setCompanyId] = (0, _react.useState)([]);
-  const [datesRange, setDatesRange] = (0, _react.useState)({
+  }),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      orderByRequired = _useState10[0],
+      setOrderByRequired = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      retailers = _useState12[0],
+      setRetailers = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      loading = _useState14[0],
+      setLoading = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      providers = _useState16[0],
+      setProviders = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      categories = _useState18[0],
+      setCategories = _useState18[1];
+
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      retailerId = _useState20[0],
+      setRetailerId = _useState20[1];
+
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      categoryId = _useState22[0],
+      setCategoryId = _useState22[1];
+
+  var _useState23 = (0, _react.useState)([]),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      companyId = _useState24[0],
+      setCompanyId = _useState24[1];
+
+  var _useState25 = (0, _react.useState)({
     startDate: (0, _dashboardUtils.formatDate)(new Date("1900-01-01")),
     endDate: (0, _dashboardUtils.formatDate)(new Date())
-  });
-  const [dateOptions, setDateOptions] = (0, _react.useState)([]);
-  const applicants = [{
+  }),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      datesRange = _useState26[0],
+      setDatesRange = _useState26[1];
+
+  var _useState27 = (0, _react.useState)([]),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      dateOptions = _useState28[0],
+      setDateOptions = _useState28[1];
+
+  var applicants = [{
     id: "provider",
     name: "Proveedor"
   }, {
     id: "retailer",
     name: "Cadena"
   }];
-  const [applicantsFilter, setApplicantsFilter] = (0, _react.useState)([]);
-  const [totalCount, setTotalCount] = (0, _react.useState)(0);
-  const [isProviderFinanced] = (0, _react.useState)((company === null || company === void 0 ? void 0 : (_company$financedReta = company.financedRetailers) === null || _company$financedReta === void 0 ? void 0 : _company$financedReta.length) > 0);
-  const [trades, setTrades] = (0, _react.useState)([]);
-  const [tradesSelected, setTradesSelected] = (0, _react.useState)([]);
-  const loadProductVersions = async queryObject => {
-    const keys = Object.keys(queryObject);
-    let string = [];
-    keys.forEach(key => string.push("".concat(key, "=").concat(queryObject[key])));
-    const query = string.join("&");
-    const endpoint = process.env.REACT_APP_READ_ORDERS_BY_STATUS;
-    try {
-      const response = await _axios.default.get("".concat(endpoint, "?").concat(query), {
-        headers: {
-          Authorization: jwt
+
+  var _useState29 = (0, _react.useState)([]),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      applicantsFilter = _useState30[0],
+      setApplicantsFilter = _useState30[1];
+
+  var _useState31 = (0, _react.useState)(0),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      totalCount = _useState32[0],
+      setTotalCount = _useState32[1];
+
+  var _useState33 = (0, _react.useState)((company === null || company === void 0 ? void 0 : (_company$financedReta = company.financedRetailers) === null || _company$financedReta === void 0 ? void 0 : _company$financedReta.length) > 0),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 1),
+      isProviderFinanced = _useState34[0];
+
+  var _useState35 = (0, _react.useState)([]),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      trades = _useState36[0],
+      setTrades = _useState36[1];
+
+  var _useState37 = (0, _react.useState)([]),
+      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
+      tradesSelected = _useState38[0],
+      setTradesSelected = _useState38[1];
+
+  var loadProductVersions = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
+      var keys, string, query, endpoint, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              keys = Object.keys(queryObject);
+              string = [];
+              keys.forEach(function (key) {
+                return string.push("".concat(key, "=").concat(queryObject[key]));
+              });
+              query = string.join("&");
+              endpoint = process.env.REACT_APP_READ_ORDERS_BY_STATUS;
+              _context.prev = 5;
+              _context.next = 8;
+              return _axios.default.get("".concat(endpoint, "?").concat(query), {
+                headers: {
+                  Authorization: jwt
+                }
+              });
+
+            case 8:
+              response = _context.sent;
+              return _context.abrupt("return", JSON.parse(response.data.body).data);
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](5);
+              console.log(_context.t0);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
         }
-      });
-      return JSON.parse(response.data.body).data;
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  const getRetailers = async () => {
-    const isRetailer = user.is_retailer && company.retailers;
-    const retailersResponse = await _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
-      headers: {
-        Authorization: jwt
-      }
-    });
-    const parsed = JSON.parse(retailersResponse.data.body).data;
-    let retailers = Object.values(parsed);
-    if (isRetailer || isProviderFinanced) {
-      const retailersValid = company.retailers.map(e => e.id);
-      retailers = retailers.filter(value => retailersValid.includes(value.id));
-    }
-    setRetailers(retailers);
-  };
-  const loadProductsByStatus = async orderByStatus => {
-    const isRetailer = user.is_retailer && company.retailers;
-    const isProvider = !user.is_retailer && user.id_role === 0;
-    const isCollaborator = user.id_role > 0;
-    const {
-      ordersBydate,
-      ordersByStatus,
-      ordersByActive,
-      companyTrades
-    } = (await loadProductVersions(orderByStatus)) || {};
-    if (trades.length === 0) setTrades(companyTrades);
-    const {
-      total = 0,
-      R = 0,
-      PA = 0,
-      Ex = 0,
-      ACA = 0
-    } = ordersByStatus;
-    let productsFinished = 0;
-    if (isRetailer) productsFinished = Ex;
-    if (isProvider) productsFinished = ACA;
-    if (isCollaborator) productsFinished = Ex + ACA;
-    const inProcess = Object.keys(ordersByStatus).reduce((prev, curr) => !["total", "PA", "R", "Ex", "ACA"].includes(curr) ? prev + ordersByStatus[curr] : prev, 0);
-    const registeredProducts = ordersByActive.registered;
-    let metricsArray = [metricsData[0] ? metricsData[0] : {
-      label: "Productos totales",
-      value: total
-    }];
-    metricsArray.push({
-      label: "Productos activos",
-      value: registeredProducts
-    }, {
-      label: "Productos filtrados",
-      value: total
-    }, {
-      label: "Productos sin asignar",
-      value: PA + R
-    }, {
-      label: "Productos en proceso",
-      value: inProcess
-    }, {
-      label: "Productos terminados",
-      value: productsFinished
-    });
-    setMetricsData(metricsArray);
-    setTotalCount(total);
-    delete ordersByStatus.total;
-    setRequiredProducts(ordersBydate);
-    setProductsByStatus(ordersByStatus);
-  };
-  const datesSelect = () => {
-    const today = new Date();
+      }, _callee, null, [[5, 12]]);
+    }));
+
+    return function loadProductVersions(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var getRetailers = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var isRetailer, retailersResponse, parsed, retailers, retailersValid;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              isRetailer = user.is_retailer && company.retailers;
+              _context2.next = 3;
+              return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
+                headers: {
+                  Authorization: jwt
+                }
+              });
+
+            case 3:
+              retailersResponse = _context2.sent;
+              parsed = JSON.parse(retailersResponse.data.body).data;
+              retailers = Object.values(parsed);
+
+              if (isRetailer || isProviderFinanced) {
+                retailersValid = company.retailers.map(function (e) {
+                  return e.id;
+                });
+                retailers = retailers.filter(function (value) {
+                  return retailersValid.includes(value.id);
+                });
+              }
+
+              setRetailers(retailers);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function getRetailers() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var loadProductsByStatus = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(orderByStatus) {
+      var isRetailer, isProvider, isCollaborator, _ref5, ordersBydate, ordersByStatus, ordersByActive, companyTrades, _ordersByStatus$total, total, _ordersByStatus$R, R, _ordersByStatus$PA, PA, _ordersByStatus$Ex, Ex, _ordersByStatus$ACA, ACA, productsFinished, inProcess, registeredProducts, metricsArray;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              isRetailer = user.is_retailer && company.retailers;
+              isProvider = !user.is_retailer && user.id_role === 0;
+              isCollaborator = user.id_role > 0;
+              _context3.next = 5;
+              return loadProductVersions(orderByStatus);
+
+            case 5:
+              _context3.t0 = _context3.sent;
+
+              if (_context3.t0) {
+                _context3.next = 8;
+                break;
+              }
+
+              _context3.t0 = {};
+
+            case 8:
+              _ref5 = _context3.t0;
+              ordersBydate = _ref5.ordersBydate;
+              ordersByStatus = _ref5.ordersByStatus;
+              ordersByActive = _ref5.ordersByActive;
+              companyTrades = _ref5.companyTrades;
+              if (trades.length === 0) setTrades(companyTrades);
+              _ordersByStatus$total = ordersByStatus.total, total = _ordersByStatus$total === void 0 ? 0 : _ordersByStatus$total, _ordersByStatus$R = ordersByStatus.R, R = _ordersByStatus$R === void 0 ? 0 : _ordersByStatus$R, _ordersByStatus$PA = ordersByStatus.PA, PA = _ordersByStatus$PA === void 0 ? 0 : _ordersByStatus$PA, _ordersByStatus$Ex = ordersByStatus.Ex, Ex = _ordersByStatus$Ex === void 0 ? 0 : _ordersByStatus$Ex, _ordersByStatus$ACA = ordersByStatus.ACA, ACA = _ordersByStatus$ACA === void 0 ? 0 : _ordersByStatus$ACA;
+              productsFinished = 0;
+              if (isRetailer) productsFinished = Ex;
+              if (isProvider) productsFinished = ACA;
+              if (isCollaborator) productsFinished = Ex + ACA;
+              inProcess = Object.keys(ordersByStatus).reduce(function (prev, curr) {
+                return !["total", "PA", "R", "Ex", "ACA"].includes(curr) ? prev + ordersByStatus[curr] : prev;
+              }, 0);
+              registeredProducts = ordersByActive.registered;
+              metricsArray = [metricsData[0] ? metricsData[0] : {
+                label: "Productos totales",
+                value: total
+              }];
+              metricsArray.push({
+                label: "Productos activos",
+                value: registeredProducts
+              }, {
+                label: "Productos filtrados",
+                value: total
+              }, {
+                label: "Productos sin asignar",
+                value: PA + R
+              }, {
+                label: "Productos en proceso",
+                value: inProcess
+              }, {
+                label: "Productos terminados",
+                value: productsFinished
+              });
+              setMetricsData(metricsArray);
+              setTotalCount(total);
+              delete ordersByStatus.total;
+              setRequiredProducts(ordersBydate);
+              setProductsByStatus(ordersByStatus);
+
+            case 28:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function loadProductsByStatus(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var datesSelect = function datesSelect() {
+    var today = new Date();
     setDateOptions([{
       id: 0,
       name: "Rango de fechas"
     }, {
       id: 1,
       name: "Todo el tiempo",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date("1900-01-01")),
-        endDate: (0, _dashboardUtils.formatDate)(new Date())
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date("1900-01-01")),
+          endDate: (0, _dashboardUtils.formatDate)(new Date())
+        });
+      }
     }, {
       id: 2,
       name: "Hoy",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date()),
-        endDate: (0, _dashboardUtils.formatDate)(new Date())
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date()),
+          endDate: (0, _dashboardUtils.formatDate)(new Date())
+        });
+      }
     }, {
       id: 3,
       name: "Ayer",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - 1))),
-        endDate: (0, _dashboardUtils.formatDate)(new Date())
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - 1))),
+          endDate: (0, _dashboardUtils.formatDate)(new Date())
+        });
+      }
     }, {
       id: 4,
       name: "Esta semana",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay()))),
-        endDate: (0, _dashboardUtils.formatDate)(new Date())
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay()))),
+          endDate: (0, _dashboardUtils.formatDate)(new Date())
+        });
+      }
     }, {
       id: 5,
       name: "La semana pasada",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay() - 7))),
-        endDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay() + 7)))
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay() - 7))),
+          endDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay() + 7)))
+        });
+      }
     }, {
       id: 6,
       name: "Este mes",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01"))),
-        endDate: (0, _dashboardUtils.formatDate)(today)
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01"))),
+          endDate: (0, _dashboardUtils.formatDate)(today)
+        });
+      }
     }, {
       id: 7,
       name: "El mes pasado",
-      function: () => setDatesRange({
-        startDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth(), "-01"))),
-        endDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01")))
-      })
+      function: function _function() {
+        return setDatesRange({
+          startDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth(), "-01"))),
+          endDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01")))
+        });
+      }
     }]);
   };
-  (0, _react.useEffect)(async () => {
-    setProviders(await (0, _dashboardUtils.getProviders)(jwt, user));
-    setCategories(await (0, _dashboardUtils.getCategories)(jwt, user, company));
-    await getRetailers();
-    datesSelect();
-    const today = new Date();
-    const startDate = (0, _dashboardUtils.formatDate)("1900-01-01");
-    const endDate = (0, _dashboardUtils.formatDate)(today);
-    const queryObject = {
-      startDate,
-      endDate
-    };
-    setDatesRange({
-      startDate,
-      endDate
-    });
-    setOrderByStatus(queryObject);
-    setOrderByRequired(queryObject);
-    loadProductsByStatus(queryObject);
-  }, []);
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+    var today, startDate, endDate, queryObject;
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.t0 = setProviders;
+            _context4.next = 3;
+            return (0, _dashboardUtils.getProviders)(jwt, user);
+
+          case 3:
+            _context4.t1 = _context4.sent;
+            (0, _context4.t0)(_context4.t1);
+            _context4.t2 = setCategories;
+            _context4.next = 8;
+            return (0, _dashboardUtils.getCategories)(jwt, user, company);
+
+          case 8:
+            _context4.t3 = _context4.sent;
+            (0, _context4.t2)(_context4.t3);
+            _context4.next = 12;
+            return getRetailers();
+
+          case 12:
+            datesSelect();
+            today = new Date();
+            startDate = (0, _dashboardUtils.formatDate)("1900-01-01");
+            endDate = (0, _dashboardUtils.formatDate)(today);
+            queryObject = {
+              startDate: startDate,
+              endDate: endDate
+            };
+            setDatesRange({
+              startDate: startDate,
+              endDate: endDate
+            });
+            setOrderByStatus(queryObject);
+            setOrderByRequired(queryObject);
+            loadProductsByStatus(queryObject);
+
+          case 21:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })), []);
+  (0, _react.useEffect)(function () {
     if (orderByRequired !== null && orderByRequired !== void 0 && orderByRequired.startDate && orderByStatus !== null && orderByStatus !== void 0 && orderByStatus.endDate && metricsData.length > 0) {
       setLoading(false);
     }
   }, [orderByRequired, orderByStatus, metricsData]);
-  (0, _react.useEffect)(async () => {
-    const {
-      startDate,
-      endDate
-    } = datesRange;
-    const queryObject = {
-      startDate: startDate,
-      endDate: endDate
-    };
-    if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
-    if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
-    if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
-    if (tradesSelected.length > 0) queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
-    applicantsFilter.length > 0 && (queryObject["requestedBy"] = applicantsFilter.join(","));
-    await loadProductsByStatus(queryObject, true);
-  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter, tradesSelected]);
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+    var startDate, endDate, queryObject;
+    return _regenerator.default.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            startDate = datesRange.startDate, endDate = datesRange.endDate;
+            queryObject = {
+              startDate: startDate,
+              endDate: endDate
+            };
+            if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
+            if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
+            if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
+            if (tradesSelected.length > 0) queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
+            applicantsFilter.length > 0 && (queryObject["requestedBy"] = applicantsFilter.join(","));
+            _context5.next = 9;
+            return loadProductsByStatus(queryObject, true);
+
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })), [companyId, retailerId, categoryId, datesRange, applicantsFilter, tradesSelected]);
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filters",
@@ -298,10 +528,12 @@ const Dashboard = _ref => {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "metric-cards",
-      children: metricsData.map((metric, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricCard.MetricCard, {
-        label: metric.label,
-        number: metric.value
-      }, "".concat(index, "-").concat(metric.value)))
+      children: metricsData.map(function (metric, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricCard.MetricCard, {
+          label: metric.label,
+          number: metric.value
+        }, "".concat(index, "-").concat(metric.value));
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "metrics-main-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DashboardMetric.DashboardMetric, {
@@ -310,7 +542,7 @@ const Dashboard = _ref => {
         dataObject: productsByStatus,
         retailerSelected: orderByStatus.retailerId,
         queryObject: orderByStatus,
-        setQueryObject: evt => {
+        setQueryObject: function setQueryObject(evt) {
           loadProductsByStatus(evt);
           setOrderByStatus(evt);
         },
@@ -329,7 +561,7 @@ const Dashboard = _ref => {
         displayScale: true,
         retailerSelected: orderByRequired.retailerId,
         queryObject: orderByRequired,
-        setQueryObject: evt => {
+        setQueryObject: function setQueryObject(evt) {
           setOrderByRequired(evt);
         },
         borderColor: "#3B1366"
@@ -337,4 +569,5 @@ const Dashboard = _ref => {
     })]
   });
 };
+
 exports.Dashboard = Dashboard;