frontend-plus-react 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -622,7 +622,7 @@ var SnackbarAlert = _react2.default.forwardRef(function SnackbarAlert2(props, re
 });
 var SnackbarContext = _react.createContext.call(void 0, void 0);
 var DEFAULT_SUCCESS_DURATION = 3e3;
-var DEFAULT_ERROR_DURATION = 5e3;
+var DEFAULT_ERROR_DURATION = 1e4;
 var SnackbarProvider = ({ children }) => {
   const [snackbar, setSnackbar] = _react.useState.call(void 0, {
     open: false,
@@ -757,9 +757,12 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
-  const callApi = _react.useCallback.call(void 0, async (procedureName, params) => {
+  const callApi = _react.useCallback.call(void 0, async (procedureName, params, opts) => {
     setLoading(true);
     setError(null);
+    const defaultOpts = { ...{
+      reportOnSnackbar: true
+    }, ...opts };
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
@@ -771,7 +774,9 @@ var useApiCall = () => {
       } else if (err instanceof Error) {
         snackbarMessage = err.message;
       }
-      showSnackbar(snackbarMessage, "error");
+      if (defaultOpts.reportOnSnackbar) {
+        showSnackbar(snackbarMessage, "error");
+      }
       throw err;
     } finally {
       setLoading(false);
@@ -781,13 +786,6 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-
-
-
-
-
-
-
 var _material = require('@mui/material');
 
 // src/utils/functions.tsx
@@ -988,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);
@@ -1024,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;
@@ -1047,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
@@ -1056,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
@@ -1087,6 +1108,7 @@ function FilterInputRenderer({
       }),
       sx: {
         width: "100%",
+        height: 25,
         margin: "0",
         border: "1px solid #ccc",
         borderRadius: "4px",
@@ -1102,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;
@@ -1122,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
 
@@ -1145,7 +1170,6 @@ var ExampleClientSideComponent_default = ExampleClientSideComponent;
 var _WarningAmber = require('@mui/icons-material/WarningAmber'); var _WarningAmber2 = _interopRequireDefault(_WarningAmber);
 
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
-  const value = row[column.key];
   const clientSideName = _optionalChain([fieldDefinition, 'optionalAccess', _5 => _5.clientSide]) || "Desconocido";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Box,
@@ -1168,7 +1192,7 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: value !== null && value !== void 0 ? String(value) : "*Vac\xEDo*" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _WarningAmber2.default,
           {
@@ -1208,24 +1232,26 @@ 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,
+        {
+          sx: {
+            // Se eliminó el padding para que la sub-grilla se extienda por completo
+            minHeight: "200px",
+            width: "100%",
+            height: "100%",
+            //display: 'flex',
+            //flexDirection: 'column',
+            boxSizing: "border-box"
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          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, gridStyles: { height: 322 } })
         }
-      });
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: {
-        // Se eliminó el padding para que la sub-grilla se extienda por completo
-        minHeight: "200px",
-        width: "100%",
-        height: "100%",
-        //display: 'flex',
-        //flexDirection: 'column',
-        boxSizing: "border-box"
-      }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GenericDataGrid_default, { tableName: detailTable.table, fixedFields }) });
+      );
     }
     return void 0;
   }
