frontend-plus-react 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -986,9 +986,18 @@ var useRedirectPath = () => {
 
 // src/utils/functions.tsx
 var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
-
-// src/components/grid/GenericDataGrid.tsx
-var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_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
 var _Dialog = require('@mui/material/Dialog'); var _Dialog2 = _interopRequireDefault(_Dialog);
@@ -1022,6 +1031,7 @@ var ConfirmDialog = ({ open, onClose, title, message }) => {
 
 var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
 var _SearchOff = require('@mui/icons-material/SearchOff'); var _SearchOff2 = _interopRequireDefault(_SearchOff);
+var _MoreVert = require('@mui/icons-material/MoreVert'); var _MoreVert2 = _interopRequireDefault(_MoreVert);
 
 var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
@@ -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__ */ _jsxruntime.jsx.call(void 0, 
-  _material.IconButton,
-  {
-    color: "inherit",
-    onClick: toggleFilterVisibility,
-    size: "small",
-    title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
-    sx: { p: 0.5 },
-    children: isFilterRowVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SearchOff2.default, { sx: { fontSize: 20 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { sx: { fontSize: 20 } })
-  }
-);
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.IconButton,
+    {
+      color: "inherit",
+      onClick: toggleFilterVisibility,
+      size: "small",
+      title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+      sx: { p: 0.25 },
+      children: isFilterRowVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SearchOff2.default, { sx: { fontSize: 18 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { sx: { fontSize: 18 } })
+    }
+  ),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.IconButton,
+    {
+      onClick: () => {
+      },
+      size: "small",
+      title: "Opciones de esta tabla",
+      sx: { p: 0.25 },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MoreVert2.default, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+    }
+  )
+] });
 var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: detailTable.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.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",
@@ -1100,18 +1124,19 @@ var FilterInputRender_default = FilterInputRenderer;
 
 // src/components/grid/renderers/summaryCellRenderers.tsx
 
+
 var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible, filters, setFilters) => {
   const { column } = props;
   const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _3 => _3.find, 'call', _4 => _4((f) => f.fieldName === column.key)]);
   if (fixedFieldEntry && fixedFieldEntry.until === void 0 || !isFilterRowVisible) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     FilterInputRender_default,
     {
       column,
       filters,
       setFilters
     }
-  );
+  ) });
 };
 var actionsColumnSummaryCellRenderer = (props) => null;
 var detailColumnCellSummaryRenderer = (props) => null;
@@ -1120,7 +1145,9 @@ var detailColumnCellSummaryRenderer = (props) => null;
 
 var _KeyboardArrowDown = require('@mui/icons-material/KeyboardArrowDown'); var _KeyboardArrowDown2 = _interopRequireDefault(_KeyboardArrowDown);
 var _KeyboardArrowUp = require('@mui/icons-material/KeyboardArrowUp'); var _KeyboardArrowUp2 = _interopRequireDefault(_KeyboardArrowUp);
+var _ViewHeadline = require('@mui/icons-material/ViewHeadline'); var _ViewHeadline2 = _interopRequireDefault(_ViewHeadline);
 var _Delete = require('@mui/icons-material/Delete'); var _Delete2 = _interopRequireDefault(_Delete);
+var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_Add);
 
 // src/components/grid/ExampleClientSideComponent.tsx
 
@@ -1205,15 +1232,7 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
         _material.Box,
         {
@@ -1230,7 +1249,7 @@ var allColumnsCellRenderer = (props) => {
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => e.stopPropagation(),
           onDoubleClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GenericDataGrid_default, { tableName: detailTable.table, fixedFields })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GenericDataGrid_default, { tableName: detailTable.table, fixedFields, gridStyles: { height: 322 } })
         }
       );
     }
