contentoh-components-library 21.4.77 → 21.4.79

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,28 +11,18 @@ exports.GroupRow = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../../../global-files/variables");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
+
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max{\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display:grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .header {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n  .close-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    -webkit-filter: grayscale(100%);\n    filter: grayscale(100%);\n    opacity:0.4;\n    img {\n      width: 10px;\n      height: 10px;\n    }\n\n    &:hover {\n      background-color: ", ";\n      -webkit-filter: grayscale(0);\n      filter: grayscale(0);\n      opacity:1;\n    }\n  }\n  .contentModal {\n    position: absolute;\n    top: 10%;\n    z-index: 20;\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 100%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n    background: transparent;\n    border-radius: 20px;\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max {\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
 
 exports.Container = Container;
 
-var GroupRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  input {\n    background: ", ";\n    color: ", ";\n    text-decoration: ", ";\n    border: 0;\n    padding: 5px 20px;\n  }\n\n  input:focus {\n    border: 0;\n  }\n"])), function (_ref) {
-  var isDeleted = _ref.isDeleted;
-  return isDeleted ? "#FF7373" : "transparent";
-}, _variables.GlobalColors.gray_light, function (_ref2) {
-  var isDeleted = _ref2.isDeleted;
-  return isDeleted ? "#FF7373" : "transparent";
-}, function (_ref3) {
-  var isDeleted = _ref3.isDeleted;
-  return isDeleted ? _variables.GlobalColors.white : _variables.GlobalColors.gray;
-}, function (_ref4) {
-  var isDeleted = _ref4.isDeleted;
-  return isDeleted ? "line-through" : "none";
-});
+var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  border-bottom: 1px solid ", ";\n  padding: 0 8px 0 0;\n  input {\n    width:100%;\n    min-width: 215px;\n    background: transparent;\n    color: ", ";\n    border: 0;\n    font-size: 12px;\n    font-family:", ", sans-serif;\n    padding: 5px 20px;\n    ::placeholder {\n      color: #CBCBCB;\n    }\n  }\n\n  input:focus {\n    border: 0;\n  }\n  &.editing {\n    background-color: ", "; \n    color: black;\n    input{\n      color: ", ";\n    }\n  }\n\n  .save-button,\n  .edit-button,\n  .delete-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  \n    img {\n      width: 12px;\n      height: 12px;\n    }\n  \n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .edit-button,\n  .delete-button {\n    display: none;\n  }\n\n  .visible {\n    display: flex;\n    animation: ", " 0.3s ease-in-out forwards;\n  }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
 
 exports.GroupRow = GroupRow;

package/package.json

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

package/src/assets/images/Icons/close.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
+<rect width="10" height="10" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2487)">
+<path d="M0.769231 10L0 9.23077L4.23077 5L0 0.769231L0.769231 0L5 4.23077L9.23077 0L10 0.769231L5.76923 5L10 9.23077L9.23077 10L5 5.76923L0.769231 10Z" fill="#B64545"/>
+</g>
+</svg>

package/src/assets/images/Icons/edit.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2312" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2312)">
+<path d="M1.40041 10.5996H2.06071L8.70873 3.95157L8.04843 3.29127L1.40041 9.93929V10.5996ZM10.6146 3.30628L8.69372 1.3854L9.32401 0.755116C9.49409 0.585039 9.70418 0.5 9.9543 0.5C10.2044 0.5 10.4145 0.585039 10.5846 0.755116L11.2449 1.41542C11.415 1.58549 11.5 1.79559 11.5 2.0457C11.5 2.29582 11.415 2.50591 11.2449 2.67599L10.6146 3.30628ZM9.98431 3.93656L2.42087 11.5H0.5V9.57913L8.06344 2.01569L9.98431 3.93656Z" fill="#E33AA9"/>
+</g>
+</svg>

package/src/assets/images/Icons/save.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_748_1469" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_748_1469)">
+<path d="M14 3.05278V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H10.9472L14 3.05278ZM12.8333 3.57778L10.4222 1.16667H1.16667V12.8333H12.8333V3.57778ZM6.99543 11.5694C7.55588 11.5694 8.0338 11.3733 8.42917 10.981C8.82454 10.5886 9.02222 10.1123 9.02222 9.55179C9.02222 8.99134 8.82606 8.51343 8.43374 8.11806C8.04143 7.72269 7.56504 7.525 7.00457 7.525C6.44412 7.525 5.9662 7.72116 5.57083 8.11349C5.17546 8.5058 4.97778 8.98219 4.97778 9.54265C4.97778 10.1031 5.17394 10.581 5.56626 10.9764C5.95858 11.3718 6.43496 11.5694 6.99543 11.5694ZM2.19722 4.97778H9.15833V2.19722H2.19722V4.97778Z" fill="#E33AA9"/>
+</g>
+</svg>

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

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 
-export const TabSection = ({ label, active, onClick }) => {
+export const TabSection = ({ label, active, onClick}) => {
   return (
     <Container className={active && "active"} onClick={onClick}>
       <p>{label}</p>

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

@@ -2,15 +2,23 @@ import React, { useState, useEffect } from "react";
 import { Container, ContainerIcon } from "./styles";
 import Chip from "@mui/material/Chip";
 import { Button, Menu, MenuItem } from "@mui/material";
-import Select from "../../atoms/Select";
+import Select from "@mui/material/Select";
 import add from "../../../assets/images/Icons/addv2.svg";
 import { Modal } from "../../organisms/Modal";
 import { TextField } from "@mui/material/TextField";
 import { GroupSelect } from "../../molecules/GroupSelect";
 import options from "../../../assets/images/Icons/options.svg";
-import DeleteIcon from '@mui/icons-material/DeleteForeverOutlined';
-
-export const Phase = ({ id, phases, phaseName, nextPhase, groups, onDeletePhase }) => {
+import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
+
+export const Phase = ({
+  id,
+  phases,
+  phaseName,
+  nextPhase,
+  groups,
+  onDeletePhase,
+  draggable
+}) => {
   const [selectedValue, setSelectedValue] = useState("");
   const [chips, setChips] = useState([]);
   const [groupsSelected, setGroupsSelected] = useState([]);
@@ -23,7 +31,8 @@ export const Phase = ({ id, phases, phaseName, nextPhase, groups, onDeletePhase
   });
 
   const idPhase = id + 1;
-
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [tempItems, setTempItems] = useState([]);
 
   const onAdd = () => {
     if (selectedValue && !groupsSelected.includes(selectedValue)) {
@@ -49,8 +58,6 @@ export const Phase = ({ id, phases, phaseName, nextPhase, groups, onDeletePhase
     setChips((prevChips) => prevChips.filter((chip) => chip !== chipToRemove));
   };
 
-  // const combinedGroups = [...grupos, ...chips];
-
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -83,85 +90,121 @@ export const Phase = ({ id, phases, phaseName, nextPhase, groups, onDeletePhase
           background: "transparent",
           border: `1px solid ${isHovered ? "#B64545" : "#F0F0F0"}`,
           color: `${isHovered ? "#B64545" : "#707070"}`,
-
         }}
       />
     );
   };
 
- 
-  console.log(id, phases, nextPhase, groups)
-
+  const onDragStartHandler = (e) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+    onDragStart(e, id);
+  };
 
+  const onDragOverHandler = (index) => {
+    if (!draggedItem || draggedItem === id) {
+      return;
+    }
 
+    onDragOver(id);
+    setDraggedItem(null);
+  };
 
-  // useEffect(() => initialPhase(),[]);
+  const onDragEndHandler = () => {
+    onDragEnd();
+    setDraggedItem(null);
+  };
 
   return (
-    <Container>
-       {/* {initialPhase()} */}
+    <Container
+    onDragStart={onDragStartHandler}
+      onDragOver={onDragOverHandler}
+      onDragEnd={onDragEndHandler}
+      draggable={draggable}
+    >
       <div key={idPhase} className="header-phase">
-        <h2>Fase {idPhase} - {phaseName}</h2>
-          <div className="text-button-container">
-            {idPhase === 1 ? (
-              <p className="text-phase">
-                Al rechazar en esta fase enviar a proveedor
-              </p>
-            ) : (
-              <div className="phase-sel">
-                <p className="text-phase">Al rechazar en esta fase enviar a </p>
-                <Select
-                  width="100px"
-                  valueSelected={nextPhase ? Object.values(nextPhase) : []}
-                  placeholder={`Fase`}
-                  options={phases.map((phase) => phase.phaseName)}
-                  onChange={(e) => {
-                    const selectedPhase = phases.find((phase) => phase.phaseName === e.target.value);
-                    console.log("fase seleccionada", selectedPhase);
-                    setSelectedValue(selectedPhase.nextPhaseIfApproved);
-                  }}
-                />
-                <Button
-                  id="basic-button"
-                  aria-controls={open ? "basic-menu" : undefined}
-                  aria-haspopup="true"
-                  aria-expanded={open ? "true" : undefined}
-                  onClick={handleClick}
-                >
-                  <img src={options} alt="" />
-                </Button>
-                <Menu
-                  id="basic-menu"
-                  anchorEl={anchorEl}
-                  open={open}
-                  onClose={handleClose}
-                  MenuListProps={{
-                    "aria-labelledby": "basic-button",
-                  }}
-                >
-                  <MenuItem onClick={() => onDeletePhase(id)}>Eliminar Fase</MenuItem>
-                </Menu>
-              </div>
-            )}
-          </div>
+        <h2>
+          Fase {idPhase} - {phaseName}
+        </h2>
+        <div className="text-button-container">
+          {idPhase === 1 ? (
+            <p className="text-phase">
+              Al rechazar en esta fase enviar a proveedor
+            </p>
+          ) : (
+            <div className="phase-sel">
+              <p className="text-phase">Siguiente Fase </p>
+              <Select
+              width="100px"
+              value={selectedValue !== "" ? selectedValue : nextPhase}
+                placeholder={`Fase`}
+                onChange={(e) => {
+                  const selectedPhase = phases.find(
+                    (phase) => phase.phaseName === e.target.value
+                  );
+                  setSelectedValue(selectedPhase.nextPhaseIfApproved);
+                }}
+                sx={{width: "auto",minWidth:"100px", height: "24px", background:"#F7F7FC", borderRadius:"5px"}}
+                MenuProps={{
+                  PaperProps: {
+                    style: {
+                      background: "#F7F7FC",
+                    },
+                  },
+                }}
+              >
+                {phases.map((phase) => (
+                  <MenuItem key={phase.phaseId} value={phase.phaseName} sx={{fontSize:"10px", color:"#262626"}}>
+                    {phase.phaseName}
+                  </MenuItem>
+                ))}
+              </Select>
+              <Button
+                id="basic-button"
+                aria-controls={open ? "basic-menu" : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? "true" : undefined}
+                onClick={handleClick}
+              >
+                <img src={options} alt="" />
+              </Button>
+              <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                  "aria-labelledby": "basic-button",
+                }}
+              >
+                <MenuItem onClick={() => onDeletePhase(id)}>
+                  Eliminar Fase
+                </MenuItem>
+              </Menu>
+            </div>
+          )}
         </div>
+      </div>
 
       <div className="attributes-container">
         {groups
-        .filter((group) => group.groupActive === 1)
-        .map((group, index) => (
-          <HoverableChip
-            key={index}
-            label={group.groupName}
-            onDelete={() => handleChipDelete(group)}
-          />
-        ))}
+          .filter((group) => group.groupActive === 1)
+          .map((group, index) => (
+            <HoverableChip
+              key={index}
+              label={group.groupName}
+              onDelete={() => handleChipDelete(group)}
+            />
+          ))}
         <GroupSelect
-          options={groups.filter((group) => group.groupActive === 0)
+          options={groups
+            .filter((group) => group.groupActive === 0)
             .map((group, index) => ({
-            id: index,
-            name: group.groupName
-          }))}        
+              id: index,
+              name: group.groupName,
+            }))}
           showSearchBar={true}
           icon={add}
           placeHolder={"Buscar grupo"}

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

@@ -4,8 +4,8 @@ import { Phase } from "../../molecules/Phase";
 import { ButtonV2 } from "../../atoms/ButtonV2";
 import { Modal } from "../Modal";
 import axios from "axios";
-import {GeneralInputv2} from "../../atoms/GeneralInputv2"; 
 import successV2 from "../../../assets/images/Icons/checkv2.svg";
+import { Input } from "@mui/material";
 
 export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, token}) => {
   const [items, setItems] = useState(initialItems);
@@ -13,7 +13,7 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
   const [tempItems, setTempItems] = useState(items);
   const [user, setUser] = useState(JSON.parse(sessionStorage.getItem("user")));
   const [listPhases, setListPhases]= useState([]);
-  const [newPhaseName, setNewPhaseName] = useState();
+  const [newPhaseName, setNewPhaseName] = useState("");
   const [modalData, setModalData] = useState({ 
     show: false,
     title: "Actualización completa",
@@ -21,46 +21,77 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
     icon: "success",
   });
 
-  const onDragStart = (e, idx) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(items[idx]);
-  };
+  // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
 
