contentoh-components-library 21.4.115 → 21.4.117

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

@@ -24,7 +24,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var CustomChip = function CustomChip(_ref) {
   var key = _ref.key,
       label = _ref.label,
-      onDelete = _ref.onDelete;
+      onDelete = _ref.onDelete,
+      showDelete = _ref.showDelete;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -44,19 +45,23 @@ var CustomChip = function CustomChip(_ref) {
     onDelete: onDelete,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForeverOutlined.default, {
+    deleteIcon: showDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForeverOutlined.default, {
       sx: {
         color: "#B64545!important",
         fontSize: "14px!important",
         cursor: "pointer"
       }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForeverOutlined.default, {
+      sx: {
+        display: "none"
+      }
     }),
     style: {
       height: "30px",
       borderRadius: "5px",
       background: "transparent",
-      border: "1px solid ".concat(isHovered ? "#B64545" : "#F0F0F0"),
-      color: "".concat(isHovered ? "#B64545" : "#707070")
+      border: "1px solid ".concat(showDelete && isHovered ? "#B64545" : "#F0F0F0"),
+      color: "".concat(showDelete && isHovered ? "#B64545" : "#707070")
     }
   }, key);
 };

package/dist/components/molecules/AddGroup/AddGroup.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AddGroupDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/AddGroup",
+  component: _index.AddGroup
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AddGroup, (0, _objectSpread2.default)({}, args));
+};
+
+var AddGroupDefault = Template.bind({});
+exports.AddGroupDefault = AddGroupDefault;
+AddGroupDefault.args = {
+  image: bags
+};

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

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddGroup = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles.js");
+
+var _search = _interopRequireDefault(require("../../../assets/images/Icons/search.svg"));
+
+var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var AddGroup = function AddGroup(_ref) {
+  var id = _ref.id,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? [] : _ref$value,
+      _ref$defaultSearch = _ref.defaultSearch,
+      defaultSearch = _ref$defaultSearch === void 0 ? "" : _ref$defaultSearch,
+      _ref$defaultOption = _ref.defaultOption,
+      defaultOption = _ref$defaultOption === void 0 ? "" : _ref$defaultOption,
+      onChange = _ref.onChange,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder;
+
+  var _useState = (0, _react.useState)(value),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      itemsSelected = _useState2[0],
+      setItemsSelected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultSearch),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      containerVisible = _useState6[0],
+      setContainerVisible = _useState6[1];
+
+  var itemsFiltered = function () {
+    if (!search) return items;
+    return items.filter(function (item) {
+      return item.label.toLowerCase().includes(search.toLowerCase());
+    });
+  }();
+
+  (0, _react.useEffect)(function () {
+    onChange && onChange(itemsSelected);
+  }, [itemsSelected]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "custom-select",
+      onClick: function onClick() {
+        return setContainerVisible(!containerVisible);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _addv.default,
+        className: "add-icon",
+        alt: "add icon"
+      })
+    }), containerVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "container-def",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "search-bar",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _search.default,
+          className: "search-icon",
+          alt: "search icon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          className: "search",
+          onChange: function onChange(e) {
+            setSearch(e.target.value);
+          },
+          value: search,
+          placeholder: placeholder
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "default-option",
+        children: defaultOption
+      }), itemsFiltered.map(function (item, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-options",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "options",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              id: "custom-check",
+              className: "custom-check",
+              type: "checkbox",
+              checked: itemsSelected.includes(item.value),
+              onChange: function onChange(e) {
+                setItemsSelected(function (prev) {
+                  var existItem = prev.find(function (e) {
+                    return e === item.value;
+                  });
+
+                  if (existItem) {
+                    return (0, _toConsumableArray2.default)(prev).filter(function (e) {
+                      return e !== item.value;
+                    });
+                  }
+
+                  return [].concat((0, _toConsumableArray2.default)(prev), [item.value]);
+                });
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              htmlFor: "",
+              className: "texto",
+              children: item.label
+            })]
+          }, i)
+        });
+      })]
+    })]
+  });
+};
+
+exports.AddGroup = AddGroup;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _checkverde = _interopRequireDefault(require("../../../assets/images/checkBox/checkverde.svg"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .container-def {\n    margin-top: 10px;\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    max-height: 500px;\n    overflow: auto;\n  }\n\n  .custom-select {\n    ont-family: RobotoRegular,sans-serif;\n    font-size: 12px;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    padding: 7px 7px;\n    -webkit-box-pack: justify;\n    -webkit-justify-content: space-between;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: #fff;\n    border: 1px solid #E33AA9;\n    cursor: pointer;\n  }\n\n  .search-bar{\n    display: flex;\n    align-items: center;\n    padding: 0px 5px;\n    border-bottom: 1px solid #f0f0f0;\n  }\n\n  .search {\n    border: none;\n    height: 34px;\n    padding: 5px 10px;\n    color: #707070;\n  }\n  .search::placeholder {\n    display: inline;\n    color: #707070;\n    font-family: Avenir Next;\n    font-weight: 500;\n    font-size: 13px;\n    line-height: 15px;\n  }\n\n  .container-options {\n    padding: 5px;\n  }\n\n  .default-option {\n    cursor: pointer;\n    padding: 10px 10px 5px;\n    color: #817393;\n    font-family: Avenir Next;\n    font-weight: 500;\n    font-size: 13px;\n    line-height: 15px;\n  }\n\n  .options {\n    height: 24px;\n    gap: 10px;\n    display: flex;\n    align-items: center;\n  }\n\n  .custom-check {\n    border: 3px solid red;\n    background-color: #D9D9D9;\n    background-size: 100% 100%;\n    background-position: center;\n    background-repeat: no-repeat;\n    width: 300px;\n    height: 300px;\n    appearance: none;\n    display: inline-block;\n    vertical-align: middle;\n    background-origin: border-box;\n    padding: 0;\n    user-select: none;\n    flex-shrink: 0;\n    border-radius: 3px;\n  }\n\n  .custom-check {\n    cursor: pointer;\n    background-color: #D9D9D9;\n    width: 16px;\n    height: 16px;\n    appearance: none;\n    border: 1px solid #cbcbcb;\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .custom-check:checked {\n    background-color: #FFFFFF;\n    border: none;\n    background-image: url(", ");\n  }\n\n  .custom-check:focus {\n    border-color: rgb(198, 198, 198);\n  }\n\n  .custom-check:disabled {\n    background-color: rgb(198, 198, 198);\n    background-image: none;\n  }\n\n  .custom-check:disabled:checked {\n    background-color: rgb(198, 198, 198);\n    background-image: url(", ");\n  }\n\n  .texto {\n    display: inline;\n    color: #817393;\n    font-family: Avenir Next;\n    font-weight: 500;\n    font-size: 13px;\n    line-height: 15px;\n  }\n\n  .add-icon{\n    width:13px;\n    height: 13px;\n  }\n"])), _checkverde.default, _checkverde.default);
+
+exports.Container = Container;

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

@@ -11,6 +11,8 @@ exports.Phase = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -31,19 +33,13 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _Modal = require("../../organisms/Modal");
 
-var _TextField = require("@mui/material/TextField");
-
-var _GroupSelect = require("../../molecules/GroupSelect");
-
 var _CustomChip = require("../../atoms/CustomChip");
 
-var _CustomSelect = require("../../molecules/CustomSelect");
-
 var _ButtonV = require("../../atoms/ButtonV2");
 
 var _options = _interopRequireDefault(require("../../../assets/images/Icons/options.svg"));
 
-var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
+var _AddGroup = require("../AddGroup");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -89,17 +85,22 @@ var Phase = function Phase(_ref) {
       nextPhaseState = _useState8[0],
       setNextPhaseState = _useState8[1];
 
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      tempChips = _useState10[0],
+      setTempChips = _useState10[1];
+
   var open = Boolean(anchorEl);
 
-  var _useState9 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
   }),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      modalData = _useState10[0],
-      setModalData = _useState10[1];
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      modalData = _useState12[0],
+      setModalData = _useState12[1];
 
   var ITEM_HEIGHT = 48;
   var ITEM_PADDING_TOP = 8;
@@ -175,9 +176,8 @@ var Phase = function Phase(_ref) {
                   return group.groupName === selectedValue ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
                     groupActive: 1
                   }) : group;
-                }); // Actualizar el estado de chips y groupsSelected
-
-                setChips(function (prevChips) {
+                });
+                setTempChips(function (prevChips) {
                   return [].concat((0, _toConsumableArray2.default)(prevChips), [{
                     id: phaseId,
                     label: selectedValue
@@ -187,7 +187,6 @@ var Phase = function Phase(_ref) {
                   return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
                 });
                 setSelectedValue("");
-                console.log("update", updatedGroups);
                 loadData();
               }
 
@@ -225,23 +224,22 @@ var Phase = function Phase(_ref) {
 
             case 3:
               response = _context3.sent;
-              console.log("response", response.data.body);
-              console.log("grupo agregado correctamente");
+              console.log(response.data.body);
               loadData();
-              _context3.next = 12;
+              _context3.next = 11;
               break;
 
-            case 9:
-              _context3.prev = 9;
+            case 8:
+              _context3.prev = 8;
               _context3.t0 = _context3["catch"](0);
               console.error("Error al agregar grupo a fase:", _context3.t0);
 
-            case 12:
+            case 11:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 9]]);
+      }, _callee3, null, [[0, 8]]);
     }));
 
     return function addGroup(_x2, _x3) {
@@ -274,22 +272,21 @@ var Phase = function Phase(_ref) {
 
             case 4:
               response = _context4.sent;
-              console.log("response", response.data.body);
-              console.log("grupo agregado correctamente");
-              _context4.next = 12;
+              console.log(response.data.body);
+              _context4.next = 11;
               break;
 
-            case 9:
-              _context4.prev = 9;
+            case 8:
+              _context4.prev = 8;
               _context4.t0 = _context4["catch"](0);
               console.error("Error al actualizar grupo de fase:", _context4.t0);
 
-            case 12:
+            case 11:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[0, 9]]);
+      }, _callee4, null, [[0, 8]]);
     }));
 
     return function updateNextPhase(_x4, _x5) {
@@ -297,37 +294,104 @@ var Phase = function Phase(_ref) {
     };
   }();
 