@@ -1274,7 +1293,6 @@ var allColumnsCellRenderer = (props) => {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: detailTable.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _material.IconButton,
         {
-          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__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowUp2.default, { sx: { fontSize: 20 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { sx: { fontSize: 20 } })
         }
       ) }) });
     }
     case "action": {
       const actionColumn = column;
-      const { tableDefinition, handleDeleteRow } = actionColumn;
-      if (!_optionalChain([tableDefinition, 'access', _18 => _18.allow, 'optionalAccess', _19 => _19.delete])) return void 0;
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { 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__ */ _jsxruntime.jsx.call(void 0, _Delete2.default, { sx: { fontSize: 18 } }) }) });
+      const { tableDefinition, handleDeleteRow, handleAddRow } = actionColumn;
+      const gridActionButtons = [
+        {
+          action: "insert",
+          handler: handleAddRow,
+          icon: _Add2.default,
+          title: "Agregar registro",
+          color: "success"
+        },
+        {
+          action: "delete",
+          handler: handleDeleteRow,
+          icon: _Delete2.default,
+          title: "Eliminar registro",
+          color: "error"
+        },
+        {
+          action: "vertical-edit",
+          handler: () => {
+          },
+          // implementar funcion
+          icon: _ViewHeadline2.default,
+          title: "Editar registro en forma de ficha",
+          color: "primary"
+        }
+      ];
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Button,
+        {
+          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__ */ _jsxruntime.jsx.call(void 0, actionDef.icon, { sx: { fontSize: 18 } })
+        },
+        actionDef.action
+      ) : null) });
     }
     default:
       return void 0;
@@ -1356,7 +1408,7 @@ function InputRenderer({
       (key) => potentialUpdatedRow[key] !== void 0 && potentialUpdatedRow[key] !== null && String(potentialUpdatedRow[key]).trim() !== ""
     );
     const isNewRow = !arePKValuesFilled || potentialUpdatedRow[NEW_ROW_INDICATOR];
-    const isMandatoryField = tableDefinition.primaryKey.includes(column.key) || _optionalChain([tableDefinition, 'access', _20 => _20.fields, 'access', _21 => _21.find, 'call', _22 => _22((f) => f.name === column.key), 'optionalAccess', _23 => _23.nullable]) === false;
+    const isMandatoryField = tableDefinition.primaryKey.includes(column.key) || _optionalChain([tableDefinition, 'access', _18 => _18.fields, 'access', _19 => _19.find, 'call', _20 => _20((f) => f.name === column.key), 'optionalAccess', _21 => _21.nullable]) === false;
     const isMandatoryFieldEmpty = isNewRow && isMandatoryField && (processedNewValue === null || processedNewValue === void 0 || String(processedNewValue).trim() === "");
     if (processedNewValue === row[column.key] && !isNewRow && !isMandatoryFieldEmpty) {
       console.log("No se guard\xF3: el valor no cambi\xF3 (y no es una nueva fila o campo obligatorio vac\xEDo que se est\xE1 iniciando).");
@@ -1412,7 +1464,7 @@ function InputRenderer({
         }
       });
       if (localCellChanges.has(initialRowId)) {
-        _optionalChain([localCellChanges, 'access', _24 => _24.get, 'call', _25 => _25(initialRowId), 'optionalAccess', _26 => _26.forEach, 'call', _27 => _27((colKey) => {
+        _optionalChain([localCellChanges, 'access', _22 => _22.get, 'call', _23 => _23(initialRowId), 'optionalAccess', _24 => _24.forEach, 'call', _25 => _25((colKey) => {
           if (!rowToSend.hasOwnProperty(colKey)) {
             rowToSend[colKey] = potentialUpdatedRow[colKey];
           }
@@ -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,22 +1536,19 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, () => {
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
   const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _28 => _28.editable]) !== false;
+  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _26 => _26.editable]) !== false;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _InputBase2.default,
     {
@@ -1529,6 +1577,7 @@ var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
 
+
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
   switch (column.customType) {
@@ -1547,25 +1596,26 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
       } = defaultColumn;
       if (column.editable) {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-        const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _29 => _29.some, 'call', _30 => _30((f) => f.fieldName === column.key)]);
-        const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _31 => _31.editable]) !== false && !isFixedField;
+        const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _27 => _27.some, 'call', _28 => _28((f) => f.fieldName === column.key)]);
+        const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _29 => _29.editable]) !== false && !isFixedField;
         if (!isFieldEditableByUI) {
           return void 0;
         }
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        const rowId = getPrimaryKeyValues(props.row, primaryKey);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? _optionalChain([cellFeedback, 'optionalAccess', _30 => _30.message]) : "", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           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;
     }
