contentoh-components-library 21.6.62 → 21.6.64

package/dist/components/atoms/MetricCard/index.js

@@ -11,8 +11,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var MetricCard = function MetricCard(_ref) {
   var label = _ref.label,
-      number = _ref.number;
+      number = _ref.number,
+      hint = _ref.hint;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    title: hint,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/organisms/DashboardMetric/DashboardMetric.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DashboardMetricDefault = void 0;
+exports.default = exports.DashboardMetricDoughnut = exports.DashboardMetricDefault = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -42,4 +42,14 @@ DashboardMetricDefault.args = {
     RC: 11,
     RP: 49
   }
-};
+};
+var DashboardMetricDoughnut = Template.bind({});
+exports.DashboardMetricDoughnut = DashboardMetricDoughnut;
+DashboardMetricDoughnut.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, DashboardMetricDefault.args), {}, {
+  type: "doughnut",
+  displayLegend: true,
+  showPercent: true,
+  displayScale: false,
+  total: 1610,
+  totalFiltered: 1610
+});

package/dist/components/organisms/DashboardMetric/index.js

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _react = require("react");
+
 var _styles = require("./styles");
 
 var _Graphic = require("../../atoms/Graphic");
@@ -41,10 +43,34 @@ var DashboardMetric = function DashboardMetric(_ref) {
       borderColor = _ref.borderColor,
       total = _ref.total,
       totalFiltered = _ref.totalFiltered;
-  var labels = type === "doughnut" ? Object.entries(dataObject).map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
+  // Chart.js coloca la leyenda por opción, no por CSS. Se mide el panel y no
+  // la ventana, porque el ancho real depende también del menú de la app: a
+  // 828px de ventana el panel queda en 331 y la leyenda de lado sale cortada.
+  var containerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isNarrow = _useState2[0],
+      setIsNarrow = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return undefined;
+    var observer = new ResizeObserver(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+          entry = _ref3[0];
+
+      return setIsNarrow(entry.contentRect.width < 420);
+    });
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  var labels = type === "doughnut" ? Object.entries(dataObject).map(function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
 
     return key !== "NS" && "".concat((0, _dashboardMetricUtils.getFullStatus)(key), " (").concat(value, ")");
   }) : Object.keys(dataObject);