-  var handleGroupSelect = function handleGroupSelect() {
-    groupsSelected.forEach(function (groupId) {
-      var matchingGroup = groups.find(function (group) {
-        return group.groupId === groupId;
-      });
+  var handleGroupSelect = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var _iterator, _step, _loop;
 
-      if (matchingGroup) {
-        if (!chips.find(function (chip) {
-          return chip.key === matchingGroup.groupId;
-        })) {
-          setChips(function (prevChips) {
-            return [].concat((0, _toConsumableArray2.default)(prevChips), [{
-              id: matchingGroup.groupId,
-              label: matchingGroup.groupName
-            }]);
-          });
+      return _regenerator.default.wrap(function _callee5$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _iterator = (0, _createForOfIteratorHelper2.default)(groupsSelected);
+              _context6.prev = 1;
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                var groupId, matchingGroup;
+                return _regenerator.default.wrap(function _loop$(_context5) {
+                  while (1) {
+                    switch (_context5.prev = _context5.next) {
+                      case 0:
+                        groupId = _step.value;
+                        matchingGroup = groups.find(function (group) {
+                          return group.groupId === groupId;
+                        });
+
+                        if (!matchingGroup) {
+                          _context5.next = 6;
+                          break;
+                        }
+
+                        if (!tempChips.find(function (chip) {
+                          return chip.key === matchingGroup.groupId;
+                        })) {
+                          setTempChips(function (prevChips) {
+                            return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+                              id: matchingGroup.groupId,
+                              label: matchingGroup.groupName
+                            }]);
+                          });
+                        }
+
+                        _context5.next = 6;
+                        return addGroup(phaseId, [groupId]);
+
+                      case 6:
+                      case "end":
+                        return _context5.stop();
+                    }
+                  }
+                }, _loop);
+              });
+
+              _iterator.s();
+
+            case 4:
+              if ((_step = _iterator.n()).done) {
+                _context6.next = 8;
+                break;
+              }
+
+              return _context6.delegateYield(_loop(), "t0", 6);
+
+            case 6:
+              _context6.next = 4;
+              break;
+
+            case 8:
+              _context6.next = 13;
+              break;
+
+            case 10:
+              _context6.prev = 10;
+              _context6.t1 = _context6["catch"](1);
+
+              _iterator.e(_context6.t1);
+
+            case 13:
+              _context6.prev = 13;
+
+              _iterator.f();
+
+              return _context6.finish(13);
+
+            case 16:
+            case "end":
+              return _context6.stop();
+          }
         }