@@ -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] = _react.useState.call(void 0, null);
   const [tableData, setTableData] = _react.useState.call(void 0, []);
   const [isFilterRowVisible, setIsFilterRowVisible] = _react.useState.call(void 0, false);
@@ -1830,12 +1882,12 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleEnterKeyPressInEditor = _react.useCallback.call(void 0, (rowIndex, columnKey, currentColumns) => {
+  const handleEnterKeyPressInEditor = _react.useCallback.call(void 0, (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" && (_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _33 => _33.clientSide]));
+        return col.key !== "actionsColumn" && col.customType != "detail" && (_optionalChain([fieldDefinition, 'optionalAccess', _31 => _31.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.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 });
+          _optionalChain([dataGridRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.selectCell, 'call', _35 => _35({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true })]);
         }
       }
     }
@@ -1863,11 +1915,11 @@ var GenericDataGrid = ({
   const columns = _react.useMemo.call(void 0, () => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _34 => _34.find, 'call', _35 => _35((f) => f.fieldName === field.name)]);
+      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _36 => _36.find, 'call', _37 => _37((f) => f.fieldName === field.name)]);
       return !(fixedFieldEntry && fixedFieldEntry.until === void 0);
     });
     const defaultColumns = fieldsToShow.map((fieldDef) => {
-      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _36 => _36.some, 'call', _37 => _37((f) => f.fieldName === fieldDef.name)]);
+      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _38 => _38.some, 'call', _39 => _39((f) => f.fieldName === fieldDef.name)]);
       const isFieldEditable = fieldDef.editable !== false && !isFixedField;
       return {
         key: fieldDef.name,
@@ -1892,13 +1944,20 @@ var GenericDataGrid = ({
         renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields, isFilterRowVisible, filters, setFilters)
       };
     });
+    const availableActions = [
+      _optionalChain([tableDefinition, 'access', _40 => _40.allow, 'optionalAccess', _41 => _41.insert]),
+      _optionalChain([tableDefinition, 'access', _42 => _42.allow, 'optionalAccess', _43 => _43.delete]),
+      _optionalChain([tableDefinition, 'access', _44 => _44.allow, 'optionalAccess', _45 => _45["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,12 +2040,17 @@ var GenericDataGrid = ({
       }
     });
   };
+  const handleCellKeyDown = (args, event) => {
+    if (["Tab", "Enter"].includes(event.key)) {
+      event.preventGridDefault();
+    }
+  };
   const handleCellClick = _react.useCallback.call(void 0, (args) => {
-    deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.element]));
+    deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.element]));
     args.selectCell(true);
-    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _40 => _40.fields, 'access', _41 => _41.find, 'call', _42 => _42((f) => f.name === args.column.key)]);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _43 => _43.some, 'call', _44 => _44((f) => f.fieldName === args.column.key)]);
-    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _45 => _45.editable]) !== false && !isFixedField;
+    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _48 => _48.fields, 'access', _49 => _49.find, 'call', _50 => _50((f) => f.name === args.column.key)]);
+    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _51 => _51.some, 'call', _52 => _52((f) => f.fieldName === args.column.key)]);
+    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _53 => _53.editable]) !== false && !isFixedField;
     console.log("Clicked column index:", args.column.idx);
     console.log("Clicked row index:", args.rowIdx);
     console.log("Is editable:", isEditable);
@@ -2000,15 +2068,6 @@ var GenericDataGrid = ({
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    _optionalChain([tableDefinition, 'access', _46 => _46.allow, 'optionalAccess', _47 => _47.insert]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Button,
-      {
-        variant: "contained",
-        onClick: handleAddRow,
-        startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
-        children: "Nuevo Registro"
-      }
-    ) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _material.Box,
       {
@@ -2024,10 +2083,10 @@ var GenericDataGrid = ({
           ml: 2,
           mr: 2
         },
-        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "subtitle1", component: "div", children: [
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "subtitle2", component: "div", children: [
           cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
-          " - mostrando ",
-          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} registros filtrados`
+          " - ",
+          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} (F)`
         ] })
       }
     ),