-  const onDragOver = (index) => {
-    if (!draggedItem) {
-      return;
-    }
 
-    if (draggedItem === tempItems[index]) {
-      return;
-    }
+  
+  {/*const updatePhases = async () => {
+    try {
+      console.log("listPhases:", listPhases);
+      const updateData = {
+        body: {
+          updateReferencesOfNodes: listPhases.map((phase) => ({
+            name:phase.phaseName,
+            isInitialPhase: phase.isInitialPhase,
+            phaseId: phase.phaseId,
+            nextPhaseIfApproved: phase.nextPhaseIfApproved,
+          })),
+        },
+        path: {
+          action: "update",
+        },
+        headers: {
+          Authorization: token,
+        },
+      };
+      console.log("updateData:", updateData);
 
-    const draggedIndex = tempItems.findIndex((item) => item === draggedItem);
-    let updatedItems = [...tempItems];
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
+        updateData
+      );
 
-    if (draggedIndex > index) {
-      updatedItems[draggedIndex] = tempItems[index];
-      updatedItems[index] = draggedItem;
-    } else {
-      updatedItems.splice(draggedIndex, 1);
-      updatedItems.splice(index, 0, draggedItem);
+      // Handle response if needed
+      console.log("Update response:", response.data);
+    } catch (error) {
+      console.error("Error al actualizar fases", error);
     }
+  };*/}
 
-    setTempItems(updatedItems);
-  };
 