+      }, _callee5, null, [[1, 10, 13, 16]]);
+    }));
 
-        addGroup(phaseId, groupsSelected);
-      }
-    });
-  };
+    return function handleGroupSelect() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
 
   var handleNextPhaseSelect = function handleNextPhaseSelect() {
     if (selectedValue.length > 0) {
       var Id = selectedValue[0];
-      console.log("phaseId", Id);
       var matchingPhase = phases.find(function (phase) {
         return phase.phaseId === Id;
       });
-      console.log("matchingPhase", matchingPhase);
 
       if (matchingPhase) {
         checkAvailablePhase(phaseId, matchingPhase.phaseId);
@@ -386,35 +450,53 @@ var Phase = function Phase(_ref) {
   }; //eliminar chip
 
 
-  var handleChipDelete = function handleChipDelete(phaseId, chipToRemove) {
-    setGroupsSelected(function (prevGroups) {
-      return prevGroups.filter(function (chip) {
-        return chip.id !== chipToRemove.id;
-      });
-    });
-    console.log("Se elimino el grupo", chipToRemove.id);
-    setChips(function (prevChips) {
-      return prevChips.filter(function (chip) {
-        return chip.id !== chipToRemove.id;
-      });
-    });
-    deleteGroup(phaseId, chipToRemove.id);
-  }; //eliminar grupo de fase
+  var handleChipDelete = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(phaseId, chipToRemove) {
+      return _regenerator.default.wrap(function _callee6$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              setGroupsSelected(function (prevGroups) {
+                return prevGroups.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              setChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              setTempChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              _context7.next = 5;
+              return deleteGroup(phaseId, chipToRemove.id);
+
+            case 5:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee6);
+    }));
+
+    return function handleChipDelete(_x6, _x7) {
+      return _ref7.apply(this, arguments);
+    };
+  }(); //eliminar grupo de fase
 
 
   var deleteGroup = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(phaseId, groupId) {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(phaseId, groupId) {
       var response;
-      return _regenerator.default.wrap(function _callee5$(_context5) {
+      return _regenerator.default.wrap(function _callee7$(_context8) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
-              _context5.prev = 0;
-              console.log("grupo de fase", {
-                phaseId: phaseId,
-                groupId: groupId
-              });
-              _context5.next = 4;
+              _context8.prev = 0;
+              _context8.next = 3;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
                 deleteGroupOfPhase: {
                   phaseId: phaseId,
@@ -422,32 +504,37 @@ var Phase = function Phase(_ref) {
                 }
               }, {
                 headers: {
-                  Authorization: token // Authorization: sessionStorage.getItem("jwt"),
-
+                  Authorization: token
                 }
               });
 
-            case 4:
-              response = _context5.sent;
+            case 3:
+              response = _context8.sent;
               console.log("grupo eliminado correctamente");
-              _context5.next = 11;
+              loadData();
+              setTempChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== groupId;
+                });
+              });
+              _context8.next = 12;
               break;
 
-            case 8:
-              _context5.prev = 8;
-              _context5.t0 = _context5["catch"](0);
-              console.error("Error al eliminar grupo de fase:", _context5.t0);
+            case 9:
+              _context8.prev = 9;
+              _context8.t0 = _context8["catch"](0);
+              console.error("Error al eliminar grupo de fase:", _context8.t0);
 
-            case 11:
+            case 12:
             case "end":
-              return _context5.stop();
+              return _context8.stop();
           }
         }