@@ -2046,6 +2105,7 @@ var GenericDataGrid = ({
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _reactdatagrid.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__ */ _jsxruntime.jsx.call(void 0, EmptyRowsRenderer, {}) },
-            onCellClick: handleCellClick
+            onCellClick: handleCellClick,
+            onCellKeyDown: handleCellKeyDown
           }
         )
       }
@@ -2197,43 +2258,7 @@ var _UnfoldLess = require('@mui/icons-material/UnfoldLess'); var _UnfoldLess2 =
 
 var _colors = require('@mui/material/colors');
 
-// src/pages/WScreens.tsx
-
-var _Construction = require('@mui/icons-material/Construction'); var _Construction2 = _interopRequireDefault(_Construction);
-
-
-var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "h5", component: "h1", gutterBottom: true, children: [
-      "\xA1Bienvenido a tu WScreen: ",
-      screenName,
-      "!"
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { mt: 3 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Construction2.default, { sx: { fontSize: 80, color: "primary.main" } }) })
-  ] }) });
-};
-var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { 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__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { mt: 3 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WarningAmber2.default, { sx: { fontSize: 80, color: "warning.dark" } }) })
-  ] }) });
-};
-var wScreens = {
-  "MyCustomDashboard": MyCustomDashboard
-  // Agrega más componentes de wScreen aquí:
-  // 'AnotherWScreen': AnotherWScreenComponent,
-};
-var WScreens_default = FallbackWScreen;
-
-// src/components/SideMenu.tsx
-
-var MenuListItem = ({ item, level, onMenuItemClick }) => {
+var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
   const navigate = _reactrouterdom.useNavigate.call(void 0, );
   const location = _reactrouterdom.useLocation.call(void 0, );
   const open = useSubMenuOpenState(item.name);
@@ -2254,7 +2279,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
       } else if (item.menuType === "proc") {
         path = `/procedures/${item.name}`;
       } else {
-        const WScreenComponent = wScreens[item.menuType];
+        const WScreenComponent = allWScreens[item.menuType];
         if (WScreenComponent !== void 0) {
           path = `/wScreens/${item.menuType}`;
         } else {
@@ -2279,7 +2304,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
       case "menu":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Folder2.default, { sx: { color: _colors.orange[800] } });
       default:
-        const WScreenComponent = wScreens[item2.menuType];
+        const WScreenComponent = allWScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DesktopWindows2.default, { sx: { color: _colors.grey[700] } });
         }
@@ -2314,13 +2339,14 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
       {
         item: subItem,
         level: level + 1,
-        onMenuItemClick
+        onMenuItemClick,
+        allWScreens
       },
       subItem.name
     )) }) })
   ] });
 };
-var SideMenu = ({ onMenuItemClick }) => {
+var SideMenu = ({ onMenuItemClick, allWScreens }) => {
   const { clientContext } = useApp();
   const navigate = _reactrouterdom.useNavigate.call(void 0, );
   const location = _reactrouterdom.useLocation.call(void 0, );
@@ -2359,7 +2385,8 @@ var SideMenu = ({ onMenuItemClick }) => {
         {
           item: menuItem,
           level: 1,
-          onMenuItemClick
+          onMenuItemClick,
+          allWScreens
         },
         menuItem.name
       ))
@@ -2399,7 +2426,8 @@ var useLogout_default = useLogout;
 // src/components/MainLayout.tsx
 
 var drawerWidth = 240;
-var MainLayout = () => {
+var MainLayout = (props) => {
+  const { allWScreens } = props;
   const { clientContext } = useApp();
   const logout = useLogout_default();
   const isDrawerOpen = useIsDrawerOpen();
@@ -2503,7 +2531,7 @@ var MainLayout = () => {
               children: isDrawerOpen ? clientContext.config.title : ""
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile, allWScreens })
         ]
       }
     ),
