componentes-sinco 1.0.8 → 1.0.10-rc.0

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(src_exports, {
   PageHeader: () => PageHeader,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
+  SCCard: () => SCCard,
   SCDataGrid: () => SCDataGrid,
   SCDataGridInitial: () => SCDataGridInitial,
   SCDateRange: () => SCDateRange,
@@ -2870,7 +2871,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
 };
 
 // src/Components/Calendario/Calendar.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 var import_material22 = require("@mui/material");
 
 // src/Components/Calendario/CalendarToolbar.tsx
@@ -2907,7 +2908,6 @@ var CalendarToolbar = ({
   };
   const getFormattedDate = () => {
     const sunday = labelDate.day(0);
-    const saturday = sunday.add(6, "day");
     if (view === "month") {
       const textMonth = labelDate.format("MMMM YYYY");
       return textMonth.charAt(0).toUpperCase() + textMonth.slice(1);
@@ -3042,7 +3042,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
           onMouseEnter: handlePopoverOpen,
           onMouseLeave: handlePopoverClose
         },
-        capitalize(event2.title)
+        event2.title.charAt(0).toUpperCase() + event2.title.slice(1).toLowerCase()
       ),
       /* @__PURE__ */ import_react25.default.createElement(
         import_material18.Popover,
@@ -3062,7 +3062,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
           onClose: handlePopoverClose,
           disableRestoreFocus: true
         },
-        onHover ? onHover(event2) : /* @__PURE__ */ import_react25.default.createElement(import_material18.Typography, null, "Sin contenido")
+        onHover ? onHover(event2) : " "
       )
     )
   );
@@ -3155,54 +3155,33 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
           onHover: onEventHover
         }
       ))),
-      dayEvents.length > 2 && /* @__PURE__ */ import_react26.default.createElement(import_material19.Stack, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react26.default.createElement(
-        SCDrawer,
+      dayEvents.length > 2 && /* @__PURE__ */ import_react26.default.createElement(
+        import_material19.Stack,
         {
-          width: "350px",
-          title: day.format("DD [de] MMMM YYYY"),
-          open: openDrawer,
-          buttonDrawer: { text: `+ ${dayEvents.length}` },
-          anchor: "right",
-          actions: false,
-          arrayElements: [{
-            component: (() => {
-              const [first, ...rest] = dayEvents;
-              return /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react26.default.createElement(
-                CalendarEventCard,
-                {
-                  event: first,
-                  color: stateColors[first.state],
-                  onClick: () => onEventClick == null ? void 0 : onEventClick(first, day),
-                  sx: {
-                    whiteSpace: "normal",
-                    "& .MuiTypography-root": {
-                      whiteSpace: "normal",
-                      overflow: "visible",
-                      textOverflow: "unset"
-                    }
-                  }
-                }
-              )), /* @__PURE__ */ import_react26.default.createElement(import_material19.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react26.default.createElement(
-                import_material19.Box,
-                {
-                  width: "100%",
-                  height: "100%",
-                  flex: 1,
-                  overflow: "auto",
-                  p: 1,
-                  pt: 1,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 1.5
-                },
-                rest.map((event2) => /* @__PURE__ */ import_react26.default.createElement(
+          justifyItems: "center",
+          px: 1,
+          pb: 0.5,
+          onClick: (e) => e.stopPropagation(),
+          sx: { "& .MuiButtonBase-root": { width: "100%" } }
+        },
+        /* @__PURE__ */ import_react26.default.createElement(
+          SCDrawer,
+          {
+            width: "350px",
+            title: day.format("DD [de] MMMM YYYY"),
+            open: openDrawer,
+            buttonDrawer: { text: `+ ${dayEvents.length}` },
+            anchor: "right",
+            actions: false,
+            arrayElements: [{
+              component: (() => {
+                const [first, ...rest] = dayEvents;
+                return /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react26.default.createElement(
                   CalendarEventCard,
                   {
-                    key: `${event2.id}-${day.toString()}`,
-                    event: event2,
-                    color: stateColors[event2.state],
-                    onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
-                    onHover: onEventHover,
+                    event: first,
+                    color: stateColors[first.state],
+                    onClick: () => onEventClick == null ? void 0 : onEventClick(first, day),
                     sx: {
                       whiteSpace: "normal",
                       "& .MuiTypography-root": {
@@ -3212,21 +3191,60 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
                       }
                     }
                   }
-                ))
-              ));
-            })()
-          }]
-        }
-      ))
+                )), /* @__PURE__ */ import_react26.default.createElement(import_material19.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react26.default.createElement(
+                  import_material19.Box,
+                  {
+                    width: "100%",
+                    height: "100%",
+                    flex: 1,
+                    overflow: "auto",
+                    p: 1,
+                    pt: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 1.5
+                  },
+                  rest.map((event2) => /* @__PURE__ */ import_react26.default.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": {
+                          whiteSpace: "normal",
+                          overflow: "visible",
+                          textOverflow: "unset"
+                        }
+                      }
+                    }
+                  ))
+                ));
+              })()
+            }]
+          }
+        )
+      )
     );
   }))));
 };
 
 // src/Components/Calendario/Views/WeekView.tsx