-      }, _callee5, null, [[0, 8]]);
+      }, _callee7, null, [[0, 9]]);
     }));
 
-    return function deleteGroup(_x6, _x7) {
-      return _ref6.apply(this, arguments);
+    return function deleteGroup(_x8, _x9) {
+      return _ref8.apply(this, arguments);
     };
   }();
 
@@ -463,7 +550,7 @@ var Phase = function Phase(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-phase",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-        children: ["Fase ", phaseId, " - ", phaseName]
+        children: ["Fase ", id, " - ", phaseName]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "text-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -554,27 +641,23 @@ var Phase = function Phase(_ref) {
           label: chip.label,
           onDelete: function onDelete() {
             return handleChipDelete(phaseId, chip);
-          }
+          },
+          showDelete: showButtonChip
         }, chip.id);
-      }), showButtonChip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupSelect.GroupSelect, {
-        options: groups.filter(function (group) {
+      }), showButtonChip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddGroup.AddGroup, {
+        id: "add-group-select-".concat(phaseId),
+        items: groups.filter(function (group) {
           return group.groupActive === 0;
         }).map(function (group) {
           return {
-            id: group.groupId,
-            name: group.groupName
+            value: group.groupId,
+            label: group.groupName
           };
         }),
-        showSearchBar: true,
-        isSingleSelect: false,
-        icon: _addv.default,
-        placeHolder: "Buscar grupo",
-        customSelectId: "category-select-" + groups.groupId,
         defaultOption: "Todos los grupos",
-        parameterArray: groupsSelected,
-        setParameterArray: setGroupsSelected,
-        onClickItem: function onClickItem() {
-          handleGroupSelect();
+        placeholder: "Buscar grupo",
+        onChange: function onChange(selectedItems) {
+          setGroupsSelected(selectedItems);
         }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {