componentes-sinco 1.1.11 → 1.1.13

package/dist/index.cjs

@@ -4691,7 +4691,7 @@ var SCTime = ({
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ import_react48.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react48.default.createElement(import_material32.Box, { sx: { position: "relative", width: width != null ? width : "99%" } }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react48.default.createElement(import_material32.Box, { sx: { position: "relative", width: width ? `${width}%` : "99%" } }, /* @__PURE__ */ import_react48.default.createElement(
     import_TimeField.TimeField,
     {
       label,
@@ -4757,7 +4757,7 @@ var SCTime = ({
             border: "1px solid #e0e0e0",
             maxHeight: "300px",
             overflow: "visible",
-            width: width != null ? width : "100%"
+            width: width ? `calc(${width}% - 15px)` : "97%"
           }
         }
       }
@@ -4774,6 +4774,7 @@ var SCTime = ({
             overflow: "auto"
           },
           "& .MuiMenuItem-root": {
+            minHeight: 24,
             fontSize: "0.875rem",
             py: 0.5
           }
@@ -4873,6 +4874,11 @@ var import_KeyboardDoubleArrowDown2 = __toESM(require("@mui/icons-material/Keybo
 var import_KeyboardDoubleArrowUp2 = __toESM(require("@mui/icons-material/KeyboardDoubleArrowUp"), 1);
 var import_ArrowForward = __toESM(require("@mui/icons-material/ArrowForward"), 1);
 var import_LightModeOutlined = __toESM(require("@mui/icons-material/LightModeOutlined"), 1);
+var import_FilterList = __toESM(require("@mui/icons-material/FilterList"), 1);
+var import_CalendarMonthOutlined = __toESM(require("@mui/icons-material/CalendarMonthOutlined"), 1);
+var import_CheckCircleOutlineOutlined = __toESM(require("@mui/icons-material/CheckCircleOutlineOutlined"), 1);
+var import_EventBusyOutlined = __toESM(require("@mui/icons-material/EventBusyOutlined"), 1);
+var import_PendingOutlined = __toESM(require("@mui/icons-material/PendingOutlined"), 1);
 var SCActivityCalendar = ({
   //informativas
   //apariencia
@@ -4889,6 +4895,9 @@ var SCActivityCalendar = ({
   const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react50.useState)();
   const [stateVal, setstateVal] = import_react50.default.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = import_react50.default.useState(false);
+  const [anchorPopoverFiltro, setAnchorPopoverFiltro] = (0, import_react50.useState)(null);
+  const [datosEventos, setDatosEventos] = import_react50.default.useState(events);
+  const openPopoverFiltro = Boolean(anchorPopoverFiltro);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = (0, import_date_fns2.startOfWeek)(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns2.addDays)(inicioSemana, i));
@@ -4916,7 +4925,23 @@ var SCActivityCalendar = ({
       // 0 = domingo, 1 = lunes
     })
   });
-  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", padding: "0px 16px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
+  const handleClickPopoverFiltro = (event2) => {
+    setAnchorPopoverFiltro(event2.currentTarget);
+  };
+  const handleClosePopoverFiltro = () => {
+    setAnchorPopoverFiltro(null);
+  };
+  const filtrarActividad = (event2, filtro) => {
+    if (filtro === "Todo") {
+      setDatosEventos(events);
+    } else {
+      const resultado = events.filter(
+        (item) => item.state === filtro
+      );
+      setDatosEventos(resultado);
+    }
+  };
+  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", padding: "0px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 16px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       onClick: () => setFecha(dia),
@@ -4939,7 +4964,7 @@ var SCActivityCalendar = ({
       slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
       sx: {
         "& .MuiDateCalendar-root": {
-          width: "100%",
+          width: "97.5%",
           maxWidth: "unset",
           margin: 0,
           padding: "0px 16px"
@@ -4955,7 +4980,36 @@ var SCActivityCalendar = ({
       },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { onClick: handleClickPopoverFiltro, sx: { position: "fixed", right: "calc(100% - 96%)", top: openCalendar == false ? "220px" : "380px" } }, /* @__PURE__ */ import_react50.default.createElement(import_FilterList.default, { color: "action" })), /* @__PURE__ */ import_react50.default.createElement(
+    import_material34.Popover,
+    {
+      open: openPopoverFiltro,
+      anchorEl: anchorPopoverFiltro,
+      onClose: handleClosePopoverFiltro,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      }
+    },
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_material34.Menu,
+      {
+        id: "basic-menu",
+        anchorEl: anchorPopoverFiltro,
+        open: openPopoverFiltro,
+        onClose: handleClosePopoverFiltro,
+        slotProps: {
+          list: {
+            "aria-labelledby": "basic-button"
+          }
+        }
+      },
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Todo") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CalendarMonthOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver todo")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Finalizada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CheckCircleOutlineOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver finalizadas")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Aplazada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_EventBusyOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver aplazadas")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "En progreso") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_PendingOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver en progreso"))
+    )
+  ), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       key: dayIndex
@@ -4972,7 +5026,7 @@ var SCActivityCalendar = ({
       flexDirection: "column"
     } }, (() => {
       const esDomingo = day.getDay() === 0;
-      const eventosDelDia = events.filter(
+      const eventosDelDia = datosEventos.filter(
         (event2) => new Date(event2.date).toDateString() === day.toDateString()
       );
       if (eventosDelDia.length > 0) {
@@ -5067,15 +5121,18 @@ var import_icons_material13 = require("@mui/icons-material");
 var import_PhotoCamera = __toESM(require("@mui/icons-material/PhotoCamera"), 1);
 var import_CancelOutlined = __toESM(require("@mui/icons-material/CancelOutlined"), 1);
 var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"), 1);
+var import_FileDownloadOutlined = __toESM(require("@mui/icons-material/FileDownloadOutlined"), 1);
 var AttachmentMobile = ({
   buttonAttachment,
   maxSize = 400,
   fileAccepted = "",
   initialFiles,
   deleteAction,
-  children,
+  downloadAction,
   onChange,
-  sx
+  children,
+  sx,
+  view = "button"
 }) => {
   const webcamRef = (0, import_react52.useRef)(null);
   const [abrirCamara, setAbrirCamara] = (0, import_react52.useState)(false);
@@ -5247,14 +5304,14 @@ var AttachmentMobile = ({
       setFiles(initialFiles);
     }
   }, []);
-  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", gap: 1 }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", sx }, children, /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", gap: 1 }, view == "button" ? /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", sx }, children, /* @__PURE__ */ import_react52.default.createElement(
     AttachmentButton,
     {
       buttonAttachment,
       open,
       setOpen
     }
-  )), /* @__PURE__ */ import_react52.default.createElement(import_CssBaseline.default, null), /* @__PURE__ */ import_react52.default.createElement(
+  )) : "", /* @__PURE__ */ import_react52.default.createElement(import_CssBaseline.default, null), /* @__PURE__ */ import_react52.default.createElement(
     import_material36.SwipeableDrawer,
     {
       slotProps: {
@@ -5419,7 +5476,17 @@ var AttachmentMobile = ({
         },
         file.uploadError && file.size / (1024 * 1024) > maxSize ? "Archivo super\xF3 el l\xEDmite \u2022 Carga fallida" : file.uploadError ? "Archivo duplicado o inv\xE1lido \u2022 Carga fallida" : `${(file.size / (1024 * 1024)).toFixed(2)}MB \u2022 ${file.type}`
       ))),
-      /* @__PURE__ */ import_react52.default.createElement(import_material36.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react52.default.createElement(
+      view == "file" ? /* @__PURE__ */ import_react52.default.createElement(import_material36.Tooltip, { title: "Descargar" }, /* @__PURE__ */ import_react52.default.createElement(
+        import_material36.IconButton,
+        {
+          size: "small",
+          onClick: () => downloadAction == null ? void 0 : downloadAction(file),
+          disabled: file.uploadError,
+          "aria-label": `Descargar ${file.name}`
+        },
+        /* @__PURE__ */ import_react52.default.createElement(import_FileDownloadOutlined.default, { fontSize: "small", color: "action" })
+      )) : "",
+      view == "button" ? /* @__PURE__ */ import_react52.default.createElement(import_material36.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react52.default.createElement(
         import_material36.IconButton,
         {
           size: "small",
@@ -5427,7 +5494,7 @@ var AttachmentMobile = ({
           "aria-label": `Eliminar ${file.name}`
         },
         /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.DeleteOutline, { fontSize: "small", color: "action" })
-      ))
+      )) : ""
     ))
   ));
 };