frontend-plus-react 0.1.5 → 0.1.6

package/dist/index.js

@@ -786,7 +786,7 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import { CircularProgress, Typography as Typography5, Box as Box5, Alert, useTheme as useTheme3, Button as Button3 } from "@mui/material";
+import { CircularProgress, Typography as Typography5, Box as Box7, Alert, useTheme as useTheme3 } from "@mui/material";
 
 // src/utils/functions.tsx
 var JSON4all = __toESM(require_json4all(), 1);
@@ -986,9 +986,18 @@ var useRedirectPath = () => {
 
 // src/utils/functions.tsx
 var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
-
-// src/components/grid/GenericDataGrid.tsx
-import AddIcon from "@mui/icons-material/Add";
+var getDetailTableAndFixedFieldsForDetailTableAbr = (tableDefinition, detailTableAbr, row) => {
+  const detailTable = tableDefinition.detailTables.find((dt) => dt.abr === detailTableAbr);
+  let fixedFields = [];
+  detailTable.fields.forEach((field) => {
+    if (typeof field === "string") {
+      fixedFields.push({ fieldName: field, value: row[field] });
+    } else {
+      fixedFields.push({ fieldName: field.target, value: row[field.source] });
+    }
+  });
+  return { detailTable, fixedFields };
+};
 
 // src/components/ConfirmDialog.tsx
 import Dialog from "@mui/material/Dialog";
@@ -1022,7 +1031,8 @@ var ConfirmDialog = ({ open, onClose, title, message }) => {
 import { Box, IconButton, Tooltip, Typography } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
   const isPrimaryKey = fieldDef.isPk;
@@ -1045,7 +1055,7 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
           sx: {
             fontWeight: "bold",
             textDecoration: isPrimaryKey ? "underline" : "none",
-            fontSize: "0.875rem"
+            fontSize: "o.930rem"
             // Puedes ajustar el tamaño si es necesario
           },
           children: column.name
@@ -1054,17 +1064,30 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
     }
   );
 };
