componentes-sinco 1.1.28 → 1.1.30

package/dist/index.cjs

@@ -632,7 +632,8 @@ var Attachment = ({
         cursor: "pointer",
         transition: "all 0.2s ease-in-out",
         ":hover": {
-          backgroundColor: error ? "error.50" : "action.hover"
+          border: "1px dashed #2063A080",
+          backgroundColor: error ? "#D143430A" : "#2063A00A"
         }
       }, sx)
     },
@@ -1314,13 +1315,15 @@ var CalendarToolbar = ({
     }
     return labelDate.format(" DD MMMM YYYY");
   };
-  return /* @__PURE__ */ import_react8.default.createElement(import_material6.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, null, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(import_material6.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 1.5 }, /* @__PURE__ */ import_react8.default.createElement(import_material6.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-start", gap: 1.5 }, /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, null, /* @__PURE__ */ import_react8.default.createElement(
     import_material6.Chip,
     {
+      size: "medium",
       label: "Hoy",
-      icon: /* @__PURE__ */ import_react8.default.createElement(import_icons_material8.LightModeOutlined, { fontSize: "small" }),
+      icon: /* @__PURE__ */ import_react8.default.createElement(import_icons_material8.EventOutlined, { fontSize: "small" }),
       color: "primary",
-      onClick: () => onNavigate("TODAY")
+      onClick: () => onNavigate("TODAY"),
+      variant: "standard"
     }
   )), /* @__PURE__ */ import_react8.default.createElement(import_material6.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react8.default.createElement(import_material6.IconButton, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material8.ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ import_react8.default.createElement(import_material6.IconButton, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material8.ChevronRight, { fontSize: "small" })), /* @__PURE__ */ import_react8.default.createElement(import_material6.Typography, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ import_react8.default.createElement(import_material6.IconButton, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material8.KeyboardArrowDown, { fontSize: "small" })), /* @__PURE__ */ import_react8.default.createElement(
     import_material6.Menu,
@@ -1334,7 +1337,7 @@ var CalendarToolbar = ({
     /* @__PURE__ */ import_react8.default.createElement(import_material6.MenuItem, { onClick: () => handleViewChange("month") }, "Mes"),
     /* @__PURE__ */ import_react8.default.createElement(import_material6.MenuItem, { onClick: () => handleViewChange("week") }, "Semana"),
     /* @__PURE__ */ import_react8.default.createElement(import_material6.MenuItem, { onClick: () => handleViewChange("day") }, "D\xEDa")
-  )), children ? /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, null, children) : /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, { width: "24px" }), " ");
+  ))), children ? /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, null, children) : /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, { width: "24px" }), " ");
 };
 
 // src/Components/Calendario/Views/MonthView.tsx
@@ -3513,10 +3516,10 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
   const [openDrawer, setOpenDrawer] = import_react32.default.useState(false);
   const [selectedDay, setSelectedDay] = import_react32.default.useState(null);
   const [selectedEvents, setSelectedEvents] = import_react32.default.useState([]);
-  return /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { minWidth: CALENDAR_CONSTANTS.MIN_WIDTH }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ import_react32.default.createElement(import_material21.CircularProgress, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { minWidth: CALENDAR_CONSTANTS.MIN_WIDTH }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react32.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ import_react32.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ import_react32.default.createElement(import_material21.CircularProgress, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react32.default.createElement(
     EmptyState,
     {
-      containerHeight: "480px",
+      containerHeight: "calc(100vh - 130px)",
       title: "Inicia la gesti\xF3n de las actividades",
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ import_react32.default.createElement(LogoCalendario, null)
@@ -3596,30 +3599,47 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
           sx: { "& .MuiButtonBase-root": { width: "100%" } }
         },
         /* @__PURE__ */ import_react32.default.createElement(
-          SCDrawer,
+          import_material21.Button,
           {
-            width: CALENDAR_CONSTANTS.DRAWER_WIDTH,
-            title: day.format("DD [de] MMMM YYYY"),
-            open: openDrawer,
-            buttonDrawer: { text: `+ ${dayEvents.length}` },
-            anchor: "right",
-            actions: false,
-            arrayElements: [{
-              component: /* @__PURE__ */ import_react32.default.createElement(
-                DayEventsList,
-                {
-                  events: dayEvents,
-                  day,
-                  onEventClick,
-                  onEventHover
-                }
-              )
-            }]
-          }
+            size: "small",
+            variant: "text",
+            sx: { textTransform: "capitalize" },
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelectedDay(day);
+              setSelectedEvents(dayEvents);
+              setOpenDrawer(true);
+            }
+          },
+          `+ ${dayEvents.length}`
         )
       )
     );
