componentes-sinco 1.1.21 → 1.1.23

package/dist/index.d.cts

@@ -715,8 +715,8 @@ interface SCDatePickerProps {
     required?: boolean;
     disabled?: boolean;
     background?: string;
-    state: Dayjs | null;
-    setState: (value: Dayjs | null) => void;
+    state: Dayjs;
+    setState: (value: Dayjs) => void;
     width?: string;
 }
 declare const SCDatePicker: ({ label, required, disabled, background, state, setState, width }: SCDatePickerProps) => React__default.JSX.Element;

package/dist/index.d.ts

@@ -715,8 +715,8 @@ interface SCDatePickerProps {
     required?: boolean;
     disabled?: boolean;
     background?: string;
-    state: Dayjs | null;
-    setState: (value: Dayjs | null) => void;
+    state: Dayjs;
+    setState: (value: Dayjs) => void;
     width?: string;
 }
 declare const SCDatePicker: ({ label, required, disabled, background, state, setState, width }: SCDatePickerProps) => React__default.JSX.Element;

package/dist/index.js

@@ -1572,7 +1572,10 @@ var SCTextArea = ({
           setState(e.target.value.substring(0, maxLength));
         }
       },
-      autoComplete: "off"
+      autoComplete: "off",
+      InputLabelProps: {
+        shrink: true
+      }
     }
   )), /* @__PURE__ */ React9.createElement(Stack4, null, /* @__PURE__ */ React9.createElement(
     Typography5,
@@ -1716,7 +1719,10 @@ var StopEvent = ({ children }) => {
         e.preventDefault();
         e.stopPropagation();
       },
-      onClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
       display: "inline-flex",
       alignItems: "center"
     },
@@ -1829,17 +1835,19 @@ function SCAutocomplete({
     (item) => getItemValue(item).value === state.hiddenValue
   ) || null;
   const [open, setOpen] = React11.useState(false);
+  const componentClickActiveRef = React11.useRef(false);
   const hayOnComponentClickGlobal = useMemo3(() => {
     return data.some((opt) => {
       const item = getItemValue(opt);
       return Boolean(item.onComponentClick);
     });
-  }, [data]);
+  }, [data, getItemValue]);
   return /* @__PURE__ */ React11.createElement(React11.Fragment, null, data && /* @__PURE__ */ React11.createElement(
     Autocomplete,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, hayOnComponentClickGlobal ? { disableCloseOnSelect: true } : {}), hayOnComponentClickGlobal ? { blurOnSelect: false } : {}), hayOnComponentClickGlobal ? { open } : {}), hayOnComponentClickGlobal ? { onOpen: () => setOpen(true) } : {}), hayOnComponentClickGlobal ? {
       onClose: (event2, reason) => {
-        if (["blur", "selectOption"].includes(reason)) return;
+        if (componentClickActiveRef.current) return;
+        if (reason === "selectOption") return;
         setOpen(false);
       }
     } : {}), {
@@ -1925,11 +1933,22 @@ function SCAutocomplete({
           item.component != null ? /* @__PURE__ */ React11.createElement(StopEvent, null, /* @__PURE__ */ React11.createElement(
             "span",
             {
-              onClick: (e) => {
+              onMouseDown: (event2) => {
+                componentClickActiveRef.current = true;
+                event2.preventDefault();
+                event2.stopPropagation();
+                event2.defaultMuiPrevented = true;
+              },
+              onClick: (event2) => {
                 var _a2;
-                e.preventDefault();
-                e.stopPropagation();
-                (_a2 = item.onComponentClick) == null ? void 0 : _a2.call(item, e, option);
+                event2.preventDefault();
+                event2.stopPropagation();
+                event2.defaultMuiPrevented = true;
+                (_a2 = item.onComponentClick) == null ? void 0 : _a2.call(item, event2, option);
+                setOpen(true);
+                setTimeout(() => {
+                  componentClickActiveRef.current = false;
+                }, 200);
               }
             },
             item.component
@@ -3049,6 +3068,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, r
   const [pageSize, setPageSize] = useState13(rows);
   const [arrayRows, setArrayRows] = useState13([]);
   const [selectionModel, setSelectionModel] = useState13([]);
+  debugger;
   useEffect13(() => {
     var _a;
     if (setSelectedRow) {
@@ -3220,8 +3240,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, r
           "maxHeight": "0px !important"
         },
         "& .MuiDataGrid-cell": {
-          //padding: '0 !important', //padding de cada celda
-          background: "white"
+          padding: groupColumns != void 0 ? "0px !important" : "0px 10px !important",
+          backgroundColor: "white"
         },
         // Fila seleccionada (cuando selectionModel selecciona filas)
         "& .MuiDataGrid-row.Mui-selected .MuiDataGrid-cell": {
@@ -3992,12 +4012,13 @@ var isToday = (date) => {
   return date.isSame(dayjs3(), "day");
 };
 var stateColors = {
-  Asignada: "warning.main",
-  Finalizado: "primary.main",
-  Vencida: "error.main",
-  EnProgreso: "success.main",
-  Aplazada: "grey.400",
-  Generada: "secondary.main"
+  Asignada: "warning.200",
+  Generada: "default.main",
+  EnProgreso: "primary.200",
+  Aplazada: "secondary.A400",
+  Vencida: "error.200",
+  Finalizada: "success.200"
+  //#FCE4C0
 };
 
 // src/Components/Calendario/Event.tsx
@@ -4295,7 +4316,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
         {
           key: `${event2.id}-${day.toString()}`,
           event: event2,
-          color: stateColors[event2.state],
+          color: stateColors[event2.state == "En progreso" ? "EnProgreso" : event2.state],
           onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
           onHover: onEventHover
         }
@@ -4916,7 +4937,7 @@ var SCCard = ({ width, title, image, iconTitle, actionsTitle, subtitle, content,
 
 // src/Components/SCActivityCalendar.tsx
 import React42, { useState as useState23 } from "react";
-import { Typography as Typography25, IconButton as IconButton15, Box as Box27, Badge as Badge2 } from "@mui/material";
+import { Typography as Typography25, IconButton as IconButton15, Box as Box27, Badge as Badge2, Menu as Menu3, MenuItem as MenuItem8, ListItemIcon as ListItemIcon6, Popover as Popover7 } from "@mui/material";
 import Grid11 from "@mui/material/Grid";
 import { AdapterDateFns as AdapterDateFns2 } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as LocalizationProvider4 } from "@mui/x-date-pickers/LocalizationProvider";
@@ -4927,6 +4948,11 @@ import KeyboardDoubleArrowDownIcon2 from "@mui/icons-material/KeyboardDoubleArro
 import KeyboardDoubleArrowUpIcon2 from "@mui/icons-material/KeyboardDoubleArrowUp";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
+import CheckCircleOutlineOutlinedIcon from "@mui/icons-material/CheckCircleOutlineOutlined";
+import EventBusyOutlinedIcon from "@mui/icons-material/EventBusyOutlined";
+import PendingOutlinedIcon from "@mui/icons-material/PendingOutlined";
 var SCActivityCalendar = ({
   //informativas
   //apariencia
@@ -4943,6 +4969,11 @@ var SCActivityCalendar = ({
   const [fechaSeleccionada, setFechaSeleccionada] = useState23();
   const [stateVal, setstateVal] = React42.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = React42.useState(false);
+  const [anchorPopoverFiltro, setAnchorPopoverFiltro] = useState23(null);
+  const [datosEventos, setDatosEventos] = React42.useState(events);
+  console.log("eventos", events);
+  console.log("datosEventos", datosEventos);
+  const openPopoverFiltro = Boolean(anchorPopoverFiltro);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = startOfWeek2(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => addDays2(inicioSemana, i));
@@ -4951,6 +4982,11 @@ var SCActivityCalendar = ({
       handleConvertFecha(fecha);
     }
   }, [fecha]);
+  React42.useEffect(() => {
+    if (events != null) {
+      setDatosEventos(events);
+    }
+  }, [events]);
   const handleConvertFecha = (fecha2) => {
     if (fecha2) {
       let day = (fecha2.getDate() < 10 ? "0" : "") + fecha2.getDate();
@@ -4970,6 +5006,22 @@ var SCActivityCalendar = ({
       // 0 = domingo, 1 = lunes
     })
   });
+  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__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(LocalizationProvider4, { dateAdapter: AdapterDateFns2, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React42.createElement(Box27, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React42.createElement(Box27, { sx: { width: "100%", padding: "0px", background: "transparent" } }, /* @__PURE__ */ React42.createElement(Grid11, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 16px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ React42.createElement(Grid11, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React42.createElement(Box27, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React42.createElement(Typography25, { sx: { fontSize: "12px !important", color: "#10184099" } }, format2(dia, "EEEE", { locale: es2 }).charAt(0).toUpperCase())), /* @__PURE__ */ React42.createElement(
     Box27,
     {
@@ -4993,7 +5045,7 @@ var SCActivityCalendar = ({
       slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
       sx: {
         "& .MuiDateCalendar-root": {
-          width: "97.5%",
+          width: "91.5%",
           maxWidth: "unset",
           margin: 0,
           padding: "0px 16px"
@@ -5009,7 +5061,36 @@ var SCActivityCalendar = ({
       },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowUpIcon2, { color: "action" }))))), /* @__PURE__ */ React42.createElement(Box27, { 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__ */ React42.createElement(
+  ), /* @__PURE__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowUpIcon2, { color: "action" }))))), /* @__PURE__ */ React42.createElement(IconButton15, { onClick: handleClickPopoverFiltro, sx: { position: "fixed", right: "calc(100% - 96%)", top: openCalendar == false ? "220px" : "380px" } }, /* @__PURE__ */ React42.createElement(FilterListIcon, { color: "action" })), /* @__PURE__ */ React42.createElement(
+    Popover7,
+    {
+      open: openPopoverFiltro,
+      anchorEl: anchorPopoverFiltro,
+      onClose: handleClosePopoverFiltro,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      }
+    },
+    /* @__PURE__ */ React42.createElement(
+      Menu3,
+      {
+        id: "basic-menu",
+        anchorEl: anchorPopoverFiltro,
+        open: openPopoverFiltro,
+        onClose: handleClosePopoverFiltro,
+        slotProps: {
+          list: {
+            "aria-labelledby": "basic-button"
+          }
+        }
+      },
+      /* @__PURE__ */ React42.createElement(MenuItem8, { onClick: (event2) => filtrarActividad(event2, "Todo") }, /* @__PURE__ */ React42.createElement(ListItemIcon6, null, /* @__PURE__ */ React42.createElement(CalendarMonthOutlinedIcon, { fontSize: "small" })), /* @__PURE__ */ React42.createElement(Typography25, { variant: "inherit" }, "Ver todo")),
+      /* @__PURE__ */ React42.createElement(MenuItem8, { onClick: (event2) => filtrarActividad(event2, "Finalizada") }, /* @__PURE__ */ React42.createElement(ListItemIcon6, null, /* @__PURE__ */ React42.createElement(CheckCircleOutlineOutlinedIcon, { fontSize: "small" })), /* @__PURE__ */ React42.createElement(Typography25, { variant: "inherit" }, "Ver finalizadas")),
+      /* @__PURE__ */ React42.createElement(MenuItem8, { onClick: (event2) => filtrarActividad(event2, "Aplazada") }, /* @__PURE__ */ React42.createElement(ListItemIcon6, null, /* @__PURE__ */ React42.createElement(EventBusyOutlinedIcon, { fontSize: "small" })), /* @__PURE__ */ React42.createElement(Typography25, { variant: "inherit" }, "Ver aplazadas")),
+      /* @__PURE__ */ React42.createElement(MenuItem8, { onClick: (event2) => filtrarActividad(event2, "En progreso") }, /* @__PURE__ */ React42.createElement(ListItemIcon6, null, /* @__PURE__ */ React42.createElement(PendingOutlinedIcon, { fontSize: "small" })), /* @__PURE__ */ React42.createElement(Typography25, { variant: "inherit" }, "Ver en progreso"))
+    )
+  ), /* @__PURE__ */ React42.createElement(Box27, { 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__ */ React42.createElement(
     Box27,
     {
       key: dayIndex
@@ -5026,9 +5107,12 @@ var SCActivityCalendar = ({
       flexDirection: "column"
     } }, (() => {
       const esDomingo = day.getDay() === 0;
-      const eventosDelDia = events.filter(
+      console.log("D\xEDa:", day);
+      console.log("Filtrando eventos para el d\xEDa:", datosEventos);
+      const eventosDelDia = datosEventos.filter(
         (event2) => new Date(event2.date).toDateString() === day.toDateString()
       );
+      console.log("Cantidad eventos para el d\xEDa:", eventosDelDia);
       if (eventosDelDia.length > 0) {
         return eventosDelDia.map((event2, idx) => /* @__PURE__ */ React42.createElement(
           SCListContent,
@@ -5036,10 +5120,10 @@ var SCActivityCalendar = ({
             key: idx,
             options: [{
               title: event2.activityDescription,
-              subtitle: /* @__PURE__ */ React42.createElement(React42.Fragment, null, configRangeHour && new Date(event2.date.replace("00:00:00", event2.startTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getHours() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getHours() && new Date(event2.date.replace("00:00:00", event2.startTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getMinutes() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, "Todo el dia"), /* @__PURE__ */ React42.createElement(LightModeOutlinedIcon, { fontSize: "small" })) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ React42.createElement(ArrowForwardIcon, { fontSize: "small" }), /* @__PURE__ */ React42.createElement(Typography25, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
+              subtitle: /* @__PURE__ */ React42.createElement(React42.Fragment, null, configRangeHour && (/* @__PURE__ */ new Date(event2.date + "T" + event2.startTime)).getHours() === (/* @__PURE__ */ new Date(event2.date + "T" + configRangeHour.split("-")[0])).getHours() && (/* @__PURE__ */ new Date(event2.date + "T" + event2.finalTime)).getHours() === (/* @__PURE__ */ new Date(event2.date + "T" + configRangeHour.split("-")[1])).getHours() && (/* @__PURE__ */ new Date(event2.date + "T" + event2.startTime)).getMinutes() === (/* @__PURE__ */ new Date(event2.date + "T" + configRangeHour.split("-")[0])).getMinutes() && (/* @__PURE__ */ new Date(event2.date + "T" + event2.finalTime)).getMinutes() === (/* @__PURE__ */ new Date(event2.date + "T" + configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, "Todo el dia"), /* @__PURE__ */ React42.createElement(LightModeOutlinedIcon, { fontSize: "small" })) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ React42.createElement(ArrowForwardIcon, { fontSize: "small" }), /* @__PURE__ */ React42.createElement(Typography25, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
               iconLeftColor: event2.state === "Finalizada" ? "#C7E49D" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",
-              description: /* @__PURE__ */ React42.createElement(Grid11, { display: "flex", flexDirection: "column", alignItems: "flex-start" }, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ React42.createElement(Grid11, { display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, sx: { marginLeft: "7px" } }, /* @__PURE__ */ React42.createElement(Badge2, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ React42.createElement(Typography25, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null, /* @__PURE__ */ React42.createElement(Typography25, { variant: "body2" }, event2.equipmentDescription)),
+              description: /* @__PURE__ */ React42.createElement(React42.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Badge2, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ React42.createElement(Typography25, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
               divider: eventosDelDia.length === idx + 1 ? false : true,
               colorDisabled: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0
@@ -5543,7 +5627,7 @@ var SCSnackBar = ({
 
 // src/Components/SCAppBar.tsx
 import React46, { useState as useState26, useEffect as useEffect22 } from "react";
-import { Menu as Menu3, Box as Box29, Typography as Typography27, MenuItem as MenuItem8, IconButton as IconButton17, Badge as Badge3 } from "@mui/material";
+import { Menu as Menu4, Box as Box29, Typography as Typography27, MenuItem as MenuItem9, IconButton as IconButton17, Badge as Badge3 } from "@mui/material";
 import Grid12 from "@mui/material/Grid";
 import "dayjs/locale/es";
 import MenuIcon from "@mui/icons-material/Menu";
@@ -5599,7 +5683,7 @@ var SCAppBar = ({
       color: isOnline ? "success" : "error"
     }
   ), /* @__PURE__ */ React46.createElement(Typography27, { variant: "caption", color: "text.secondary" }, isOnline ? "Online" : "Offline")), visibleMenu && /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(IconButton17, { size: "medium", onClick: handleMenuClick }, /* @__PURE__ */ React46.createElement(MenuIcon, { color: "action" })), /* @__PURE__ */ React46.createElement(
-    Menu3,
+    Menu4,
     {
       anchorEl,
       open: openMenu,
@@ -5614,7 +5698,7 @@ var SCAppBar = ({
       },
       sx: { zIndex: "2000" }
     },
-    options.map((option, index) => /* @__PURE__ */ React46.createElement(MenuItem8, { onClick: option.fn, disabled: option.disabled, key: index }, /* @__PURE__ */ React46.createElement(Typography27, { variant: "body2" }, option.name)))
+    options.map((option, index) => /* @__PURE__ */ React46.createElement(MenuItem9, { onClick: option.fn, disabled: option.disabled, key: index }, /* @__PURE__ */ React46.createElement(Typography27, { variant: "body2" }, option.name)))
   )))), /* @__PURE__ */ React46.createElement(Box29, { sx: { padding: "8px 16px 0px 16px" } }, contenidoExtra)));
 };