componentes-sinco 1.0.36 → 1.0.38

package/dist/index.cjs

@@ -1740,6 +1740,10 @@ function SCSelect({
         disabled: disabled || false,
         error,
         MenuProps: {
+          sx: {
+            zIndex: 1400
+            // muy alto para que quede encima
+          },
           PaperProps: {
             sx: {
               maxHeight: "300px",
@@ -1968,6 +1972,12 @@ function SCAutocomplete({
         })
       )),
       slotProps: {
+        popper: {
+          sx: {
+            zIndex: 1400
+            // controla el contenedor flotante
+          }
+        },
         listbox: {
           component: import_react15.default.forwardRef(function ListboxComponent(props, ref) {
             return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
@@ -2111,6 +2121,12 @@ var SCDateRange = ({
         field: import_MultiInputDateRangeField.MultiInputDateRangeField
       },
       slotProps: {
+        popper: {
+          sx: {
+            zIndex: 1400
+            // muy alto para que quede encima
+          }
+        },
         textField: ({ position }) => {
           const isStart = position === "start";
           return {
@@ -2285,7 +2301,7 @@ var DrawerActions = ({ actions, anchor }) => {
   return /* @__PURE__ */ import_react18.default.createElement(
     import_Grid2.default,
     {
-      sx: { borderTop: 1, borderColor: "#1018403B" },
+      sx: { borderTop: 1, borderColor: "#1018403B", zIndex: 1500 },
       container: true,
       gap: 2,
       padding: "8px 12px",
@@ -2353,9 +2369,10 @@ function SCDrawer({
   width,
   open,
   setOpen,
-  chipFilters
+  chipFilters,
+  heightDrawer = 456
 }) {
-  const drawerBleeding = 56;
+  const drawerBleeding = heightDrawer;
   const { drawerOpen, handleDrawerClose, toggleDrawer } = useDrawerState({ open, setOpen });
   const { toast, setToastWithDelay } = useToast();
   const {
@@ -2411,7 +2428,7 @@ function SCDrawer({
         onDeleteFilter: handleDeleteFilter
       }
     ),
-    /* @__PURE__ */ import_react20.default.createElement(
+    buttonDrawer && /* @__PURE__ */ import_react20.default.createElement(
       DrawerButton,
       {
         buttonDrawer,
@@ -2449,6 +2466,7 @@ function SCDrawer({
       anchor: "bottom",
       swipeAreaWidth: drawerBleeding,
       sx: {
+        zIndex: 1400,
         "& .MuiDrawer-paper": {
           width: "auto",
           height: `calc(50% - ${drawerBleeding}px)`,
@@ -3406,7 +3424,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { zIndex: 1200, gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
       import_material20.Button,
       {
         variant: "text",
@@ -3485,17 +3503,19 @@ var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" })
       import_material21.ListItemButton,
       {
         disabled: option.disable,
-        onClick: option.fn
+        onClick: option.fn,
+        sx: { gap: 1 }
       },
-      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft }) : option.iconLeft) : "",
+      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", sx: { color: option.iconLeftColor || "action" }, component: option.iconLeft })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, { sx: { width: 25, height: 25, fontSize: "11px", bgcolor: option.iconLeftColor ? `${option.iconLeftColor}.main` : "default" } }, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", component: option.iconLeft }) : option.iconLeft) : "",
       /* @__PURE__ */ import_react34.default.createElement(
         import_material21.ListItemText,
         {
+          sx: { color: option.colorDisabled == true ? "text.disabled" : "default" },
           primary: option.title,
-          secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.description))
+          secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5, sx: { color: option.colorDisabled == true ? "text.disabled" : "default" } }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5, sx: { color: option.colorDisabled == true ? "text.disabled" : "default" } }, option.description))
         }
       ),
-      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
+      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", sx: { color: option.iconRightColor || "action" }, component: option.iconRight })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, { variant: "circular", sx: { width: 20, height: 20 } }, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
     ), option.divider == true ? /* @__PURE__ */ import_react34.default.createElement(import_material21.Divider, null) : "");
   })));
 };
@@ -4569,7 +4589,8 @@ var SCTime = ({
   timeStep = 5,
   state,
   setState,
-  error
+  width,
+  error = false
 }) => {
   import_x_license3.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
@@ -4609,7 +4630,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: "120px" } }, /* @__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 != null ? width : "99%" } }, /* @__PURE__ */ import_react48.default.createElement(
     import_TimeField.TimeField,
     {
       label,
@@ -4666,6 +4687,7 @@ var SCTime = ({
       },
       marginThreshold: 0,
       disableScrollLock: true,
+      sx: { zIndex: "1400" },
       slotProps: {
         paper: {
           sx: {
@@ -4673,7 +4695,8 @@ var SCTime = ({
             borderRadius: 1,
             border: "1px solid #e0e0e0",
             maxHeight: "300px",
-            overflow: "visible"
+            overflow: "visible",
+            width: width != null ? width : "100%"
           }
         }
       }
@@ -4884,11 +4907,11 @@ var SCActivityCalendar = ({
             options: [{
               title: event2.activityDescription,
               subtitle: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.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__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react50.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react50.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
-              iconLeftColor: event2.state === "Finalizada" ? "success" : "action",
+              iconLeftColor: event2.state === "Finalizada" ? "#C7E49D" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",
               description: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
               divider: eventosDelDia.length === idx + 1 ? false : true,
-              disable: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
+              colorDisabled: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0
             }]
           }
@@ -4911,6 +4934,7 @@ var SCActivityCalendar = ({
 
 // src/Components/Adjuntar/mobile/AdjuntarMobile.tsx
 var import_react52 = __toESM(require("react"), 1);
+var import_react_webcam = __toESM(require("react-webcam"), 1);
 
 // src/Components/Adjuntar/mobile/components/button.tsx
 var import_react51 = __toESM(require("react"), 1);
@@ -4964,6 +4988,8 @@ var import_material36 = require("@mui/material");
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
 var import_system = require("@mui/system");
 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 AttachmentMobile = ({
   buttonAttachment,
   maxSize = 400,
@@ -4974,15 +5000,54 @@ var AttachmentMobile = ({
   onChange,
   sx
 }) => {
+  const webcamRef = (0, import_react52.useRef)(null);
+  const [abrirCamara, setAbrirCamara] = (0, import_react52.useState)(false);
+  const [capturedImage, setCapturedImage] = (0, import_react52.useState)(null);
   const [files, setFiles] = (0, import_react52.useState)([]);
   const [toast, setToast] = (0, import_react52.useState)(null);
   const [open, setOpen] = import_react52.default.useState(false);
   const toggleAttachment = (newOpen) => () => {
     setOpen(newOpen);
   };
+  const closeCam = () => {
+    setAbrirCamara(false);
+  };
+  const openCam = () => {
+    setOpen(false);
+    setAbrirCamara(true);
+  };
+  let capturedImage2 = null;
+  const capture = (0, import_react52.useCallback)((e) => {
+    if (webcamRef.current) {
+      const imageSrc = webcamRef.current.getScreenshot();
+      setCapturedImage(imageSrc);
+      capturedImage2 = imageSrc;
+      setOpen(false);
+      toggleAttachment(false);
+      setAbrirCamara(false);
+      handleUpload(e);
+    }
+  }, [webcamRef, setCapturedImage]);
   const inputRef = (0, import_react52.useRef)(null);
   const handleUpload = (event2) => {
-    const newFiles = event2.target.files;
+    var _a;
+    let newFiles = event2.target.files;
+    if (capturedImage || capturedImage2) {
+      const image = capturedImage || capturedImage2;
+      if (!image) return;
+      const arr = image.split(",");
+      const mime = ((_a = arr[0].match(/:(.*?);/)) == null ? void 0 : _a[1]) || "image/jpeg";
+      const bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      const fechaActual = new Date(Date.now());
+      const fechaConFormato = fechaActual.getFullYear() + "" + (fechaActual.getMonth() + 1) + fechaActual.getDate();
+      const capturedFile = new File([u8arr], `photo_${fechaConFormato}.jpg`, { type: mime });
+      newFiles = [capturedFile];
+    }
     if (!newFiles) return;
     const nuevosArchivos = [];
     const archivosValidos = [];
@@ -5088,8 +5153,11 @@ var AttachmentMobile = ({
     }
   });
   const AttachtmentActions = [
-    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "primary" }), color: "primary", label: "Galer\xEDa", onClick: () => alert("diste click en Galeria") },
-    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.PhotoCameraOutlined, { type: "file", color: "success" }), color: "success", label: "C\xE1mara", onClick: () => alert("diste click en Camara") },
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "primary" }), color: "primary", label: "Galer\xEDa", onClick: () => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.click();
+    } },
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.PhotoCameraOutlined, { type: "file", color: "success" }), color: "success", label: "C\xE1mara", onClick: () => openCam() },
     { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "warning" }), color: "warning", label: "Archivos", onClick: () => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -5112,6 +5180,7 @@ var AttachmentMobile = ({
     {
       ModalProps: {
         sx: {
+          zIndex: 1400,
           "& .MuiPaper-root": {
             borderRadius: "16px 16px 0 0"
           }
@@ -5166,7 +5235,49 @@ var AttachmentMobile = ({
       ),
       /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "body2", color: "text.primary" }, option.label)
     ))))
-  ), files.length > 0 && /* @__PURE__ */ import_react52.default.createElement(
+  ), abrirCamara && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(import_CancelOutlined.default, { onClick: closeCam, sx: { borderRadius: "50px", height: "35px", width: "35px", zIndex: 1700, background: "white", position: "absolute", left: `calc(100% - 50px)`, bottom: `calc(100% - 50px)` } }), /* @__PURE__ */ import_react52.default.createElement(import_material36.Stack, { className: "camras" }, /* @__PURE__ */ import_react52.default.createElement(
+    import_react_webcam.default,
+    {
+      audio: false,
+      ref: webcamRef,
+      width: "100%",
+      height: "100%",
+      screenshotFormat: "image/jpeg",
+      videoConstraints: {
+        //facingMode: { exact: "environment" }
+        facingMode: "user"
+        //facingMode: "environment" // cámara trasera
+      },
+      style: {
+        position: "fixed",
+        // Fijo para cubrir toda la ventana
+        top: 0,
+        left: 0,
+        objectFit: "cover",
+        backgroundColor: "black",
+        zIndex: 1600
+        // Encima de todo
+      }
+    }
+  ), /* @__PURE__ */ import_react52.default.createElement(
+    import_PhotoCamera.default,
+    {
+      onClick: capture,
+      sx: {
+        height: "45px",
+        width: "45px",
+        padding: "6px",
+        backgroundColor: "white",
+        color: "#1E62A1",
+        borderRadius: "50px",
+        zIndex: 1700,
+        position: "absolute",
+        bottom: "10px",
+        left: "50%"
+      },
+      fontSize: "medium"
+    }
+  ))), files.length > 0 && /* @__PURE__ */ import_react52.default.createElement(
     import_material36.Stack,
     {
       "data-testid": "ContenedorArchivosAdjuntos",