@@ -1256,7 +1282,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { 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__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? _optionalChain([cellFeedback, 'optionalAccess', _17 => _17.message]) : "", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { 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__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { 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;
@@ -1267,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);
@@ -1285,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', _17 => _17.allow, 'optionalAccess', _18 => _18.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;
@@ -1306,6 +1365,16 @@ var allColumnsCellRenderer = (props) => {
 
 var _InputBase = require('@mui/material/InputBase'); var _InputBase2 = _interopRequireDefault(_InputBase);
 
+
+function findChangedValues(oldRowData, newRowData) {
+  let changes = [];
+  for (const key in newRowData) {
+    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key]) {
+      changes.push(key);
+    }
+  }
+  return changes;
+}
 function InputRenderer({
   column,
   row,
@@ -1313,6 +1382,7 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
+  cellFeedback,
   setCellFeedback,
   onEnterPress,
   setTableData,
@@ -1322,7 +1392,13 @@ function InputRenderer({
 }) {
   const tableName = tableDefinition.tableName;
   const [editingValue, setEditingValue] = _react.useState.call(void 0, row[column.key]);
+  const theme = _material.useTheme.call(void 0, );
   const { showSuccess, showError } = useSnackbar();
+  const rowId = getPrimaryKeyValues(row, primaryKey);
+  let cellBackgroundColor;
+  if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === column.key) {
+    cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  }
   const initialRowId = _react.useMemo.call(void 0, () => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const { callApi } = useApiCall();
   const handleCommit = _react.useCallback.call(void 0, async (currentValue, closeEditor, focusNextCell) => {
@@ -1332,31 +1408,16 @@ 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', _19 => _19.fields, 'access', _20 => _20.find, 'call', _21 => _21((f) => f.name === column.key), 'optionalAccess', _22 => _22.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).");
-      onClose(false, focusNextCell);
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
       return;
     }
     const oldRowData = { ...row };
     const primaryKeyValuesForBackend = tableDefinition.primaryKey.map((key) => potentialUpdatedRow[key]);
     const currentRowIdBeforeUpdate = getPrimaryKeyValues(oldRowData, tableDefinition.primaryKey);
     onRowChange({ ...row, [column.key]: processedNewValue }, true);
-    onClose(true, focusNextCell);
     if (isNewRow) {
       const areAllMandatoryFieldsFilled = tableDefinition.fields.every((fieldDef) => {
         const isMandatory = fieldDef.nullable === false || fieldDef.isPk;
@@ -1403,7 +1464,7 @@ function InputRenderer({
         }
       });
       if (localCellChanges.has(initialRowId)) {
-        _optionalChain([localCellChanges, 'access', _23 => _23.get, 'call', _24 => _24(initialRowId), 'optionalAccess', _25 => _25.forEach, 'call', _26 => _26((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];
           }
@@ -1424,20 +1485,6 @@ function InputRenderer({
         oldRow: oldRowData,
         status
       });
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
-      showSuccess("Registro guardado exitosamente!");
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1460,15 +1507,17 @@ function InputRenderer({
         });
         finalRowIdForFeedback = getPrimaryKeyValues(persistedRowData, tableDefinition.primaryKey);
       } else {
-        persistedRowData = potentialUpdatedRow;
+        persistedRowData = response.row;
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
+        onRowChange({ ...response.row }, true);
       }
-      setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: column.key, type: "success" });
+      findChangedValues(oldRowData, response.row).forEach(
+        (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
+      );
     } catch (err) {
       console.error("Error al guardar el registro:", err);
-      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error" });
-      onRowChange(oldRowData, true);
+      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error", message: err.message });
     }
   }, [
     column,
@@ -1487,21 +1536,19 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = _react.useCallback.call(void 0, (event) => {
-    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', _27 => _27.editable]) !== false;
+  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _26 => _26.editable]) !== false;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _InputBase2.default,
     {
@@ -1517,7 +1564,8 @@ function InputRenderer({
         borderRadius: "4px",
         padding: "2px 4px",
         fontSize: "0.8rem",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        backgroundColor: cellBackgroundColor
       },
       onClick: (e) => e.stopPropagation(),
       autoFocus: true,
@@ -1529,28 +1577,56 @@ var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
 
-var defaultColumnEditCellRenderer = (props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns) => {
-  const { column } = props;
-  if (column.editable) {
-    const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _28 => _28.some, 'call', _29 => _29((f) => f.fieldName === column.key)]);
-    const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _30 => _30.editable]) !== false && !isFixedField;
-    if (!isFieldEditableByUI) {
-      return void 0;
-    }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      InputRenderer_default,
-      {
-        ...props,
+
+var allColumnsEditCellRenderer = (props, allColumns) => {
+  const column = props.column;
+  switch (column.customType) {
+    case "default": {
+      const defaultColumn = column;
+      const {
         tableDefinition,
-        setCellFeedback,
-        onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+        fixedFields,
+        primaryKey,
         setTableData,
-        setLocalCellChanges,
+        cellFeedback,
+        setCellFeedback,
+        handleEnterKeyPressInEditor,
         localCellChanges,
-        primaryKey
+        setLocalCellChanges
+      } = defaultColumn;
+      if (column.editable) {
+        const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
+        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;
+        }
+        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, key) => handleEnterKeyPressInEditor(rowIndex, columnKey, key, allColumns),
+            setTableData,
+            setLocalCellChanges,
+            localCellChanges,
+            primaryKey
+          }
+        ) }) });
       }
-    );
+      return void 0;
+    }
+    case "detail": {
+      return void 0;
+    }
+    case "action": {
+      return void 0;
+    }
+    default:
+      return void 0;
   }
 };
 
@@ -1578,7 +1654,10 @@ function EmptyRowsRenderer() {
 // src/components/grid/GenericDataGrid.tsx
 
 var getPrimaryKeyValues = (row, primaryKey) => {
-  return primaryKey.concat(DETAIL_ROW_INDICATOR).map((key) => {
+  if (row[DETAIL_ROW_INDICATOR]) {
+    primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
+  }
+  return primaryKey.map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
@@ -1586,13 +1665,16 @@ 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);
   const [filters, setFilters] = _react.useState.call(void 0, {});
   const [selectedRows, setSelectedRows] = _react.useState.call(void 0, () => /* @__PURE__ */ new Set());
+  const [selectedCell, setSelectedCell] = _react.useState.call(void 0, void 0);
   const [cellFeedback, setCellFeedback] = _react.useState.call(void 0, null);
   const [localCellChanges, setLocalCellChanges] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
   const theme = _material.useTheme.call(void 0, );
@@ -1638,7 +1720,11 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [tableName, fixedFields, showError]);
+  }, [
+    tableName,
+    /*fixedFields,*/
+    showError
+  ]);
   _react.useEffect.call(void 0, () => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
@@ -1646,7 +1732,8 @@ var GenericDataGrid = ({
       }
       const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        setCellFeedback(null);
+        if (cellFeedback.type == "success")
+          setCellFeedback(null);
       }, timerDuration);
     }
     return () => {
@@ -1795,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', _31 => _31.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.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);
@@ -1817,19 +1904,22 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: false, scrollIntoView: true });
+          _optionalChain([dataGridRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.selectCell, 'call', _35 => _35({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true })]);
         }
       }
     }
   }, [filteredRows, tableDefinition]);
