contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DashboardMetric = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _Graphic = require("../../atoms/Graphic");
+
+var _dashboardMetricUtils = require("./dashboardMetricUtils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var DashboardMetric = function DashboardMetric(_ref) {
+  var _Object$values;
+
+  var label = _ref.label,
+      description = _ref.description,
+      _ref$dataObject = _ref.dataObject,
+      dataObject = _ref$dataObject === void 0 ? {} : _ref$dataObject,
+      _ref$indexAxis = _ref.indexAxis,
+      indexAxis = _ref$indexAxis === void 0 ? "y" : _ref$indexAxis,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "bar" : _ref$type,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? "x" : _ref$scale,
+      _ref$displayScale = _ref.displayScale,
+      displayScale = _ref$displayScale === void 0 ? false : _ref$displayScale,
+      _ref$displayLegend = _ref.displayLegend,
+      displayLegend = _ref$displayLegend === void 0 ? false : _ref$displayLegend,
+      _ref$showPercent = _ref.showPercent,
+      showPercent = _ref$showPercent === void 0 ? false : _ref$showPercent,
+      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];
+
+    return key !== "NS" && "".concat((0, _dashboardMetricUtils.getFullStatus)(key), " (").concat(value, ")");
+  }) : Object.keys(dataObject);
+  var newObject = type === "doughnut" ? (0, _dashboardMetricUtils.removeOldStatus)(dataObject) : dataObject;
+  var values = (_Object$values = Object.values(newObject)) !== null && _Object$values !== void 0 && _Object$values.length ? Object.values(newObject) : [0];
+  var colorsArray = Object.keys(newObject).map(function (key) {
+    return key !== "NS" && (0, _dashboardMetricUtils.getStatusColor)(key);
+  });
+  var data = {
+    labels: labels,
+    datasets: [{
+      data: values,
+      backgroundColor: colorsArray,
+      borderColor: borderColor
+    }]
+  };
+  var options = {
+    indexAxis: indexAxis,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 1,
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label: function label(_ref4) {
+            var _dataset$data;
+
+            var dataset = _ref4.dataset,
+                element = _ref4.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);
+            var raw = element.$context.raw;
+            var operation = 100 * (raw / sum);
+            var percent = "".concat(((operation + "").includes(".") ? (100 * (raw / sum)).toFixed(2) : 100 * (raw / sum)) + "%", " - ").concat(raw);
+            return showPercent ? percent : raw;
+          }
+        }
+      },
+      legend: {
+        position: "right",
+        display: displayLegend,
+        labels: {
+          usePointStyle: true,
+          boxWidth: 8
+        }
+      },
+      counter: {
+        fontFamily: "sans-serif",
+        fontSize: 25,
+        fontColor: "#707070",
+        textAlign: "center",
+        value: totalFiltered / total * 100 || 0
+      }
+    },
+    scales: (0, _defineProperty2.default)({}, scale, {
+      ticks: {
+        display: displayScale
+      }
+    }),
+    showTooltips: true
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "text-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "select-container"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "graphic-cotainer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Graphic.Graphic, {
+        data: data,
+        options: options,
+        type: type
+      })
+    }), type === "line" && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "x-label",
+      children: "Fechas"
+    }), type === "line" && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "y-label",
+      children: "Productos"
+    })]
+  });
+};
+
+exports.DashboardMetric = DashboardMetric;

package/dist/components/organisms/DashboardMetric/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 _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);
+
+exports.Container = Container;

