contentoh-components-library 21.2.27 → 21.2.28

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

@@ -23,11 +23,18 @@ 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");
 
-var Dashboard = function Dashboard() {
+var Dashboard = function Dashboard(_ref) {
+  var jwt = _ref.jwt,
+      user = _ref.user;
+
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       metricsData = _useState2[0],
@@ -61,7 +68,7 @@ var Dashboard = function Dashboard() {
       orderByRequired = _useState10[0],
       setOrderByRequired = _useState10[1];
 
-  var _useState11 = (0, _react.useState)({}),
+  var _useState11 = (0, _react.useState)([]),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
       retailers = _useState12[0],
       setRetailers = _useState12[1];
@@ -71,12 +78,49 @@ var Dashboard = function Dashboard() {
       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: new Date("1900-01-01"),
+    endDate: new Date()
+  }),
+      _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 loadProductVersions = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
       var byStatus,
-          retailerId,
-          startDate,
-          endDate,
+          keys,
+          string,
           query,
           endpoint,
           response,
@@ -86,60 +130,67 @@ var Dashboard = function Dashboard() {
           switch (_context.prev = _context.next) {
             case 0:
               byStatus = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
-              retailerId = queryObject.retailerId, startDate = queryObject.startDate, endDate = queryObject.endDate;
-              query = "retailerId=".concat(retailerId, "&startDate=").concat(startDate, "&endDate=").concat(endDate);
+              keys = Object.keys(queryObject);
+              string = [];
+              keys.forEach(function (key) {
+                return string.push("".concat(key, "=").concat(queryObject[key]));
+              });
+              query = string.join("&");
               endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS;
-              _context.prev = 4;
-              _context.next = 7;
-              return _axios.default.get("".concat(endpoint, "?").concat(query));
+              _context.prev = 6;
+              _context.next = 9;
+              return _axios.default.get("".concat(endpoint, "?").concat(query), {
+                headers: {
+                  Authorization: jwt
+                }
+              });
 
-            case 7:
+            case 9:
               response = _context.sent;
               return _context.abrupt("return", JSON.parse(response.data.body));
 
-            case 11:
-              _context.prev = 11;
-              _context.t0 = _context["catch"](4);
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](6);
               console.log(_context.t0);
 
-            case 14:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 11]]);
+      }, _callee, null, [[6, 13]]);
     }));
 
     return function loadProductVersions(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
 
   var getRetailers = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-      var retailersResponse, parsed, retailers;
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var isTHDUser, retailersResponse, parsed, retailers;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              isTHDUser = [657, 818, 819].includes(user.id_company);
+              _context2.next = 3;
               return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
                 headers: {
-                  Authorization: sessionStorage.getItem("jwt")
+                  Authorization: jwt
                 }
               });
 
-            case 2:
+            case 3:
               retailersResponse = _context2.sent;
               parsed = JSON.parse(retailersResponse.data.body).data;
-              retailers = Object.keys(parsed).map(function (key) {
-                if (key.includes('The Home Depot')) return parsed[key];
-              }).filter(function (f) {
-                return f;
-              });
+              retailers = isTHDUser ? Object.values(parsed).filter(function (value) {
+                return [58, 59, 60, 61].includes(value.id);
+              }) : Object.values(parsed);
               setRetailers(retailers);
 
-            case 6:
+            case 7:
             case "end":
               return _context2.stop();
           }
@@ -148,13 +199,13 @@ var Dashboard = function Dashboard() {
     }));
 
     return function getRetailers() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
   var loadProductsByStatus = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(orderByStatus) {
-      var _yield$loadProductVer, orders, fullData, total, R, ACA, PA, inProcess;
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(orderByStatus) {
+      var _ref5, orders, _orders$total, total, _orders$R, R, _orders$ACA, ACA, _orders$PA, PA, inProcess;
 
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
@@ -164,12 +215,21 @@ var Dashboard = function Dashboard() {
               return loadProductVersions(orderByStatus, true);
 
             case 2:
-              _yield$loadProductVer = _context3.sent;
-              orders = _yield$loadProductVer.orders;
-              fullData = _yield$loadProductVer.fullData;
-              total = fullData.total, R = fullData.R, ACA = fullData.ACA, PA = fullData.PA;
-              inProcess = Object.keys(fullData).reduce(function (prev, curr) {
-                return !['total', 'ACA', 'PA', 'R'].includes(curr) ? prev + fullData[curr] : prev;
+              _context3.t0 = _context3.sent;
+
+              if (_context3.t0) {
+                _context3.next = 5;
+                break;
+              }
+
+              _context3.t0 = {};
+
+            case 5:
+              _ref5 = _context3.t0;
+              orders = _ref5.orders;
+              _orders$total = orders.total, total = _orders$total === void 0 ? 0 : _orders$total, _orders$R = orders.R, R = _orders$R === void 0 ? 0 : _orders$R, _orders$ACA = orders.ACA, ACA = _orders$ACA === void 0 ? 0 : _orders$ACA, _orders$PA = orders.PA, PA = _orders$PA === void 0 ? 0 : _orders$PA;
+              inProcess = Object.keys(orders).reduce(function (prev, curr) {
+                return !["total", "ACA", "PA", "R"].includes(curr) ? prev + orders[curr] : prev;
               }, 0);
               setMetricsData([{
                 label: "Productos totales",
@@ -184,9 +244,10 @@ var Dashboard = function Dashboard() {
                 label: "Productos terminados",
                 value: ACA
               }]);
+              delete orders.total;
               setProductsByStatus(orders);
 
-            case 9:
+            case 12:
             case "end":
               return _context3.stop();
           }
@@ -195,13 +256,13 @@ var Dashboard = function Dashboard() {
     }));
 
     return function loadProductsByStatus(_x2) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
   var loadRequiredProducts = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(orderByRequired) {
-      var _yield$loadProductVer2, dates;
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(orderByRequired) {
+      var _yield$loadProductVer, dates;
 
       return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
@@ -211,8 +272,8 @@ var Dashboard = function Dashboard() {
               return loadProductVersions(orderByRequired);
 
             case 2:
-              _yield$loadProductVer2 = _context4.sent;
-              dates = _yield$loadProductVer2.dates;
+              _yield$loadProductVer = _context4.sent;
+              dates = _yield$loadProductVer.dates;
               setRequiredProducts(dates);
 
             case 5:
@@ -224,31 +285,199 @@ var Dashboard = function Dashboard() {
     }));
 
     return function loadRequiredProducts(_x3) {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 
-  (0, _react.useEffect)(function () {
+  var datesSelect = function datesSelect() {
     var today = new Date();
-    var firstWeekDay = today.getDate() - today.getDay();
-    var startDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(firstWeekDay);
-    var endDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(today.getDate());
-    var queryObject = {
-      retailerId: "58",
-      startDate: startDate,
-      endDate: endDate
-    };
-    setOrderByStatus(queryObject);
-    setOrderByRequired(queryObject);
-    getRetailers();
-    loadProductsByStatus(queryObject);
-    loadRequiredProducts(queryObject);
-  }, []);
+    setDateOptions([{
+      id: 0,
+      name: "Rango de fechas"
+    }, {
+      id: 1,
+      name: "Todo el tiempo",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date("1900-01-01"),
+          endDate: new Date()
+        });
+      }
+    }, {
+      id: 2,
+      name: "Hoy",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date(),
+          endDate: new Date()
+        });
+      }
+    }, {
+      id: 3,
+      name: "Ayer",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date(today.setDate(today.getDate() - 1)),
+          endDate: new Date()
+        });
+      }
+    }, {
+      id: 4,
+      name: "Esta semana",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date(today.setDate(today.getDate() - today.getDay())),
+          endDate: new Date()
+        });
+      }
+    }, {
+      id: 5,
+      name: "La semana pasada",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date(today.setDate(today.getDate() - today.getDay() - 7)),
+          endDate: new Date(today.setDate(today.getDate() - today.getDay() + 7))
+        });
+      }
+    }, {
+      id: 6,
+      name: "Este mes",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01")),
+          endDate: today
+        });
+      }
+    }, {
+      id: 7,
+      name: "Este mes",
+      function: function _function() {
+        return setDatesRange({
+          startDate: new Date("".concat(today.getFullYear(), "-").concat(today.getMonth(), "-01")),
+          endDate: new Date("".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-01"))
+        });
+      }
+    }]);
+  };
+
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+    var today, startDate, endDate, queryObject;
+    return _regenerator.default.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.t0 = setProviders;
+            _context5.next = 3;
+            return (0, _dashboardUtils.getProviders)(jwt);
+
+          case 3:
+            _context5.t1 = _context5.sent;
+            (0, _context5.t0)(_context5.t1);
+            _context5.t2 = setCategories;
+            _context5.next = 8;
+            return (0, _dashboardUtils.getCategories)();
+
+          case 8:
+            _context5.t3 = _context5.sent;
+            (0, _context5.t2)(_context5.t3);
+            _context5.next = 12;
+            return getRetailers();
+
+          case 12:
+            datesSelect();
+            today = new Date();
+            startDate = "1900-01-01";
+            endDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(today.getDate());
+            queryObject = {
+              startDate: startDate,
+              endDate: endDate
+            };
+            setDatesRange({
+              startDate: startDate,
+              endDate: endDate
+            });
+            setOrderByStatus(queryObject);
+            setOrderByRequired(queryObject);
+            loadProductsByStatus(queryObject);
+            loadRequiredProducts(queryObject);
+
+          case 22:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })), []);
   (0, _react.useEffect)(function () {
-    (orderByRequired === null || orderByRequired === void 0 ? void 0 : orderByRequired.retailerId) && (orderByStatus === null || orderByStatus === void 0 ? void 0 : orderByStatus.retailerId) && metricsData.length > 0 && setLoading(false);
+    (orderByRequired === null || orderByRequired === void 0 ? void 0 : orderByRequired.startDate) && (orderByStatus === null || orderByStatus === void 0 ? void 0 : orderByStatus.endDate) && metricsData.length > 0 && setLoading(false);
   }, [orderByRequired, orderByStatus, metricsData]);
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var startDate, endDate, queryObject;
+    return _regenerator.default.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            startDate = datesRange.startDate, endDate = datesRange.endDate;
+            queryObject = {
+              startDate: (0, _dashboardUtils.formatDate)(startDate),
+              endDate: (0, _dashboardUtils.formatDate)(endDate)
+            };
+            companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
+            retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
+            categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
+            _context6.next = 7;
+            return loadProductsByStatus(queryObject);
+
+          case 7:
+            _context6.next = 9;
+            return loadRequiredProducts(queryObject);
+
+          case 9:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })), [companyId, retailerId, categoryId, datesRange]);
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "filters",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        options: dateOptions,
+        selectLabel: "Seleccionar Fecha",
+        placeHolder: "Buscar Fecha",
+        customSelectId: "dates-select",
+        parameterArray: datesRange,
+        setParameterArray: setDatesRange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showSearchBar: true,
+        options: providers,
+        selectLabel: "Seleccionar Proveedor",
+        placeHolder: "Buscar Proveedor",
+        customSelectId: "providers-select",
+        parameterArray: companyId,
+        setParameterArray: setCompanyId,
+        defaultOption: "Todos los proveedores"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showSearchBar: true,
+        options: categories,
+        selectLabel: "Seleccionar Departamento",
+        placeHolder: "Buscar Departamento",
+        customSelectId: "category-select",
+        parameterArray: categoryId,
+        setParameterArray: setCategoryId,
+        defaultOption: "Todas las categorías"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showSearchBar: true,
+        options: retailers,
+        selectLabel: "Seleccionar Alcance",
+        placeHolder: "Buscar Cadena",
+        customSelectId: "retailers-select",
+        parameterArray: retailerId,
+        setParameterArray: setRetailerId,
+        defaultOption: "Todos los alcances"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "metric-cards",
       children: metricsData.map(function (metric, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricCard.MetricCard, {
@@ -263,12 +492,13 @@ var Dashboard = function Dashboard() {
         description: "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
         dataObject: productsByStatus,
         retailerSelected: orderByStatus.retailerId,
-        retailers: retailers,
         queryObject: orderByStatus,
         setQueryObject: function setQueryObject(evt) {
           loadProductsByStatus(evt);
           setOrderByStatus(evt);
-        }
+        },
+        type: "doughnut",
+        displayLegend: true
       }), /*#__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.",
@@ -277,7 +507,6 @@ var Dashboard = function Dashboard() {
         indexAxis: "x",
         scale: "x",
         displayScale: true,
-        retailers: retailers,
         retailerSelected: orderByRequired.retailerId,
         queryObject: orderByRequired,
         setQueryObject: function setQueryObject(evt) {

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  .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    & > * {\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"])));
 
 exports.Container = Container;

package/dist/global-files/customHooks.js

@@ -19,7 +19,6 @@ var useCloseModal = function useCloseModal(id) {
 
   var closeModal = function closeModal(e) {
     e.stopPropagation();
-    e.preventDefault();
 
     if (!e.target.closest("#".concat(id)) && showModal) {
       document.removeEventListener("click", closeModal, false);

package/package.json

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

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

@@ -1,64 +1,46 @@
-import {
-  Container,
-  RouterComponent,
-  NavLinkOption,
-  ContainerPrincipal,
-  GlobalStyle,
-} from "./styles";
+import { Container } from "./styles";
 import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
 import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
 import React, { useState } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
-export const VerticalSideMenuMainPage = ({
-  menuoption = [],
-  conteinerdash,
-}) => {
+export const VerticalSideMenuMainPage = ({ menuoption }) => {
   const [trueBar, setTrueBar] = useState();
   return (
-    <Router>
-      <ContainerPrincipal>
-        <Container
-          bar={trueBar}
-          onMouseOver={() => setTrueBar(true)}
-          onMouseOut={() => setTrueBar(false)}
-        >
-          <div className="navbar-top">
-            <img
-              src={trueBar ? iconLogoContentoh : iconLogo}
-              alt="Logo"
-              className="logo"
-            ></img>
-            <div className="option">
-              {menuoption.map((item, index) => (
-                <RouterComponent key={index} bar={trueBar}>
-                  <NavLinkOption to={item.path} bar={trueBar}>
-                    <img src={item.icon} alt={item.title}></img>
-                    {trueBar && <p>{item.title}</p>}
-                  </NavLinkOption>
-                  {item.suboption !== undefined && (
-                    <>
-                      {item?.suboption?.map((subitem) => (
-                        <div className="sub-option">
-                          <NavLinkOption
-                            to={subitem.path}
-                            className="sub-option-link"
-                            bar={trueBar}
-                          >
-                            {trueBar && <p>{subitem.title}</p>}
-                          </NavLinkOption>
-                        </div>
-                      ))}
-                    </>
-                  )}
-                </RouterComponent>
-              ))}
+    <Container
+      className={trueBar}
+      bar={trueBar}
+      onMouseOver={() => setTrueBar(true)}
+      onMouseOut={() => setTrueBar(false)}
+    >
+      <div className="navbar-top">
+        <img
+          src={trueBar ? iconLogoContentoh : iconLogo}
+          alt="Logo"
+          className="logo"
+        ></img>
+        <div className="option">
+          {menuoption.map((item, index) => (
+            <div key={index}>
+              <NavLink to={item.path} className="option-link">
+                <img src={item.icon} alt={item.title}></img>
+                {trueBar && <p>{item.title}</p>}
+              </NavLink>
+              {item.suboption !== undefined && (
+                <>
+                  {item?.suboption?.map((subitem) => (
+                    <div className="sub-option">
+                      <NavLink to={subitem.path} className="sub-option-link">
+                        {trueBar && <p>{subitem.title}</p>}
+                      </NavLink>
+                    </div>
+                  ))}
+                </>
+              )}
             </div>
-          </div>
-        </Container>
-        {conteinerdash}
-      </ContainerPrincipal>
-      <GlobalStyle />
-    </Router>
+          ))}
+        </div>
+      </div>
+    </Container>
   );
 };