-var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ jsx3(
-  IconButton,
-  {
-    color: "inherit",
-    onClick: toggleFilterVisibility,
-    size: "small",
-    title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
-    sx: { p: 0.5 },
-    children: isFilterRowVisible ? /* @__PURE__ */ jsx3(SearchOffIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 20 } })
-  }
-);
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      color: "inherit",
+      onClick: toggleFilterVisibility,
+      size: "small",
+      title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+      sx: { p: 0.25 },
+      children: isFilterRowVisible ? /* @__PURE__ */ jsx3(SearchOffIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 18 } })
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      onClick: () => {
+      },
+      size: "small",
+      title: "Opciones de esta tabla",
+      sx: { p: 0.25 },
+      children: /* @__PURE__ */ jsx3(MoreVertIcon, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+    }
+  )
+] });
 var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx3(Tooltip, { title: detailTable.label, children: /* @__PURE__ */ jsx3(Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
 
 // src/components/grid/FilterInputRender.tsx
@@ -1085,6 +1108,7 @@ function FilterInputRenderer({
       }),
       sx: {
         width: "100%",
+        height: 25,
         margin: "0",
         border: "1px solid #ccc",
         borderRadius: "4px",
@@ -1099,35 +1123,38 @@ function FilterInputRenderer({
 var FilterInputRender_default = FilterInputRenderer;
 
 // src/components/grid/renderers/summaryCellRenderers.tsx
+import { Box as Box2 } from "@mui/material";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible, filters, setFilters) => {
   const { column } = props;
   const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === column.key);
   if (fixedFieldEntry && fixedFieldEntry.until === void 0 || !isFilterRowVisible) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx5(Box2, { children: /* @__PURE__ */ jsx5(
     FilterInputRender_default,
     {
       column,
       filters,
       setFilters
     }
-  );
+  ) });
 };
 var actionsColumnSummaryCellRenderer = (props) => null;
 var detailColumnCellSummaryRenderer = (props) => null;
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { Box as Box4, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
+import { Box as Box5, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import ViewHeadlineIcon from "@mui/icons-material/ViewHeadline";
 import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
 
 // src/components/grid/ExampleClientSideComponent.tsx
-import { Box as Box2, Typography as Typography2 } from "@mui/material";
+import { Box as Box3, Typography as Typography2 } from "@mui/material";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
   const value = row[column.key];
-  return /* @__PURE__ */ jsx6(Box2, { sx: {
+  return /* @__PURE__ */ jsx6(Box3, { sx: {
     padding: 0.5,
     width: "100%",
     height: "100%",
@@ -1139,13 +1166,13 @@ var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
 var ExampleClientSideComponent_default = ExampleClientSideComponent;
 
 // src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box3, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box4, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
   const clientSideName = fieldDefinition?.clientSide || "Desconocido";
-  return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs3(
-    Box3,
+  return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs4(
+    Box4,
     {
       sx: {
         display: "flex",
@@ -1205,17 +1232,9 @@ var allColumnsCellRenderer = (props) => {
     const detailTableAbr = row[DETAIL_ROW_INDICATOR];
     const detailColumn = column;
     if (column.customType === "detail" && detailColumn.detailTable.abr === detailTableAbr) {
-      const detailTable = detailColumn.tableDefinition.detailTables.find((dt) => dt.abr === detailTableAbr);
-      let fixedFields = [];
-      detailTable.fields.forEach((field) => {
-        if (typeof field === "string") {
-          fixedFields.push({ fieldName: field, value: row[field] });
-        } else {
-          fixedFields.push({ fieldName: field.target, value: row[field.source] });
-        }
-      });
+      const { detailTable, fixedFields } = getDetailTableAndFixedFieldsForDetailTableAbr(detailColumn.tableDefinition, detailTableAbr, row);
       return /* @__PURE__ */ jsx8(
-        Box4,
+        Box5,
         {
           sx: {
             // Se eliminó el padding para que la sub-grilla se extienda por completo
@@ -1230,7 +1249,7 @@ var allColumnsCellRenderer = (props) => {
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => e.stopPropagation(),
           onDoubleClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields })
+          children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields, gridStyles: { height: 322 } })
         }
       );
     }
@@ -1263,7 +1282,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box4, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box5, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
     }
     case "detail": {
       const detailColumn = column;
@@ -1271,10 +1290,9 @@ var allColumnsCellRenderer = (props) => {
       const isExpanded = tableData.some(
         (r) => r[DETAIL_ROW_INDICATOR] === detailTable.abr && getPrimaryKeyValues(r, primaryKey) === getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey)
       );
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
         IconButton2,
         {
-          size: "small",
           onClick: (event) => {
             let rows = [...tableData];
             const rowId = getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey);
@@ -1292,17 +1310,51 @@ var allColumnsCellRenderer = (props) => {
             }
             event.stopPropagation();
           },
-          title: isExpanded ? "Contraer detalle" : "Expandir detalle",
-          sx: { p: 0.5 },
           children: isExpanded ? /* @__PURE__ */ jsx8(KeyboardArrowUpIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx8(KeyboardArrowDownIcon, { sx: { fontSize: 20 } })
         }
       ) }) });
     }
     case "action": {
       const actionColumn = column;
-      const { tableDefinition, handleDeleteRow } = actionColumn;
-      if (!tableDefinition.allow?.delete) return void 0;
-      return /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(Button2, { variant: "outlined", color: "error", size: "small", onClick: () => handleDeleteRow(row), title: "Eliminar fila", sx: { minWidth: 35, height: 30, p: 0.5, "& .MuiButton-startIcon": { m: 0 } }, children: /* @__PURE__ */ jsx8(DeleteIcon, { sx: { fontSize: 18 } }) }) });
+      const { tableDefinition, handleDeleteRow, handleAddRow } = actionColumn;
+      const gridActionButtons = [
+        {
+          action: "insert",
+          handler: handleAddRow,
+          icon: AddIcon,
+          title: "Agregar registro",
+          color: "success"
+        },
+        {
+          action: "delete",
+          handler: handleDeleteRow,
+          icon: DeleteIcon,
+          title: "Eliminar registro",
+          color: "error"
+        },
+        {
+          action: "vertical-edit",
+          handler: () => {
+          },
+          // implementar funcion
+          icon: ViewHeadlineIcon,
+          title: "Editar registro en forma de ficha",
+          color: "primary"
+        }
+      ];
+      return /* @__PURE__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx8(
+        Button2,
+        {
+          variant: "outlined",
+          color: actionDef.color,
+          size: "small",
+          onClick: () => actionDef.handler(row),
+          title: actionDef.title,
+          sx: { width: 22, minWidth: 22, height: 22, "& .MuiButton-startIcon": { m: 0 } },
+          children: /* @__PURE__ */ jsx8(actionDef.icon, { sx: { fontSize: 18 } })
+        },
+        actionDef.action
+      ) : null) });
     }
     default:
       return void 0;
@@ -1432,7 +1484,7 @@ function InputRenderer({
         newRow: rowToSend,
         oldRow: oldRowData,
         status
-      }, { reportOnSnackbar: false });
+      });
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1459,7 +1511,6 @@ function InputRenderer({
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
         onRowChange({ ...response.row }, true);
-        onClose(true, focusNextCell);
       }
       findChangedValues(oldRowData, response.row).forEach(
         (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
@@ -1485,15 +1536,12 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = useCallback3((event) => {
-    console.log("entra");
-    if (event.key === "Enter") {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight"].includes(event.key)) {
       handleCommit(editingValue, true, true);
       event.preventDefault();
       if (onEnterPress) {
-        onEnterPress(rowIdx, column.key);
+        onEnterPress(rowIdx, column.key, event.key);
       }
-    } else if (event.key === "Tab") {
-      handleCommit(editingValue, true, true);
     }
   }, [handleCommit, editingValue, column.key, rowIdx, onEnterPress]);
   const handleBlur = useCallback3(() => {
@@ -1528,6 +1576,7 @@ function InputRenderer({
 var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
+import { Box as Box6, Tooltip as Tooltip4 } from "@mui/material";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
@@ -1552,20 +1601,21 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         if (!isFieldEditableByUI) {
           return void 0;
         }
-        return /* @__PURE__ */ jsx10(
+        const rowId = getPrimaryKeyValues(props.row, primaryKey);
+        return /* @__PURE__ */ jsx10(Tooltip4, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
           InputRenderer_default,
           {
             ...props,
             tableDefinition,
             setCellFeedback,
             cellFeedback,
-            onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+            onEnterPress: (rowIndex, columnKey, key) => handleEnterKeyPressInEditor(rowIndex, columnKey, key, allColumns),
             setTableData,
             setLocalCellChanges,
             localCellChanges,
             primaryKey
           }
-        );
+        ) }) });
       }
       return void 0;
     }
@@ -1602,7 +1652,7 @@ function EmptyRowsRenderer() {
 }
 
 // src/components/grid/GenericDataGrid.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var getPrimaryKeyValues = (row, primaryKey) => {
   if (row[DETAIL_ROW_INDICATOR]) {
     primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
@@ -1615,8 +1665,10 @@ var NEW_ROW_INDICATOR = "$new";
 var DETAIL_ROW_INDICATOR = "$detail";
 var GenericDataGrid = ({
   tableName,
-  fixedFields
+  fixedFields,
+  gridStyles
 }) => {
+  const isOpenMenu = useIsDrawerOpen();
   const [tableDefinition, setTableDefinition] = useState4(null);
   const [tableData, setTableData] = useState4([]);
   const [isFilterRowVisible, setIsFilterRowVisible] = useState4(false);
@@ -1830,12 +1882,12 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, currentColumns) => {
+  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, key, currentColumns) => {
     if (dataGridRef.current && tableDefinition) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        return col.key !== "filterToggle" && col.key !== "deleteAction" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
+        return col.key !== "actionsColumn" && col.customType != "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
@@ -1852,7 +1904,7 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
         }
       }
     }