+  const handleSelectedCellChange = _react.useCallback.call(void 0, (args) => {
+    setSelectedCell(args);
+  }, []);
   const columns = _react.useMemo.call(void 0, () => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _33 => _33.find, 'call', _34 => _34((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', _35 => _35.some, 'call', _36 => _36((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,
@@ -1840,27 +1930,37 @@ var GenericDataGrid = ({
         primaryKey,
         fixedFields,
         localCellChanges,
+        setLocalCellChanges,
+        setTableData,
+        setCellFeedback,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
-        //frozen: true,
         editable: isFieldEditable,
+        handleEnterKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
         renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
         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,
-      //frozen: true,
       renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
@@ -1880,8 +1980,9 @@ var GenericDataGrid = ({
           name: detailTable.label || `Detalle ${detailTable.abr}`,
           resizable: false,
           sortable: false,
-          width: 50,
-          //frozen: true,
+          editable: false,
+          width: 30,
+          minWidth: 30,
           renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
           renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
         });
@@ -1903,7 +2004,9 @@ var GenericDataGrid = ({
         }
         return void 0;
       },
-      renderEditCell: (props) => defaultColumnEditCellRenderer(props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns),
+      editorOptions: { closeOnExternalRowChange: false },
+      //con esto no se pierde el foco
+      renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
   }, [
@@ -1921,16 +2024,33 @@ var GenericDataGrid = ({
     setTableData,
     localCellChanges,
     handleDeleteRow,
+    handleAddRow,
     fixedFields,
     tableData
   ]);
   const handleRowsChange = _react.useCallback.call(void 0, (updatedRows) => {
     setTableData(updatedRows);
   }, []);
+  const deselectAllOtherGrids = (currentGridElement) => {
+    const allSelectedCells = document.querySelectorAll("div[aria-selected='true']");
+    allSelectedCells.forEach((cell) => {
+      const parentGrid = cell.closest(".rdg");
+      if (parentGrid && parentGrid !== currentGridElement) {
+        cell.setAttribute("aria-selected", "false");
+      }
+    });
+  };
+  const handleCellKeyDown = (args, event) => {
+    if (["Tab", "Enter"].includes(event.key)) {
+      event.preventGridDefault();
+    }
+  };
   const handleCellClick = _react.useCallback.call(void 0, (args) => {
-    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _37 => _37.fields, 'access', _38 => _38.find, 'call', _39 => _39((f) => f.name === args.column.key)]);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _40 => _40.some, 'call', _41 => _41((f) => f.fieldName === args.column.key)]);
-    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _42 => _42.editable]) !== false && !isFixedField;
+    deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.element]));
+    args.selectCell(true);
+    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);
@@ -1948,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', _43 => _43.allow, 'optionalAccess', _44 => _44.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,
       {
@@ -1972,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)`
         ] })
       }
     ),
@@ -1994,6 +2105,7 @@ var GenericDataGrid = ({
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _reactdatagrid.DataGrid,
           {
+            className: "rdg-light",
             ref: dataGridRef,
             columns,
             rows: filteredRows.map((row) => ({
@@ -2003,15 +2115,17 @@ var GenericDataGrid = ({
             enableVirtualization: true,
             rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
             onSelectedRowsChange: setSelectedRows,
+            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,
-            renderers: { noRowsFallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyRowsRenderer, {}) }
+            onCellKeyDown: handleCellKeyDown
           }
         )
       }
@@ -2550,7 +2664,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', _45 => _45.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." })
   ] });
 };
@@ -2679,7 +2793,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.username,
-                        helperText: _optionalChain([errors, 'access', _46 => _46.username, 'optionalAccess', _47 => _47.message]),
+                        helperText: _optionalChain([errors, 'access', _55 => _55.username, 'optionalAccess', _56 => _56.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2702,7 +2816,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.password,
-                        helperText: _optionalChain([errors, 'access', _48 => _48.password, 'optionalAccess', _49 => _49.message]),
+                        helperText: _optionalChain([errors, 'access', _57 => _57.password, 'optionalAccess', _58 => _58.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2780,7 +2894,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', _50 => _50.procedure])) {
+    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _59 => _59.procedure])) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
@@ -3071,7 +3185,7 @@ var ProcedureForm = () => {
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = _react.useMemo.call(void 0, () => {
-    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _51 => _51.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 });