componentes-sinco 1.0.7 → 1.0.8

package/dist/index.js

@@ -31,10 +31,12 @@ var __objRest = (source, exclude) => {
 };
 
 // src/Components/Drawer/SCDrawer.tsx
-import React7 from "react";
+import React8, { useEffect as useEffect8, useRef as useRef2 } from "react";
 import { Box as Box7, Drawer, Typography as Typography7, IconButton as IconButton5, Button as Button4, Stack as Stack3, Chip as Chip2 } from "@mui/material";
 import Grid4 from "@mui/material/Grid2";
 import CloseIcon from "@mui/icons-material/Close";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 // src/Components/Textfield/SCTextField.tsx
 import React, { useEffect, useState } from "react";
@@ -668,11 +670,9 @@ function SCSelect({
   width = "100%",
   size = "small",
   variant = "outlined",
-  deleteType = "button",
+  background = "white",
   required,
   disabled,
-  background,
-  fnAplicar,
   setState,
   state
 }) {
@@ -747,14 +747,20 @@ function SCSelect({
         MenuProps: {
           PaperProps: {
             sx: {
-              left: "0px !important"
+              maxHeight: "300px",
+              minWidth: "100%"
             }
           },
-          sx: {
-            "& .MuiPaper-root": {
-              left: "0px !important"
-            }
-          }
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left"
+          },
+          disableAutoFocusItem: true,
+          marginThreshold: 0
         }
       },
       data.map((option, index) => {
@@ -786,7 +792,6 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck
-  // Agregar el parámetro maxCheck
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
@@ -880,6 +885,7 @@ function SCAutocomplete({
     {
       multiple: typeFormat === "multiselect",
       clearOnEscape: true,
+      noOptionsText: "No se encuentra",
       disabled,
       options: data,
       isOptionEqualToValue: (option, value) => getItemValue(option).value === getItemValue(value).value,
@@ -1123,31 +1129,83 @@ var getIcon2 = (iconName) => {
 };
 
 // src/Components/Drawer/Helpers/validateInput.tsx
-var validateInputs = (arrayElements, onError, onSuccess) => {
-  var _a;
+var validateInputs = (arrayElements, onError, onSuccess, setChipFilters, setTextFilters) => {
+  var _a, _b;
   let requiredValues = 0;
   let filledValues = 0;
   for (let i = 0; i < arrayElements.length; i++) {
-    if (arrayElements[i].component === void 0) {
-      if (arrayElements[i].required) {
-        requiredValues++;
-      }
-      if (arrayElements[i].required && ((_a = arrayElements[i].state) == null ? void 0 : _a.trim()) !== "") {
+    const element = arrayElements[i];
+    const { validation, element: typeElement } = validateTypeElements(element);
+    const textValue = ((_a = typeElement.state) == null ? void 0 : _a.textValue) !== void 0 ? String((_b = typeElement.state) == null ? void 0 : _b.textValue) : String(typeElement.state);
+    if (typeElement == null ? void 0 : typeElement.required) {
+      requiredValues++;
+      if (textValue.trim() !== "" && textValue.trim() !== ",") {
         filledValues++;
       }
     }
   }
   if (requiredValues === filledValues) {
     onSuccess();
+    setChipFilters(true);
   } else {
     onError({
       type: "error",
       title: "Algunos campos son requeridos",
       time: 10
     });
+    setChipFilters(false);
   }
 };
 
+// src/Components/Drawer/Helpers/validateTypeElement.tsx
+import React7 from "react";
+var validateTypeElements = (element) => {
+  var _a;
+  let validation = "";
+  let typeElement = element;
+  if (element.type == "textField") {
+    validation = "textField";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCtextField") {
+    validation = "textField";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "textArea") {
+    validation = "textArea";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCtextArea") {
+    validation = "textArea";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "dateRange") {
+    validation = "dateRange";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCDateRange") {
+    validation = "dateRange";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "autocomplete") {
+    validation = "autocomplete";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCAutocomplete") {
+    validation = "autocomplete";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.typeFormat == "multiselect") {
+    validation = "multiselect";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.props && ((_a = element == null ? void 0 : element.component) == null ? void 0 : _a.props).typeFormat == "multiselect") {
+    validation = "multiselect";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "select") {
+    validation = "select";
+    typeElement = element;
+  } else if (React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCSelect") {
+    validation = "select";
+    typeElement = element == null ? void 0 : element.component.props;
+  }
+  return {
+    validation,
+    element: typeElement
+  };
+};
+
 // src/Components/Drawer/SCDrawer.tsx
 function SCDrawer({
   //informativas
@@ -1160,16 +1218,42 @@ function SCDrawer({
   anchor = "left",
   width,
   //Funcionales
-  open
+  open,
+  setOpen,
+  chipFilters
 }) {
   var _a, _b;
-  const [drawerOpen, setDrawerOpen] = React7.useState(open);
-  const [toast, setToast] = React7.useState(null);
+  const scrollRef = useRef2(null);
+  const [drawerOpen, setDrawerOpen] = React8.useState(open);
+  const [toast, setToast] = React8.useState(null);
+  const [stateChipFilters, setChipFilters] = React8.useState(false);
+  const [textFilters, setTextFilters] = React8.useState([]);
+  useEffect8(() => {
+    if (chipFilters != void 0) {
+      if (chipFilters.length > 0) {
+        setTextFilters([]);
+        inputValidation();
+      }
+    }
+  }, [chipFilters]);
+  useEffect8(() => {
+    if (open) {
+      toggleDrawer(true);
+    } else {
+      handleDrawerClose();
+    }
+  }, [open]);
   const handleDrawerClose = () => {
     setDrawerOpen(false);
+    if (setOpen) {
+      setOpen(false);
+    }
   };
   const toggleDrawer = (newOpen) => () => {
     setDrawerOpen(newOpen);
+    if (setOpen) {
+      setOpen(true);
+    }
   };
   const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
   const setToastWithDelay = (toastContent) => {
@@ -1178,39 +1262,179 @@ function SCDrawer({
       setToast(toastContent);
     }, 10);
   };
-  const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
-  const clean = () => {
-    arrayElements.forEach((element, index) => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h;
-      if (element.setState || React7.isValidElement(element == null ? void 0 : element.component) && ((_a2 = element.component.props) == null ? void 0 : _a2.setState)) {
-        if (element.type === "textField" || React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextField" || (element.type === "textArea" || React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextArea")) {
-          element.setState != void 0 ? element.setState("") : null;
-          React7.isValidElement(element == null ? void 0 : element.component) && ((_b2 = element.component.props) == null ? void 0 : _b2.setState) && ((_d = (_c = element == null ? void 0 : element.component) == null ? void 0 : _c.props) == null ? void 0 : _d.setState(""));
-        } else if (element.type === "dateRange" || React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCDateRange") {
-          element.setState != void 0 ? element.setState([null, null]) : null;
-          React7.isValidElement(element == null ? void 0 : element.component) && typeof ((_e = element.component.props) == null ? void 0 : _e.setState) === "function" && element.component.props.setState([null, null]);
-        } else {
-          if (element.type == "autocomplete" || React7.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCAutocomplete" || (element.typeFormat == "multiselect" || React7.isValidElement(element == null ? void 0 : element.component) && element.component.props && ((_f = element == null ? void 0 : element.component) == null ? void 0 : _f.props).typeFormat == "multiselect")) {
-            element.setState != void 0 ? element.setState({ hiddenValue: [], textValue: [] }) : null;
-            React7.isValidElement(element == null ? void 0 : element.component) && typeof ((_g = element.component.props) == null ? void 0 : _g.setState) === "function" && element.component.props.setState({ hiddenValue: [], textValue: [] });
+  const inputValidation = () => {
+    var _a2, _b2, _c, _d;
+    if (chipFilters != void 0 && chipFilters.length > 0) {
+      if (chipFilters && chipFilters.length > 0) {
+        arrayElements.forEach((arrayElement) => {
+          var _a3, _b3, _c2;
+          const { validation, element: typeElement } = validateTypeElements(arrayElement);
+          let currentValue = "";
+          if (validation === "dateRange") {
+            if (typeElement.state && typeElement.state[0] && typeElement.state[1]) {
+              currentValue = `${(_a3 = typeElement.state[0]) == null ? void 0 : _a3.format("DD/MM/YYYY")} - ${(_b3 = typeElement.state[1]) == null ? void 0 : _b3.format("DD/MM/YYYY")}`;
+            }
+          } else {
+            currentValue = ((_c2 = typeElement.state) == null ? void 0 : _c2.textValue) !== void 0 ? String(typeElement.state.textValue).trim() : String(typeElement.state).trim();
+          }
+          chipFilters.forEach((chipFilter) => {
+            const chipValue = String(chipFilter).trim();
+            if (currentValue === chipValue && currentValue !== "" && currentValue !== ",") {
+              setTextFilters((prevFilters) => {
+                const newFilter = { value: currentValue, arrayElement: typeElement };
+                const existingFilterIndex = prevFilters.findIndex(
+                  (filter) => filter.arrayElement.label === arrayElement.label
+                );
+                if (existingFilterIndex !== -1) {
+                  const updatedFilters = [...prevFilters];
+                  updatedFilters[existingFilterIndex] = newFilter;
+                  return updatedFilters;
+                } else {
+                  return [...prevFilters, newFilter];
+                }
+              });
+            }
+          });
+        });
+      }
+    } else {
+      const newFiltersToAdd = [];
+      for (let i = 0; i < arrayElements.length; i++) {
+        const element = arrayElements[i];
+        const { validation, element: typeElement } = validateTypeElements(element);
+        const textValue = ((_a2 = typeElement.state) == null ? void 0 : _a2.textValue) !== void 0 ? String((_b2 = typeElement.state) == null ? void 0 : _b2.textValue) : String(typeElement.state);
+        if (textValue.trim() !== "" && textValue.trim() !== ",") {
+          let newFilter;
+          switch (validation) {
+            case "dateRange":
+              const values = `${(_c = typeElement.state[0]) == null ? void 0 : _c.format("DD/MM/YYYY")} - ${(_d = typeElement.state[1]) == null ? void 0 : _d.format("DD/MM/YYYY")}`;
+              newFilter = { value: values, arrayElement: typeElement };
+              break;
+            default:
+              newFilter = { value: textValue, arrayElement: typeElement };
+              break;
+          }
+          const existingFilterByLabel = newFiltersToAdd.find(
+            (filter) => filter.arrayElement.label === element.label
+          );
+          if (existingFilterByLabel) {
+            existingFilterByLabel.value = newFilter.value;
+            existingFilterByLabel.arrayElement = newFilter.arrayElement;
           } else {
-            element.setState != void 0 ? element.setState({ hiddenValue: "-1", textValue: "" }) : null;
-            React7.isValidElement(element == null ? void 0 : element.component) && typeof ((_h = element.component.props) == null ? void 0 : _h.setState) === "function" && element.component.props.setState({ hiddenValue: "-1", textValue: "" });
+            newFiltersToAdd.push(newFilter);
           }
         }
       }
+      setTextFilters((prevFilters) => {
+        let updatedFilters = [...prevFilters];
+        newFiltersToAdd.forEach((newFilter) => {
+          const existingFilterIndex = updatedFilters.findIndex(
+            (filter) => filter.arrayElement.label === newFilter.arrayElement.label
+          );
+          if (existingFilterIndex !== -1) {
+            updatedFilters[existingFilterIndex] = newFilter;
+          } else {
+            updatedFilters.push(newFilter);
+          }
+        });
+        return updatedFilters;
+      });
+      validateInputs(arrayElements, setToastWithDelay, handleDrawerClose, setChipFilters, setTextFilters);
+    }
+  };
+  const resetElementByType = (originalElement, validation, typeElement) => {
+    let defaultValue;
+    switch (validation) {
+      case "textField":
+      case "textArea":
+        defaultValue = "";
+        break;
+      case "dateRange":
+        defaultValue = [null, null];
+        break;
+      case "multiselect":
+        defaultValue = { hiddenValue: [], textValue: [] };
+        break;
+      default:
+        defaultValue = { hiddenValue: "-1", textValue: "" };
+    }
+    if (typeElement.setState) {
+      typeElement.setState(defaultValue);
+    }
+  };
+  const cleanFilters = () => {
+    arrayElements.forEach((element) => {
+      const { validation, element: typeElement } = validateTypeElements(element);
+      if (typeElement.setState) {
+        resetElementByType(element, validation, typeElement);
+      }
+    });
+    setTextFilters([]);
+  };
+  const deleteFilter = (element) => {
+    const { validation, element: typeElement } = validateTypeElements(element);
+    if (typeElement.setState && shouldShowChips == true) {
+      resetElementByType(element, validation, typeElement);
+      setTextFilters(
+        (prevFilters) => prevFilters.filter((filter) => filter.arrayElement.label !== element.label)
+      );
+    }
+  };
+  const scroll = (offset) => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft += offset;
+    }
+  };
+  const hasActiveFilters = () => {
+    return arrayElements.some((arrayElement) => {
+      const { validation, element: typeElement } = validateTypeElements(arrayElement);
+      if (typeElement.state.textValue !== void 0) {
+        return String(typeElement.state.textValue).trim() !== "";
+      } else if (validation === "dateRange") {
+        return typeElement.state && typeElement.state[0] !== null && typeElement.state[1] !== null;
+      } else {
+        return String(typeElement.state).trim() !== "" && String(typeElement.state).trim() !== ",";
+      }
     });
   };
-  const actionsA = actions == false ? false : actions != void 0 ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: clean }];
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, toast && /* @__PURE__ */ React7.createElement(SCToastNotification, __spreadValues({}, toast)), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ React7.createElement(
+  const shouldShowChips = chipFilters != void 0 && chipFilters.length > 0 ? true : stateChipFilters === true && hasActiveFilters();
+  const actionsA = actions == false ? false : actions != void 0 ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: cleanFilters }];
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, toast && /* @__PURE__ */ React8.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ React8.createElement(Grid4, { container: true, justifyContent: "flex-start", flexWrap: "nowrap", alignItems: "center", sx: { width: "100%" } }, shouldShowChips && /* @__PURE__ */ React8.createElement(Box7, { display: "flex", alignItems: "center", sx: { maxWidth: "78%" } }, /* @__PURE__ */ React8.createElement(IconButton5, { onClick: () => scroll(-150), size: "small" }, /* @__PURE__ */ React8.createElement(ArrowBackIosIcon, { fontSize: "small" })), /* @__PURE__ */ React8.createElement(
+    Box7,
+    {
+      ref: scrollRef,
+      gap: 0.3,
+      sx: {
+        display: "flex",
+        overflowX: "auto",
+        scrollBehavior: "smooth",
+        "&::-webkit-scrollbar": { display: "none" }
+      }
+    },
+    textFilters == null ? void 0 : textFilters.map((chipData, index) => /* @__PURE__ */ React8.createElement(
+      Chip2,
+      __spreadProps(__spreadValues({
+        key: index,
+        label: chipData.value
+      }, chipData.arrayElement.required == false || chipData.arrayElement.required == void 0 ? { onDelete: () => deleteFilter(chipData.arrayElement) } : {}), {
+        color: "default",
+        variant: "filled",
+        size: "small",
+        sx: {
+          flexShrink: 0,
+          minWidth: "auto"
+        }
+      })
+    ))
+  ), /* @__PURE__ */ React8.createElement(IconButton5, { onClick: () => scroll(150), size: "small" }, /* @__PURE__ */ React8.createElement(ArrowForwardIosIcon, { fontSize: "small" }))), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ React8.createElement(
     Chip2,
     __spreadProps(__spreadValues({
       onClick: toggleDrawer(true),
       color: buttonDrawer == null ? void 0 : buttonDrawer.color,
       variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) == "contained" ? "filled" : "outlined",
       label: (_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "",
-      icon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" && ButtonIcon ? /* @__PURE__ */ React7.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
-      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ React7.createElement(ButtonIcon, { fontSize: "small" }) : void 0
+      icon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" && ButtonIcon ? /* @__PURE__ */ React8.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
+      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ React8.createElement(ButtonIcon, { fontSize: "small" }) : void 0
     }, (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? { onDelete: () => {
     } } : {}), {
       sx: {
@@ -1220,7 +1444,7 @@ function SCDrawer({
         textTransform: "capitalize"
       }
     })
-  ) : /* @__PURE__ */ React7.createElement(
+  ) : /* @__PURE__ */ React8.createElement(
     Button4,
     {
       "data-testid": "test-buttonDrawer",
@@ -1229,11 +1453,11 @@ function SCDrawer({
       onClick: toggleDrawer(true),
       size: "small",
       variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.variant : "text",
-      startIcon: ((buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition)) && ButtonIcon ? /* @__PURE__ */ React7.createElement(ButtonIcon, { fontSize: "small" }) : null,
-      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ React7.createElement(ButtonIcon, { fontSize: "small" }) : null
+      startIcon: ((buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition)) && ButtonIcon ? /* @__PURE__ */ React8.createElement(ButtonIcon, { fontSize: "small" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ React8.createElement(ButtonIcon, { fontSize: "small" }) : null
     },
     (_b = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _b : ""
-  ), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(
     Drawer,
     {
       open: drawerOpen,
@@ -1247,15 +1471,15 @@ function SCDrawer({
         }
       }
     },
-    /* @__PURE__ */ React7.createElement(Stack3, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React7.createElement(Grid4, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React7.createElement(IconButton5, { onClick: handleDrawerClose }, /* @__PURE__ */ React7.createElement(CloseIcon, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ React7.createElement(Stack3, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
+    /* @__PURE__ */ React8.createElement(Stack3, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React8.createElement(Grid4, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ React8.createElement(Typography7, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React8.createElement(IconButton5, { onClick: handleDrawerClose }, /* @__PURE__ */ React8.createElement(CloseIcon, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ React8.createElement(Stack3, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
       var _a2, _b2, _c, _d, _e, _f;
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         Box7,
         {
           key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b2 = arrayElement.label) != null ? _b2 : ""}${index}`,
           sx: { width: "100%" }
         },
-        arrayElement.component ? /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ React7.createElement(
+        arrayElement.component ? /* @__PURE__ */ React8.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ React8.createElement(
           SCTextField,
           {
             title: arrayElement.title,
@@ -1281,7 +1505,7 @@ function SCDrawer({
             onBlur: arrayElement.onBlur,
             onKeyDown: arrayElement.onKeyDown
           }
-        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ React7.createElement(
+        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ React8.createElement(
           SCTextArea,
           {
             title: arrayElement.title,
@@ -1300,7 +1524,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             onBlur: arrayElement.onBlur
           }
-        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ React7.createElement(
+        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ React8.createElement(
           SCAutocomplete,
           {
             label: arrayElement.label,
@@ -1318,7 +1542,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             inputChange: arrayElement.inputChange
           }
-        ) : arrayElement.type === "select" ? /* @__PURE__ */ React7.createElement(
+        ) : arrayElement.type === "select" ? /* @__PURE__ */ React8.createElement(
           SCSelect,
           {
             label: arrayElement.label,
@@ -1327,7 +1551,6 @@ function SCDrawer({
             width: arrayElement.width,
             size: arrayElement.size,
             variant: arrayElement.variant,
-            deleteType: arrayElement.deleteType,
             required: arrayElement.required,
             disabled: arrayElement.disabled,
             background: arrayElement.background,
@@ -1335,7 +1558,7 @@ function SCDrawer({
             setState: arrayElement.setState,
             state: arrayElement.state || ""
           }
-        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ React7.createElement(
+        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ React8.createElement(
           SCDateRange,
           {
             labelDateInitial: arrayElement.labelDateInitial,
@@ -1348,7 +1571,7 @@ function SCDrawer({
           }
         ) : null
       );
-    })), actionsA != void 0 && actionsA != false ? Array.isArray(actionsA) && (actionsA == null ? void 0 : actionsA.length) > 0 ? /* @__PURE__ */ React7.createElement(
+    })), actionsA != void 0 && actionsA != false ? Array.isArray(actionsA) && (actionsA == null ? void 0 : actionsA.length) > 0 ? /* @__PURE__ */ React8.createElement(
       Grid4,
       {
         sx: { borderTop: 1, borderColor: "#1018403B" },
@@ -1360,7 +1583,7 @@ function SCDrawer({
         justifyContent: actionsA.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
         flexDirection: anchor != "right" ? "row-reverse" : "row"
       },
-      actionsA.map((btn, index) => /* @__PURE__ */ React7.createElement(
+      actionsA.map((btn, index) => /* @__PURE__ */ React8.createElement(
         Button4,
         {
           key: index,
@@ -1377,7 +1600,7 @@ function SCDrawer({
 }
 
 // src/Components/FooterAction/FooterAction.tsx
-import React8 from "react";
+import React9 from "react";
 import { AppBar, Toolbar, Box as Box8, Typography as Typography8 } from "@mui/material";
 var FooterAction = ({
   leftContent,
@@ -1385,44 +1608,44 @@ var FooterAction = ({
   label,
   variant
 }) => {
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     AppBar,
     {
       color: "inherit",
       sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       Toolbar,
       {
         id: "footer-toolbar",
         sx: { gap: 1.5, minHeight: "50px !important" }
       },
       leftContent,
-      /* @__PURE__ */ React8.createElement(Box8, { flexGrow: 1 }),
-      label && /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, label),
+      /* @__PURE__ */ React9.createElement(Box8, { flexGrow: 1 }),
+      label && /* @__PURE__ */ React9.createElement(Typography8, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
 };
 
 // src/Components/Modal/Helpers/Data.tsx
-import React9 from "react";
+import React10 from "react";
 import { Info, Warning } from "@mui/icons-material";
 var modalStateConfig = {
   info: {
     color: "info",
     defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
-    icon: /* @__PURE__ */ React9.createElement(Info, { color: "info", fontSize: "medium" })
+    icon: /* @__PURE__ */ React10.createElement(Info, { color: "info", fontSize: "medium" })
   },
   delete: {
     color: "delete",
     defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
-    icon: /* @__PURE__ */ React9.createElement(Info, { color: "error", fontSize: "medium" })
+    icon: /* @__PURE__ */ React10.createElement(Info, { color: "error", fontSize: "medium" })
   },
   warning: {
     color: "warning",
     defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
-    icon: /* @__PURE__ */ React9.createElement(Warning, { color: "warning", fontSize: "medium" })
+    icon: /* @__PURE__ */ React10.createElement(Warning, { color: "warning", fontSize: "medium" })
   }
 };
 
@@ -1452,7 +1675,7 @@ var getButtonColor = (state) => {
 };
 
 // src/Components/Modal/SCModal.tsx
-import React10, { useCallback, useEffect as useEffect7, useMemo, useState as useState5 } from "react";
+import React11, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
 import { Modal, Box as Box9, Typography as Typography9, IconButton as IconButton6, Button as Button5, Stack as Stack4 } from "@mui/material";
 import { Close as Close2 } from "@mui/icons-material";
 
@@ -1472,33 +1695,30 @@ var SCModal = ({
 }) => {
   var _a, _b, _c, _d, _e;
   const [openModal, setOpenModal] = useState5(open != null ? open : false);
-  useEffect7(() => {
-    if (open !== void 0) {
-      setOpenModal(open);
-    }
-  }, [open]);
-  const Icon = useMemo(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const handleClose = useCallback(() => setOpenModal(false), []);
-  const toggleModal = (newOpen) => () => setOpenModal(newOpen);
-  const prevAction = useMemo(
+  const handleOpen = React11.useCallback(() => {
+    setOpenModal((prev) => !prev);
+  }, []);
+  const Icon = useMemo3(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
+  const handleClose = useCallback3(() => setOpenModal(false), []);
+  const prevAction = useMemo3(
     () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
     } }],
     [action, handleClose]
   );
   const { icon, defaultDescription } = modalStateConfig[state];
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     Button5,
     {
       "data-testid": "test-buttonModal",
       color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
-      onClick: toggleModal(true),
+      onClick: handleOpen,
       variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
       size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
-      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ React10.createElement(Icon, null),
-      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ React10.createElement(Icon, null)
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ React11.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ React11.createElement(Icon, null)
     },
     capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
-  ), /* @__PURE__ */ React10.createElement(Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(Modal, { open: openModal, onClose: handleOpen, sx: { boxShadow: 8 } }, /* @__PURE__ */ React11.createElement(
     Box9,
     {
       sx: {
@@ -1512,9 +1732,9 @@ var SCModal = ({
         boxShadow: 24
       }
     },
-    /* @__PURE__ */ React10.createElement(Stack4, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Stack4, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ React10.createElement(Typography9, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ React10.createElement(IconButton6, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ React10.createElement(Close2, { color: "action" }))),
-    /* @__PURE__ */ React10.createElement(Stack4, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "body1" }, description || defaultDescription)),
-    action && /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(Stack4, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React11.createElement(Stack4, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ React11.createElement(Typography9, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ React11.createElement(IconButton6, { onClick: handleOpen, "data-testid": "test-buttonClose" }, /* @__PURE__ */ React11.createElement(Close2, { color: "action" }))),
+    /* @__PURE__ */ React11.createElement(Stack4, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Typography9, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ React11.createElement(
       Stack4,
       {
         id: "Action",
@@ -1525,7 +1745,7 @@ var SCModal = ({
         bgcolor: "grey.50",
         sx: { borderRadius: 1 }
       },
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(
         Button5,
         {
           color: "inherit",
@@ -1535,7 +1755,7 @@ var SCModal = ({
         },
         capitalize("cancelar")
       ),
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(
         Button5,
         {
           "data-testid": "test-aceptar",
@@ -1552,32 +1772,32 @@ var SCModal = ({
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-import React11, { useEffect as useEffect8, useMemo as useMemo3 } from "react";
+import React12, { useEffect as useEffect10, useMemo as useMemo5 } from "react";
 import { Button as Button6, Checkbox as Checkbox2, FormControl as FormControl3, InputAdornment as InputAdornment5, ListItemIcon as ListItemIcon3, MenuItem as MenuItem3, Popover as Popover3, Stack as Stack5, TextField as TextField4 } from "@mui/material";
 import { SearchOutlined } from "@mui/icons-material";
 
 // src/Components/MultiSelect/helpers/useHandlers.tsx
-import { useCallback as useCallback2, useState as useState6 } from "react";
+import { useCallback as useCallback4, useState as useState6 } from "react";
 function useMultiSelectHandlers() {
   const [anchorEl, setAnchorEl] = useState6(null);
   const [open, setOpen] = useState6(false);
   const [selectedItems, setSelectedItems] = useState6([]);
   const [filterValue, setFilterValue] = useState6("");
-  const handleOpen = useCallback2((e) => {
+  const handleOpen = useCallback4((e) => {
     setAnchorEl(e.currentTarget);
     setOpen(true);
   }, []);
-  const handleClose = useCallback2(() => {
+  const handleClose = useCallback4(() => {
     setAnchorEl(null);
     setOpen(false);
   }, []);
-  const handleFilterChange = useCallback2(
+  const handleFilterChange = useCallback4(
     (e) => {
       setFilterValue(e.target.value);
     },
     []
   );
-  const handleCheckboxToggle = useCallback2((item) => {
+  const handleCheckboxToggle = useCallback4((item) => {
     setSelectedItems(
       (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
     );
@@ -1604,15 +1824,15 @@ function getIconMultiSelect(name) {
 }
 
 // src/Components/MultiSelect/helpers/useFilteredItems.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
-  const filteredItems = useMemo2(
+  const filteredItems = useMemo4(
     () => items.filter(
       (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
     ),
     [items, filterValue, getItemLabel]
   );
-  const sortedItems = useMemo2(() => {
+  const sortedItems = useMemo4(() => {
     return [
       ...filteredItems.filter((item) => selectedItems.includes(item)),
       ...filteredItems.filter((item) => !selectedItems.includes(item))
@@ -1646,16 +1866,16 @@ function MultiSelect({
     handleCheckboxToggle,
     setOpen
   } = useMultiSelectHandlers();
-  useEffect8(() => {
+  useEffect10(() => {
     if (open !== void 0) {
       setOpen(open);
     }
   }, [open, setOpen]);
-  useEffect8(() => {
+  useEffect10(() => {
     setSelectedItems([]);
   }, [items, setSelectedItems]);
   const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
-  const Icon = useMemo3(() => {
+  const Icon = useMemo5(() => {
     var _a2;
     return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
   }, [button == null ? void 0 : button.icon]);
@@ -1669,7 +1889,7 @@ function MultiSelect({
     { text: "Aplicar", fn: () => {
     } }
   ];
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
     Button6,
     {
       "test-id": "multiselect-button",
@@ -1677,11 +1897,11 @@ function MultiSelect({
       onClick: handleOpen,
       variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
       size: "small",
-      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ React11.createElement(Icon, null) : null,
-      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ React11.createElement(Icon, null) : null
+      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ React12.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ React12.createElement(Icon, null) : null
     },
     capitalize(textButton != null ? textButton : "MultiSelect")
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React12.createElement(
     Popover3,
     {
       elevation: 8,
@@ -1690,7 +1910,7 @@ function MultiSelect({
       open: openMultiselect,
       onClose: () => setOpen(false)
     },
-    /* @__PURE__ */ React11.createElement(Stack5, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ React11.createElement(Stack5, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ React11.createElement(FormControl3, { fullWidth: true, size: "small" }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(Stack5, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ React12.createElement(Stack5, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ React12.createElement(FormControl3, { fullWidth: true, size: "small" }, /* @__PURE__ */ React12.createElement(
       TextField4,
       {
         "data-testid": "multiselect-input",
@@ -1702,18 +1922,18 @@ function MultiSelect({
         onChange: handleFilterChange,
         slotProps: {
           input: {
-            endAdornment: /* @__PURE__ */ React11.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React11.createElement(SearchOutlined, { fontSize: "small" }))
+            endAdornment: /* @__PURE__ */ React12.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React12.createElement(SearchOutlined, { fontSize: "small" }))
           }
         }
       }
-    ))), /* @__PURE__ */ React11.createElement(Stack5, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ React11.createElement(MenuItem3, { dense, onClick: handleSelectAll }, /* @__PURE__ */ React11.createElement(ListItemIcon3, null, /* @__PURE__ */ React11.createElement(Checkbox2, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ React11.createElement(
+    ))), /* @__PURE__ */ React12.createElement(Stack5, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ React12.createElement(MenuItem3, { dense, onClick: handleSelectAll }, /* @__PURE__ */ React12.createElement(ListItemIcon3, null, /* @__PURE__ */ React12.createElement(Checkbox2, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ React12.createElement(
       MenuItem3,
       {
         key: getItemLabel(item),
         dense,
         onClick: () => handleCheckboxToggle(item)
       },
-      /* @__PURE__ */ React11.createElement(ListItemIcon3, null, /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement(ListItemIcon3, null, /* @__PURE__ */ React12.createElement(
         Checkbox2,
         {
           checked: selectedItems.includes(item),
@@ -1721,9 +1941,9 @@ function MultiSelect({
         }
       )),
       getItemLabel(item)
-    )) : /* @__PURE__ */ React11.createElement(MenuItem3, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
+    )) : /* @__PURE__ */ React12.createElement(MenuItem3, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ React12.createElement(Stack5, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
       var _a2;
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         Button6,
         {
           key: index,
@@ -1739,7 +1959,7 @@ function MultiSelect({
 }
 
 // src/Components/PageHeader/PageHeader.tsx
-import React12 from "react";
+import React13 from "react";
 import { Stack as Stack6, Typography as Typography10 } from "@mui/material";
 var PageHeader = ({
   title,
@@ -1749,7 +1969,7 @@ var PageHeader = ({
   fixed,
   shadow = true
 }) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Stack6,
     {
       "data-testid": "main-container",
@@ -1761,12 +1981,12 @@ var PageHeader = ({
       zIndex: 10,
       sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
     },
-    /* @__PURE__ */ React12.createElement(Stack6, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React12.createElement(Stack6, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ React12.createElement(Stack6, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ React12.createElement(Typography10, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ React12.createElement(Typography10, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ React12.createElement(Stack6, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
+    /* @__PURE__ */ React13.createElement(Stack6, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React13.createElement(Stack6, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ React13.createElement(Stack6, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ React13.createElement(Typography10, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ React13.createElement(Typography10, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ React13.createElement(Stack6, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
   );
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-import React13, { useState as useState7 } from "react";
+import React14, { useState as useState7 } from "react";
 import { Typography as Typography11, IconButton as IconButton7, Box as Box10 } from "@mui/material";
 import Grid5 from "@mui/material/Grid2";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
@@ -1787,12 +2007,12 @@ var SCCalendarSwipeable = ({
   let convertFecha;
   const [fecha, setFecha] = useState7(/* @__PURE__ */ new Date());
   const [fechaSeleccionada, setFechaSeleccionada] = useState7();
-  const [stateVal, setstateVal] = React13.useState(/* @__PURE__ */ new Date());
-  const [openCalendar, setOpenCalendar] = React13.useState(false);
+  const [stateVal, setstateVal] = React14.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = React14.useState(false);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = startOfWeek(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => addDays(inicioSemana, i));
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (fecha != null) {
       handleConvertFecha(fecha);
     }
@@ -1811,11 +2031,11 @@ var SCCalendarSwipeable = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadValues({}, es);
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(LocalizationProvider2, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React13.createElement(Box10, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React13.createElement(Grid5, { container: true, gap: 0.5, sx: {
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(LocalizationProvider2, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React14.createElement(Box10, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React14.createElement(Box10, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React14.createElement(Grid5, { container: true, gap: 0.5, sx: {
     justifyContent: "space-between",
     padding: "12px 0px",
     background: "transparent"
-  } }, diasSemana.map((dia) => /* @__PURE__ */ React13.createElement(Grid5, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React13.createElement(
+  } }, diasSemana.map((dia) => /* @__PURE__ */ React14.createElement(Grid5, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React14.createElement(Box10, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React14.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React14.createElement(
     Box10,
     {
       onClick: () => setFecha(dia),
@@ -1831,8 +2051,8 @@ var SCCalendarSwipeable = ({
         //height: '36px',
       }
     },
-    /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
-  )))), /* @__PURE__ */ React13.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(Typography11, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
+  )))), /* @__PURE__ */ React14.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React14.createElement(IconButton7, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React14.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React14.createElement(Box10, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React14.createElement(
     StaticDatePicker,
     {
       orientation: "landscape",
@@ -1842,17 +2062,17 @@ var SCCalendarSwipeable = ({
       sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ React13.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowUpIcon, null))))));
+  ), /* @__PURE__ */ React14.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React14.createElement(IconButton7, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React14.createElement(KeyboardDoubleArrowUpIcon, null))))));
 };
 
 // src/Components/SCDataGrid.tsx
-import React14, { useEffect as useEffect10, useState as useState8 } from "react";
+import React15, { useEffect as useEffect12, useState as useState8 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
 import { LicenseInfo as LicenseInfo2 } from "@mui/x-license-pro";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { useTheme } from "@mui/material/styles";
-var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) => {
+function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) {
   LicenseInfo2.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
@@ -1863,45 +2083,80 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
     return Math.floor(Math.random() * 1e6);
   }
   const getTreeDataPaths = (row) => {
+    var _a, _b, _c;
+    const group1Value = groupColumns && ((_a = groupColumns(row)) == null ? void 0 : _a.valueGroup1);
+    const group2Value = groupColumns && ((_b = groupColumns(row)) == null ? void 0 : _b.valueGroup2);
+    const fieldValue = groupColumns && ((_c = groupColumns(row)) == null ? void 0 : _c.fieldFirstColumn);
     return [
-      row[groupColumns[0].split("[")[1].split("]")[0].trim()],
-      ...groupColumns.length > 2 ? [row[groupColumns[1].split("[")[1].split("]")[0].trim()]] : [],
-      `${row[groupColumns[groupColumns.length - 1].split("[")[1].split("]")[0].trim()].toString()}/${generateRandomId()}`
+      String(group1Value || ""),
+      ...group2Value ? [String(group2Value)] : [],
+      `${String(fieldValue || "")}/${generateRandomId()}`
     ];
   };
   const groupingColDefs = {
     field: "grouping",
-    headerName: groupColumns != void 0 ? groupColumns[groupColumns.length - 1].split("[").length == 2 ? groupColumns[groupColumns.length - 1].split("[")[0].trim() : "Agrupador" : "",
+    headerName: groupColumns ? groupColumns(data[0]).headerNameFirstColumn : "Agrupador",
     renderCell: (params) => {
-      var _a;
+      var _a, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
-      const maxDepth = groupColumns ? groupColumns.length - 2 : 0;
-      if (groupColumns != void 0) {
+      let maxDepth = 0;
+      if (groupColumns && data.length > 0) {
+        const sampleItem = groupColumns(data[0]);
+        if (sampleItem.valueGroup1) maxDepth++;
+        if (sampleItem.valueGroup2) maxDepth++;
+        maxDepth = Math.max(0, maxDepth - 1);
+      }
+      if (groupColumns) {
         if (params.rowNode.depth === 0) {
-          const textBegin = groupColumns[0] ? groupColumns[0].split("[")[0].trim() : "";
-          const textEnd = groupColumns[0] ? groupColumns[0].split("]")[1].trim() : "";
-          const labelGrouping1 = `${textBegin} ${label} ${textEnd}`;
-          const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-          const fieldGrouping2 = groupColumns[1].split("[")[1].split("]")[0].trim();
-          const subgroup1 = arrayRows.filter((r) => r[fieldGrouping1].toString() === label).map((r) => r[fieldGrouping2]);
+          let customLabel = label;
+          if (groupColumns) {
+            const originalItem = data.find(
+              (item) => {
+                var _a2;
+                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup1) === label;
+              }
+            );
+            if (originalItem) {
+              const itemValue = groupColumns(originalItem);
+              customLabel = itemValue.textGroup1 || label;
+            }
+          }
+          const subgroup1 = arrayRows.filter((r) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === label;
+          }).map((r) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2);
+          });
           const groupedDataLength1 = subgroup1.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);
-          label = `${labelGrouping1} (${groupedDataLength1.length})`;
-        } else if (groupColumns.length > 2 && params.rowNode.depth === 1) {
-          const labelGrouping1 = (_a = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _a.groupingKey;
-          const textBegin = groupColumns[1] ? groupColumns[1].split("[")[0] : "";
-          const textEnd = groupColumns[1] ? groupColumns[1].split("]")[1].trim() : "";
-          const labelGrouping2 = `${textBegin} ${label} ${textEnd}`;
-          const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-          const fieldGrouping2 = groupColumns[1].split("[")[1].split("]")[0].trim();
+          label = `${customLabel} (${groupedDataLength1.length})`;
+        } else if (((_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup2) && params.rowNode.depth === 1) {
+          const labelGrouping1 = (_b = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _b.groupingKey.toString();
+          let customLabel = label;
+          if (groupColumns) {
+            const originalItem = data.find(
+              (item) => {
+                var _a2;
+                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup2) === label;
+              }
+            );
+            if (originalItem) {
+              const itemValue = groupColumns(originalItem);
+              customLabel = itemValue.textGroup2 || label;
+            }
+          }
           const groupedDataLength2 = arrayRows.filter(
-            (r) => r[fieldGrouping1] === labelGrouping1 && r[fieldGrouping2] === label
+            (r) => {
+              var _a2, _b2;
+              return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
+            }
           ).length;
-          label = `${labelGrouping2} (${groupedDataLength2})`;
+          label = `${customLabel} (${groupedDataLength2})`;
         } else {
           label = label;
         }
       }
-      return /* @__PURE__ */ React14.createElement(
+      return /* @__PURE__ */ React15.createElement(
         "div",
         {
           style: {
@@ -1918,7 +2173,7 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
             fontWeight: params.rowNode.type == "group" ? "400" : "300"
           }
         },
-        params.rowNode.type === "group" && /* @__PURE__ */ React14.createElement(
+        params.rowNode.type === "group" && /* @__PURE__ */ React15.createElement(
           "span",
           {
             style: {
@@ -1931,25 +2186,32 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
               params.api.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
             }
           },
-          params.rowNode.childrenExpanded ? /* @__PURE__ */ React14.createElement(KeyboardArrowUpIcon, { fontSize: "small", color: "action" }) : /* @__PURE__ */ React14.createElement(KeyboardArrowDownIcon, { fontSize: "small", color: "action" })
+          params.rowNode.childrenExpanded ? /* @__PURE__ */ React15.createElement(KeyboardArrowUpIcon, { fontSize: "small", color: "action" }) : /* @__PURE__ */ React15.createElement(KeyboardArrowDownIcon, { fontSize: "small", color: "action" })
         ),
         label
       );
     },
     colSpan: (params) => {
+      var _a, _b;
       const value = String(params);
-      const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-      const fieldGrouping2 = groupColumns.length > 2 ? groupColumns[1].split("[")[1].split("]")[0].trim() : void 0;
+      const fieldGrouping1 = groupColumns ? (_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup1 : void 0;
+      const fieldGrouping2 = groupColumns ? (_b = groupColumns(data[0])) == null ? void 0 : _b.valueGroup2 : void 0;
       let agrupado1 = false;
       let agrupado2 = false;
       if (fieldGrouping1 != void 0) {
         agrupado1 = arrayRows.some(
-          (row) => String(row[fieldGrouping1]) === value
+          (row) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1) === value;
+          }
         );
       }
       if (fieldGrouping2 != void 0) {
         agrupado2 = arrayRows.some(
-          (row) => String(row[fieldGrouping2]) === value
+          (row) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup2) === value;
+          }
         );
       }
       if (agrupado1 || agrupado2) {
@@ -1970,7 +2232,7 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
   const [pageSize, setPageSize] = useState8(rows);
   const [arrayRows, setArrayRows] = useState8([]);
   const [selectionModel, setSelectionModel] = useState8([]);
-  useEffect10(() => {
+  useEffect12(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
     }
@@ -2026,7 +2288,7 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       setSelectionModel([...newSelection]);
     }
   };
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, data && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, data && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ React15.createElement(
     DataGridPro,
     {
       apiRef,
@@ -2060,7 +2322,6 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       },
       sx: {
         maxHeight: maxHeight ? `${maxHeight}px` : "none",
-        //overflow: 'auto',
         "& .MuiDataGrid-filler": {
           display: "none !important"
         },
@@ -2090,14 +2351,14 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       }
     }
   ))));
-};
-var SCDataGrid = React14.memo(SCDataGridInitial, (prevProps, nextProps) => {
-  const isEqual = prevProps.data === nextProps.data && prevProps.columns === nextProps.columns && prevProps.groupColumns === nextProps.groupColumns && prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
+}
+var SCDataGrid = React15.memo(SCDataGridInitial, (prevProps, nextProps) => {
+  const isEqual = prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
   return isEqual;
 });
 
 // src/Components/EmptyState/EmptyState.tsx
-import React15 from "react";
+import React16 from "react";
 import { Button as Button8, Stack as Stack7, Typography as Typography12 } from "@mui/material";
 
 // src/assets/ImgEmptyState/create.svg
@@ -2125,7 +2386,7 @@ var DefaultIcon = ({
 }) => {
   const imageUrl = EmptyStateImageUrls[state];
   const iconSize = size === "small" ? { width: "40px", height: "40px" } : { width: "60px", height: "60px" };
-  return /* @__PURE__ */ React15.createElement("img", { src: imageUrl, alt: state, style: iconSize });
+  return /* @__PURE__ */ React16.createElement("img", { src: imageUrl, alt: state, style: iconSize });
 };
 var EmptyState = ({
   state = "create",
@@ -2134,11 +2395,11 @@ var EmptyState = ({
   subtitle,
   actions,
   containerHeight = "100vh",
-  icon = /* @__PURE__ */ React15.createElement(DefaultIcon, { state, size })
+  icon = /* @__PURE__ */ React16.createElement(DefaultIcon, { state, size })
 }) => {
   const titleVariant = size === "small" ? "subtitle2" : "h6";
   const subtitleVariant = size === "small" ? "caption" : "body1";
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Stack7,
     {
       alignItems: "center",
@@ -2147,8 +2408,8 @@ var EmptyState = ({
       height: containerHeight,
       "data-testid": "empty-state-container"
     },
-    icon && /* @__PURE__ */ React15.createElement(Stack7, null, icon),
-    /* @__PURE__ */ React15.createElement(Stack7, { gap: 0.5 }, /* @__PURE__ */ React15.createElement(Typography12, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ React15.createElement(
+    icon && /* @__PURE__ */ React16.createElement(Stack7, null, icon),
+    /* @__PURE__ */ React16.createElement(Stack7, { gap: 0.5 }, /* @__PURE__ */ React16.createElement(Typography12, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ React16.createElement(
       Typography12,
       {
         variant: subtitleVariant,
@@ -2156,7 +2417,7 @@ var EmptyState = ({
         color: "text.secondary"
       },
       subtitle
-    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ React15.createElement(
+    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ React16.createElement(
       Stack7,
       {
         direction: "row",
@@ -2166,15 +2427,15 @@ var EmptyState = ({
       },
       actions.map((action, index) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           Button8,
           {
             key: index,
             color: (_a = action.color) != null ? _a : "primary",
             variant: (_b = action.variant) != null ? _b : "text",
             size: (_c = action.size) != null ? _c : "small",
-            startIcon: action.icon && action.iconPosition === "left" ? /* @__PURE__ */ React15.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
-            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ React15.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            startIcon: action.icon && action.iconPosition === "left" ? /* @__PURE__ */ React16.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ React16.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
             onClick: action.onClick
           },
           capitalize((_d = action.text) != null ? _d : "action")
@@ -2185,7 +2446,7 @@ var EmptyState = ({
 };
 
 // src/Components/SCDialog.tsx
-import React16, { useEffect as useEffect11, useState as useState9 } from "react";
+import React17, { useEffect as useEffect13, useState as useState9 } from "react";
 import { Button as Button9, Typography as Typography13, Modal as Modal2, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton8, Tooltip as Tooltip3, Box as Box11, SvgIcon as SvgIcon5 } from "@mui/material";
 import Grid6 from "@mui/material/Grid2";
 import CloseIcon2 from "@mui/icons-material/Close";
@@ -2196,7 +2457,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   let IconTitle;
   let ButtonIcon;
   const [open, setOpen] = useState9(show);
-  useEffect11(() => {
+  useEffect13(() => {
     if (show) {
       handleOpen();
     } else {
@@ -2221,7 +2482,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   });
   if (iconTitle) {
     if (Muicon5[iconTitle] == void 0) {
-      if (iconTitle && React16.isValidElement(iconTitle) && iconTitle.type == void 0) {
+      if (iconTitle && React17.isValidElement(iconTitle) && iconTitle.type == void 0) {
         iconTitleValidation = "image";
         IconTitle = iconTitle;
       } else {
@@ -2246,8 +2507,8 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
     }
   };
   const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
-  content = content != null ? content : { component: /* @__PURE__ */ React16.createElement(Box11, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ React16.createElement("div", null, buttonDialog ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React16.createElement(Tooltip3, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React16.createElement(Button9, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ React16.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React16.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React16.createElement(IconButton8, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React16.createElement(SvgIcon5, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React16.createElement(Modal2, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React16.createElement(
+  content = content != null ? content : { component: /* @__PURE__ */ React17.createElement(Box11, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ React17.createElement("div", null, buttonDialog ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React17.createElement(Tooltip3, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React17.createElement(Button9, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ React17.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React17.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React17.createElement(IconButton8, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React17.createElement(SvgIcon5, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React17.createElement(Modal2, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React17.createElement(
     Dialog,
     {
       "data-testid": "dialog-element",
@@ -2261,8 +2522,8 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ React16.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ React16.createElement(Grid6, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ React16.createElement(Grid6, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React16.createElement(Box11, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React16.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React16.createElement(SvgIcon5, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React16.createElement(Grid6, null, /* @__PURE__ */ React16.createElement(Typography13, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React16.createElement(Typography13, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React16.createElement(IconButton8, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React16.createElement(CloseIcon2, null)) : "")),
-    /* @__PURE__ */ React16.createElement(
+    title && /* @__PURE__ */ React17.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ React17.createElement(Grid6, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ React17.createElement(Grid6, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React17.createElement(Box11, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React17.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React17.createElement(SvgIcon5, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React17.createElement(Grid6, null, /* @__PURE__ */ React17.createElement(Typography13, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React17.createElement(Typography13, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React17.createElement(IconButton8, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React17.createElement(CloseIcon2, null)) : "")),
+    /* @__PURE__ */ React17.createElement(
       DialogContent,
       {
         "data-testid": "dialog-content",
@@ -2290,7 +2551,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           }
         }
       },
-      content.url ? /* @__PURE__ */ React16.createElement(
+      content.url ? /* @__PURE__ */ React17.createElement(
         "iframe",
         {
           style: { border: "none", minWidth: "100%", minHeight: "100%" },
@@ -2300,7 +2561,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions.length > 0 ? /* @__PURE__ */ React16.createElement(DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    dialogActions.length > 0 ? /* @__PURE__ */ React17.createElement(DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
       Button9,
       {
         variant: "text",
@@ -2308,11 +2569,11 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         size: "small",
         onClick: dialogActions[0].fn,
         disabled: dialogActions[0].disabled || false,
-        startIcon: dialogActions[0].icon ? /* @__PURE__ */ React16.createElement(SvgIcon5, { fontSize: "small", component: dialogActions[0].icon }) : void 0
+        startIcon: dialogActions[0].icon ? /* @__PURE__ */ React17.createElement(SvgIcon5, { fontSize: "small", component: dialogActions[0].icon }) : void 0
       },
       dialogActions[0].text
-    ), /* @__PURE__ */ React16.createElement(Box11, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
-      return /* @__PURE__ */ React16.createElement(
+    ), /* @__PURE__ */ React17.createElement(Box11, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+      return /* @__PURE__ */ React17.createElement(
         Button9,
         {
           key: index + 1,
@@ -2321,12 +2582,12 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ React16.createElement(SvgIcon5, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ React17.createElement(SvgIcon5, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
     }))) : dialogActions.map((boton, index) => {
-      return /* @__PURE__ */ React16.createElement(
+      return /* @__PURE__ */ React17.createElement(
         Button9,
         {
           key: index,
@@ -2335,7 +2596,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ React16.createElement(SvgIcon5, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ React17.createElement(SvgIcon5, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
@@ -2344,12 +2605,12 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 };
 
 // src/Components/SCMenu.tsx
-import React17 from "react";
+import React18 from "react";
 import { Box as Box12, Typography as Typography14, Paper, Divider as Divider4, MenuList, MenuItem as MenuItem4, ListItemIcon as ListItemIcon4, SvgIcon as SvgIcon6 } from "@mui/material";
 import Grid7 from "@mui/material/Grid2";
 
 // src/Components/Hooks/useWindowDimensions.ts
-import { useState as useState10, useEffect as useEffect12 } from "react";
+import { useState as useState10, useEffect as useEffect14 } from "react";
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
@@ -2359,7 +2620,7 @@ function getWindowDimensions() {
 }
 function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState10(getWindowDimensions());
-  useEffect12(() => {
+  useEffect14(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
@@ -2377,12 +2638,12 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
   const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
   const widthContainer = menuSize + pageSize;
   let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  const [selectedIndex, setSelectedIndex] = React17.useState("1");
-  const [value, setValue] = React17.useState("1");
-  React17.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React18.useState("1");
+  const [value, setValue] = React18.useState("1");
+  React18.useEffect(() => {
     heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
   }, [height]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (defaultOption) {
       handleClickMenusItem(event, void 0);
     }
@@ -2412,7 +2673,7 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       setValue(String(index + 1));
     }
   };
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Grid7, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React17.createElement(Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React17.createElement(MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Grid7, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React18.createElement(Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React18.createElement(MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     MenuItem4,
     {
       disabled: disable == true ? true : false,
@@ -2420,26 +2681,26 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       selected: String(index + 1) === selectedIndex,
       onClick: (event2) => handleClickMenusItem(event2, index)
     },
-    option.iconLeft ? /* @__PURE__ */ React17.createElement(ListItemIcon4, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React17.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ React17.createElement(Grid7, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(Typography14, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React17.createElement(ListItemIcon4, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React17.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ React17.createElement(Divider4, null) : "")))), /* @__PURE__ */ React17.createElement(Grid7, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React17.createElement(Box12, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React17.createElement(Typography14, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+    option.iconLeft ? /* @__PURE__ */ React18.createElement(ListItemIcon4, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React18.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ React18.createElement(Grid7, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Typography14, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React18.createElement(ListItemIcon4, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React18.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ React18.createElement(Divider4, null) : "")))), /* @__PURE__ */ React18.createElement(Grid7, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React18.createElement(Box12, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React18.createElement(Typography14, { color: "error" }, "No se ha configurado el componente a visualizar")))));
 };
 
 // src/Components/SCTabs.tsx
-import React18, { useEffect as useEffect13 } from "react";
+import React19, { useEffect as useEffect15 } from "react";
 import { Typography as Typography15, Box as Box13, SvgIcon as SvgIcon7, Tab, Tabs, Badge } from "@mui/material";
 import TabPanel from "@mui/lab/TabPanel";
 import TabContext from "@mui/lab/TabContext";
 import * as Muicon7 from "@mui/icons-material";
 var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
-  const [toast, setToast] = React18.useState(null);
+  const [toast, setToast] = React19.useState(null);
   let i = 0;
   let j = 0;
   let k = 0;
   let l = 0;
   let validateTypeIcon = true;
-  const [value, setValue] = React18.useState("1");
-  useEffect13(() => {
+  const [value, setValue] = React19.useState("1");
+  useEffect15(() => {
     if (defaultOption) {
       handleChange(event, void 0);
     }
@@ -2489,7 +2750,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React18.createElement(Box13, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React18.createElement(TabContext, { value }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React19.createElement(Box13, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React19.createElement(TabContext, { value }, /* @__PURE__ */ React19.createElement(
     Tabs,
     {
       "data-testid": "tab-container",
@@ -2503,7 +2764,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       orientation: orientation || "horizontal",
       sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
     },
-    options.map((option) => /* @__PURE__ */ React18.createElement(
+    options.map((option) => /* @__PURE__ */ React19.createElement(
       Tab,
       {
         "data-testid": "tab-item",
@@ -2512,7 +2773,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
         label: option.name || "",
         disabled: option.disabled || false,
         iconPosition: iconPosition || "end",
-        icon: typeIcon == "badge" ? /* @__PURE__ */ React18.createElement(
+        icon: typeIcon == "badge" ? /* @__PURE__ */ React19.createElement(
           Badge,
           {
             sx: {
@@ -2527,33 +2788,38 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
             badgeContent: option.iconOrBadge,
             color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
           }
-        ) : typeIcon == "icon" ? /* @__PURE__ */ React18.createElement(SvgIcon7, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
+        ) : typeIcon == "icon" ? /* @__PURE__ */ React19.createElement(SvgIcon7, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
         sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
       }
     ))
-  ), children, options.map((option) => /* @__PURE__ */ React18.createElement(
+  ), children, options.map((option) => /* @__PURE__ */ React19.createElement(
     TabPanel,
     {
       key: k = k + 1,
       value: String(l = l + 1),
       sx: { padding: "16px" }
     },
-    option.page ? option.page : /* @__PURE__ */ React18.createElement(Typography15, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ React18.createElement(Box13, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React18.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+    option.page ? option.page : /* @__PURE__ */ React19.createElement(Typography15, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ React19.createElement(Box13, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React19.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
 // src/Components/Calendario/Calendar.tsx
-import React24, { useState as useState12 } from "react";
-import { Box as Box19 } from "@mui/material";
-import dayjs7 from "dayjs";
+import React25, { useState as useState12 } from "react";
+import { Box as Box19, CircularProgress as CircularProgress4 } from "@mui/material";
 
 // src/Components/Calendario/CalendarToolbar.tsx
-import React19, { useState as useState11 } from "react";
+import React20, { useState as useState11 } from "react";
 import { ChevronLeft, ChevronRight, KeyboardArrowDown as KeyboardArrowDown2, LightModeOutlined } from "@mui/icons-material";
 import { Box as Box14, Chip as Chip3, IconButton as IconButton9, Menu, MenuItem as MenuItem5, Stack as Stack8, Typography as Typography16 } from "@mui/material";
 import dayjs2 from "dayjs";
+import updateLocale from "dayjs/plugin/updateLocale";
 import "dayjs/locale/es";
 dayjs2.locale("es");
+dayjs2.extend(updateLocale);
+dayjs2.updateLocale("en", {
+  weekStart: 0
+  // 0 = domingo
+});
 var CalendarToolbar = ({
   labelDate,
   view,
@@ -2574,23 +2840,26 @@ var CalendarToolbar = ({
     handleMenuClose();
   };
   const getFormattedDate = () => {
+    const sunday = labelDate.day(0);
+    const saturday = sunday.add(6, "day");
     if (view === "month") {
-      return labelDate.format("MMMM YYYY");
+      const textMonth = labelDate.format("MMMM YYYY");
+      return textMonth.charAt(0).toUpperCase() + textMonth.slice(1);
     }
     if (view === "week") {
-      return `${labelDate.startOf("week").add(1, "day").format("DD MMM")} - ${labelDate.endOf("week").format("DD MMM YYYY")}`;
+      return `${labelDate.startOf("week").format("DD MMM")} - ${labelDate.endOf("week").format("DD MMM YYYY")}`;
     }
     return labelDate.format(" DD MMMM YYYY");
   };
-  return /* @__PURE__ */ React19.createElement(Stack8, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ React19.createElement(Box14, null, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(Stack8, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ React20.createElement(Box14, null, /* @__PURE__ */ React20.createElement(
     Chip3,
     {
       label: "Hoy",
-      icon: /* @__PURE__ */ React19.createElement(LightModeOutlined, { fontSize: "small" }),
+      icon: /* @__PURE__ */ React20.createElement(LightModeOutlined, { fontSize: "small" }),
       color: "primary",
       onClick: () => onNavigate("TODAY")
     }
-  )), /* @__PURE__ */ React19.createElement(Stack8, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(IconButton9, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ React19.createElement(ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(IconButton9, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ React19.createElement(ChevronRight, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(Typography16, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ React19.createElement(IconButton9, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ React19.createElement(KeyboardArrowDown2, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(
+  )), /* @__PURE__ */ React20.createElement(Stack8, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(IconButton9, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ React20.createElement(ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ React20.createElement(IconButton9, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ React20.createElement(ChevronRight, { fontSize: "small" })), /* @__PURE__ */ React20.createElement(Typography16, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ React20.createElement(IconButton9, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ React20.createElement(KeyboardArrowDown2, { fontSize: "small" })), /* @__PURE__ */ React20.createElement(
     Menu,
     {
       anchorEl,
@@ -2599,15 +2868,15 @@ var CalendarToolbar = ({
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("month") }, "Mes"),
-    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("week") }, "Semana"),
-    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("day") }, "D\xEDa")
-  )), children ? /* @__PURE__ */ React19.createElement(Box14, null, children) : /* @__PURE__ */ React19.createElement(Box14, { width: "24px" }), " ");
+    /* @__PURE__ */ React20.createElement(MenuItem5, { onClick: () => handleViewChange("month") }, "Mes"),
+    /* @__PURE__ */ React20.createElement(MenuItem5, { onClick: () => handleViewChange("week") }, "Semana"),
+    /* @__PURE__ */ React20.createElement(MenuItem5, { onClick: () => handleViewChange("day") }, "D\xEDa")
+  )), children ? /* @__PURE__ */ React20.createElement(Box14, null, children) : /* @__PURE__ */ React20.createElement(Box14, { width: "24px" }), " ");
 };
 
 // src/Components/Calendario/Views/MonthView.tsx
-import React21 from "react";
-import { Box as Box16, Typography as Typography18, IconButton as IconButton10, Paper as Paper2, Tooltip as Tooltip4, Stack as Stack10, Divider as Divider6 } from "@mui/material";
+import React22 from "react";
+import { Box as Box16, Typography as Typography18, IconButton as IconButton10, Paper as Paper2, Tooltip as Tooltip5, Stack as Stack10, Divider as Divider6, CircularProgress } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import dayjs4 from "dayjs";
 import localeData from "dayjs/plugin/localeData";
@@ -2633,14 +2902,24 @@ var stateColors = {
   Asignada: "warning.main",
   Finalizado: "primary.main",
   Vencida: "error.main",
-  EnProgreso: "success.main"
+  EnProgreso: "success.main",
+  Aplazada: "grey.400",
+  Generada: "secondary.main"
 };
 
 // src/Components/Calendario/Event.tsx
-import React20 from "react";
-import { Box as Box15, Stack as Stack9, Typography as Typography17, Divider as Divider5 } from "@mui/material";
-var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
-  return /* @__PURE__ */ React20.createElement(
+import React21 from "react";
+import { Box as Box15, Stack as Stack9, Typography as Typography17, Divider as Divider5, Popover as Popover4 } from "@mui/material";
+var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
+  const [anchorEl, setAnchorEl] = React21.useState(null);
+  const handlePopoverOpen = (event3) => {
+    setAnchorEl(event3.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ React21.createElement(
     Stack9,
     {
       direction: "row",
@@ -2648,6 +2927,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
       borderRadius: 0.5,
       alignItems: "flex-start",
       minHeight: "20px",
+      onMouseOver: () => onHover == null ? void 0 : onHover(event2),
       onClick: (e) => {
         e.stopPropagation();
         onClick == null ? void 0 : onClick(event2);
@@ -2660,7 +2940,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         cursor: onClick ? "pointer" : "default"
       }, sx)
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(
       Divider5,
       {
         orientation: "vertical",
@@ -2672,7 +2952,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         }
       }
     ),
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(
       Box15,
       {
         px: 1,
@@ -2682,7 +2962,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         display: "flex",
         alignItems: "center"
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(
         Typography17,
         {
           color: "text.primary",
@@ -2692,29 +2972,62 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
-          }
+          },
+          onMouseEnter: handlePopoverOpen,
+          onMouseLeave: handlePopoverClose
         },
         capitalize(event2.title)
+      ),
+      /* @__PURE__ */ React21.createElement(
+        Popover4,
+        {
+          id: "mouse-over-popover",
+          sx: { pointerEvents: "none" },
+          open,
+          anchorEl,
+          anchorOrigin: {
+            vertical: "top",
+            horizontal: "right"
+          },
+          transformOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          onClose: handlePopoverClose,
+          disableRestoreFocus: true
+        },
+        onHover ? onHover(event2) : /* @__PURE__ */ React21.createElement(Typography17, null, "Sin contenido")
       )
     )
   );
 };
 
+// src/assets/Icon Scheduler.svg
+var Icon_Scheduler_default = "./Icon Scheduler-WX62PISD.svg";
+
 // src/Components/Calendario/Views/MonthView.tsx
 dayjs4.extend(localeData);
 dayjs4.extend(isBetween);
-var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick }) => {
+var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEventClick, onEventHover }) => {
+  const noEvents = events.length === 0;
   const days = getMonthDays(currentDate);
   const weekDays = Array.from({ length: 7 }, (_, i) => dayjs4().day(i));
-  const [openDrawer, setOpenDrawer] = React21.useState(false);
-  const [selectedDay, setSelectedDay] = React21.useState(null);
-  const [selectedEvents, setSelectedEvents] = React21.useState([]);
-  return /* @__PURE__ */ React21.createElement(Box16, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ React21.createElement(Box16, { minWidth: "1050px" }, /* @__PURE__ */ React21.createElement(Box16, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ React21.createElement(Box16, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ React21.createElement(Typography18, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), /* @__PURE__ */ React21.createElement(Box16, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5 }, days.map((day) => {
+  const [openDrawer, setOpenDrawer] = React22.useState(false);
+  const [selectedDay, setSelectedDay] = React22.useState(null);
+  const [selectedEvents, setSelectedEvents] = React22.useState([]);
+  return /* @__PURE__ */ React22.createElement(Box16, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ React22.createElement(Box16, { minWidth: "1050px" }, /* @__PURE__ */ React22.createElement(Box16, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ React22.createElement(Box16, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ React22.createElement(Typography18, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ React22.createElement(Box16, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ React22.createElement(CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React22.createElement(
+    EmptyState,
+    {
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ React22.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : /* @__PURE__ */ React22.createElement(Box16, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5 }, days.map((day) => {
     const dayEvents = events.filter(
       (e) => day.isBetween(e.start.startOf("day"), e.end.endOf("day"), null, "[]")
     );
     const isCurrentMonth = day.month() === currentDate.month();
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(
       Paper2,
       {
         key: day.toString(),
@@ -2731,7 +3044,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           overflow: "hidden"
         }
       },
-      /* @__PURE__ */ React21.createElement(Box16, { p: 1, flexShrink: 0 }, /* @__PURE__ */ React21.createElement(Box16, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React22.createElement(Box16, { p: 1, flexShrink: 0 }, /* @__PURE__ */ React22.createElement(Box16, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ React22.createElement(
         Box16,
         {
           sx: {
@@ -2744,7 +3057,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React21.createElement(
+        /* @__PURE__ */ React22.createElement(
           Typography18,
           {
             variant: "body2",
@@ -2752,7 +3065,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           },
           day.date()
         )
-      ), dayEvents.length > 2 && /* @__PURE__ */ React21.createElement(Tooltip4, { title: "M\xE1s eventos" }, /* @__PURE__ */ React21.createElement(
+      ), dayEvents.length > 2 && /* @__PURE__ */ React22.createElement(Tooltip5, { title: "M\xE1s eventos" }, /* @__PURE__ */ React22.createElement(
         IconButton10,
         {
           color: "primary",
@@ -2764,18 +3077,19 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             setSelectedEvents(dayEvents);
           }
         },
-        /* @__PURE__ */ React21.createElement(AddIcon, { fontSize: "small" })
+        /* @__PURE__ */ React22.createElement(AddIcon, { fontSize: "small" })
       )))),
-      /* @__PURE__ */ React21.createElement(Box16, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React22.createElement(Box16, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ React22.createElement(
         CalendarEventCard,
         {
           key: `${event2.id}-${day.toString()}`,
           event: event2,
           color: stateColors[event2.state],
-          onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day)
+          onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+          onHover: onEventHover
         }
       ))),
-      dayEvents.length > 2 && /* @__PURE__ */ React21.createElement(Stack10, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React21.createElement(
+      dayEvents.length > 2 && /* @__PURE__ */ React22.createElement(Stack10, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React22.createElement(
         SCDrawer,
         {
           width: "350px",
@@ -2787,7 +3101,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           arrayElements: [{
             component: (() => {
               const [first, ...rest] = dayEvents;
-              return /* @__PURE__ */ React21.createElement(Box16, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ React21.createElement(Typography18, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ React21.createElement(Box16, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ React21.createElement(
+              return /* @__PURE__ */ React22.createElement(Box16, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ React22.createElement(Typography18, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ React22.createElement(Box16, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ React22.createElement(
                 CalendarEventCard,
                 {
                   event: first,
@@ -2802,7 +3116,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
                     }
                   }
                 }
-              )), /* @__PURE__ */ React21.createElement(Divider6, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ React21.createElement(Typography18, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ React21.createElement(
+              )), /* @__PURE__ */ React22.createElement(Divider6, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ React22.createElement(Typography18, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ React22.createElement(
                 Box16,
                 {
                   width: "100%",
@@ -2815,13 +3129,14 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
                   flexDirection: "column",
                   gap: 1.5
                 },
-                rest.map((event2) => /* @__PURE__ */ React21.createElement(
+                rest.map((event2) => /* @__PURE__ */ React22.createElement(
                   CalendarEventCard,
                   {
                     key: `${event2.id}-${day.toString()}`,
                     event: event2,
                     color: stateColors[event2.state],
                     onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+                    onHover: onEventHover,
                     sx: {
                       whiteSpace: "normal",
                       "& .MuiTypography-root": {
@@ -2842,15 +3157,26 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
 };
 
 // src/Components/Calendario/Views/WeekView.tsx
-import React22 from "react";
-import { Box as Box17, Typography as Typography19 } from "@mui/material";
+import React23 from "react";
+import { Box as Box17, CircularProgress as CircularProgress2, Typography as Typography19 } from "@mui/material";
 import dayjs5 from "dayjs";
 import localeData2 from "dayjs/plugin/localeData";
 dayjs5.extend(localeData2);
-var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
+var WeekView = ({
+  events,
+  currentDate,
+  isLoading,
+  onDayClick,
+  onEventClick,
+  onEventHover,
+  startHour = 0,
+  endHour = 23
+}) => {
+  const noEvents = events.length === 0;
+  const todayString = dayjs5().format("YYYY-MM-DD");
   const startOfWeek2 = currentDate.startOf("week");
   const days = Array.from({ length: 7 }, (_, i) => startOfWeek2.add(i, "day"));
-  const hours2 = Array.from({ length: 24 }, (_, i) => i);
+  const hours = Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i);
   const getCellBorderType = (cellHour, dayEvents) => {
     for (const event2 of dayEvents) {
       const start = event2.start.hour() + event2.start.minute() / 60;
@@ -2858,8 +3184,7 @@ var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
       const cellStart = cellHour;
       const cellEnd = cellHour + 1;
       if (cellEnd > start && cellStart < end) {
-        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
-          return "full";
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01) return "full";
         if (Math.abs(cellStart - start) < 0.01) return "start";
         if (Math.abs(cellEnd - end) < 0.01) return "end";
         return "middle";
@@ -2867,92 +3192,122 @@ var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
     }
     return "none";
   };
-  return /* @__PURE__ */ React22.createElement(Box17, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React22.createElement(Box17, { display: "flex", bgcolor: "background.default" }, /* @__PURE__ */ React22.createElement(Box17, { width: 45, bgcolor: "background.default" }), days.map((day) => /* @__PURE__ */ React22.createElement(
-    Box17,
-    {
-      key: day.toString(),
-      height: 40,
-      flex: 1,
-      pl: 0.5,
-      textAlign: "center",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "flex-start"
-    },
-    /* @__PURE__ */ React22.createElement(Typography19, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
-  ))), /* @__PURE__ */ React22.createElement(Box17, { display: "flex", flex: 1 }, /* @__PURE__ */ React22.createElement(Box17, { width: 45, bgcolor: "background.default" }, hours2.map((h) => /* @__PURE__ */ React22.createElement(
-    Box17,
-    {
-      key: h,
-      height: 60,
-      textAlign: "right",
-      pr: 1,
-      borderTop: "1px solid",
-      borderColor: "divider"
-    },
-    /* @__PURE__ */ React22.createElement(Typography19, { variant: "caption", color: "text.secondary" }, dayjs5().hour(h).format("h A"))
-  ))), days.map((day) => {
-    const dayEvents = events.filter(
-      (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
-    );
-    return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(Box17, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React23.createElement(Box17, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ React23.createElement(Box17, { width: 45, bgcolor: "transparent" }), days.map((day) => {
+    const isToday2 = day.format("YYYY-MM-DD") === todayString;
+    return /* @__PURE__ */ React23.createElement(
       Box17,
       {
         key: day.toString(),
+        height: 40,
         flex: 1,
-        borderLeft: "1px solid",
-        borderColor: "divider",
-        position: "relative",
-        "data-testid": `week-day-column-${day.format("YYYY-MM-DD")}`,
-        onClick: () => onDayClick == null ? void 0 : onDayClick(day)
+        pl: 0.5,
+        textAlign: "center",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        bgcolor: isToday2 ? "primary.100" : "transparent",
+        borderRadius: isToday2 ? "6px 6px 0 0" : "0",
+        borderBottom: isToday2 ? 2 : 0,
+        borderColor: isToday2 ? "primary.main" : "transparent"
       },
-      hours2.map((hourIdx) => {
-        const borderType = getCellBorderType(hourIdx, dayEvents);
-        return /* @__PURE__ */ React22.createElement(
-          Box17,
-          {
-            key: hourIdx,
-            height: 60,
-            borderTop: "1px solid",
-            borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
-            borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
-          }
-        );
-      }),
-      dayEvents.map((event2) => {
-        const eventStart = day.isSame(event2.start, "day") ? event2.start : day.startOf("day").hour(0).minute(0);
-        const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(23).minute(59);
-        const startMinutes = eventStart.hour() * 60 + eventStart.minute();
-        const durationMinutes = eventEnd.diff(eventStart, "minute");
-        return /* @__PURE__ */ React22.createElement(
-          CalendarEventCard,
-          {
-            key: `${event2.id}-${day.toString()}`,
-            event: event2,
-            color: stateColors[event2.state],
-            onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
-            sx: {
-              position: "absolute",
-              top: `${startMinutes + 15}px`,
-              left: 4,
-              right: 4,
-              cursor: "pointer",
-              height: "auto"
-            }
-          }
-        );
-      })
+      /* @__PURE__ */ React23.createElement(Typography19, { variant: "h6", color: "text.primary" }, day.format("D")),
+      /* @__PURE__ */ React23.createElement(Typography19, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
     );
-  })));
+  })), isLoading ? /* @__PURE__ */ React23.createElement(Box17, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ React23.createElement(CircularProgress2, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React23.createElement(
+    EmptyState,
+    {
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ React23.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : (
+    // Grid de horas y eventos
+    /* @__PURE__ */ React23.createElement(Box17, { display: "flex", flex: 1 }, /* @__PURE__ */ React23.createElement(Box17, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ React23.createElement(
+      Box17,
+      {
+        key: h,
+        height: 60,
+        textAlign: "right",
+        pr: 1,
+        borderColor: "divider"
+      },
+      /* @__PURE__ */ React23.createElement(Typography19, { variant: "caption", color: "text.secondary" }, dayjs5().hour(h).format("h A"))
+    ))), days.map((day) => {
+      const dayEvents = events.filter(
+        (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
+      ).filter((event2) => {
+        const startsInRange = event2.start.hour() >= startHour && event2.start.hour() <= endHour;
+        const endsInRange = event2.end.hour() >= startHour && event2.end.hour() <= endHour;
+        return startsInRange || endsInRange;
+      }).sort((a, b) => a.start.valueOf() - b.start.valueOf());
+      return /* @__PURE__ */ React23.createElement(
+        Box17,
+        {
+          key: day.toString(),
+          flex: 1,
+          borderLeft: "1px solid",
+          borderColor: "divider",
+          position: "relative",
+          "data-testid": `week-day-column-${day.format("YYYY-MM-DD")}`,
+          onClick: () => onDayClick == null ? void 0 : onDayClick(day)
+        },
+        hours.map((hourIdx) => {
+          const borderType = getCellBorderType(hourIdx, dayEvents);
+          return /* @__PURE__ */ React23.createElement(
+            Box17,
+            {
+              key: hourIdx,
+              height: 60,
+              borderTop: "1px solid",
+              borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
+              borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
+            }
+          );
+        }),
+        dayEvents.map((event2) => {
+          const eventStart = day.isSame(event2.start, "day") ? event2.start : day.startOf("day").hour(startHour).minute(0);
+          const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(endHour).minute(59);
+          const startMinutes = (eventStart.hour() - startHour) * 60 + eventStart.minute();
+          const durationMinutes = eventEnd.diff(eventStart, "minute");
+          return /* @__PURE__ */ React23.createElement(
+            CalendarEventCard,
+            {
+              key: `${event2.id}-${day.toString()}`,
+              event: event2,
+              color: stateColors[event2.state],
+              onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+              onHover: onEventHover,
+              sx: {
+                position: "absolute",
+                top: `${startMinutes}px`,
+                left: 4,
+                right: 4,
+                cursor: "pointer",
+                height: `${durationMinutes}px`
+              }
+            }
+          );
+        })
+      );
+    }))
+  ));
 };
 
 // src/Components/Calendario/Views/DayView.tsx
-import React23 from "react";
-import { Box as Box18, Typography as Typography20 } from "@mui/material";
+import React24 from "react";
+import { Box as Box18, CircularProgress as CircularProgress3, Typography as Typography20 } from "@mui/material";
 import dayjs6 from "dayjs";
-var hours = Array.from({ length: 24 }, (_, i) => i);
-var DayView = ({ events, currentDate, onEventClick }) => {
+var DayView = ({
+  events,
+  currentDate,
+  isLoading,
+  onEventClick,
+  onEventHover,
+  startHour = 0,
+  endHour = 24
+}) => {
+  const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
   const getCellBorderType = (cellHour, dayEvents2) => {
     for (const event2 of dayEvents2) {
       const start = event2.start.hour() + event2.start.minute() / 60;
@@ -2960,8 +3315,7 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       const cellStart = cellHour;
       const cellEnd = cellHour + 1;
       if (cellEnd > start && cellStart < end) {
-        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
-          return "full";
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01) return "full";
         if (Math.abs(cellStart - start) < 0.01) return "start";
         if (Math.abs(cellEnd - end) < 0.01) return "end";
         return "middle";
@@ -2972,20 +3326,15 @@ var DayView = ({ events, currentDate, onEventClick }) => {
   const dayEvents = events.filter(
     (event2) => currentDate.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
   );
-  return /* @__PURE__ */ React23.createElement(Box18, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React23.createElement(Box18, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ React23.createElement(Box18, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ React23.createElement(
-    Box18,
+  const noEvents = events.length === 0;
+  return /* @__PURE__ */ React24.createElement(Box18, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React24.createElement(Box18, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ React24.createElement(Box18, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ React24.createElement(Box18, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ React24.createElement(Typography20, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ React24.createElement(Typography20, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ React24.createElement(Box18, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ React24.createElement(CircularProgress3, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ React24.createElement(
+    EmptyState,
     {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      textAlign: "start",
-      gap: 0.5,
-      py: 1,
-      bgcolor: "primary.50"
-    },
-    /* @__PURE__ */ React23.createElement(Typography20, { variant: "h6", color: "text.secondary" }, currentDate.format("D")),
-    /* @__PURE__ */ React23.createElement(Typography20, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd"))
-  )), /* @__PURE__ */ React23.createElement(Box18, { display: "flex", flex: 1 }, /* @__PURE__ */ React23.createElement(Box18, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ React23.createElement(
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ React24.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : /* @__PURE__ */ React24.createElement(Box18, { display: "flex", flex: 1 }, /* @__PURE__ */ React24.createElement(Box18, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ React24.createElement(
     Box18,
     {
       key: h,
@@ -2996,10 +3345,10 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       borderRight: "1px solid",
       borderColor: "divider"
     },
-    /* @__PURE__ */ React23.createElement(Typography20, { variant: "caption", color: "text.secondary" }, dayjs6().hour(h).format("h A"))
-  ))), /* @__PURE__ */ React23.createElement(Box18, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    /* @__PURE__ */ React24.createElement(Typography20, { variant: "caption", color: "text.secondary" }, dayjs6().hour(h).format("h A"))
+  ))), /* @__PURE__ */ React24.createElement(Box18, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
     const borderType = getCellBorderType(hourIdx, dayEvents);
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React24.createElement(
       Box18,
       {
         key: hourIdx,
@@ -3010,20 +3359,26 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       }
     );
   }), dayEvents.map((event2) => {
-    const eventStart = currentDate.isSame(event2.start, "day") ? event2.start : currentDate.startOf("day").hour(0).minute(0);
-    const eventEnd = currentDate.isSame(event2.end, "day") ? event2.end : currentDate.endOf("day").hour(23).minute(59);
-    const startMinutes = eventStart.hour() * 60 + eventStart.minute();
-    const durationMinutes = eventEnd.diff(eventStart, "minute");
-    return /* @__PURE__ */ React23.createElement(
+    const eventStart = currentDate.isSame(event2.start, "day") ? event2.start : currentDate.startOf("day");
+    const eventEnd = currentDate.isSame(event2.end, "day") ? event2.end : currentDate.endOf("day");
+    const minStart = currentDate.hour(startHour).minute(0);
+    const maxEnd = currentDate.hour(endHour).minute(0);
+    const clampedStart = eventStart.isBefore(minStart) ? minStart : eventStart;
+    const clampedEnd = eventEnd.isAfter(maxEnd) ? maxEnd : eventEnd;
+    const startMinutes = (clampedStart.hour() - startHour) * 60 + clampedStart.minute();
+    const durationMinutes = clampedEnd.diff(clampedStart, "minute");
+    return /* @__PURE__ */ React24.createElement(
       CalendarEventCard,
       {
         key: `${event2.id}-${currentDate.toString()}`,
         event: event2,
         color: stateColors[event2.state],
-        onClick: () => onEventClick == null ? void 0 : onEventClick(event2),
+        onClick: () => onEventClick == null ? void 0 : onEventClick(event2, currentDate),
+        onHover: onEventHover,
         sx: {
           position: "absolute",
-          top: `${startMinutes + 15}px`,
+          top: `${startMinutes}px`,
+          height: `${durationMinutes}px`,
           left: 4,
           right: 4
         }
@@ -3033,14 +3388,20 @@ var DayView = ({ events, currentDate, onEventClick }) => {
 };
 
 // src/Components/Calendario/Calendar.tsx
+import dayjs7 from "dayjs";
 var Calendar = ({
   events,
   onDayClick,
   onMoreClick,
   onEventClick,
+  onEventHover,
   view: initialView = "month",
   onViewChange,
-  toolbar
+  toolbar,
+  isLoading = false,
+  startHour = 0,
+  // <- valor por defecto
+  endHour = 23
 }) => {
   const [view, setView] = useState12(initialView);
   const [currentDate, setCurrentDate] = useState12(dayjs7());
@@ -3056,7 +3417,7 @@ var Calendar = ({
     else if (action === "TODAY") newDate = dayjs7();
     setCurrentDate(newDate);
   };
-  return /* @__PURE__ */ React24.createElement(Box19, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(Box19, null, /* @__PURE__ */ React25.createElement(
     CalendarToolbar,
     {
       labelDate: currentDate,
@@ -3065,39 +3426,203 @@ var Calendar = ({
       onNavigate: handleNavigate
     },
     toolbar
-  ), view === "month" && /* @__PURE__ */ React24.createElement(
+  ), isLoading ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Box19, null, /* @__PURE__ */ React25.createElement(
+    Box19,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "400px"
+    },
+    /* @__PURE__ */ React25.createElement(CircularProgress4, { variant: "indeterminate" })
+  ))) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, view === "month" && /* @__PURE__ */ React25.createElement(
     MonthView,
     {
       events,
+      currentDate,
       onDayClick,
       onMoreClick,
       onEventClick,
-      currentDate
+      onEventHover
     }
-  ), view === "week" && /* @__PURE__ */ React24.createElement(
+  ), view === "week" && /* @__PURE__ */ React25.createElement(
     WeekView,
     {
       events,
       currentDate,
       onDayClick,
       onMoreClick,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ), view === "day" && /* @__PURE__ */ React24.createElement(
+  ), view === "day" && /* @__PURE__ */ React25.createElement(
     DayView,
     {
       events,
       currentDate,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ));
+  )));
+};
+
+// src/Components/SCTime.tsx
+import React26, { useState as useState13 } from "react";
+import { Box as Box20, InputAdornment as InputAdornment6, Popover as Popover5, ClickAwayListener } from "@mui/material";
+import { LocalizationProvider as LocalizationProvider3 } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs as AdapterDayjs2 } from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs8 from "dayjs";
+import "dayjs/locale/es";
+import { LicenseInfo as LicenseInfo3 } from "@mui/x-license-pro";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { TimeField } from "@mui/x-date-pickers/TimeField";
+import { DigitalClock } from "@mui/x-date-pickers/DigitalClock";
+var SCTime = ({
+  label = "Hora",
+  required = false,
+  disabled = false,
+  background = "transparent",
+  timeStep = 5,
+  state,
+  setState
+}) => {
+  LicenseInfo3.setLicenseKey(
+    "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
+  );
+  const isTimeEmpty = required && !state;
+  const hasError = isTimeEmpty;
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const [isOpenPopover, setIsOpenPopover] = useState13(false);
+  const [popoverPlacement, setPopoverPlacement] = useState13("bottom");
+  const detectPlacement = (element) => {
+    const rect = element.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const spaceBelow = windowHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const popoverHeight = 300;
+    if (spaceBelow < popoverHeight && spaceAbove > spaceBelow) {
+      setPopoverPlacement("top");
+    } else {
+      setPopoverPlacement("bottom");
+    }
+  };
+  const handleTimeFieldClick = (event2) => {
+    if (!disabled) {
+      const target = event2.currentTarget;
+      setAnchorEl(target);
+      detectPlacement(target);
+      setIsOpenPopover(true);
+    }
+  };
+  const handleTimeChange = (newValue) => {
+    const dayjsValue = newValue ? dayjs8(newValue) : null;
+    setState(dayjsValue);
+    setIsOpenPopover(false);
+    setAnchorEl(null);
+  };
+  const handleClose = () => {
+    setIsOpenPopover(false);
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ React26.createElement(LocalizationProvider3, { dateAdapter: AdapterDayjs2 }, /* @__PURE__ */ React26.createElement(Box20, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ React26.createElement(
+    TimeField,
+    {
+      label,
+      value: state,
+      disabled,
+      required,
+      error: hasError,
+      onClick: handleTimeFieldClick,
+      slotProps: {
+        textField: {
+          InputProps: {
+            endAdornment: /* @__PURE__ */ React26.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React26.createElement(
+              AccessTimeIcon,
+              {
+                color: disabled ? "disabled" : "action",
+                sx: { cursor: disabled ? "default" : "pointer" },
+                fontSize: "small"
+              }
+            )),
+            sx: {
+              backgroundColor: background,
+              padding: "8px 12px",
+              cursor: disabled ? "default" : "pointer",
+              "& input": {
+                cursor: disabled ? "default" : "pointer"
+              }
+            }
+          }
+        }
+      },
+      sx: {
+        width: "100%",
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "default" : "pointer"
+        },
+        "& .MuiPickersSectionList-root": {
+          padding: "0px !important"
+        }
+      }
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    Popover5,
+    {
+      open: isOpenPopover,
+      anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: popoverPlacement === "top" ? "top" : "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: popoverPlacement === "top" ? "bottom" : "top",
+        horizontal: "left"
+      },
+      marginThreshold: 0,
+      disableScrollLock: true,
+      slotProps: {
+        paper: {
+          sx: {
+            boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+            borderRadius: 1,
+            border: "1px solid #e0e0e0",
+            maxHeight: "300px",
+            overflow: "visible"
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React26.createElement(ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ React26.createElement(Box20, { sx: { p: 0 } }, /* @__PURE__ */ React26.createElement(
+      DigitalClock,
+      {
+        value: state,
+        onChange: handleTimeChange,
+        timeStep,
+        sx: {
+          "& .MuiList-root": {
+            maxHeight: "250px",
+            overflow: "auto"
+          },
+          "& .MuiMenuItem-root": {
+            fontSize: "0.875rem",
+            py: 0.5
+          }
+        }
+      }
+    )))
+  )));
 };
 
 // src/Theme/index.ts
 import { createTheme } from "@mui/material/styles";
 
 // src/Theme/components.ts
-import React25 from "react";
+import React27 from "react";
 import {
   InfoRounded as InfoRounded2,
   CheckCircleRounded as CheckCircleRounded2,
@@ -3800,10 +4325,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: React25.createElement(CheckCircleRounded2),
-        error: React25.createElement(ErrorRounded2),
-        warning: React25.createElement(WarningRounded2),
-        info: React25.createElement(InfoRounded2)
+        success: React27.createElement(CheckCircleRounded2),
+        error: React27.createElement(ErrorRounded2),
+        warning: React27.createElement(WarningRounded2),
+        info: React27.createElement(InfoRounded2)
       }
     },
     variants: [
@@ -4862,6 +5387,7 @@ export {
   SCTabs,
   SCTextArea,
   SCTextField,
+  SCTime,
   SCToastNotification,
   SincoTheme,
   ToastProgress,