@@ -1892,13 +1944,20 @@ var GenericDataGrid = ({
         renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields, isFilterRowVisible, filters, setFilters)
       };
     });
+    const availableActions = [
+      tableDefinition.allow?.insert,
+      tableDefinition.allow?.delete,
+      tableDefinition.allow?.["vertical-edit"]
+    ].filter(Boolean).length;
+    const actionColumnWidth = availableActions === 0 ? 30 : 12 + availableActions * 25;
     const actionsColumn = {
-      key: "filterToggle",
+      key: "actionsColumn",
       customType: "action",
       tableDefinition,
       handleDeleteRow,
+      handleAddRow,
       name: "filterCol",
-      width: 50,
+      width: actionColumnWidth,
       editable: false,
       resizable: false,
       sortable: false,
@@ -1922,7 +1981,8 @@ var GenericDataGrid = ({
           resizable: false,
           sortable: false,
           editable: false,
-          width: 50,
+          width: 30,
+          minWidth: 30,
           renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
           renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
         });
@@ -1944,6 +2004,8 @@ var GenericDataGrid = ({
         }
         return void 0;
       },
+      editorOptions: { closeOnExternalRowChange: false },
+      //con esto no se pierde el foco
       renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
@@ -1962,6 +2024,7 @@ var GenericDataGrid = ({
     setTableData,
     localCellChanges,
     handleDeleteRow,
+    handleAddRow,
     fixedFields,
     tableData
   ]);
@@ -1977,6 +2040,11 @@ var GenericDataGrid = ({
       }
     });
   };
