componentes-sinco 1.3.3 → 1.3.5

package/dist/index.d.cts

@@ -445,6 +445,7 @@ interface SCTextFieldProps {
     };
     size?: "small" | "medium";
     variant?: "outlined" | "filled" | "standard";
+    alignText?: "left" | "right" | "center";
     maxLength?: number;
     disabled?: boolean;
     required?: boolean;
@@ -455,7 +456,7 @@ interface SCTextFieldProps {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
-declare const SCTextField: ({ title, iconTitle, infoTitle, label, placeholder, infoElement, iconInputStart, iconInputEnd, maxLength, variant, format, disabled, required, size, width, color, background, setState, state, onChange, onBlur, onKeyDown, }: SCTextFieldProps) => React__default.JSX.Element;
+declare const SCTextField: ({ title, iconTitle, infoTitle, label, placeholder, infoElement, iconInputStart, iconInputEnd, maxLength, variant, format, disabled, required, size, width, alignText, color, background, setState, state, onChange, onBlur, onKeyDown, }: SCTextFieldProps) => React__default.JSX.Element;
 
 interface SCAccordionProps {
     title?: string | React__default.ReactNode;
@@ -585,8 +586,20 @@ interface SCDataGridInitialProps<T> {
     selectedIndex?: number;
     setSelectedRow?: (any: any) => void;
     selectedRow?: any;
-}
-declare function SCDataGridInitial<T>({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex, setSelectedRow, selectedRow }: SCDataGridInitialProps<T>): React__default.JSX.Element;
+    insertRowFields?: (string | {
+        field: string;
+        placeholder?: string;
+        renderCell?: (params: {
+            value: any;
+            onChange: (newValue: any) => void;
+            field: string;
+        }) => React__default.ReactNode;
+    })[];
+    onAddRow?: (newRow: {
+        [field: string]: any;
+    }) => void;
+}
+declare function SCDataGridInitial<T>({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex, setSelectedRow, selectedRow, insertRowFields, onAddRow }: SCDataGridInitialProps<T>): React__default.JSX.Element;
 declare const SCDataGrid: React__default.MemoExoticComponent<typeof SCDataGridInitial>;
 
 interface SCDatePickerProps {

package/dist/index.d.ts

@@ -445,6 +445,7 @@ interface SCTextFieldProps {
     };
     size?: "small" | "medium";
     variant?: "outlined" | "filled" | "standard";
+    alignText?: "left" | "right" | "center";
     maxLength?: number;
     disabled?: boolean;
     required?: boolean;
@@ -455,7 +456,7 @@ interface SCTextFieldProps {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
-declare const SCTextField: ({ title, iconTitle, infoTitle, label, placeholder, infoElement, iconInputStart, iconInputEnd, maxLength, variant, format, disabled, required, size, width, color, background, setState, state, onChange, onBlur, onKeyDown, }: SCTextFieldProps) => React__default.JSX.Element;
+declare const SCTextField: ({ title, iconTitle, infoTitle, label, placeholder, infoElement, iconInputStart, iconInputEnd, maxLength, variant, format, disabled, required, size, width, alignText, color, background, setState, state, onChange, onBlur, onKeyDown, }: SCTextFieldProps) => React__default.JSX.Element;
 
 interface SCAccordionProps {
     title?: string | React__default.ReactNode;
@@ -585,8 +586,20 @@ interface SCDataGridInitialProps<T> {
     selectedIndex?: number;
     setSelectedRow?: (any: any) => void;
     selectedRow?: any;
-}
-declare function SCDataGridInitial<T>({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex, setSelectedRow, selectedRow }: SCDataGridInitialProps<T>): React__default.JSX.Element;
+    insertRowFields?: (string | {
+        field: string;
+        placeholder?: string;
+        renderCell?: (params: {
+            value: any;
+            onChange: (newValue: any) => void;
+            field: string;
+        }) => React__default.ReactNode;
+    })[];
+    onAddRow?: (newRow: {
+        [field: string]: any;
+    }) => void;
+}
+declare function SCDataGridInitial<T>({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex, setSelectedRow, selectedRow, insertRowFields, onAddRow }: SCDataGridInitialProps<T>): React__default.JSX.Element;
 declare const SCDataGrid: React__default.MemoExoticComponent<typeof SCDataGridInitial>;
 
 interface SCDatePickerProps {

package/dist/index.js

@@ -1360,6 +1360,7 @@ var SCTextField = ({
   required,
   size,
   width = "100%",
+  alignText = "left",
   color,
   background,
   //Funcionales
@@ -1517,7 +1518,14 @@ var SCTextField = ({
         onKeyDown: handleKeyDown,
         onChange: handleInputChange,
         onBlur: handleBlur,
-        inputProps: { maxLength: maxLength ? maxLength : 50 },
+        sx: iconInputStart || iconInputEnd ? {
+          height: "32px",
+          "& .MuiInputAdornment-root": {
+            height: "32px",
+            maxHeight: "32px"
+          }
+        } : void 0,
+        inputProps: { maxLength: maxLength ? maxLength : 50, style: { textAlign: alignText } },
         type: !showPassword && format3 === "password" ? "password" : (format3 || "text").toUpperCase() === "INT" || (format3 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
         className: format3 === "password" && !showPassword ? "" : "",
         placeholder,
@@ -1767,6 +1775,7 @@ function SCSelect({
   const [prevData, setPrevData] = React12.useState(data);
   const [error, setError] = React12.useState(false);
   const [placement, setPlacement] = React12.useState("bottom");
+  const [menuWidth, setMenuWidth] = React12.useState();
   const containerRef = React12.useRef(null);
   useEffect9(() => {
     if (error) {
@@ -1802,6 +1811,7 @@ function SCSelect({
       const spaceBelow = window.innerHeight - rect.bottom;
       const estimatedMenuHeight = Math.min(300, data.length * 36 + 16);
       setPlacement(spaceBelow < estimatedMenuHeight ? "top" : "bottom");
+      setMenuWidth(rect.width);
     }
   };
   const handleChange = (event2) => {
@@ -1844,6 +1854,20 @@ function SCSelect({
         disabled: disabled || false,
         error,
         sx: { height: "32px" },
+        renderValue: (selected) => {
+          const selectedOption = data.find((item) => getItemValue(item).value === selected);
+          if (!selectedOption) return "";
+          const { icon, text } = getItemValue(selectedOption);
+          return /* @__PURE__ */ React12.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5, overflow: "hidden" } }, icon != void 0 && /* @__PURE__ */ React12.createElement(SvgIcon4, { fontSize: "small", color: "action", component: icon, sx: { flexShrink: 0 } }), /* @__PURE__ */ React12.createElement(
+            Box7,
+            {
+              component: "span",
+              title: text,
+              sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+            },
+            text
+          ));
+        },
         MenuProps: {
           sx: {
             zIndex: 1400
@@ -1851,7 +1875,8 @@ function SCSelect({
           PaperProps: {
             sx: {
               maxHeight: "300px",
-              minWidth: "100%"
+              width: menuWidth ? `${menuWidth}px` : "100%",
+              maxWidth: menuWidth ? `${menuWidth}px` : "100%"
             }
           },
           anchorOrigin: {
@@ -1867,7 +1892,15 @@ function SCSelect({
         }
       },
       data.map((option, index) => {
-        return /* @__PURE__ */ React12.createElement(MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ React12.createElement(ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React12.createElement(SvgIcon4, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ React12.createElement(ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
+        return /* @__PURE__ */ React12.createElement(MenuItem, { key: index, value: getItemValue(option).value, sx: { minWidth: 0 } }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ React12.createElement(ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React12.createElement(SvgIcon4, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ React12.createElement(
+          ListItemText,
+          {
+            primary: getItemValue(option).text,
+            color: "text.primary",
+            sx: { overflow: "hidden" },
+            slotProps: { primary: { noWrap: true, title: getItemValue(option).text } }
+          }
+        ));
       })
     )
   )));
@@ -5130,22 +5163,25 @@ var SCCard = ({ width, title, image, iconTitle, actionsTitle, subtitle, dividerH
 import React44, { useEffect as useEffect19, useState as useState25 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
 import { LicenseInfo as LicenseInfo2 } from "@mui/x-license";
+import { Button as Button19, TextField as TextField7 } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { useTheme } from "@mui/material/styles";
-function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex = 0, setSelectedRow, selectedRow }) {
+function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex = 0, setSelectedRow, selectedRow, insertRowFields, onAddRow }) {
+  var _a;
   LicenseInfo2.setLicenseKey(
     "aa892a011e4c240f3cdaf811ecfff54fTz0xMjkyODQsRT0xODEwNDI1NTk5MDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
   );
   const theme = useTheme();
   const apiRef = useGridApiRef();
   const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
+  const showInsertRow = insertRowFields != void 0 && insertRowFields.length > 0;
   function generateRandomId() {
     return Math.floor(Math.random() * 1e6);
   }
   const getTreeDataPaths = (row) => {
-    var _a, _b, _c;
-    const group1Value = groupColumns && ((_a = groupColumns(row)) == null ? void 0 : _a.valueGroup1);
+    var _a2, _b, _c;
+    const group1Value = groupColumns && ((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1);
     const group2Value = groupColumns && ((_b = groupColumns(row)) == null ? void 0 : _b.valueGroup2);
     const fieldValue = groupColumns && ((_c = groupColumns(row)) == null ? void 0 : _c.fieldFirstColumn);
     return [
@@ -5159,7 +5195,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     headerName: groupColumns ? groupColumns(data[0]).headerNameFirstColumn : "Agrupador",
     flex: 1,
     renderCell: (params) => {
-      var _a, _b;
+      var _a2, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
       let maxDepth = 0;
       if (groupColumns && data.length > 0) {
@@ -5174,8 +5210,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
           if (groupColumns) {
             const originalItem = data.find(
               (item) => {
-                var _a2;
-                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup1) === label;
+                var _a3;
+                return String((_a3 = groupColumns(item)) == null ? void 0 : _a3.valueGroup1) === label;
               }
             );
             if (originalItem) {
@@ -5184,22 +5220,22 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
             }
           }
           let subgroup1 = arrayRows.filter((r) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === label;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup1) === label;
           }).map((r) => {
-            var _a2, _b2;
-            return groupColumns && String(((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2) || ((_b2 = groupColumns(r)) == null ? void 0 : _b2.fieldFirstColumn));
+            var _a3, _b2;
+            return groupColumns && String(((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup2) || ((_b2 = groupColumns(r)) == null ? void 0 : _b2.fieldFirstColumn));
           });
           const groupedDataLength1 = subgroup1.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);
           label = `${customLabel} (${groupedDataLength1.length})`;
-        } else if (((_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup2) && params.rowNode.depth === 1) {
+        } else if (((_a2 = groupColumns(data[0])) == null ? void 0 : _a2.valueGroup2) && params.rowNode.depth === 1) {
           const labelGrouping1 = (_b = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _b.groupingKey.toString();
           let customLabel = label;
           if (groupColumns) {
             const originalItem = data.find(
               (item) => {
-                var _a2;
-                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup2) === label;
+                var _a3;
+                return String((_a3 = groupColumns(item)) == null ? void 0 : _a3.valueGroup2) === label;
               }
             );
             if (originalItem) {
@@ -5209,8 +5245,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
           }
           const groupedDataLength2 = arrayRows.filter(
             (r) => {
-              var _a2, _b2;
-              return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
+              var _a3, _b2;
+              return groupColumns && String((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
             }
           ).length;
           label = `${customLabel} (${groupedDataLength2})`;
@@ -5255,25 +5291,25 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       );
     },
     colSpan: (params) => {
-      var _a, _b;
+      var _a2, _b;
       const value = String(params);
-      const fieldGrouping1 = groupColumns ? (_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup1 : void 0;
+      const fieldGrouping1 = groupColumns ? (_a2 = groupColumns(data[0])) == null ? void 0 : _a2.valueGroup1 : void 0;
       const fieldGrouping2 = groupColumns ? (_b = groupColumns(data[0])) == null ? void 0 : _b.valueGroup2 : void 0;
       let agrupado1 = false;
       let agrupado2 = false;
       if (fieldGrouping1 != void 0) {
         agrupado1 = arrayRows.some(
           (row) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1) === value;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(row)) == null ? void 0 : _a3.valueGroup1) === value;
           }
         );
       }
       if (fieldGrouping2 != void 0) {
         agrupado2 = arrayRows.some(
           (row) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup2) === value;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(row)) == null ? void 0 : _a3.valueGroup2) === value;
           }
         );
       }
@@ -5295,11 +5331,31 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
   const [pageSize, setPageSize] = useState25(rows);
   const [arrayRows, setArrayRows] = useState25([]);
   const [selectionModel, setSelectionModel] = useState25([]);
+  const [insertRowValues, setInsertRowValues] = useState25({});
+  const INSERT_ROW_ID = "__sc-datagrid-insert-row__";
+  const resolvedGetRowId = (row) => (row == null ? void 0 : row.__isInsertRow) ? INSERT_ROW_ID : getRowId ? getRowId(row) : row.id;
+  const pinnedRows = showInsertRow ? { bottom: [{ __isInsertRow: true }] } : void 0;
+  const normalizedInsertRowFields = (insertRowFields && insertRowFields.length > 0 ? insertRowFields : [(_a = columns[0]) == null ? void 0 : _a.field]).map((item) => typeof item === "string" ? { field: item } : item);
+  const insertRowTargetFields = normalizedInsertRowFields.map((item) => item.field);
+  const isInsertRowValueFilled = (value) => value !== void 0 && value !== null && (typeof value !== "string" || value.trim() !== "");
+  const hasInsertRowValue = () => insertRowTargetFields.some((field) => isInsertRowValueFilled(insertRowValues[field]));
+  const handleAddInsertRow = () => {
+    if (!hasInsertRowValue()) return;
+    const nextId = Math.max(0, ...arrayRows.map((row) => typeof row.id === "number" ? row.id : 0)) + 1;
+    const newRow = { id: nextId };
+    insertRowTargetFields.forEach((field) => {
+      const value = insertRowValues[field];
+      if (isInsertRowValueFilled(value)) newRow[field] = typeof value === "string" ? value.trim() : value;
+    });
+    setArrayRows((prev) => [...prev, newRow]);
+    setInsertRowValues({});
+    onAddRow && onAddRow(newRow);
+  };
   useEffect19(() => {
-    var _a;
+    var _a2;
     if (setSelectedRow) {
       setSelectedRow(arrayRows[selectedIndex]);
-      setSelectionModel(((_a = arrayRows[selectedIndex]) == null ? void 0 : _a.id) ? [arrayRows[selectedIndex].id] : []);
+      setSelectionModel(((_a2 = arrayRows[selectedIndex]) == null ? void 0 : _a2.id) ? [arrayRows[selectedIndex].id] : []);
     }
   }, [selectedIndex]);
   useEffect19(() => {
@@ -5308,7 +5364,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     }
   }, [data]);
   const dataConvertRows = (data2, columnId) => {
-    var _a;
+    var _a2;
     let dataConvert = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
@@ -5326,7 +5382,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     setArrayRows(dataConvert);
     if (arrayRows.length == 0 && (groupDataLenght < 1 && validationTreeData != true)) {
       setSelectedRow && setSelectedRow(dataConvert[selectedIndex]);
-      setSelectionModel([(_a = dataConvert[0]) == null ? void 0 : _a.id]);
+      setSelectionModel([(_a2 = dataConvert[0]) == null ? void 0 : _a2.id]);
     }
   };
   const handleSelectionChange = (newSelection) => {
@@ -5368,15 +5424,56 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       }
     }
   };
-  const processedColumns = columns.map((col) => {
-    if (col.width !== void 0) {
-      return col;
-    }
-    if (col.flex !== void 0) {
-      return col;
-    }
-    return __spreadProps(__spreadValues({}, col), {
-      flex: 1
+  const processedColumns = columns.map((col, index) => {
+    const baseCol = col.width !== void 0 || col.flex !== void 0 ? col : __spreadProps(__spreadValues({}, col), { flex: 1 });
+    if (!showInsertRow) return baseCol;
+    const isLastColumn = index === columns.length - 1;
+    const isInputField = !isLastColumn && insertRowTargetFields.includes(baseCol.field);
+    const originalRenderCell = baseCol.renderCell;
+    return __spreadProps(__spreadValues({}, baseCol), {
+      renderCell: (params) => {
+        if (params.id !== INSERT_ROW_ID) {
+          return originalRenderCell ? originalRenderCell(params) : params.formattedValue;
+        }
+        if (isInputField) {
+          const fieldConfig = normalizedInsertRowFields.find((item) => item.field === baseCol.field);
+          const setFieldValue = (newValue) => setInsertRowValues((prev) => __spreadProps(__spreadValues({}, prev), { [baseCol.field]: newValue }));
+          if (fieldConfig == null ? void 0 : fieldConfig.renderCell) {
+            return fieldConfig.renderCell({
+              value: insertRowValues[baseCol.field],
+              onChange: setFieldValue,
+              field: baseCol.field
+            });
+          }
+          return /* @__PURE__ */ React44.createElement(
+            TextField7,
+            {
+              variant: "outlined",
+              size: "small",
+              placeholder: (fieldConfig == null ? void 0 : fieldConfig.placeholder) || baseCol.headerName || `Escribir ${baseCol.field}`,
+              value: insertRowValues[baseCol.field] || "",
+              onChange: (e) => setFieldValue(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleAddInsertRow();
+              },
+              sx: { width: "100%", "& .MuiOutlinedInput-root": { height: "32px" } }
+            }
+          );
+        }
+        if (isLastColumn) {
+          return /* @__PURE__ */ React44.createElement(
+            Button19,
+            {
+              variant: "contained",
+              size: "small",
+              disabled: !hasInsertRowValue(),
+              onClick: handleAddInsertRow
+            },
+            "Agregar"
+          );
+        }
+        return null;
+      }
     });
   });
   const columnVisibilityModel = {};
@@ -5399,7 +5496,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
   return /* @__PURE__ */ React44.createElement(React44.Fragment, null, data && /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ React44.createElement(
     DataGridPro,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      getRowId,
+      getRowId: showInsertRow ? resolvedGetRowId : getRowId,
+      pinnedRows,
       apiRef,
       rowHeight: styleRowHeight,
       rows: arrayRows,
@@ -5436,6 +5534,12 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       },
       sx: {
         maxHeight: maxHeight ? `${maxHeight}px` : "none",
+        "& .MuiDataGrid-pinnedRows": {
+          boxShadow: "0px -2px 3px -2px rgba(0,0,0,0.15)"
+        },
+        "& .MuiDataGrid-pinnedRows .MuiDataGrid-cell": {
+          backgroundColor: "#FBFBFB"
+        },
         "& .MuiDataGrid-columnHeaders": {
           display: disableHeader == true ? "none" : "block"
         },
@@ -5632,7 +5736,7 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
 
 // src/Components/SCDialog.tsx
 import React46, { useEffect as useEffect20, useState as useState27 } from "react";
-import { Button as Button19, Typography as Typography26, Modal as Modal5, Dialog as Dialog4, DialogActions as DialogActions4, DialogContent as DialogContent4, DialogTitle as DialogTitle4, IconButton as IconButton17, Tooltip as Tooltip8, Box as Box27, SvgIcon as SvgIcon10 } from "@mui/material";
+import { Button as Button20, Typography as Typography26, Modal as Modal5, Dialog as Dialog4, DialogActions as DialogActions4, DialogContent as DialogContent4, DialogTitle as DialogTitle4, IconButton as IconButton17, Tooltip as Tooltip8, Box as Box27, SvgIcon as SvgIcon10 } from "@mui/material";
 import Grid11 from "@mui/material/Grid";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -5697,7 +5801,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   };
   const dialogActions = actions == false ? false : actions != void 0 ? actions : [{ text: "Cerrar", fn: handleClose }];
   content = content != null ? content : { component: /* @__PURE__ */ React46.createElement(Box27, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ React46.createElement("div", null, buttonDialog ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React46.createElement(Tooltip8, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React46.createElement(Button19, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ React46.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React46.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React46.createElement(IconButton17, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React46.createElement(SvgIcon10, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React46.createElement(Modal5, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React46.createElement("div", null, buttonDialog ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React46.createElement(Tooltip8, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React46.createElement(Button20, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ React46.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React46.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React46.createElement(IconButton17, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React46.createElement(SvgIcon10, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React46.createElement(Modal5, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React46.createElement(
     Dialog4,
     {
       fullScreen: typeView === "mobile" ? true : false,
@@ -5753,7 +5857,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__ */ React46.createElement(DialogActions4, { sx: { zIndex: 1200, gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
-      Button19,
+      Button20,
       {
         variant: "text",
         color: dialogActions[0].color || "primary",
@@ -5765,7 +5869,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
       dialogActions[0].text
     ), /* @__PURE__ */ React46.createElement(Box27, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
       return /* @__PURE__ */ React46.createElement(
-        Button19,
+        Button20,
         {
           key: index + 1,
           variant: index === dialogActions.length - 2 ? "contained" : "text",
@@ -5779,7 +5883,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
       );
     }))) : dialogActions.map((boton, index) => {
       return /* @__PURE__ */ React46.createElement(
-        Button19,
+        Button20,
         {
           key: index,
           variant: index === dialogActions.length - 1 ? "contained" : "text",
@@ -5800,7 +5904,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 
 // src/Components/SCDownloadExcelTable.tsx
 import React47 from "react";
-import { Button as Button20 } from "@mui/material";
+import { Button as Button21 } from "@mui/material";
 import FileDownloadOutlinedIcon2 from "@mui/icons-material/FileDownloadOutlined";
 import * as XLSX from "xlsx";
 var SCDownloadExcelTable = ({
@@ -5834,7 +5938,7 @@ var SCDownloadExcelTable = ({
     XLSX.writeFile(workbook, `${fileName}.xlsx`);
   };
   return /* @__PURE__ */ React47.createElement(
-    Button20,
+    Button21,
     {
       onClick: descargaExcel,
       startIcon: /* @__PURE__ */ React47.createElement(FileDownloadOutlinedIcon2, null),
@@ -6104,6 +6208,10 @@ var SCTime = ({
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
+  const handleTimeFieldChange = (newValue) => {
+    const dayjsValue = newValue ? dayjs11(newValue) : null;
+    setState(dayjsValue);
+  };
   const handleClose = () => {
     setIsOpenPopover(false);
     setAnchorEl(null);
@@ -6117,6 +6225,7 @@ var SCTime = ({
       required,
       error: hasError,
       onClick: handleTimeFieldClick,
+      onChange: handleTimeFieldChange,
       slotProps: {
         textField: {
           InputProps: {
@@ -6719,7 +6828,6 @@ var components = {
         color: theme.palette.primary.main
       }),
       colorDefault: ({ theme }) => ({
-        backgroundColor: theme.palette.default.main,
         color: theme.palette.default.contrastText
       }),
       deleteIcon: ({ theme }) => ({
@@ -6829,47 +6937,6 @@ var components = {
         height: "inherit",
         borderRadius: 4,
         variants: [
-          {
-            props: { variant: "outlined", color: "default" },
-            style: {
-              border: `1px solid ${theme.palette.grey[400]}`,
-              backgroundColor: "transparent ",
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.default.main
-              }
-            }
-          },
-          {
-            props: { variant: "standard", color: "default" },
-            style: {
-              backgroundColor: theme.palette.default.main,
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.default.dark
-              }
-            }
-          },
-          {
-            props: { variant: "filled", color: "default" },
-            style: {
-              backgroundColor: theme.palette.grey[50],
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.grey[100]
-              }
-            }
-          },
-          {
-            props: { variant: "filled", color: "default" },
-            style: {
-              backgroundColor: theme.palette.grey[50],
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.grey[100]
-              }
-            }
-          },
           {
             props: { variant: "standard", avatar: true },
             style: {
@@ -6940,7 +7007,40 @@ var components = {
           }
         ]
       })
-    }
+    },
+    variants: [
+      {
+        props: { variant: "outlined", color: "default" },
+        style: ({ theme }) => ({
+          border: `1px solid ${theme.palette.grey[400]}`,
+          backgroundColor: "transparent",
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.default.main
+          }
+        })
+      },
+      {
+        props: { variant: "standard", color: "default" },
+        style: ({ theme }) => ({
+          backgroundColor: theme.palette.default.main,
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.default.dark
+          }
+        })
+      },
+      {
+        props: { variant: "filled", color: "default" },
+        style: ({ theme }) => ({
+          backgroundColor: theme.palette.grey[50],
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.grey[100]
+          }
+        })
+      }
+    ]
   },
   MuiAvatar: {
     styleOverrides: {