package/dist/components/organisms/DragAndDropPhases/DragAndDropPhases.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.DragAndDropPhasesDefault = 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/organisms/DragAndDropPhases",
+  component: _index.DragAndDropPhases
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DragAndDropPhases, (0, _objectSpread2.default)({}, args));
+};
+
+var DragAndDropPhasesDefault = Template.bind({});
+exports.DragAndDropPhasesDefault = DragAndDropPhasesDefault;
+DragAndDropPhasesDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwZjQyNDdkZi1mMDJmLTRjYjgtOTA5YS1lNjI2NDlkMzQ3ODIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBmNDI0N2RmLWYwMmYtNGNiOC05MDlhLWU2MjY0OWQzNDc4MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzMTJjMzkzOC0yODFlLTRjZTMtOGQwMC1lNDJmMDJhMjliNDkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMTgwNDA2MywibmFtZSI6IlByb3ZlZWRvciBVbm8gUmFkaW9zaGFjayIsInBob25lX251bWJlciI6Iis1MjEyMzQ1Njc4OTgiLCJleHAiOjE3MDE4MDc2NjIsImlhdCI6MTcwMTgwNDA2MywiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrdW5vQGFsbGZyZWVtYWlsLm5ldCJ9.TlytxDFcBq6dMXaDGqIQ2Dr3P81JQgIJ2k8DgfVKvHmmJAyfj5hZcdaWPBCW_qXT_93HtXje2fmQuyTJeN4pL_AXkEEQJsi6Ye-8ipteb616OFLLm8AkMV7NmxyYn59yfY9bPoWmanTjicONFNtL_SOACebXUI4c1uZtFmMWMvAR29l_89uj3e5J-ZrS1PQn36Eid66LYtV7lBsKAn3JJeftDiXx750AHERXjoXdzHwjJttm4jmMZ4LJPk8efuvZWdPhcgXJ-4CuvWNbjxCmFiDkxSjFK_qLix73HtoCLWee-FJElqxW2ZjTflOiRZknmt2M-7kQj4FzhgEK3n6jyg"
+};

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

