contentoh-components-library 21.4.3 → 21.4.5

package/.env.development

@@ -17,7 +17,6 @@ REACT_APP_RETAILER_REQUEST = https://fc069ovhuk.execute-api.us-east-1.amazonaws.
 REACT_APP_VERSIONS_ENDPOINT = https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/versions
 REACT_APP_RETAILER_ENDPOINT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/retailers
 REACT_APP_READ_ORDERS_BY_STATUS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/read-orders-by-status
-REACT_APP_READ_REQUIRED_ORDERS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/read-required-orders
 REACT_APP_CATEGORY_ENDPOINT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/categories
 REACT_APP_READ_PROVIDERS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/providers
 REACT_APP_PENDING_INVITATIONS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/pending-invitations

package/.env.production

@@ -17,7 +17,6 @@ REACT_APP_RETAILER_REQUEST = https://3v43slee1m.execute-api.us-east-1.amazonaws.
 REACT_APP_VERSIONS_ENDPOINT = https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/versions
 REACT_APP_RETAILER_ENDPOINT=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/retailers
 REACT_APP_READ_ORDERS_BY_STATUS=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/read-orders-by-status
-REACT_APP_READ_REQUIRED_ORDERS=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/read-required-orders
 REACT_APP_CATEGORY_ENDPOINT=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/categories
 REACT_APP_READ_PROVIDERS=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/providers
 REACT_APP_PENDING_INVITATIONS=https://3v43slee1m.execute-api.us-east-1.amazonaws.com/prod/pending-invitations

package/dist/components/atoms/ImageCarousel/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  width: 175px;\n  height: 175px;\n  border-radius: 5px 5px 0px 0px;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  background-color: #f0f0f0;\n\n  .slide-container {\n    display: flex;\n    width: 100%;\n\n    .image-container {\n      width: 100%;\n      height: 100%;\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: fill;\n      }\n\n      &.slide {\n        flex: 0 0 100%;\n        opacity: 0;\n        transition: opacity 0.5s ease-in-out;\n\n        &.active {\n          opacity: 1;\n        }\n      }\n    }\n\n    & > img {\n      width: 100%;\n    }\n  }\n\n  button {\n    position: absolute;\n    top: 0;\n    border: none;\n    cursor: pointer;\n    background-color: transparent;\n    color: white;\n    z-index: 1;\n    height: 100%;\n    width: 30px;\n\n    svg {\n      font-size: 24px;\n    }\n\n    &.prev {\n      left: 0;\n\n      &:hover {\n        background: linear-gradient(90deg, darkgray, transparent);\n      }\n    }\n    &.next {\n      right: 0;\n\n      svg {\n        transform: rotate(180deg);\n      }\n      &:hover {\n        background: linear-gradient(-90deg, darkgray, transparent);\n      }\n    }\n  }\n\n  button:focus {\n    outline: none;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 174px;\n  height: 175px;\n  border-radius: 5px 5px 0px 0px;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  background-color: #f0f0f0;\n\n  .slide-container {\n    display: flex;\n    width: 100%;\n\n    .image-container {\n      width: 100%;\n      height: 100%;\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: fill;\n      }\n\n      &.slide {\n        flex: 0 0 100%;\n        opacity: 0;\n        transition: opacity 0.5s ease-in-out;\n\n        &.active {\n          opacity: 1;\n        }\n      }\n    }\n\n    & > img {\n      width: 100%;\n    }\n  }\n\n  button {\n    position: absolute;\n    top: 0;\n    border: none;\n    cursor: pointer;\n    background-color: transparent;\n    color: white;\n    z-index: 1;\n    height: 100%;\n    width: 30px;\n\n    svg {\n      font-size: 24px;\n    }\n\n    &.prev {\n      left: 0;\n\n      &:hover {\n        background: linear-gradient(90deg, darkgray, transparent);\n      }\n    }\n    &.next {\n      right: 0;\n\n      svg {\n        transform: rotate(180deg);\n      }\n      &:hover {\n        background: linear-gradient(-90deg, darkgray, transparent);\n      }\n    }\n  }\n\n  button:focus {\n    outline: none;\n  }\n"])));
 
 exports.Container = Container;

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

@@ -45,9 +45,9 @@ var RetailerCatalog = function RetailerCatalog(_ref) {
   }, [retailers]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick(e) {
-      e.stopPropagation();
-      setShowRetailers(true);
+      setShowRetailers(!showRetailers);
     },
+    id: id,
     children: [retailers.map(function (retailer, i) {
       return i < limit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
         image: "https://content-management-images.s3.amazonaws.com/retailers/".concat(retailer.id, ".png"),
@@ -61,8 +61,7 @@ var RetailerCatalog = function RetailerCatalog(_ref) {
       })
     }), showRetailers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailersList.RetailersList, {
       retailers: retailers,
-      article: article,
-      id: id
+      article: article
     })]
   });
 };

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

@@ -19,8 +19,6 @@ var _UserOption = require("../UserOption");
 
 var _customHooks = require("../../../global-files/customHooks");
 
-var _react = require("react");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var UserCatalog = function UserCatalog(_ref) {
@@ -46,8 +44,8 @@ var UserCatalog = function UserCatalog(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: id,
-    onClick: function onClick() {
-      setShowList(true);
+    onClick: function onClick(e) {
+      if (!e.target.closest("#".concat(id, " .users-assigned-list"))) setShowList(!showList);
     },
     children: [datasheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
       image: (0, _data.getProfilePicture)(datasheet, 26, 26),

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

@@ -32,6 +32,7 @@ var UserOption = function UserOption(_ref) {
       id = _ref.id,
       onAssign = _ref.onAssign,
       product = _ref.product;
+  index === "auditor" && console.log(userId);
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,15 +73,15 @@ var UserOption = function UserOption(_ref) {
     switch (index) {
       case "datasheet":
       case "description":
-        setAssignationTarget("id_".concat(index, "_specialist"));
+        setAssignationTarget("id_".concat(index, "_especialist"));
         setConcept(index);
-        setTarget("specialist");
+        setTarget("especialist");
         break;
 
       case "image":
-        setAssignationTarget("id_".concat(index, "s_specialist"));
+        setAssignationTarget("id_".concat(index, "s_especialist"));
         setConcept(index + "s");
-        setTarget("specialist");
+        setTarget("especialist");
         break;
 
       case "auditor":
@@ -94,15 +95,16 @@ var UserOption = function UserOption(_ref) {
     }
   }, [index]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    onClick: function onClick() {
-      return setShowSelector(true);
+    onClick: function onClick(e) {
+      setShowSelector(!showSelector);
+      e.stopPropagation();
     },
     id: id,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "image-and-name",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
         image: (0, _data.getProfilePicture)(userAssigned === null || userAssigned === void 0 ? void 0 : userAssigned.id_user, 26, 26),
-        altText: "datasheet specialist",
+        altText: "datasheet especialist",
         imageType: "medium-image"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         children: [userAssigned === null || userAssigned === void 0 ? void 0 : userAssigned.name, " ", userAssigned === null || userAssigned === void 0 ? void 0 : userAssigned.last_name]

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

@@ -21,8 +21,6 @@ var _data = require("../../../global-files/data");
 
 var _react = require("react");
 
-var _customHooks = require("../../../global-files/customHooks");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var UserSelector = function UserSelector(_ref) {
@@ -74,11 +72,11 @@ var UserSelector = function UserSelector(_ref) {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "selector-container",
-      children: userFiltered.length ? userFiltered.map(function (user) {
+      children: userFiltered.length ? userFiltered.map(function (user, i) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "user-item",
-          onClick: function onClick(e) {
-            return onAssign && onAssign(product, user.id_user, assignationTarget, target, concept);
+          onClick: function onClick() {
+            onAssign(product, user.id_user, assignationTarget, target, concept);
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
             image: (0, _data.getProfilePicture)(user.id_user, 26, 26),
@@ -87,7 +85,7 @@ var UserSelector = function UserSelector(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
             children: [user.name, " ", user.last_name]
           })]
-        }, user.id_user);
+        }, user.id_user + "-" + i);
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: "Sin usuarios para asignar"

package/dist/components/molecules/GridItem/index.js

@@ -43,6 +43,20 @@ var GridItem = function GridItem(_ref) {
       status = _gridElement$status === void 0 ? [] : _gridElement$status,
       _gridElement$catalogs = gridElement.catalogs,
       catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs;
+
+  var getSrvName = function getSrvName(srv) {
+    switch (srv) {
+      case "datasheet":
+        return "F.T.";
+
+      case "description":
+        return "D.C.";
+
+      case "images":
+        return "IMG";
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick(e) {
       return onGridClick && onGridClick(e, product, index);
@@ -75,8 +89,14 @@ var GridItem = function GridItem(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "status-slider",
       children: status === null || status === void 0 ? void 0 : status.map(function (item) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "status-element",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "srv-name",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: getSrvName(item.title)
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
             statusType: item.value
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PercentTag.PercentTag, {
             percent: item.percent,

package/dist/components/molecules/GridItem/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  width: 175px;\n  border: 1px solid #f0f0f0;\n  position: relative;\n\n  .chk-container {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 5;\n    height: 16px;\n  }\n\n  .data-body {\n    padding: 10px;\n    border-bottom: 1px solid #f0f0f0;\n\n    h3,\n    p {\n      color: #262626;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 16px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      & + p {\n        margin-top: 5px;\n      }\n    }\n    p {\n      font-size: 10px;\n      line-height: 12px;\n      color: #808080;\n    }\n  }\n\n  .status-slider {\n    display: flex;\n    padding: 5px 10px;\n    overflow: auto;\n    border-bottom: 1px solid #f0f0f0;\n    flex-wrap: nowrap;\n\n    .status-element {\n      display: flex;\n    }\n\n    * + * {\n      margin-left: 10px;\n    }\n  }\n\n  .cart-and-raiting,\n  .retailers-and-user {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    .star-button {\n      button {\n        padding: 3px;\n        color: transparent;\n        -webkit-text-stroke: 1px #808080;\n      }\n    }\n  }\n\n  .retailers-and-user {\n    padding: 0;\n    > * {\n      flex: 1 0 50%;\n      display: flex;\n      padding: 5px;\n      height: 36px;\n    }\n    .retailers-container {\n      border-right: 1px solid #f0f0f0;\n    }\n  }\n"])), _variables.FontFamily.Lato);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 175px;\n  border: 1px solid #f0f0f0;\n  position: relative;\n  height: fit-content;\n\n  .chk-container {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 5;\n    height: 16px;\n  }\n\n  .data-body {\n    padding: 10px;\n    border-bottom: 1px solid #f0f0f0;\n\n    h3,\n    p {\n      color: #262626;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 16px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      & + p {\n        margin-top: 5px;\n      }\n    }\n    p {\n      font-size: 10px;\n      line-height: 12px;\n      color: #808080;\n    }\n  }\n\n  .status-slider {\n    display: flex;\n    padding: 5px 10px;\n    overflow: auto;\n    border-bottom: 1px solid #f0f0f0;\n    flex-wrap: nowrap;\n\n    .status-element {\n      display: flex;\n\n      .srv-name {\n        background-color: #808080;\n        padding: 0 10px;\n        border-radius: 5px;\n        p {\n          font-family: ", ";\n          font-size: 12px;\n          line-height: 20px;\n          font-weight: 700;\n          color: #fff;\n        }\n      }\n    }\n\n    * + * {\n      margin-left: 10px;\n    }\n  }\n\n  .cart-and-raiting,\n  .retailers-and-user {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    .star-button {\n      button {\n        padding: 3px;\n        color: transparent;\n        -webkit-text-stroke: 1px #808080;\n      }\n    }\n  }\n\n  .retailers-and-user {\n    padding: 0;\n    > * {\n      flex: 1 0 50%;\n      display: flex;\n      padding: 5px;\n      height: 36px;\n    }\n    .retailers-container {\n      border-right: 1px solid #f0f0f0;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    box-shadow: 1px 2px 5px black;\n  }\n"])), _variables.FontFamily.Lato, _variables.FontFamily.AvenirNext);
 
 exports.Container = Container;

package/dist/components/molecules/RowItem/styles.js

@@ -19,7 +19,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 exports.Container = Container;
 
-var Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: ", ";\n  min-width: ", "px;\n  text-align: center;\n  color: #262626;\n  font-family: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  padding: 10px 5px;\n"])), function (_ref) {
+var Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: ", ";\n  min-width: ", "px;\n  text-align: center;\n  color: #262626;\n  font-family: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  padding: 10px 5px;\n  display: flex;\n  justify-content: center;\n"])), function (_ref) {
   var flex = _ref.flex;
   return flex ? flex : 1;
 }, function (_ref2) {

package/dist/components/organisms/GridProducts/utils.js

@@ -62,7 +62,7 @@ var getProductsToTable = function getProductsToTable() {
         flex: 1,
         minWidth: 100
       }, {
-        name: "none",
+        name: product.prio,
         flex: 1,
         minWidth: 100
       }, {
@@ -75,7 +75,8 @@ var getProductsToTable = function getProductsToTable() {
           imagesSpecialists: imagesSpecialists,
           auditors: auditors,
           id: "users-" + id,
-          product: product
+          product: product,
+          onAssign: onAssign
         }),
         flex: 1,
         minWidth: 100
@@ -89,6 +90,9 @@ var getProductsToTable = function getProductsToTable() {
         info: [{
           title: "name",
           value: (article === null || article === void 0 ? void 0 : article.name) || "-"
+        }, {
+          title: "order",
+          value: orderId || "-"
         }, {
           title: "category",
           value: (article === null || article === void 0 ? void 0 : article.category) || "-"
@@ -123,12 +127,13 @@ var getProductsToTable = function getProductsToTable() {
             datasheet: article.id_datasheet_especialist,
             description: article.id_description_especialist,
             images: article.id_images_especialist,
+            auditor: article.id_auditor,
             textSpecialists: textSpecialists,
             imagesSpecialists: imagesSpecialists,
             auditors: auditors,
             id: "users-" + id,
-            onAssign: onAssign,
-            product: product
+            product: product,
+            onAssign: onAssign
           })
         }
       },

package/dist/global-files/customHooks.js

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

package/package.json

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

package/src/components/atoms/ImageCarousel/styles.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  width: 175px;
+  width: 174px;
   height: 175px;
   border-radius: 5px 5px 0px 0px;
   position: relative;

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

@@ -21,9 +21,9 @@ export const RetailerCatalog = ({
   return (
     <Container
       onClick={(e) => {
-        e.stopPropagation();
-        setShowRetailers(true);
+        setShowRetailers(!showRetailers);
       }}
+      id={id}
     >
       {retailers.map(
         (retailer, i) =>
@@ -42,7 +42,7 @@ export const RetailerCatalog = ({
         </div>
       )}
       {showRetailers && (
-        <RetailersList retailers={retailers} article={article} id={id} />
+        <RetailersList retailers={retailers} article={article} />
       )}
     </Container>
   );

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

@@ -3,9 +3,6 @@ import { Avatar } from "../Avatar";
 import { getProfilePicture } from "../../../global-files/data";
 import { UserOption } from "../UserOption";
 import { useCloseModal } from "../../../global-files/customHooks";
-import { useState } from "react";
-import { useEffect } from "react";
-
 export const UserCatalog = ({
   datasheet,
   description,
@@ -23,8 +20,9 @@ export const UserCatalog = ({
   return (
     <Container
       id={id}
-      onClick={() => {
-        setShowList(true);
+      onClick={(e) => {
+        if (!e.target.closest(`#${id} .users-assigned-list`))
+          setShowList(!showList);
       }}
     >
       {datasheet && (

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

@@ -15,6 +15,7 @@ export const UserOption = ({
   onAssign,
   product,
 }) => {
+  index === "auditor" && console.log(userId);
   const [userAssigned, setUserAssigned] = useState({});
   const [showSelector, setShowSelector] = useCloseModal(id);
   const [assignationTarget, setAssignationTarget] = useState("");
@@ -37,14 +38,14 @@ export const UserOption = ({
     switch (index) {
       case "datasheet":
       case "description":
-        setAssignationTarget(`id_${index}_specialist`);
+        setAssignationTarget(`id_${index}_especialist`);
         setConcept(index);
-        setTarget("specialist");
+        setTarget("especialist");
         break;
       case "image":
-        setAssignationTarget(`id_${index}s_specialist`);
+        setAssignationTarget(`id_${index}s_especialist`);
         setConcept(index + "s");
-        setTarget("specialist");
+        setTarget("especialist");
         break;
       case "auditor":
         setAssignationTarget(`id_${index}`);
@@ -57,11 +58,17 @@ export const UserOption = ({
   }, [index]);
 
   return (
-    <Container onClick={() => setShowSelector(true)} id={id}>
+    <Container
+      onClick={(e) => {
+        setShowSelector(!showSelector);
+        e.stopPropagation();
+      }}
+      id={id}
+    >
       <div className="image-and-name">
         <Avatar
           image={getProfilePicture(userAssigned?.id_user, 26, 26)}
-          altText={"datasheet specialist"}
+          altText={"datasheet especialist"}
           imageType={"medium-image"}
         />
         <p>

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

@@ -5,7 +5,6 @@ import { Avatar } from "../Avatar";
 import { getProfilePicture } from "../../../global-files/data";
 import { useState } from "react";
 import { useEffect } from "react";
-import { useCloseModal } from "../../../global-files/customHooks";
 
 export const UserSelector = ({
   searchLabel,
@@ -52,20 +51,19 @@ export const UserSelector = ({
       </div>
       <div className="selector-container">
         {userFiltered.length ? (
-          userFiltered.map((user) => (
+          userFiltered.map((user, i) => (
             <div
-              key={user.id_user}
+              key={user.id_user + "-" + i}
               className="user-item"
-              onClick={(e) =>
-                onAssign &&
+              onClick={() => {
                 onAssign(
                   product,
                   user.id_user,
                   assignationTarget,
                   target,
                   concept
-                )
-              }
+                );
+              }}
             >
               <Avatar
                 image={getProfilePicture(user.id_user, 26, 26)}

package/src/components/molecules/GridItem/index.js

@@ -20,6 +20,17 @@ export const GridItem = ({
 }) => {
   const { images = [], info = [], status = [], catalogs = {} } = gridElement;
 
+  const getSrvName = (srv) => {
+    switch (srv) {
+      case "datasheet":
+        return "F.T.";
+      case "description":
+        return "D.C.";
+      case "images":
+        return "IMG";
+    }
+  };
+
   return (
     <Container onClick={(e) => onGridClick && onGridClick(e, product, index)}>
       <div className="chk-container" onClick={(e) => e.stopPropagation()}>
@@ -39,10 +50,13 @@ export const GridItem = ({
       </div>
       <div className="status-slider">
         {status?.map((item) => (
-          <>
+          <div className="status-element">
+            <div className="srv-name">
+              <p>{getSrvName(item.title)}</p>
+            </div>
             <Status statusType={item.value} />
             <PercentTag percent={item.percent} progressBarType={item.value} />
-          </>
+          </div>
         ))}
       </div>
       {isMerchans ? (

package/src/components/molecules/GridItem/styles.js

@@ -5,6 +5,7 @@ export const Container = styled.div`
   width: 175px;
   border: 1px solid #f0f0f0;
   position: relative;
+  height: fit-content;
 
   .chk-container {
     position: absolute;
@@ -48,6 +49,19 @@ export const Container = styled.div`
 
     .status-element {
       display: flex;
+
+      .srv-name {
+        background-color: #808080;
+        padding: 0 10px;
+        border-radius: 5px;
+        p {
+          font-family: ${FontFamily.AvenirNext};
+          font-size: 12px;
+          line-height: 20px;
+          font-weight: 700;
+          color: #fff;
+        }
+      }
     }
 
     * + * {
@@ -82,4 +96,9 @@ export const Container = styled.div`
       border-right: 1px solid #f0f0f0;
     }
   }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 1px 2px 5px black;
+  }
 `;

package/src/components/molecules/RowItem/styles.js

@@ -35,4 +35,6 @@ export const Column = styled.div`
   font-size: 12px;
   line-height: 16px;
   padding: 10px 5px;
+  display: flex;
+  justify-content: center;
 `;

package/src/components/organisms/GridProducts/utils.js

@@ -35,7 +35,7 @@ export const getProductsToTable = (
           flex: 1,
           minWidth: 100,
         },
-        { name: "none", flex: 1, minWidth: 100 },
+        { name: product.prio, flex: 1, minWidth: 100 },
         {
           name: (
             <UserCatalog
@@ -48,6 +48,7 @@ export const getProductsToTable = (
               auditors={auditors}
               id={"users-" + id}
               product={product}
+              onAssign={onAssign}
             />
           ),
           flex: 1,
@@ -59,6 +60,7 @@ export const getProductsToTable = (
         images: imgArray,
         info: [
           { title: "name", value: article?.name || "-" },
+          { title: "order", value: orderId || "-" },
           { title: "category", value: article?.category || "-" },
           { title: "company", value: article?.company_name || "-" },
           { title: "price", value: article?.price || "-" },
@@ -86,12 +88,13 @@ export const getProductsToTable = (
               datasheet={article.id_datasheet_especialist}
               description={article.id_description_especialist}
               images={article.id_images_especialist}
+              auditor={article.id_auditor}
               textSpecialists={textSpecialists}
               imagesSpecialists={imagesSpecialists}
               auditors={auditors}
               id={"users-" + id}
-              onAssign={onAssign}
               product={product}
+              onAssign={onAssign}
             />
           ),
         },

package/src/global-files/customHooks.js

@@ -6,7 +6,6 @@ export const useCloseModal = (id) => {
   const closeModal = (e) => {
     e.stopPropagation();
     if (!e.target.closest(`#${id}`) && showModal) {
-      console.log(id);
       document.removeEventListener("click", closeModal, false);
       setShowModal(false);
     }