@@ -74,11 +100,11 @@ var DashboardMetric = function DashboardMetric(_ref) {
     plugins: {
       tooltip: {
         callbacks: {
-          label: function label(_ref4) {
+          label: function label(_ref6) {
             var _dataset$data;
 
-            var dataset = _ref4.dataset,
-                element = _ref4.element;
+            var dataset = _ref6.dataset,
+                element = _ref6.element;
             var sum = dataset === null || dataset === void 0 ? void 0 : (_dataset$data = dataset.data) === null || _dataset$data === void 0 ? void 0 : _dataset$data.reduce(function (accumulator, value) {
               return accumulator + value;
             }, 0);
@@ -90,7 +116,7 @@ var DashboardMetric = function DashboardMetric(_ref) {
         }
       },
       legend: {
-        position: "right",
+        position: isNarrow ? "bottom" : "right",
         display: displayLegend,
         labels: {
           usePointStyle: true,
@@ -113,6 +139,8 @@ var DashboardMetric = function DashboardMetric(_ref) {
     showTooltips: true
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    ref: containerRef,
+    className: isNarrow ? "is-narrow" : "",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "text-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/organisms/DashboardMetric/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n  position: relative;\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .graphic-cotainer {\n    height: 350px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n\n  & > p {\n    font-family: ", ";\n    color: ", ";\n    font-size: 17px;\n\n    &.x-label {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%);\n      bottom: 4px;\n    }\n\n    &.y-label {\n      position: absolute;\n      transform: rotate(-90deg);\n      left: -28px;\n      top: 50%;\n    }\n\n    &.center-label {\n      position: absolute;\n      top: 52%;\n      right: 58%;\n      font-size: 28px;\n      color: #000;\n      font-feature-settings: \"pnum\", \"lnum\";\n      font-family: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n  position: relative;\n\n  @media (max-width: 600px) {\n    padding: 12px;\n\n    .graphic-cotainer {\n      padding: 5px;\n    }\n\n    /* Va rotada y fuera del recuadro; con el padding chico se encima. */\n    > p.y-label {\n      display: none;\n    }\n  }\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  /* Con la leyenda abajo, Chart.js le da un m\xE1ximo de la altura del recuadro\n     y descarta las entradas que no caben; por eso crece junto con ella. */\n  &.is-narrow .graphic-cotainer {\n    height: 500px;\n  }\n\n  .graphic-cotainer {\n    height: 350px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n\n  & > p {\n    font-family: ", ";\n    color: ", ";\n    font-size: 17px;\n\n    &.x-label {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%);\n      bottom: 4px;\n    }\n\n    &.y-label {\n      position: absolute;\n      transform: rotate(-90deg);\n      left: -28px;\n      top: 50%;\n    }\n\n    &.center-label {\n      position: absolute;\n      top: 52%;\n      right: 58%;\n      font-size: 28px;\n      color: #000;\n      font-feature-settings: \"pnum\", \"lnum\";\n      font-family: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600);
 
 exports.Container = Container;

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

@@ -111,9 +111,9 @@ exports.getCategories = getCategories;
 var formatDate = function formatDate(date) {
   var newDate = new Date(date);
   var year = newDate.getFullYear();
-  var month = newDate.getMonth() + 1;
-  var day = newDate.getDate();
-  return "".concat(year, "/").concat(month, "/").concat(day);
+  var month = "".concat(newDate.getMonth() + 1).padStart(2, "0");
+  var day = "".concat(newDate.getDate()).padStart(2, "0");
+  return "".concat(year, "-").concat(month, "-").concat(day);
 };
 
 exports.formatDate = formatDate;

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

@@ -32,7 +32,7 @@ var _axios = _interopRequireDefault(require("axios"));
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Dashboard = function Dashboard(_ref) {
-  var _company$financedReta, _metricsData$;
+  var _company$financedReta;
 
   var jwt = _ref.jwt,
       user = _ref.user,
@@ -135,21 +135,17 @@ var Dashboard = function Dashboard(_ref) {
   var _useState31 = (0, _react.useState)(0),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
       totalCount = _useState32[0],
-      setTotalCount = _useState32[1];
+      setTotalCount = _useState32[1]; // Total sin filtros, solo para el porcentaje de la dona.
 
-  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 _useState33 = (0, _react.useState)(0),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      totalUnfiltered = _useState34[0],
+      setTotalUnfiltered = _useState34[1];
 
-  var _useState37 = (0, _react.useState)([]),
-      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      tradesSelected = _useState38[0],
-      setTradesSelected = _useState38[1];
+  var _useState35 = (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),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 1),
+      isProviderFinanced = _useState36[0];
 
   var loadProductVersions = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
@@ -241,71 +237,99 @@ var Dashboard = function Dashboard(_ref) {
 
   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;
+      var _ordersByActive$regis;
+
+      var isBaseline,
+          isRetailer,
+          isProvider,
+          isCollaborator,
+          _ref5,
+          ordersBydate,
+          _ref5$ordersByStatus,
+          ordersByStatus,
+          _ref5$ordersByActive,
+          ordersByActive,
+          _ordersByStatus$total,
+          total,
+          _ordersByStatus$R,
+          R,
+          _ordersByStatus$PA,
+          PA,
+          _ordersByStatus$Ex,
+          Ex,
+          _ordersByStatus$ACA,
+          ACA,
+          productsFinished,
+          unassigned,
+          inProcess,
+          registeredProducts,
+          metricsArray,
+          _args3 = arguments;
 
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
+              isBaseline = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : false;
               isRetailer = user.is_retailer && company.retailers;
               isProvider = !user.is_retailer && user.id_role === 0;
               isCollaborator = user.id_role > 0;
-              _context3.next = 5;
+              _context3.next = 6;
               return loadProductVersions(orderByStatus);
 
-            case 5:
+            case 6:
               _context3.t0 = _context3.sent;
 
               if (_context3.t0) {
-                _context3.next = 8;
+                _context3.next = 9;
                 break;
               }
 
               _context3.t0 = {};
 
-            case 8:
+            case 9:
               _ref5 = _context3.t0;
               ordersBydate = _ref5.ordersBydate;
-              ordersByStatus = _ref5.ordersByStatus;
-              ordersByActive = _ref5.ordersByActive;
-              companyTrades = _ref5.companyTrades;
-              if (trades.length === 0) setTrades(companyTrades);
+              _ref5$ordersByStatus = _ref5.ordersByStatus;
+              ordersByStatus = _ref5$ordersByStatus === void 0 ? {} : _ref5$ordersByStatus;
+              _ref5$ordersByActive = _ref5.ordersByActive;
+              ordersByActive = _ref5$ordersByActive === void 0 ? {} : _ref5$ordersByActive;
               _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
+              if (isProvider) productsFinished = ACA + Ex;
+              if (isCollaborator) productsFinished = Ex + ACA; // Lo que no está sin asignar ni terminado está en proceso, para que las
+              // tres tarjetas siempre sumen el total filtrado.
+
+              unassigned = PA + R;
+              inProcess = total - unassigned - productsFinished;
+              registeredProducts = (_ordersByActive$regis = ordersByActive.registered) !== null && _ordersByActive$regis !== void 0 ? _ordersByActive$regis : 0;
+              metricsArray = [{
+                label: "Catálogo activo",
+                value: registeredProducts,
+                hint: "Productos dados de alta y activos. No depende del filtro de fechas, que aplica a la fecha de la orden."
               }, {
-                label: "Productos filtrados",
-                value: total
+                label: "En órdenes de trabajo",
+                value: total,
+                hint: "Productos con orden de trabajo viva dentro de los filtros. Un producto en dos órdenes cuenta en cada una."
               }, {
-                label: "Productos sin asignar",
-                value: PA + R
+                label: "Sin asignar",
+                value: unassigned
               }, {
-                label: "Productos en proceso",
+                label: "En proceso",
                 value: inProcess
               }, {
-                label: "Productos terminados",
+                label: "Terminados",
                 value: productsFinished
-              });
+              }];
               setMetricsData(metricsArray);
               setTotalCount(total);
+              if (isBaseline) setTotalUnfiltered(total);
               delete ordersByStatus.total;
               setRequiredProducts(ordersBydate);
               setProductsByStatus(ordersByStatus);
 
-            case 28:
+            case 30:
             case "end":
               return _context3.stop();
           }
@@ -319,7 +343,23 @@ var Dashboard = function Dashboard(_ref) {
   }();
 
   var datesSelect = function datesSelect() {
-    var today = new Date();
+    // Cada rango se calcula al momento de elegirlo y con fechas locales: si se
+    // parte de un Date compartido, los options se pisan entre sí, y
+    // new Date("2026-11-01") cae en el día anterior al oeste de UTC.
+    var applyRange = function applyRange(startDate) {
+      var endDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
+      return setDatesRange({
+        startDate: (0, _dashboardUtils.formatDate)(startDate),
+        endDate: (0, _dashboardUtils.formatDate)(endDate)
+      });
+    };
+
+    var daysAgo = function daysAgo(days) {
+      var date = new Date();
+      date.setDate(date.getDate() - days);
+      return date;
+    };
+
     setDateOptions([{
       id: 0,
       name: "Rango de fechas"
@@ -327,64 +367,46 @@ var Dashboard = function Dashboard(_ref) {
       id: 1,
       name: "Todo el tiempo",
       function: function _function() {
-        return setDatesRange({
-          startDate: (0, _dashboardUtils.formatDate)(new Date("1900-01-01")),
-          endDate: (0, _dashboardUtils.formatDate)(new Date())
-        });
+        return applyRange(new Date(1900, 0, 1));
       }
     }, {
       id: 2,
       name: "Hoy",
       function: function _function() {
-        return setDatesRange({
-          startDate: (0, _dashboardUtils.formatDate)(new Date()),
-          endDate: (0, _dashboardUtils.formatDate)(new Date())
-        });
+        return applyRange(new Date());
       }
     }, {
       id: 3,
       name: "Ayer",
       function: function _function() {
-        return setDatesRange({
-          startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - 1))),
-          endDate: (0, _dashboardUtils.formatDate)(new Date())
-        });
+        return applyRange(daysAgo(1), daysAgo(1));
       }
     }, {
       id: 4,
       name: "Esta semana",
       function: function _function() {
-        return setDatesRange({
-          startDate: (0, _dashboardUtils.formatDate)(new Date(today.setDate(today.getDate() - today.getDay()))),
-          endDate: (0, _dashboardUtils.formatDate)(new Date())
-        });
+        return applyRange(daysAgo(new Date().getDay()));
       }
     }, {
       id: 5,
       name: "La semana pasada",
       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)))
-        });
+        var weekday = new Date().getDay();
+        return applyRange(daysAgo(weekday + 7), daysAgo(weekday + 1));
       }
     }, {
       id: 6,
       name: "Este mes",
       function: function _function() {
-        return setDatesRange({
-          startDate: (0, _dashboardUtils.formatDate)(new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01"))),
-          endDate: (0, _dashboardUtils.formatDate)(today)
-        });
+        var today = new Date();
+        return applyRange(new Date(today.getFullYear(), today.getMonth(), 1));
       }
     }, {
       id: 7,
       name: "El mes pasado",
       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")))
-        });
+        var today = new Date();
+        return applyRange(new Date(today.getFullYear(), today.getMonth() - 1, 1), new Date(today.getFullYear(), today.getMonth(), 0));
       }
     }]);
   };