@@ -2603,7 +2631,7 @@ var SessionExpiredMessage_default = SessionExpiredMessage;
 var HomePage = () => {
   const { clientContext } = useApp();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _48 => _48.username])}` }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _54 => _54.username])}` }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
@@ -2732,7 +2760,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.username,
-                        helperText: _optionalChain([errors, 'access', _49 => _49.username, 'optionalAccess', _50 => _50.message]),
+                        helperText: _optionalChain([errors, 'access', _55 => _55.username, 'optionalAccess', _56 => _56.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2755,7 +2783,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.password,
-                        helperText: _optionalChain([errors, 'access', _51 => _51.password, 'optionalAccess', _52 => _52.message]),
+                        helperText: _optionalChain([errors, 'access', _57 => _57.password, 'optionalAccess', _58 => _58.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2833,7 +2861,7 @@ var ProcedureForm = () => {
   const [executionLog, setExecutionLog] = _react.useState.call(void 0, []);
   const [procedureResultData, setProcedureResultData] = _react.useState.call(void 0, null);
   const procedure = _react.useMemo.call(void 0, () => {
-    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _53 => _53.procedure])) {
+    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _59 => _59.procedure])) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
@@ -3124,7 +3152,7 @@ var ProcedureForm = () => {
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = _react.useMemo.call(void 0, () => {
-    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _54 => _54.resultOk])) return null;
+    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _60 => _60.resultOk])) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentToRender, { data: procedureResultData });
@@ -3389,6 +3417,40 @@ var MenuTablePage = () => {
 };
 var MenuTablePage_default = MenuTablePage;
 
+// src/pages/WScreens.tsx
+
+var _Construction = require('@mui/icons-material/Construction'); var _Construction2 = _interopRequireDefault(_Construction);
+
+
+var MyCustomDashboard = ({ screenName }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "h5", component: "h1", gutterBottom: true, children: [
+      "\xA1Bienvenido a tu WScreen: ",
+      screenName,
+      "!"
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { mt: 3 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Construction2.default, { sx: { fontSize: 80, color: "primary.main" } }) })
+  ] }) });
+};
+var FallbackWScreen = ({ screenName }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { 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__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { mt: 3 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WarningAmber2.default, { sx: { fontSize: 80, color: "warning.dark" } }) })
+  ] }) });
+};
+var wScreens = {
+  "MyCustomDashboard": MyCustomDashboard
+  // Agrega más componentes de wScreen aquí:
+  // 'AnotherWScreen': AnotherWScreenComponent,
+};
+var WScreens_default = FallbackWScreen;
+
 // src/App.tsx
 
 var LocationTracker = () => {
@@ -3399,14 +3461,14 @@ var LocationTracker = () => {
   }, [location, dispatch]);
   return null;
 };
-function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
+function FrontendPlusReactRoutes({ myRoutes, allWScreens: myWScreens }) {
   const allWScreens = { ...wScreens, ...myWScreens || {} };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactrouterdom.Routes, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactrouterdom.Route, { path: "/login", element: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoginPage_default, {}) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactrouterdom.Route, { path: "/logout", element: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LogoutPage_default, {}) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactrouterdom.Route, { element: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrivateRoute_default, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MainLayout_default, {})
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MainLayout_default, { allWScreens })
     ] }), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactrouterdom.Route, { path: "/", element: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HomePage_default, {}) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactrouterdom.Route, { path: "/home", element: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HomePage_default, {}) }),
@@ -3417,7 +3479,7 @@ function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
         _reactrouterdom.Route,
         {
           path: `/wScreens/${screenName}`,
-          element: _react2.default.createElement(wScreens[screenName], { screenName })
+          element: _react2.default.createElement(allWScreens[screenName], { screenName })
         },
         screenName
       )),
@@ -3455,7 +3517,7 @@ var App = ({
         FrontendPlusReactRoutes,
         {
           myRoutes,
-          myWScreens
+          allWScreens: myWScreens
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SessionExpiredMessage_default, {})