+  const handleCellKeyDown = (args, event) => {
+    if (["Tab", "Enter"].includes(event.key)) {
+      event.preventGridDefault();
+    }
+  };
   const handleCellClick = useCallback4((args) => {
     deselectAllOtherGrids(dataGridRef.current?.element);
     args.selectCell(true);
@@ -1988,29 +2056,20 @@ var GenericDataGrid = ({
     console.log("Is editable:", isEditable);
   }, [tableDefinition, fixedFields]);
   if (loading) {
-    return /* @__PURE__ */ jsxs4(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+    return /* @__PURE__ */ jsxs5(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
       /* @__PURE__ */ jsx12(CircularProgress, {}),
       /* @__PURE__ */ jsx12(Typography5, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
+    return /* @__PURE__ */ jsx12(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
   }
   if (!tableDefinition) {
-    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
+    return /* @__PURE__ */ jsx12(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsxs4(Box5, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    tableDefinition.allow?.insert && /* @__PURE__ */ jsx12(Box5, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ jsx12(
-      Button3,
-      {
-        variant: "contained",
-        onClick: handleAddRow,
-        startIcon: /* @__PURE__ */ jsx12(AddIcon, {}),
-        children: "Nuevo Registro"
-      }
-    ) }),
+  return /* @__PURE__ */ jsxs5(Box7, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
     /* @__PURE__ */ jsx12(
-      Box5,
+      Box7,
       {
         sx: {
           backgroundColor: theme.palette.primary.main,
@@ -2024,15 +2083,15 @@ var GenericDataGrid = ({
           ml: 2,
           mr: 2
         },
-        children: /* @__PURE__ */ jsxs4(Typography5, { variant: "subtitle1", component: "div", children: [
+        children: /* @__PURE__ */ jsxs5(Typography5, { variant: "subtitle2", component: "div", children: [
           cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
-          " - mostrando ",
-          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} registros filtrados`
+          " - ",
+          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} (F)`
         ] })
       }
     ),
     /* @__PURE__ */ jsx12(
-      Box5,
+      Box7,
       {
         sx: {
           flexGrow: 1,
@@ -2046,6 +2105,7 @@ var GenericDataGrid = ({
         children: /* @__PURE__ */ jsx12(
           DataGrid,
           {
+            className: "rdg-light",
             ref: dataGridRef,
             columns,
             rows: filteredRows.map((row) => ({
@@ -2058,13 +2118,14 @@ var GenericDataGrid = ({
             onSelectedCellChange: handleSelectedCellChange,
             onRowsChange: handleRowsChange,
             selectedRows,
-            rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 35,
-            style: { height: "100%", width: "100%", boxSizing: "border-box" },
-            headerRowHeight: 35,
+            rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 30,
+            style: { ...{ height: "100%", width: "100%", boxSizing: "border-box" }, ...gridStyles },
+            headerRowHeight: 30,
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
-            summaryRowHeight: isFilterRowVisible ? 35 : 0,
+            summaryRowHeight: isFilterRowVisible ? 30 : 0,
             renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
-            onCellClick: handleCellClick
+            onCellClick: handleCellClick,
+            onCellKeyDown: handleCellKeyDown
           }
         )
       }
@@ -2090,7 +2151,7 @@ import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as
 import { useEffect as useEffect3 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box8,
+  Box as Box10,
   AppBar,
   Toolbar,
   Typography as Typography8,
@@ -2183,7 +2244,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 // src/components/SideMenu.tsx
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box7, Typography as Typography7, Collapse } from "@mui/material";
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box9, Typography as Typography7, Collapse } from "@mui/material";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import TableChartIcon from "@mui/icons-material/TableChart";
@@ -2198,30 +2259,30 @@ import { useNavigate as useNavigate2, useLocation } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
 
 // src/pages/WScreens.tsx
-import { Box as Box6, Typography as Typography6, Paper } from "@mui/material";
+import { Box as Box8, Typography as Typography6, Paper } from "@mui/material";
 import ConstructionIcon from "@mui/icons-material/Construction";
 import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ jsxs5(Typography6, { variant: "h5", component: "h1", gutterBottom: true, children: [
+  return /* @__PURE__ */ jsx14(Box8, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs6(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+    /* @__PURE__ */ jsxs6(Typography6, { variant: "h5", component: "h1", gutterBottom: true, children: [
       "\xA1Bienvenido a tu WScreen: ",
       screenName,
       "!"
     ] }),
     /* @__PURE__ */ jsx14(Typography6, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
+    /* @__PURE__ */ jsx14(Box8, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
   ] }) });
 };
 var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+  return /* @__PURE__ */ jsx14(Box8, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs6(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
     /* @__PURE__ */ jsx14(Typography6, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
-    /* @__PURE__ */ jsxs5(Typography6, { variant: "body1", color: "warning.dark", children: [
+    /* @__PURE__ */ jsxs6(Typography6, { variant: "body1", color: "warning.dark", children: [
       'No se encontr\xF3 un componente implementado para la **WScreen**: **`"$',
       screenName,
       '"`**. Por favor, verifica el `menuType` en la definici\xF3n del men\xFA o aseg\xFArate de que el componente est\xE9 correctamente importado y mapeado en el frontend.'
     ] }),
-    /* @__PURE__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
+    /* @__PURE__ */ jsx14(Box8, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
   ] }) });
 };
 var wScreens = {
@@ -2232,7 +2293,7 @@ var wScreens = {
 var WScreens_default = FallbackWScreen;
 
 // src/components/SideMenu.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation();
@@ -2295,8 +2356,8 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   } else {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
       ListItemButton,
       {
         onClick: handleClick,
@@ -2339,17 +2400,17 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx15(Box7, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx15(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  return /* @__PURE__ */ jsxs6(Box7, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
+  return /* @__PURE__ */ jsxs7(Box9, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs7(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
       /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx15(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx15(UnfoldMoreIcon, {}) }),
       /* @__PURE__ */ jsx15(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
     /* @__PURE__ */ jsx15(Divider, {}),
-    /* @__PURE__ */ jsxs6(List, { children: [
-      /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
+    /* @__PURE__ */ jsxs7(List, { children: [
+      /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs7(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
         /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx15(HomeIcon, {}) }),
         /* @__PURE__ */ jsx15(ListItemText, { primary: "Inicio" })
       ] }) }),
@@ -2397,7 +2458,7 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var drawerWidth = 240;
 var MainLayout = () => {
   const { clientContext } = useApp();
@@ -2420,10 +2481,10 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx16(Box8, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx16(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx16(Box10, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx16(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs7(Box8, { sx: { display: "flex", height: "100vh" }, children: [
+  return /* @__PURE__ */ jsxs8(Box10, { sx: { display: "flex", height: "100vh" }, children: [
     /* @__PURE__ */ jsx16(CssBaseline, {}),
     /* @__PURE__ */ jsx16(
       AppBar,
@@ -2444,7 +2505,7 @@ var MainLayout = () => {
             })
           }
         },
-        children: /* @__PURE__ */ jsxs7(Toolbar, { children: [
+        children: /* @__PURE__ */ jsxs8(Toolbar, { children: [
           /* @__PURE__ */ jsx16(
             IconButton3,
             {
@@ -2472,7 +2533,7 @@ var MainLayout = () => {
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       Drawer,
       {
         variant: "persistent",
@@ -2508,7 +2569,7 @@ var MainLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx16(
-      Box8,
+      Box10,
       {
         component: "main",
         sx: {
@@ -2543,9 +2604,9 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box9, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
+import { Box as Box11, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
 import { useNavigate as useNavigate4 } from "react-router-dom";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -2587,7 +2648,7 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs8(Box9, { sx: style, children: [
+      children: /* @__PURE__ */ jsxs9(Box11, { sx: style, children: [
         /* @__PURE__ */ jsx17(Typography9, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
         /* @__PURE__ */ jsx17(Typography9, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
         /* @__PURE__ */ jsx17(Button5, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
@@ -2598,11 +2659,11 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box10, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box12, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  return /* @__PURE__ */ jsxs9(Box10, { sx: { p: 3 }, children: [
+  return /* @__PURE__ */ jsxs10(Box12, { sx: { p: 3 }, children: [
     /* @__PURE__ */ jsx18(Typography10, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
     /* @__PURE__ */ jsx18(Typography10, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
@@ -2611,14 +2672,14 @@ var HomePage_default = HomePage;
 
 // src/pages/LogoutPage.tsx
 import { useEffect as useEffect4 } from "react";
-import { Box as Box11, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect4(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs10(Box11, { sx: {
+  return /* @__PURE__ */ jsxs11(Box13, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -2634,13 +2695,13 @@ var LogoutPage_default = LogoutPage;
 
 // src/pages/LoginPage.tsx
 import { useState as useState6 } from "react";
-import { Button as Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box12, CircularProgress as CircularProgress3 } from "@mui/material";
+import { Button as Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box14, CircularProgress as CircularProgress3 } from "@mui/material";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useNavigate as useNavigate5 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -2697,15 +2758,15 @@ var LoginPage = () => {
     }
   };
   return /* @__PURE__ */ jsx20(
-    Box12,
+    Box14,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
-      children: /* @__PURE__ */ jsxs11(
-        Box12,
+      children: /* @__PURE__ */ jsxs12(
+        Box14,
         {
           width: "100%",
           maxWidth: "400px",
@@ -2715,8 +2776,8 @@ var LoginPage = () => {
           boxShadow: 3,
           children: [
             /* @__PURE__ */ jsx20(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
-            /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs12("div", { children: [
                 /* @__PURE__ */ jsx20("label", { htmlFor: "username", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
                 /* @__PURE__ */ jsx20(
                   Controller,
@@ -2739,7 +2800,7 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsxs12("div", { children: [
                 /* @__PURE__ */ jsx20("label", { htmlFor: "password", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
                 /* @__PURE__ */ jsx20(
                   Controller,
@@ -2762,12 +2823,12 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx20(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+              /* @__PURE__ */ jsx20(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
                 /* @__PURE__ */ jsx20(CircularProgress3, { size: 20, sx: { mr: 1 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
-            loginError && /* @__PURE__ */ jsxs11(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
+            loginError && /* @__PURE__ */ jsxs12(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
               /* @__PURE__ */ jsx20(AlertTitle, { children: "Error" }),
               loginError
@@ -2794,7 +2855,7 @@ import {
   FormControlLabel,
   FormHelperText,
   Typography as Typography14,
-  Box as Box14,
+  Box as Box16,
   CircularProgress as CircularProgress4,
   Alert as Alert3,
   Divider as Divider2,
@@ -2802,13 +2863,13 @@ import {
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box13, Typography as Typography13, Paper as Paper2 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box15, Typography as Typography13, Paper as Paper2 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
-  return /* @__PURE__ */ jsxs12(Paper2, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
+  return /* @__PURE__ */ jsxs13(Paper2, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
     /* @__PURE__ */ jsx21(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
     /* @__PURE__ */ jsx21(Typography13, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
-    /* @__PURE__ */ jsx21(Box13, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx21("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx21(Box15, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx21("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
     /* @__PURE__ */ jsx21(Typography13, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
@@ -2823,7 +2884,7 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
@@ -3038,9 +3099,9 @@ var ProcedureForm = () => {
       sx: { fontSize: "0.8rem" }
     };
     if (param.options && param.options.length > 0) {
-      return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
+      return /* @__PURE__ */ jsxs14(FormControl, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
         /* @__PURE__ */ jsx22(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           Select,
           {
             labelId: `${param.name}-label`,
@@ -3101,7 +3162,7 @@ var ProcedureForm = () => {
       case "jsona":
         return /* @__PURE__ */ jsx22(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
-        return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
+        return /* @__PURE__ */ jsxs14(FormControl, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
           /* @__PURE__ */ jsx22(Typography14, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
           /* @__PURE__ */ jsx22(
             "input",
@@ -3129,13 +3190,13 @@ var ProcedureForm = () => {
     if (ComponentToRender) {
       return /* @__PURE__ */ jsx22(ComponentToRender, { data: procedureResultData });
     } else {
-      return /* @__PURE__ */ jsxs13(Paper3, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs13(Typography14, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+      return /* @__PURE__ */ jsxs14(Paper3, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
+        /* @__PURE__ */ jsxs14(Typography14, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
           "el componente para resolver el resultOk: '",
           procedure.resultOk,
           "' definido en el procedure no existe o no est\xE1 mapeado."
         ] }),
-        /* @__PURE__ */ jsx22(Box14, { sx: {
+        /* @__PURE__ */ jsx22(Box16, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
@@ -3144,7 +3205,7 @@ var ProcedureForm = () => {
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs13(Box14, { sx: {
+    return /* @__PURE__ */ jsxs14(Box16, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -3160,7 +3221,7 @@ var ProcedureForm = () => {
   }
   return (
     // Esta es la Box más externa que ahora controlará el scroll
-    /* @__PURE__ */ jsxs13(Box14, { sx: {
+    /* @__PURE__ */ jsxs14(Box16, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -3178,13 +3239,13 @@ var ProcedureForm = () => {
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
       /* @__PURE__ */ jsx22(Typography14, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
-      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs13(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
+      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs14(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
         "Por favor, corrige los errores en el formulario antes de enviar.",
         /* @__PURE__ */ jsx22("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx22("li", { children: err }, idx)) })
       ] }),
       !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx22(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
       !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx22(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
-      /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, children: [
         procedure.parameters.map((param) => /* @__PURE__ */ jsx22("div", { children: renderInputField(param) }, param.name)),
         /* @__PURE__ */ jsx22(
           Button7,
@@ -3200,15 +3261,15 @@ var ProcedureForm = () => {
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box14, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs14(Box16, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs13(Box14, { sx: { mt: 3 }, children: [
+      executionLog.length > 0 && /* @__PURE__ */ jsxs14(Box16, { sx: { mt: 3 }, children: [
         /* @__PURE__ */ jsx22(Divider2, { sx: { mb: 2 } }),
         /* @__PURE__ */ jsx22(Typography14, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
         /* @__PURE__ */ jsx22(
-          Box14,
+          Box16,
           {
             sx: {
               bgcolor: "grey.100",
@@ -3314,12 +3375,12 @@ var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
 import { useParams as useParams2 } from "react-router-dom";
-import { Box as Box15, Alert as Alert4, Typography as Typography15 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box17, Alert as Alert4, Typography as Typography15 } from "@mui/material";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var GenericDataGridPage = () => {
   const { tableName } = useParams2();
   if (!tableName) {
-    return /* @__PURE__ */ jsx24(Box15, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
+    return /* @__PURE__ */ jsx24(Box17, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert4, { severity: "error", children: [
       /* @__PURE__ */ jsx24(Typography15, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
       /* @__PURE__ */ jsx24(Typography15, { variant: "body1", children: "Por favor, aseg\xFArate de que la URL contenga el nombre de la tabla (ej. `/data/users`)." })
     ] }) });
@@ -3331,8 +3392,8 @@ var GenericDataGridPage_default = GenericDataGridPage;
 // src/pages/MenuTablePage.tsx
 import { useMemo as useMemo5 } from "react";
 import { useParams as useParams3 } from "react-router-dom";
-import { Box as Box16, Alert as Alert5, Typography as Typography16 } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box as Box18, Alert as Alert5, Typography as Typography16 } from "@mui/material";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -3374,7 +3435,7 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx25(Box16, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
+    return /* @__PURE__ */ jsx25(Box18, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs16(Alert5, { severity: "error", children: [
       /* @__PURE__ */ jsx25(Typography16, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
       /* @__PURE__ */ jsx25(Typography16, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
@@ -3390,7 +3451,7 @@ var MenuTablePage = () => {
 var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
   const dispatch = useAppDispatch();
@@ -3401,10 +3462,10 @@ var LocationTracker = () => {
 };
 function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
   const allWScreens = { ...wScreens, ...myWScreens || {} };
-  return /* @__PURE__ */ jsxs16(Routes, { children: [
+  return /* @__PURE__ */ jsxs17(Routes, { children: [
     /* @__PURE__ */ jsx26(Route, { path: "/login", element: /* @__PURE__ */ jsx26(LoginPage_default, {}) }),
     /* @__PURE__ */ jsx26(Route, { path: "/logout", element: /* @__PURE__ */ jsx26(LogoutPage_default, {}) }),
-    /* @__PURE__ */ jsxs16(Route, { element: /* @__PURE__ */ jsxs16(PrivateRoute_default, { children: [
+    /* @__PURE__ */ jsxs17(Route, { element: /* @__PURE__ */ jsxs17(PrivateRoute_default, { children: [
       /* @__PURE__ */ jsx26(InitialRedirectHandler_default, {}),
       /* @__PURE__ */ jsx26(MainLayout_default, {})
     ] }), children: [
@@ -3448,9 +3509,9 @@ var App = ({
       extendResultsOk(myResultsOk);
     }
   }, [myClientSides, myResultsOk]);
-  return /* @__PURE__ */ jsx26(Provider, { store, children: /* @__PURE__ */ jsx26(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs16(BrowserRouter, { children: [
+  return /* @__PURE__ */ jsx26(Provider, { store, children: /* @__PURE__ */ jsx26(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs17(BrowserRouter, { children: [
     /* @__PURE__ */ jsx26(LocationTracker, {}),
-    /* @__PURE__ */ jsx26(AppProvider, { children: /* @__PURE__ */ jsxs16(SnackbarProvider, { children: [
+    /* @__PURE__ */ jsx26(AppProvider, { children: /* @__PURE__ */ jsxs17(SnackbarProvider, { children: [
       /* @__PURE__ */ jsx26(
         FrontendPlusReactRoutes,
         {