-var import_react27 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 var import_material20 = require("@mui/material");
 var import_dayjs5 = __toESM(require("dayjs"), 1);
 var import_localeData2 = __toESM(require("dayjs/plugin/localeData"), 1);
+
+// src/assets/LogoCalendario.tsx
+var import_react27 = __toESM(require("react"), 1);
+var LogoCalendario = () => {
+  return /* @__PURE__ */ import_react27.default.createElement("svg", { width: "60", height: "61", viewBox: "0 0 60 61", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react27.default.createElement("g", { "clip-path": "url(#clip0_5353_24891)" }, /* @__PURE__ */ import_react27.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40.7361 11.1589C39.7792 11.1589 39.0106 11.9722 39.0106 12.9661V15.4375H20.0309V12.9661C20.0309 11.964 19.2545 11.1589 18.3055 11.1589C17.3487 11.1589 16.5801 11.9722 16.5801 12.9661V15.4375H12.8819C12.0652 15.4375 11.4038 16.0918 11.4038 16.8998V20.6551C11.4038 21.463 12.0652 22.1174 12.8819 22.1174H46.8383C47.655 22.1174 48.3165 21.463 48.3165 20.6551V16.8998C48.3165 16.0918 47.655 15.4375 46.8383 15.4375H42.4615V12.9661C42.4615 11.964 41.6851 11.1589 40.7361 11.1589ZM19.4827 19.2049C19.6528 19.1343 19.7361 19.006 19.7724 18.8352C19.6916 18.9714 19.594 19.0957 19.4827 19.2049Z", fill: "#00BCD4" }), /* @__PURE__ */ import_react27.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.2037 25.8653C13.7579 25.8653 13.425 26.2168 13.425 26.6093V47.3669C13.425 47.7595 13.7579 48.1109 14.2037 48.1109H46.0004C46.4782 48.1109 46.8656 47.7236 46.8656 47.2458V26.6093C46.8656 26.2168 46.5327 25.8653 46.087 25.8653H14.2037ZM11.6948 26.6093C11.6948 25.2255 12.8384 24.135 14.2037 24.135H46.087C47.4522 24.135 48.5959 25.2255 48.5959 26.6093V47.2458C48.5959 48.6792 47.4339 49.8412 46.0004 49.8412H14.2037C12.8384 49.8412 11.6948 48.7508 11.6948 47.3669V26.6093Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M19.481 30.9138C19.481 30.5164 20.1155 30.1903 20.9058 30.1903C21.6894 30.1903 22.3305 30.5131 22.3305 30.9138V32.8862C22.3305 33.2836 21.6894 33.6097 20.9058 33.6097C20.1222 33.6097 19.481 33.2869 19.481 32.8862V30.9138Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M30.0242 30.1903C29.2339 30.1903 28.5995 30.5164 28.5995 30.9138V32.8862C28.5995 33.2869 29.2406 33.6097 30.0242 33.6097C30.8079 33.6097 31.449 33.2836 31.449 32.8862V30.9138C31.449 30.5131 30.8079 30.1903 30.0242 30.1903Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M37.7179 30.9138C37.7179 30.5164 38.3524 30.1903 39.1427 30.1903C39.608 30.1903 40.022 30.3038 40.2825 30.4797C40.3515 30.5276 40.4116 30.5788 40.4561 30.6344C40.5274 30.7201 40.5675 30.8147 40.5675 30.9138V32.8862C40.5675 33.2836 39.9263 33.6097 39.1427 33.6097C38.3591 33.6097 37.7179 33.2869 37.7179 32.8862V30.9138Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M20.9058 39.8787C20.1155 39.8787 19.481 40.2048 19.481 40.6022V42.5746C19.481 42.687 19.5322 42.7927 19.6213 42.8874C19.7036 42.9731 19.8172 43.0499 19.9552 43.1122C20.2068 43.228 20.5407 43.2981 20.9058 43.2981C21.6894 43.2981 22.3305 42.972 22.3305 42.5746V40.6022C22.3305 40.2015 21.6894 39.8787 20.9058 39.8787Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M29.524 39.9477C29.7087 39.9032 29.9158 39.8787 30.1339 39.8787C30.9176 39.8787 31.5587 40.2015 31.5587 40.6022V42.5746C31.5587 42.972 30.9176 43.2981 30.1339 43.2981C29.3503 43.2981 28.7092 42.9753 28.7092 42.5746V40.6022C28.7092 40.315 29.0409 40.0646 29.524 39.9477Z", fill: "#6392BD" }), /* @__PURE__ */ import_react27.default.createElement("path", { d: "M38.5141 39.9482C38.6989 39.9037 38.9059 39.8792 39.1241 39.8792C39.9077 39.8792 40.5488 40.202 40.5488 40.6027V42.5751C40.5488 42.9725 39.9077 43.2986 39.1241 43.2986C38.3405 43.2986 37.6993 42.9758 37.6993 42.5751V40.6027C37.6993 40.3155 38.031 40.0651 38.5141 39.9482Z", fill: "#6392BD" })), /* @__PURE__ */ import_react27.default.createElement("defs", null, /* @__PURE__ */ import_react27.default.createElement("clipPath", { id: "clip0_5353_24891" }, /* @__PURE__ */ import_react27.default.createElement("rect", { width: "60", height: "60", fill: "white", transform: "translate(0 0.5)" }))));
+};
+
+// src/Components/Calendario/Views/WeekView.tsx
 import_dayjs5.default.extend(import_localeData2.default);
 var WeekView = ({
   events,
@@ -3258,9 +3276,9 @@ var WeekView = ({
     }
     return "none";
   };
-  return /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }), days.map((day) => {
+  return /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }), days.map((day) => {
     const isToday2 = day.format("YYYY-MM-DD") === todayString;
-    return /* @__PURE__ */ import_react27.default.createElement(
+    return /* @__PURE__ */ import_react28.default.createElement(
       import_material20.Box,
       {
         key: day.toString(),
@@ -3277,19 +3295,19 @@ var WeekView = ({
         borderBottom: isToday2 ? 2 : 0,
         borderColor: isToday2 ? "primary.main" : "transparent"
       },
-      /* @__PURE__ */ import_react27.default.createElement(import_material20.Typography, { variant: "h6", color: "text.primary" }, day.format("D")),
-      /* @__PURE__ */ import_react27.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
+      /* @__PURE__ */ import_react28.default.createElement(import_material20.Typography, { variant: "h6", color: "text.primary" }, day.format("D")),
+      /* @__PURE__ */ import_react28.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
     );
-  })), isLoading ? /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react27.default.createElement(
+  })), isLoading ? /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react28.default.createElement(import_material20.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react28.default.createElement(
     EmptyState,
     {
       title: "Inicia la gesti\xF3n de las actividades",
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
-      icon: /* @__PURE__ */ import_react27.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+      icon: /* @__PURE__ */ import_react28.default.createElement(LogoCalendario, null)
     }
   ) : (
     // Grid de horas y eventos
-    /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react27.default.createElement(
+    /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react28.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react28.default.createElement(
       import_material20.Box,
       {
         key: h,
@@ -3298,7 +3316,7 @@ var WeekView = ({
         pr: 1,
         borderColor: "divider"
       },
-      /* @__PURE__ */ import_react27.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs5.default)().hour(h).format("h A"))
+      /* @__PURE__ */ import_react28.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs5.default)().hour(h).format("h A"))
     ))), days.map((day) => {
       const dayEvents = events.filter(
         (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
@@ -3307,7 +3325,7 @@ var WeekView = ({
         const endsInRange = event2.end.hour() >= startHour && event2.end.hour() <= endHour;
         return startsInRange || endsInRange;
       }).sort((a, b) => a.start.valueOf() - b.start.valueOf());
-      return /* @__PURE__ */ import_react27.default.createElement(
+      return /* @__PURE__ */ import_react28.default.createElement(
         import_material20.Box,
         {
           key: day.toString(),
@@ -3320,7 +3338,7 @@ var WeekView = ({
         },
         hours.map((hourIdx) => {
           const borderType = getCellBorderType(hourIdx, dayEvents);
-          return /* @__PURE__ */ import_react27.default.createElement(
+          return /* @__PURE__ */ import_react28.default.createElement(
             import_material20.Box,
             {
               key: hourIdx,
@@ -3336,7 +3354,7 @@ var WeekView = ({
           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__ */ import_react27.default.createElement(
+          return /* @__PURE__ */ import_react28.default.createElement(
             CalendarEventCard,
             {
               key: `${event2.id}-${day.toString()}`,
@@ -3361,7 +3379,7 @@ var WeekView = ({
 };
 
 // src/Components/Calendario/Views/DayView.tsx
-var import_react28 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_material21 = require("@mui/material");
 var import_dayjs6 = __toESM(require("dayjs"), 1);
 var DayView = ({
@@ -3393,14 +3411,14 @@ var DayView = ({
     (event2) => currentDate.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
   );
   const noEvents = events.length === 0;
-  return /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ import_react28.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ import_react29.default.createElement(import_material21.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ import_react29.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react29.default.createElement(import_material21.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ import_react29.default.createElement(
     EmptyState,
     {
       title: "Inicia la gesti\xF3n de las actividades",
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
-      icon: /* @__PURE__ */ import_react28.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+      icon: /* @__PURE__ */ import_react29.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
     }
-  ) : /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react28.default.createElement(
+  ) : /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react29.default.createElement(
     import_material21.Box,
     {
       key: h,
@@ -3411,10 +3429,10 @@ var DayView = ({
       borderRight: "1px solid",
       borderColor: "divider"
     },
-    /* @__PURE__ */ import_react28.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
-  ))), /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    /* @__PURE__ */ import_react29.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
+  ))), /* @__PURE__ */ import_react29.default.createElement(import_material21.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
     const borderType = getCellBorderType(hourIdx, dayEvents);
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       import_material21.Box,
       {
         key: hourIdx,
@@ -3433,7 +3451,7 @@ var DayView = ({
     const clampedEnd = eventEnd.isAfter(maxEnd) ? maxEnd : eventEnd;
     const startMinutes = (clampedStart.hour() - startHour) * 60 + clampedStart.minute();
     const durationMinutes = clampedEnd.diff(clampedStart, "minute");
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       CalendarEventCard,
       {
         key: `${event2.id}-${currentDate.toString()}`,
@@ -3469,8 +3487,8 @@ var Calendar = ({
   // <- valor por defecto
   endHour = 23
 }) => {
-  const [view, setView] = (0, import_react29.useState)(initialView);
-  const [currentDate, setCurrentDate] = (0, import_react29.useState)((0, import_dayjs7.default)());
+  const [view, setView] = (0, import_react30.useState)(initialView);
+  const [currentDate, setCurrentDate] = (0, import_react30.useState)((0, import_dayjs7.default)());
   const handleViewChange = (newView) => {
     setView(newView);
     onViewChange == null ? void 0 : onViewChange(newView);
@@ -3478,12 +3496,18 @@ var Calendar = ({
   const handleNavigate = (action) => {
     let newDate = currentDate;
     const unit = view === "month" ? "month" : "day";
-    if (action === "PREV") newDate = currentDate.subtract(1, unit);
-    else if (action === "NEXT") newDate = currentDate.add(1, unit);
-    else if (action === "TODAY") newDate = (0, import_dayjs7.default)();
+    if (action === "PREV") {
+      if (view === "day") newDate = currentDate.subtract(1, "day");
+      if (view === "week") newDate = currentDate.subtract(1, "week");
+      if (view === "month") newDate = currentDate.subtract(1, "month");
+    } else if (action === "NEXT") {
+      if (view === "day") newDate = currentDate.add(1, "day");
+      if (view === "week") newDate = currentDate.add(1, "week");
+      if (view === "month") newDate = currentDate.add(1, "month");
+    } else if (action === "TODAY") newDate = (0, import_dayjs7.default)();
     setCurrentDate(newDate);
   };
-  return /* @__PURE__ */ import_react29.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react30.default.createElement(
     CalendarToolbar,
     {
       labelDate: currentDate,
@@ -3492,7 +3516,7 @@ var Calendar = ({
       onNavigate: handleNavigate
     },
     toolbar
-  ), isLoading ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react29.default.createElement(
+  ), isLoading ? /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react30.default.createElement(
     import_material22.Box,
     {
       display: "flex",
@@ -3500,8 +3524,8 @@ var Calendar = ({
       alignItems: "center",
       height: "400px"
     },
-    /* @__PURE__ */ import_react29.default.createElement(import_material22.CircularProgress, { variant: "indeterminate" })
-  ))) : /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, view === "month" && /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement(import_material22.CircularProgress, { variant: "indeterminate" })
+  ))) : /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, view === "month" && /* @__PURE__ */ import_react30.default.createElement(
     MonthView,
     {
       events,
@@ -3511,7 +3535,7 @@ var Calendar = ({
       onEventClick,
       onEventHover
     }
-  ), view === "week" && /* @__PURE__ */ import_react29.default.createElement(
+  ), view === "week" && /* @__PURE__ */ import_react30.default.createElement(
     WeekView,
     {
       events,
@@ -3523,7 +3547,7 @@ var Calendar = ({
       startHour,
       endHour
     }
-  ), view === "day" && /* @__PURE__ */ import_react29.default.createElement(
+  ), view === "day" && /* @__PURE__ */ import_react30.default.createElement(
     DayView,
     {
       events,
@@ -3537,7 +3561,7 @@ var Calendar = ({
 };
 
 // src/Components/SCTime.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 var import_material23 = require("@mui/material");
 var import_LocalizationProvider3 = require("@mui/x-date-pickers/LocalizationProvider");
 var import_AdapterDayjs2 = require("@mui/x-date-pickers/AdapterDayjs");
@@ -3561,9 +3585,9 @@ var SCTime = ({
   );
   const isTimeEmpty = required && !state;
   const hasError = isTimeEmpty;
-  const [anchorEl, setAnchorEl] = (0, import_react30.useState)(null);
-  const [isOpenPopover, setIsOpenPopover] = (0, import_react30.useState)(false);
-  const [popoverPlacement, setPopoverPlacement] = (0, import_react30.useState)("bottom");
+  const [anchorEl, setAnchorEl] = (0, import_react31.useState)(null);
+  const [isOpenPopover, setIsOpenPopover] = (0, import_react31.useState)(false);
+  const [popoverPlacement, setPopoverPlacement] = (0, import_react31.useState)("bottom");
   const detectPlacement = (element) => {
     const rect = element.getBoundingClientRect();
     const windowHeight = window.innerHeight;
@@ -3594,7 +3618,7 @@ var SCTime = ({
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ import_react30.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react30.default.createElement(import_material23.Box, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react31.default.createElement(import_material23.Box, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ import_react31.default.createElement(
     import_TimeField.TimeField,
     {
       label,
@@ -3606,7 +3630,7 @@ var SCTime = ({
       slotProps: {
         textField: {
           InputProps: {
-            endAdornment: /* @__PURE__ */ import_react30.default.createElement(import_material23.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react30.default.createElement(
+            endAdornment: /* @__PURE__ */ import_react31.default.createElement(import_material23.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react31.default.createElement(
               import_AccessTime.default,
               {
                 color: disabled ? "disabled" : "action",
@@ -3635,7 +3659,7 @@ var SCTime = ({
         }
       }
     }
-  ), /* @__PURE__ */ import_react30.default.createElement(
+  ), /* @__PURE__ */ import_react31.default.createElement(
     import_material23.Popover,
     {
       open: isOpenPopover,
@@ -3663,7 +3687,7 @@ var SCTime = ({
         }
       }
     },
-    /* @__PURE__ */ import_react30.default.createElement(import_material23.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react30.default.createElement(import_material23.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react31.default.createElement(import_material23.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react31.default.createElement(import_material23.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react31.default.createElement(
       import_DigitalClock.DigitalClock,
       {
         value: state,
@@ -3684,11 +3708,88 @@ var SCTime = ({
   )));
 };
 
+// src/Components/SCCard.tsx
+var import_react32 = __toESM(require("react"), 1);
+var import_material24 = require("@mui/material");
+var import_IconButton = __toESM(require("@mui/material/IconButton"), 1);
+var import_Card = __toESM(require("@mui/material/Card"), 1);
+var import_CardHeader = __toESM(require("@mui/material/CardHeader"), 1);
+var import_CardMedia = __toESM(require("@mui/material/CardMedia"), 1);
+var import_CardContent = __toESM(require("@mui/material/CardContent"), 1);
+var import_CardActions = __toESM(require("@mui/material/CardActions"), 1);
+var import_Collapse = __toESM(require("@mui/material/Collapse"), 1);
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"), 1);
+var Muicon8 = __toESM(require("@mui/icons-material"), 1);
+var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, actions, expand }) => {
+  let iconTitleValidation = "";
+  let IconTitle;
+  const [expanded, setExpanded] = import_react32.default.useState(false);
+  if (iconTitle) {
+    if (Muicon8[iconTitle] == void 0) {
+      if (iconTitle && import_react32.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
+        iconTitleValidation = "image";
+        IconTitle = iconTitle;
+      } else {
+        iconTitleValidation = "icon";
+        IconTitle = iconTitle;
+      }
+    } else {
+      iconTitleValidation = "icon";
+      IconTitle = Muicon8[iconTitle];
+    }
+  }
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ import_react32.default.createElement(import_Card.default, { sx: { maxWidth: 345 } }, title && /* @__PURE__ */ import_react32.default.createElement(
+    import_CardHeader.default,
+    {
+      avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ import_react32.default.createElement(import_material24.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react32.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react32.default.createElement(import_material24.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : void 0,
+      action: (expand == null ? void 0 : expand.position) == "top" ? (expand == null ? void 0 : expand.type) === "text" ? /* @__PURE__ */ import_react32.default.createElement(import_material24.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react32.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" }, size: "small" }, /* @__PURE__ */ import_react32.default.createElement(import_ExpandMore.default, { fontSize: "small" })) : actionsTitle,
+      title,
+      subheader: subtitle,
+      sx: {
+        "& .MuiCardHeader-title": {
+          fontSize: "14px",
+          color: "text.primary"
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: "13px",
+          color: "text.secondary"
+        },
+        "& .MuiCardHeader-action": {
+          height: "40px !important",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    }
+  ), image && /* @__PURE__ */ import_react32.default.createElement(
+    import_CardMedia.default,
+    {
+      component: "img",
+      height: "194",
+      image
+    }
+  ), content && /* @__PURE__ */ import_react32.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, content), ((expand == null ? void 0 : expand.position) == "bottom" || actions != void 0) && /* @__PURE__ */ import_react32.default.createElement(import_CardActions.default, { disableSpacing: true, sx: { justifyContent: "flex-end" } }, (expand == null ? void 0 : expand.position) === "bottom" ? (expand == null ? void 0 : expand.type) === "text" ? /* @__PURE__ */ import_react32.default.createElement(import_material24.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react32.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, /* @__PURE__ */ import_react32.default.createElement(import_ExpandMore.default, null)) : null, actions && actions.length > 0 ? actions.map((action, index) => /* @__PURE__ */ import_react32.default.createElement(
+    import_material24.Button,
+    {
+      key: index,
+      size: "small",
+      color: action.color || "primary",
+      variant: action.variant || "text",
+      onClick: action.fn,
+      disabled: action.disabled || false
+    },
+    action.text
+  )) : ""), expand && /* @__PURE__ */ import_react32.default.createElement(import_Collapse.default, { in: expanded, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ import_react32.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, expand.content)));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react31 = __toESM(require("react"), 1);
+var import_react33 = __toESM(require("react"), 1);
 var import_icons_material11 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
@@ -4386,10 +4487,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react31.default.createElement(import_icons_material11.CheckCircleRounded),
-        error: import_react31.default.createElement(import_icons_material11.ErrorRounded),
-        warning: import_react31.default.createElement(import_icons_material11.WarningRounded),
-        info: import_react31.default.createElement(import_icons_material11.InfoRounded)
+        success: import_react33.default.createElement(import_icons_material11.CheckCircleRounded),
+        error: import_react33.default.createElement(import_icons_material11.ErrorRounded),
+        warning: import_react33.default.createElement(import_icons_material11.WarningRounded),
+        info: import_react33.default.createElement(import_icons_material11.InfoRounded)
       }
     },
     variants: [
@@ -5438,6 +5539,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   PageHeader,
   SCAutocomplete,
   SCCalendarSwipeable,
+  SCCard,
   SCDataGrid,
   SCDataGridInitial,
   SCDateRange,