@@ -0,0 +1,495 @@
+"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.DragAndDropPhases = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+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");
+
+var _Phase = require("../../molecules/Phase");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _Modal = require("../Modal");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var DragAndDropPhases = function DragAndDropPhases(_ref) {
+  var token = _ref.token;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      draggedItem = _useState2[0],
+      setDraggedItem = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      listPhases = _useState4[0],
+      setListPhases = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      tempListPhases = _useState6[0],
+      setTempListPhases = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      search = _useState8[0],
+      setSearch = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      newPhaseName = _useState10[0],
+      setNewPhaseName = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      inputValue = _useState12[0],
+      setInputValue = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
+  }),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
+
+  var newPhaseNameRef = (0, _react.useRef)("");
+  (0, _react.useEffect)(function () {
+    return loadData();
+  }, []);
+  (0, _react.useEffect)(function () {
+    setNewPhaseName(function (prev) {
+      return prev + inputValue;
+    });
+  }, [inputValue]);
+  (0, _react.useEffect)(function () {
+    newPhaseNameRef.current = search;
+  }, [newPhaseName]);
+
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
+  };
+
+  var onDragStart = function onDragStart(e, id) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+  };
+
+  var onDragOver = function onDragOver(index) {
+    var draggedIdx = tempListPhases.findIndex(function (phase) {
+      return phase.phaseId === draggedItem;
+    });
+    var draggedItemData = tempListPhases[draggedIdx];
+    var targetIdx = index;
+    var newTempListPhases = (0, _toConsumableArray2.default)(tempListPhases);
+    newTempListPhases.splice(draggedIdx, 1);
+    newTempListPhases.splice(targetIdx, 0, draggedItemData);
+    setTempListPhases(newTempListPhases);
+  };
+
+  var onDragEnd = function onDragEnd() {
+    setDraggedItem(null);
+  };
+
+  var updatePhases = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var updateData, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              updateData = {
+                updateReferencesOfNodes: listPhases.map(function (phase) {
+                  return {
+                    name: phase.phaseName,
+                    isInitialPhase: phase.isInitialPhase,
+                    phaseId: phase.phaseId,
+                    nextPhaseIfApproved: phase.nextPhaseIfApproved
+                  };
+                })
+              };
+              _context.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), updateData, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context.sent;
+              console.log("Update response:", response.body.data);
+              loadData();
+              _context.next = 12;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al actualizar fases", _context.t0);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+
+    return function updatePhases() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var addPhase = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(search) {
+      var body, response, createdPhase;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              body = {
+                name: search,
+                retailerGroupsIds: [],
+                nextPhaseId: null
+              };
+              _context2.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context2.sent;
+              createdPhase = response.data.body;
+              console.log(createdPhase);
+              setSearch();
+              setInputValue("");
+              loadData();
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al agregar fase:", _context2.t0);
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12]]);
+    }));
+
+    return function addPhase(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var deletePhase = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(id, phases) {
+      var response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
+                updateReferencesOfNodes: phases,
+                deletePhase: id
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context3.sent;
+              loadData();
+              _context3.next = 10;
+              break;
+
+            case 7:
+              _context3.prev = 7;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al eliminar fase:", _context3.t0);
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 7]]);
+    }));
+
+    return function deletePhase(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var handleAddPhaseButton = function handleAddPhaseButton() {
+    setModalData({
+      show: true,
+      className: "modal-add-phase",
+      title: "Agregar fase de revisión",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Guardar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+          handleSavePhase(search);
+        }
+      }, "btn-Guardar")],
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "container-input-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Las fases nuevas siempre se agregan al final.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Puedes ordenar las fases arrastr\xE1ndolas."]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          className: "input-phases",
+          onChange: function onChange(e) {
+            setSearch(e.target.value);
+            handleInputChange(e);
+          },
+          value: search,
+          placeholder: "Nombre de fase"
+        })]
+      })
+    });
+  };
+
+  var handleSavePhase = function handleSavePhase() {
+    addPhase(newPhaseNameRef.current);
+    setInputValue("");
+  };
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var response, phasesData, phasesDataArray;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.prev = 0;
+              _context4.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context4.sent;
+              phasesData = JSON.parse(response.data.body).data;
+              phasesDataArray = [];
+              phasesData.forEach(function (_ref6) {
+                var phaseId = _ref6.phaseId,
+                    phaseName = _ref6.phaseName,
+                    isInitialPhase = _ref6.isInitialPhase,
+                    nextPhaseIfApproved = _ref6.nextPhaseIfApproved,
+                    groups = _ref6.groups;
+                var groupsAssigned = groups.map(function (_ref7) {
+                  var id = _ref7.id,
+                      name = _ref7.name,
+                      active = _ref7.active;
+                  return {
+                    groupId: id,
+                    groupName: name,
+                    groupActive: active
+                  };
+                });
+                phasesDataArray.push({
+                  phaseId: phaseId,
+                  phaseName: phaseName,
+                  isInitialPhase: isInitialPhase,
+                  nextPhaseIfApproved: nextPhaseIfApproved,
+                  groupsAssigned: groupsAssigned
+                });
+              });
+              setListPhases(phasesDataArray);
+              setTempListPhases(phasesDataArray);
+              _context4.next = 14;
+              break;
+
+            case 11:
+              _context4.prev = 11;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al obtener fases:", _context4.t0);
+
+            case 14:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[0, 11]]);
+    }));
+
+    return function loadData() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var handleDeletePhase = function handleDeletePhase(id) {
+    var updatedListPhases = (0, _toConsumableArray2.default)(listPhases);
+    var filteredPhases = updatedListPhases.filter(function (phase) {
+      return phase.phaseId !== id;
+    });
+    setListPhases(filteredPhases);
+    setModalData({
+      show: true,
+      className: "modal-delete-phase",
+      message: "Fase eliminada correctamente.",
+      icon: "successv2",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }, "btn-Aceptar")]
+    });
+    deletePhase(id, filteredPhases);
+  };
+
+  var renderPhase = function renderPhase(phase, idx) {
+    if (phase.isInitialPhase === 1) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        },
+        token: token,
+        showMenu: false,
+        showButtonChip: false
+      }, phase.phaseId);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        } // onDragStart={(e) => onDragStart(e, idx)}
+        // onDragOver={() => onDragOver(idx)}
+        // onDragEnd={onDragEnd}
+        ,
+        token: token
+      }, phase.phaseId);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "button-phase",
+        onClick: handleAddPhaseButton,
+        children: "Agregar fase de revisi\xF3n"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        className: "button-save",
+        type: "pink",
+        label: "Guardar Cambios",
+        size: 12,
+        onClick: function onClick() {
+          setListPhases(tempListPhases);
+          updatePhases();
+          setModalData({
+            show: true,
+            className: "modal-save",
+            message: "Cambios aplicados correctamente.",
+            icon: "successv2",
+            buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+              type: "pink",
+              label: "Aceptar",
+              size: 12,
+              onClick: function onClick() {
+                setModalData(function (prev) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                    show: false
+                  });
+                });
+              }
+            }, "btn-Aceptar")]
+          });
+          loadData();
+        }
+      }, "btn-Guardar")]
+    }), listPhases.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: listPhases.map(function (phase, idx) {
+        return renderPhase(phase, idx);
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "no-phases-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Parece que aun no tienes fases disponibles."
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
+      onClickBtnDefault: function onClickBtnDefault() {
+        return setModalData(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    }))]
+  });
+};
+
+exports.DragAndDropPhases = DragAndDropPhases;