-  }))));
+  })))), selectedDay && /* @__PURE__ */ import_react32.default.createElement(
+    SCDrawer,
+    {
+      width: CALENDAR_CONSTANTS.DRAWER_WIDTH,
+      title: selectedDay.format("DD [de] MMMM YYYY"),
+      open: openDrawer,
+      setOpen: (value) => {
+        setOpenDrawer(value);
+        if (!value) setSelectedDay(null);
+      },
+      anchor: "right",
+      actions: false,
+      arrayElements: [{
+        component: /* @__PURE__ */ import_react32.default.createElement(
+          DayEventsList,
+          {
+            events: selectedEvents,
+            day: selectedDay,
+            onEventClick,
+            onEventHover
+          }
+        )
+      }]
+    }
+  ));
 };
 
 // src/Components/Calendario/Views/WeekView.tsx
@@ -3683,7 +3703,7 @@ var WeekView = ({
   })), isLoading ? /* @__PURE__ */ import_react33.default.createElement(import_material22.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react33.default.createElement(import_material22.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react33.default.createElement(
     EmptyState,
     {
-      containerHeight: "480px",
+      containerHeight: "calc(100vh - 130px)",
       title: "Inicia la gesti\xF3n de las actividades",
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ import_react33.default.createElement(LogoCalendario, null)
@@ -3724,6 +3744,7 @@ var WeekView = ({
           return /* @__PURE__ */ import_react33.default.createElement(
             import_material22.Box,
             {
+              sx: { "&:hover": { bgcolor: "primary.50" } },
               key: hourIdx,
               height: 60,
               borderTop: "1px solid",
@@ -3780,7 +3801,7 @@ var DayView = ({
   return /* @__PURE__ */ import_react34.default.createElement(import_material23.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react34.default.createElement(import_material23.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react34.default.createElement(import_material23.Box, { width: CALENDAR_CONSTANTS.SIDEBAR_WIDTH, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react34.default.createElement(import_material23.Box, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ import_react34.default.createElement(import_material23.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ import_react34.default.createElement(import_material23.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ import_react34.default.createElement(import_material23.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ import_react34.default.createElement(import_material23.CircularProgress, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ import_react34.default.createElement(
     EmptyState,
     {
-      containerHeight: "480px",
+      containerHeight: "calc(100vh - 140px)",
       title: "Inicia la gesti\xF3n de las actividades",
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ import_react34.default.createElement(LogoCalendario, null)
@@ -3802,6 +3823,7 @@ var DayView = ({
     return /* @__PURE__ */ import_react34.default.createElement(
       import_material23.Box,
       {
+        sx: { "&:hover": { bgcolor: "primary.50" } },
         key: hourIdx,
         height: CALENDAR_CONSTANTS.DAY_HEIGHT,
         borderTop: "1px solid",
@@ -5897,7 +5919,7 @@ var import_Grid11 = __toESM(require("@mui/material/Grid"), 1);
 var import_ZoomOut = __toESM(require("@mui/icons-material/ZoomOut"), 1);
 var import_ZoomIn = __toESM(require("@mui/icons-material/ZoomIn"), 1);
 var import_RotateRight = __toESM(require("@mui/icons-material/RotateRight"), 1);
-var SCZoom = ({ label, required, disabled, background, width, height, image, bottom, left }) => {
+var SCZoom = ({ image, width, height, bottom, left }) => {
   const [zoom, setZoom] = (0, import_react57.useState)(1);
   const handleZoomIn = () => {
     setZoom((prev) => Math.min(prev + 0.2, 3));