-  const onDragEnd = () => {
-    setItems(tempItems);
-    setDraggedItem(null);
+  const handleInputChange = (e) => {
+    console.log("nuevo nombre",e.target.value)
+    setNewPhaseName(e.target.value);
   };
 
-  useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
+  const AddPhase = async() => {
+    try {
+      console.log("fase nueva", newPhaseName);
+      {/*const body = {
+        name: phaseName,
+        retailerGroupsIds: [],
+        nextPhaseId: null
+      }
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
+        body,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      const createdPhase = response.data.body;
+      console.log(createdPhase)*/}
+    } catch (error) {
+      console.error("Error al agregar fase:", error);
+    }
+  }
 
-  const handleAddPhase = () => {
+  const handleAddPhaseButton = () => {
     setModalData({
       show: true,
+      className:"modal-add-phase",
       title:"Agregar fase de revisión",
       buttons: [
         <ButtonV2
@@ -69,50 +100,41 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
         label="Cancelar"
         size={12}
         onClick={() => {
-          handleAcceptModal()
+          setModalData((prev) => ({ ...prev, show: false }))
         }}
       />,
-        <ButtonV2
-          key="btn-Guardar"
-          type="pink"
-          label="Guardar"
-          size={12}
-          onClick={() => {
-            handleAcceptModal()
-          }}
-        />
+      <ButtonV2
+        key="btn-Guardar"
+        type="pink"
+        label="Guardar"
+        size={12}
+        onClick={async () => {
+          setModalData((prev) => ({ ...prev, show: false }));
+          await new Promise((resolve) => setTimeout(resolve, 0));
+          AddPhase();
+        }}
+      />
       ],
       customComponent: (
         <div className="container-input-name">
           <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
-          <GeneralInputv2
-              inputType={"text"}
-              inputName={"input-phase-name"}
-              inputId={0}
-              inputValue={newPhaseName}
-              inputOnChange={(e) => setNewPhaseName(e.target.value)}
-              inputPlaceholder="Nombre de fase"
-            />
+         <input
+            className={`input-phases`}
+            placeholder="Nombre de fase"
+            value={newPhaseName}
+            onChange={handleInputChange}
+          />
         </div>
       ),
     });
   };
 
-  const handleAcceptModal = () => {
-    const newPhaseData = {
-      id: listPhases.length + 1,
-      phaseName: newPhaseName, // Utiliza el nuevo nombre de la fase
-      groupsAssigned: [],
-    };
-    setListPhases((prevListPhases) => {
-      const updatedListPhases = [...prevListPhases, newPhaseData];
-      console.log("actualizada", updatedListPhases);
-      return updatedListPhases;
-    });
-    setModalData((prev) => ({ ...prev, show: false }));
-  };
+  const handleAcceptModal = (PhaseName) => {
+    console.log("nombre",PhaseName)
+    AddPhase(PhaseName);
+  }
 
-  const getPhases = async () => {
+  const loadData = async () => {
     try {
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/get`,
@@ -120,11 +142,11 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
         {
           headers: {
             Authorization: token,
+            // Authorization: sessionStorage.getItem("jwt"),
           },
         }
       );
-  
-      // console.log("response", response);
+      
   
       const phasesData = JSON.parse(response.data.body).data;
       const phasesDataArray = [];
@@ -145,10 +167,10 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
         });
       });
   
-      // console.table("fases Array", phasesDataArray);
+      console.table("fases Array", phasesDataArray);
       setListPhases(phasesDataArray);
     } catch (error) {
-      console.error("Error fetching fases:", error);
+      console.error("Error al obtener fases:", error);
     } 
   };
 
@@ -175,16 +197,25 @@ const handleDeletePhase = (id) => {
   });
 };
 
+useEffect(() => loadData(),[]);
 
-useEffect(() => getPhases(),[]);
-
-useEffect(() => {
-  // console.log("fases lista", listPhases);
-}, [listPhases]);
+// useEffect(() => {
+//   updatePhases(); 
+//   setModalData((prev) => ({ ...prev, show: false }));
+// }, [listPhases]); 
 
-const renderPhase = (idx, phase) => {
+const renderPhase = (phase, idx) => {
   return (
-    <Phase key={idx} id={idx} phases={listPhases} phaseName={phase.phaseName} nextPhase={phase.nextPhaseIfApproved} groups={phase.groupsAssigned} onDeletePhase={handleDeletePhase}/>
+    <Phase
+      key={idx}
+      id={idx}
+      phases={listPhases}
+      phaseName={phase.phaseName}
+      nextPhase={phase.nextPhaseIfApproved}
+      groups={phase.groupsAssigned}
+      onDeletePhase={() => handleDeletePhase(phase.id)}
+        draggable
+    />
   );
 };
 
@@ -192,7 +223,7 @@ const renderPhase = (idx, phase) => {
   return (
     <Container>
       <Header>
-        <button className="button-phase" onClick={handleAddPhase}>
+        <button className="button-phase" onClick={handleAddPhaseButton}>
           Agregar fase de revisión
         </button>
         <ButtonV2
@@ -223,7 +254,7 @@ const renderPhase = (idx, phase) => {
         ></ButtonV2>
       </Header>
       <ul>
-        {listPhases.map((phase, idx) => renderPhase(idx, phase, handleDeletePhase))}
+        {listPhases.map((phase, idx) => renderPhase(phase, idx))}
       </ul>
       <Modal
         {...modalData}

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

@@ -30,6 +30,33 @@ ul{
       color: ${GlobalColors.gray};
       margin-bottom:15px;
     }
+    .input-phases{
+      width:100%;
+      height: 30px;
+      padding: 8px 10px;
+      border-radius: 5px;
+      border: 1px solid ${GlobalColors.gray_light};
+      ::placeholder {
+        font-family: ${FontFamily.RobotoRegular}, sans-serif;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 14px;
+        letter-spacing: 0em;
+        text-align: left;
+        color: #CBCBCB;
+      }
+    }
+  }
+  .modal-add-phase {
+    .contentModal{
+      min-width:310px;
+    }
+    header .label-title{
+      text-align: left;
+    }
+    .container-buttons{
+      justify-content: flex-end;
+    }
   }
 `;