@@ -427,7 +449,7 @@ var Dashboard = function Dashboard(_ref) {
             });
             setOrderByStatus(queryObject);
             setOrderByRequired(queryObject);
-            loadProductsByStatus(queryObject);
+            loadProductsByStatus(queryObject, true);
 
           case 21:
           case "end":
@@ -455,18 +477,17 @@ var Dashboard = function Dashboard(_ref) {
             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);
+            _context5.next = 8;
+            return loadProductsByStatus(queryObject);
 
-          case 9:
+          case 8:
           case "end":
             return _context5.stop();
         }
       }
     }, _callee5);
-  })), [companyId, retailerId, categoryId, datesRange, applicantsFilter, tradesSelected]);
+  })), [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filters",
@@ -517,21 +538,14 @@ var Dashboard = function Dashboard(_ref) {
         parameterArray: applicantsFilter,
         setParameterArray: setApplicantsFilter,
         defaultOption: "Todos los solicitantes"
-      }), user.id_role === 0 && (trades === null || trades === void 0 ? void 0 : trades.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
-        showSearchBar: true,
-        options: trades,
-        selectLabel: "Todas las marcas",
-        placeHolder: "Buscar marca",
-        customSelectId: "trade-select",
-        parameterArray: tradesSelected,
-        setParameterArray: setTradesSelected
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "metric-cards",
       children: metricsData.map(function (metric, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricCard.MetricCard, {
           label: metric.label,
-          number: metric.value
+          number: metric.value,
+          hint: metric.hint
         }, "".concat(index, "-").concat(metric.value));
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -551,7 +565,7 @@ var Dashboard = function Dashboard(_ref) {
         showPercent: true,
         displayScale: false,
         totalFiltered: totalCount,
-        total: (_metricsData$ = metricsData[0]) === null || _metricsData$ === void 0 ? void 0 : _metricsData$.value
+        total: totalUnfiltered
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DashboardMetric.DashboardMetric, {
         label: "Productos solicitados",
         description: "Filtra los productos solicitados por fecha y alcance para revisar rápidamente el flujo de trabajo.",

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 30px;\n\n  .filters {\n    display: flex;\n    & > * {\n      & + * {\n        margin-left: 10px;\n      }\n    }\n    & + * {\n      margin-top: 20px;\n    }\n  }\n\n  .metric-cards {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .metrics-main-container {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 30px;\n\n  .filters {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n\n    & + * {\n      margin-top: 20px;\n    }\n  }\n\n  .metric-cards {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .metrics-main-container {\n    display: grid;\n    /* Dos paneles mientras quepan 320px cada uno; si no, uno debajo del otro.\n       El min() evita que la columna siga midiendo 320px en pantallas menores. */\n    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));\n    gap: 10px;\n\n    /* Sin esto las gr\xE1ficas no pueden encogerse por debajo de su ancho. */\n    > * {\n      min-width: 0;\n    }\n  }\n\n  @media (max-width: 600px) {\n    padding: 15px;\n  }\n"])));
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.62",
+  "version": "21.6.64",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/MetricCard/index.js

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const MetricCard = ({ label, number }) => {
+export const MetricCard = ({ label, number, hint }) => {
   return (
-    <Container>
+    <Container title={hint}>
       <p>{label}</p>
       <p>{number}</p>
     </Container>

package/src/components/organisms/DashboardMetric/DashboardMetric.stories.js

@@ -26,3 +26,14 @@ DashboardMetricDefault.args = {
     RP: 49,
   },
 };
+
+export const DashboardMetricDoughnut = Template.bind({});
+DashboardMetricDoughnut.args = {
+  ...DashboardMetricDefault.args,
+  type: "doughnut",
+  displayLegend: true,
+  showPercent: true,
+  displayScale: false,
+  total: 1610,
+  totalFiltered: 1610,
+};

package/src/components/organisms/DashboardMetric/index.js

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from "react";
 import { Container } from "./styles";
 import { Graphic } from "../../atoms/Graphic";
 import {
@@ -20,6 +21,21 @@ export const DashboardMetric = ({
   total,
   totalFiltered,
 }) => {
+  // Chart.js coloca la leyenda por opción, no por CSS. Se mide el panel y no
+  // la ventana, porque el ancho real depende también del menú de la app: a
+  // 828px de ventana el panel queda en 331 y la leyenda de lado sale cortada.
+  const containerRef = useRef(null);
+  const [isNarrow, setIsNarrow] = useState(false);
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(([entry]) =>
+      setIsNarrow(entry.contentRect.width < 420)
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
   const labels =
     type === "doughnut"
       ? Object.entries(dataObject).map(
@@ -75,7 +91,7 @@ export const DashboardMetric = ({
         },
       },
       legend: {
-        position: "right",
+        position: isNarrow ? "bottom" : "right",
         display: displayLegend,
         labels: {
           usePointStyle: true,
@@ -101,7 +117,7 @@ export const DashboardMetric = ({
   };
 
   return (
-    <Container>
+    <Container ref={containerRef} className={isNarrow ? "is-narrow" : ""}>
       <div className="text-container">
         <p>{label}</p>
         <p>{description}</p>

package/src/components/organisms/DashboardMetric/styles.js

@@ -7,6 +7,19 @@ export const Container = styled.div`
   padding: 24px;
   position: relative;
 
+  @media (max-width: 600px) {
+    padding: 12px;
+
+    .graphic-cotainer {
+      padding: 5px;
+    }
+
+    /* Va rotada y fuera del recuadro; con el padding chico se encima. */
+    > p.y-label {
+      display: none;
+    }
+  }
+
   .text-container {
     p {
       font-family: ${FontFamily.Raleway};
@@ -48,6 +61,12 @@ export const Container = styled.div`
     }
   }
 
+  /* Con la leyenda abajo, Chart.js le da un máximo de la altura del recuadro
+     y descarta las entradas que no caben; por eso crece junto con ella. */
+  &.is-narrow .graphic-cotainer {
+    height: 500px;
+  }
+
   .graphic-cotainer {
     height: 350px;
     border: 1px solid ${GlobalColors.s3};

package/src/components/pages/Dashboard/dashboardUtils.js

@@ -52,9 +52,9 @@ export const getCategories = async (jwt, user, company) => {
 export const formatDate = (date) => {
   const newDate = new Date(date);
   const year = newDate.getFullYear();
-  const month = newDate.getMonth() + 1;
-  const day = newDate.getDate();
-  return `${year}/${month}/${day}`;
+  const month = `${newDate.getMonth() + 1}`.padStart(2, "0");
+  const day = `${newDate.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 
 const getCategoriesRecursive = (object) => {

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

@@ -39,9 +39,9 @@ export const Dashboard = ({ jwt, user, company }) => {
   ];
   const [applicantsFilter, setApplicantsFilter] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
+  // Total sin filtros, solo para el porcentaje de la dona.
+  const [totalUnfiltered, setTotalUnfiltered] = useState(0);
   const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
-  const [trades, setTrades] = useState([]);
-  const [tradesSelected, setTradesSelected] = useState([]);
 
   const loadProductVersions = async (queryObject) => {
     const keys = Object.keys(queryObject);
@@ -82,127 +82,102 @@ export const Dashboard = ({ jwt, user, company }) => {
     setRetailers(retailers);
   };
 
-  const loadProductsByStatus = async (orderByStatus) => {
+  const loadProductsByStatus = async (orderByStatus, isBaseline = false) => {
     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 } =
+    const { ordersBydate, ordersByStatus = {}, ordersByActive = {} } =
       (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 (isProvider) productsFinished = ACA + Ex;
     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
-    );
+    // Lo que no está sin asignar ni terminado está en proceso, para que las
+    // tres tarjetas siempre sumen el total filtrado.
+    const unassigned = PA + R;
+    const inProcess = total - unassigned - productsFinished;
 
-    const registeredProducts = ordersByActive.registered;
-    let metricsArray = [
-      metricsData[0]
-        ? metricsData[0]
-        : { label: "Productos totales", value: total },
+    const registeredProducts = ordersByActive.registered ?? 0;
+    const metricsArray = [
+      {
+        label: "Catálogo activo",
+        value: registeredProducts,
+        hint: "Productos dados de alta y activos. No depende del filtro de fechas, que aplica a la fecha de la orden.",
+      },
+      {
+        label: "En órdenes de trabajo",
+        value: total,
+        hint: "Productos con orden de trabajo viva dentro de los filtros. Un producto en dos órdenes cuenta en cada una.",
+      },
+      { label: "Sin asignar", value: unassigned },
+      { label: "En proceso", value: inProcess },
+      { label: "Terminados", value: productsFinished },
     ];
-
-    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);
+    if (isBaseline) setTotalUnfiltered(total);
     delete ordersByStatus.total;
     setRequiredProducts(ordersBydate);
     setProductsByStatus(ordersByStatus);
   };
 
   const datesSelect = () => {
-    const today = new Date();
+    // Cada rango se calcula al momento de elegirlo y con fechas locales: si se
+    // parte de un Date compartido, los options se pisan entre sí, y
+    // new Date("2026-11-01") cae en el día anterior al oeste de UTC.
+    const applyRange = (startDate, endDate = new Date()) =>
+      setDatesRange({
+        startDate: formatDate(startDate),
+        endDate: formatDate(endDate),
+      });
+    const daysAgo = (days) => {
+      const date = new Date();
+      date.setDate(date.getDate() - days);
+      return date;
+    };
     setDateOptions([
       { id: 0, name: "Rango de fechas" },
       {
         id: 1,
         name: "Todo el tiempo",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date("1900-01-01")),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 2,
-        name: "Hoy",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date()),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 3,
-        name: "Ayer",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date(today.setDate(today.getDate() - 1))),
-            endDate: formatDate(new Date()),
-          }),
+        function: () => applyRange(new Date(1900, 0, 1)),
       },
+      { id: 2, name: "Hoy", function: () => applyRange(new Date()) },
+      { id: 3, name: "Ayer", function: () => applyRange(daysAgo(1), daysAgo(1)) },
       {
         id: 4,
         name: "Esta semana",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay()))
-            ),
-            endDate: formatDate(new Date()),
-          }),
+        function: () => applyRange(daysAgo(new Date().getDay())),
       },
       {
         id: 5,
         name: "La semana pasada",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() - 7))
-            ),
-            endDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() + 7))
-            ),
-          }),
+        function: () => {
+          const weekday = new Date().getDay();
+          return applyRange(daysAgo(weekday + 7), daysAgo(weekday + 1));
+        },
       },
       {
         id: 6,
         name: "Este mes",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-            endDate: formatDate(today),
-          }),
+        function: () => {
+          const today = new Date();
+          return applyRange(new Date(today.getFullYear(), today.getMonth(), 1));
+        },
       },
       {
         id: 7,
         name: "El mes pasado",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth()}-01`)
-            ),
-            endDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-          }),
+        function: () => {
+          const today = new Date();
+          return applyRange(
+            new Date(today.getFullYear(), today.getMonth() - 1, 1),
+            new Date(today.getFullYear(), today.getMonth(), 0)
+          );
+        },
       },
     ]);
   };
@@ -219,7 +194,7 @@ export const Dashboard = ({ jwt, user, company }) => {
     setDatesRange({ startDate, endDate });
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
-    loadProductsByStatus(queryObject);
+    loadProductsByStatus(queryObject, true);
   }, []);
 
   useEffect(() => {
@@ -241,20 +216,11 @@ export const Dashboard = ({ jwt, user, company }) => {
     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,
-  ]);
+    await loadProductsByStatus(queryObject);
+  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
 
   return loading ? (
     <Loading />
@@ -319,17 +285,6 @@ export const Dashboard = ({ jwt, user, company }) => {
             defaultOption="Todos los solicitantes"
           />
         )}
-        {user.id_role === 0 && trades?.length > 0 && (
-          <CustomSelect
-            showSearchBar={true}
-            options={trades}
-            selectLabel="Todas las marcas"
-            placeHolder="Buscar marca"
-            customSelectId="trade-select"
-            parameterArray={tradesSelected}
-            setParameterArray={setTradesSelected}
-          />
-        )}
       </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (
@@ -337,6 +292,7 @@ export const Dashboard = ({ jwt, user, company }) => {
             key={`${index}-${metric.value}`}
             label={metric.label}
             number={metric.value}
+            hint={metric.hint}
           />
         ))}
       </div>
@@ -358,7 +314,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           showPercent={true}
           displayScale={false}
           totalFiltered={totalCount}
-          total={metricsData[0]?.value}
+          total={totalUnfiltered}
         />
         <DashboardMetric
           label={"Productos solicitados"}

package/src/components/pages/Dashboard/styles.js

@@ -5,11 +5,9 @@ export const Container = styled.div`
 
   .filters {
     display: flex;
-    & > * {
-      & + * {
-        margin-left: 10px;
-      }
-    }
+    flex-wrap: wrap;
+    gap: 10px;
+
     & + * {
       margin-top: 20px;
     }
@@ -17,10 +15,8 @@ export const Container = styled.div`
 
   .metric-cards {
     display: flex;
-
-    > * + * {
-      margin-left: 10px;
-    }
+    flex-wrap: wrap;
+    gap: 10px;
 
     & + * {
       margin-top: 10px;
@@ -28,10 +24,19 @@ export const Container = styled.div`
   }
 
   .metrics-main-container {
-    display: flex;
+    display: grid;
+    /* Dos paneles mientras quepan 320px cada uno; si no, uno debajo del otro.
+       El min() evita que la columna siga midiendo 320px en pantallas menores. */
+    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+    gap: 10px;
 
-    > * + * {
-      margin-left: 10px;
+    /* Sin esto las gráficas no pueden encogerse por debajo de su ancho. */
+    > * {
+      min-width: 0;
     }
   }
+
+  @media (max-width: 600px) {
+    padding: 15px;
+  }
 `;