frontend-plus-react 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -788,7 +788,6 @@ var useApiCall = () => {
 
 
 
-
 var _material = require('@mui/material');
 
 // src/utils/functions.tsx
@@ -991,16 +990,44 @@ var useRedirectPath = () => {
 var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
 
 // src/components/grid/GenericDataGrid.tsx
-var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
-var _SearchOff = require('@mui/icons-material/SearchOff'); var _SearchOff2 = _interopRequireDefault(_SearchOff);
 var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_Add);
 
-// src/components/grid/PkHeaderRenderer.tsx
+// src/components/ConfirmDialog.tsx
+var _Dialog = require('@mui/material/Dialog'); var _Dialog2 = _interopRequireDefault(_Dialog);
+var _DialogTitle = require('@mui/material/DialogTitle'); var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
+var _DialogContent = require('@mui/material/DialogContent'); var _DialogContent2 = _interopRequireDefault(_DialogContent);
+var _DialogContentText = require('@mui/material/DialogContentText'); var _DialogContentText2 = _interopRequireDefault(_DialogContentText);
+var _DialogActions = require('@mui/material/DialogActions'); var _DialogActions2 = _interopRequireDefault(_DialogActions);
+var _Button = require('@mui/material/Button'); var _Button2 = _interopRequireDefault(_Button);
+
+var ConfirmDialog = ({ open, onClose, title, message }) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Dialog2.default,
+    {
+      open,
+      onClose: () => onClose(false),
+      "aria-labelledby": "confirm-dialog-title",
+      "aria-describedby": "confirm-dialog-description",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogTitle2.default, { id: "confirm-dialog-title", children: title }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogContent2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogContentText2.default, { id: "confirm-dialog-description", children: message }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DialogActions2.default, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => onClose(false), color: "primary", children: "Cancelar" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => onClose(true), color: "error", autoFocus: true, children: "Confirmar" })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/grid/renderers/headerCellRenderers.tsx
 
+var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
+var _SearchOff = require('@mui/icons-material/SearchOff'); var _SearchOff2 = _interopRequireDefault(_SearchOff);
 
-function PkHeaderRenderer(props) {
+var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
-  const isPrimaryKey = column.isPK;
+  const isPrimaryKey = fieldDef.isPk;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Box,
     {
@@ -1028,63 +1055,19 @@ function PkHeaderRenderer(props) {
       )
     }
   );
-}
-var PkHeaderRenderer_default = PkHeaderRenderer;
-
-// src/components/grid/PkCellRenderer.tsx
-
-
-function PkCellRenderer(props) {
-  const { column, row } = props;
-  const isPrimaryKey = column.isPK;
-  const rowAsRecord = row;
-  const value = rowAsRecord[column.key];
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Typography,
-    {
-      variant: "body2",
-      sx: {
-        //fontWeight: isPrimaryKey ? 'bold' : 'normal',
-        fontSize: "0.875rem",
-        // Ajusta el tamaño si es necesario
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        width: "100%"
-      },
-      children: value === null || value === void 0 ? "" : String(value)
-    }
-  );
-}
-var PkCellRenderer_default = PkCellRenderer;
-
-// src/components/ConfirmDialog.tsx
-var _Dialog = require('@mui/material/Dialog'); var _Dialog2 = _interopRequireDefault(_Dialog);
-var _DialogTitle = require('@mui/material/DialogTitle'); var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
-var _DialogContent = require('@mui/material/DialogContent'); var _DialogContent2 = _interopRequireDefault(_DialogContent);
-var _DialogContentText = require('@mui/material/DialogContentText'); var _DialogContentText2 = _interopRequireDefault(_DialogContentText);
-var _DialogActions = require('@mui/material/DialogActions'); var _DialogActions2 = _interopRequireDefault(_DialogActions);
-var _Button = require('@mui/material/Button'); var _Button2 = _interopRequireDefault(_Button);
-
-var ConfirmDialog = ({ open, onClose, title, message }) => {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _Dialog2.default,
-    {
-      open,
-      onClose: () => onClose(false),
-      "aria-labelledby": "confirm-dialog-title",
-      "aria-describedby": "confirm-dialog-description",
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogTitle2.default, { id: "confirm-dialog-title", children: title }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogContent2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DialogContentText2.default, { id: "confirm-dialog-description", children: message }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DialogActions2.default, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => onClose(false), color: "primary", children: "Cancelar" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => onClose(true), color: "error", autoFocus: true, children: "Confirmar" })
-        ] })
-      ]
-    }
-  );
 };
+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 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
 
@@ -1117,7 +1100,209 @@ function FilterInputRenderer({
 }
 var FilterInputRender_default = FilterInputRenderer;
 
-// src/components/grid/InputRendered.tsx
+// 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, 
+    FilterInputRender_default,
+    {
+      column,
+      filters,
+      setFilters
+    }
+  );
+};
+var actionsColumnSummaryCellRenderer = (props) => null;
+var detailColumnCellSummaryRenderer = (props) => null;
+
+// src/components/grid/renderers/cellRenderers.tsx
+
+var _KeyboardArrowDown = require('@mui/icons-material/KeyboardArrowDown'); var _KeyboardArrowDown2 = _interopRequireDefault(_KeyboardArrowDown);
+var _KeyboardArrowUp = require('@mui/icons-material/KeyboardArrowUp'); var _KeyboardArrowUp2 = _interopRequireDefault(_KeyboardArrowUp);
+var _Delete = require('@mui/icons-material/Delete'); var _Delete2 = _interopRequireDefault(_Delete);
+
+// src/components/grid/ExampleClientSideComponent.tsx
+
+
+var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
+  const value = row[column.key];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: {
+    padding: 0.5,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: value === "Special" ? "lightblue" : "transparent"
+  }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
+};
+var ExampleClientSideComponent_default = ExampleClientSideComponent;
+
+// src/components/grid/FallbackClientSideRenderer.tsx
+
+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,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        // Para espaciar el valor y el icono
+        gap: 1,
+        // Espacio entre elementos
+        width: "100%",
+        height: "100%",
+        paddingLeft: "8px",
+        backgroundColor: "rgba(255, 193, 7, 0.1)",
+        // Amarillo claro para advertencia
+        border: "1px dashed rgba(255, 193, 7, 0.5)",
+        boxSizing: "border-box",
+        overflow: "hidden"
+        // 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, 
+          _WarningAmber2.default,
+          {
+            sx: {
+              fontSize: 18,
+              color: "warning.main",
+              marginRight: "4px"
+              // Pequeño margen a la derecha del icono
+            }
+          }
+        )
+      ]
+    }
+  ) });
+};
+var FallbackClientSideRenderer_default = FallbackClientSideRenderer;
+
+// src/components/grid/clientSides.ts
+var clientSides = {
+  "ExampleClientSideComponent": ExampleClientSideComponent_default,
+  // Aseguramos el tipo aquí también
+  "FallbackClientSideRenderer": FallbackClientSideRenderer_default
+  // Y aquí
+};
+var extendClientSides = (newRenderers) => {
+  clientSides = exports.clientSides = { ...clientSides, ...newRenderers };
+  console.log("clientSides extendidos:", clientSides);
+};
+
+// src/components/grid/renderers/cellRenderers.tsx
+
+var allColumnsCellRenderer = (props) => {
+  const theme = _material.useTheme.call(void 0, );
+  const column = props.column;
+  const { row, rowIdx } = props;
+  if (row[DETAIL_ROW_INDICATOR]) {
+    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] });
+        }
+      });
+      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;
+  }
+  switch (column.customType) {
+    case "default": {
+      const defaultColumn = column;
+      const { fieldDef, tableDefinition, primaryKey, cellFeedback, fixedFields, localCellChanges } = defaultColumn;
+      const rowId = getPrimaryKeyValues(row, primaryKey);
+      if (_optionalChain([fieldDef, 'optionalAccess', _6 => _6.clientSide])) {
+        const ClientSideComponent = clientSides[fieldDef.clientSide];
+        if (ClientSideComponent) {
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+        }
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+      }
+      let cellBackgroundColor = "transparent";
+      if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key) {
+        cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+      } else {
+        const isNewRowLocalCheck = row[NEW_ROW_INDICATOR];
+        const isMandatory = tableDefinition.primaryKey.includes(props.column.key) || _optionalChain([tableDefinition, 'access', _7 => _7.fields, 'access', _8 => _8.find, 'call', _9 => _9((f) => f.name === props.column.key), 'optionalAccess', _10 => _10.nullable]) === false;
+        const hasValue = row[props.column.key] !== null && row[props.column.key] !== void 0 && String(row[props.column.key]).trim() !== "";
+        const isFixedFieldCurrent = _optionalChain([fixedFields, 'optionalAccess', _11 => _11.some, 'call', _12 => _12((f) => f.fieldName === props.column.key)]);
+        if (isFixedFieldCurrent) {
+          cellBackgroundColor = theme.palette.action.selected;
+        } else if (isNewRowLocalCheck && isMandatory && !hasValue || localCellChanges.has(rowId) && _optionalChain([localCellChanges, 'access', _13 => _13.get, 'call', _14 => _14(rowId), 'optionalAccess', _15 => _15.has, 'call', _16 => _16(props.column.key)])) {
+          cellBackgroundColor = theme.palette.info.light;
+        }
+      }
+      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) }) });
+    }
+    case "detail": {
+      const detailColumn = column;
+      const { detailTable, primaryKey, tableData, setTableData, detailKey } = detailColumn;
+      const isExpanded = tableData.some(
+        (r) => r[DETAIL_ROW_INDICATOR] === detailTable.abr && getPrimaryKeyValues(r, primaryKey) === getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey)
+      );
+      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);
+            if (isExpanded) {
+              setTableData(rows.filter(
+                (r) => !(r[DETAIL_ROW_INDICATOR] === detailTable.abr && getPrimaryKeyValues(r, primaryKey) === rowId)
+              ));
+            } else {
+              const parentRowIndex = rowIdx;
+              rows.splice(parentRowIndex + 1, 0, {
+                ...row,
+                [DETAIL_ROW_INDICATOR]: detailTable.abr
+              });
+              setTableData(rows);
+            }
+            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 } }) }) });
+    }
+    default:
+      return void 0;
+  }
+};
+
+// src/components/grid/InputRenderer.tsx
 
 var _InputBase = require('@mui/material/InputBase'); var _InputBase2 = _interopRequireDefault(_InputBase);
 
@@ -1139,7 +1324,7 @@ function InputRenderer({
   const [editingValue, setEditingValue] = _react.useState.call(void 0, row[column.key]);
   const { showSuccess, showError } = useSnackbar();
   const initialRowId = _react.useMemo.call(void 0, () => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
-  const { callApi, loading, error } = useApiCall();
+  const { callApi } = useApiCall();
   const handleCommit = _react.useCallback.call(void 0, async (currentValue, closeEditor, focusNextCell) => {
     const processedNewValue = typeof currentValue === "string" ? currentValue.trim() === "" ? null : currentValue.trim() : currentValue;
     const potentialUpdatedRow = { ...row, [column.key]: processedNewValue };
@@ -1147,7 +1332,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', _3 => _3.fields, 'access', _4 => _4.find, 'call', _5 => _5((f) => f.name === column.key), 'optionalAccess', _6 => _6.nullable]) === false;
+    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 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).");
@@ -1218,7 +1403,7 @@ function InputRenderer({
         }
       });
       if (localCellChanges.has(initialRowId)) {
-        _optionalChain([localCellChanges, 'access', _7 => _7.get, 'call', _8 => _8(initialRowId), 'optionalAccess', _9 => _9.forEach, 'call', _10 => _10((colKey) => {
+        _optionalChain([localCellChanges, 'access', _23 => _23.get, 'call', _24 => _24(initialRowId), 'optionalAccess', _25 => _25.forEach, 'call', _26 => _26((colKey) => {
           if (!rowToSend.hasOwnProperty(colKey)) {
             rowToSend[colKey] = potentialUpdatedRow[colKey];
           }
@@ -1316,7 +1501,7 @@ function InputRenderer({
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
   const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _11 => _11.editable]) !== false;
+  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _27 => _27.editable]) !== false;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _InputBase2.default,
     {
@@ -1340,90 +1525,65 @@ function InputRenderer({
     }
   );
 }
-var InputRendered_default = InputRenderer;
-
-// src/components/grid/ExampleClientSideComponent.tsx
+var InputRenderer_default = InputRenderer;
 
+// src/components/grid/renderers/editCellRenderers.tsx
 
-var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
-  const value = row[column.key];
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: {
-    padding: 0.5,
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    backgroundColor: value === "Special" ? "lightblue" : "transparent"
-  }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
-};
-var ExampleClientSideComponent_default = ExampleClientSideComponent;
-
-// src/components/grid/FallbackClientSideRenderer.tsx
-
-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', _12 => _12.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,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        // Para espaciar el valor y el icono
-        gap: 1,
-        // Espacio entre elementos
-        width: "100%",
-        height: "100%",
-        paddingLeft: "8px",
-        backgroundColor: "rgba(255, 193, 7, 0.1)",
-        // Amarillo claro para advertencia
-        border: "1px dashed rgba(255, 193, 7, 0.5)",
-        boxSizing: "border-box",
-        overflow: "hidden"
-        // 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, 
-          _WarningAmber2.default,
-          {
-            sx: {
-              fontSize: 18,
-              color: "warning.main",
-              marginRight: "4px"
-              // Pequeño margen a la derecha del icono
-            }
-          }
-        )
-      ]
+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,
+        tableDefinition,
+        setCellFeedback,
+        onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+        setTableData,
+        setLocalCellChanges,
+        localCellChanges,
+        primaryKey
+      }
+    );
+  }
 };
-var FallbackClientSideRenderer_default = FallbackClientSideRenderer;
 
-// src/components/grid/clientSides.ts
-var clientSides = {
-  "ExampleClientSideComponent": ExampleClientSideComponent_default,
-  // Aseguramos el tipo aquí también
-  "FallbackClientSideRenderer": FallbackClientSideRenderer_default
-  // Y aquí
-};
-var extendClientSides = (newRenderers) => {
-  clientSides = exports.clientSides = { ...clientSides, ...newRenderers };
-  console.log("clientSides extendidos:", clientSides);
-};
+// src/components/grid/renderers/emptyRowRenderer.tsx
+
+function EmptyRowsRenderer() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: {
+    // Posicionamiento absoluto respecto a la pantalla
+    position: "fixed",
+    top: "50%",
+    // Centrado verticalmente
+    left: "50%",
+    // Centrado horizontalmente
+    transform: "translate(-50%, -50%)",
+    // Ajuste para el 50% del tamaño del div
+    // Estilos de visualización
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    padding: "16px 24px",
+    boxShadow: "0 2px 10px rgba(0,0,0,0.1)"
+  }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { textAlign: "center" }, children: "No hay filas para mostrar" }) });
+}
 
 // src/components/grid/GenericDataGrid.tsx
 
 var getPrimaryKeyValues = (row, primaryKey) => {
-  return primaryKey.map((key) => {
+  return primaryKey.concat(DETAIL_ROW_INDICATOR).map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
-var NEW_ROW_INDICATOR = ".$new";
+var NEW_ROW_INDICATOR = "$new";
+var DETAIL_ROW_INDICATOR = "$detail";
 var GenericDataGrid = ({
   tableName,
   fixedFields
@@ -1443,6 +1603,8 @@ var GenericDataGrid = ({
   const feedbackTimerRef = _react.useRef.call(void 0, null);
   const dataGridRef = _react.useRef.call(void 0, null);
   const { callApi, loading, error } = useApiCall();
+  const getRowCount = () => tableData.filter((row) => !row[DETAIL_ROW_INDICATOR]).length;
+  const getFilteredRowCount = () => filteredRows.filter((row) => !row[DETAIL_ROW_INDICATOR]).length;
   _react.useEffect.call(void 0, () => {
     setFilters({});
     setIsFilterRowVisible(false);
@@ -1466,7 +1628,6 @@ var GenericDataGrid = ({
         const data = await callApi("table_data", {
           table: tableName,
           fixedFields
-          // Envía el array fixedFields directamente a la API
         });
         setTableData(data);
       } catch (err) {
@@ -1483,7 +1644,7 @@ var GenericDataGrid = ({
       if (feedbackTimerRef.current) {
         clearTimeout(feedbackTimerRef.current);
       }
-      const timerDuration = cellFeedback.type === "success" ? 4e3 : 3e3;
+      const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
         setCellFeedback(null);
       }, timerDuration);
@@ -1637,37 +1798,25 @@ var GenericDataGrid = ({
   const handleEnterKeyPressInEditor = _react.useCallback.call(void 0, (rowIndex, columnKey, currentColumns) => {
     if (dataGridRef.current && tableDefinition) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
-      if (currentColumnIndex !== -1) {
-        let nextColumnIndex = currentColumnIndex + 1;
-        let nextRowIndex = rowIndex;
-        let foundNextTarget = false;
-        while (!foundNextTarget) {
-          if (nextColumnIndex >= currentColumns.length) {
-            nextColumnIndex = 0;
+      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]));
+      });
+      if (currentColumnIndex !== -1 && editableColumns.length > 0) {
+        const editableColumnKeys = editableColumns.map((col) => col.key);
+        let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
+        if (currentEditableColumnIndex !== -1) {
+          let nextEditableColumnIndex = currentEditableColumnIndex + 1;
+          let nextRowIndex = rowIndex;
+          if (nextEditableColumnIndex >= editableColumns.length) {
+            nextEditableColumnIndex = 0;
             nextRowIndex++;
             if (nextRowIndex >= filteredRows.length) {
               nextRowIndex = 0;
-              nextColumnIndex = 0;
-              if (filteredRows.length === 0 || rowIndex === filteredRows.length - 1 && currentColumnIndex === currentColumns.length - 1) {
-                foundNextTarget = true;
-                break;
-              }
             }
           }
-          const nextColumn = currentColumns[nextColumnIndex];
-          if (nextColumn) {
-            const fieldDefinition = tableDefinition.fields.find((f) => f.name === nextColumn.key);
-            const isEditableField = _optionalChain([fieldDefinition, 'optionalAccess', _13 => _13.editable]) !== false;
-            if (nextColumn.key !== "filterToggle" && nextColumn.key !== "deleteAction" && isEditableField) {
-              foundNextTarget = true;
-            } else {
-              nextColumnIndex++;
-            }
-          } else {
-            nextColumnIndex++;
-          }
-        }
-        if (foundNextTarget) {
+          const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
+          const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
           dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: false, scrollIntoView: true });
         }
       }
@@ -1676,185 +1825,87 @@ var GenericDataGrid = ({
   const columns = _react.useMemo.call(void 0, () => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _14 => _14.find, 'call', _15 => _15((f) => f.fieldName === field.name)]);
+      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _33 => _33.find, 'call', _34 => _34((f) => f.fieldName === field.name)]);
       return !(fixedFieldEntry && fixedFieldEntry.until === void 0);
     });
-    const defaultColumns = fieldsToShow.map((field) => {
-      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _16 => _16.some, 'call', _17 => _17((f) => f.fieldName === field.name)]);
-      const isFieldEditable = field.editable !== false && !isFixedField;
+    const defaultColumns = fieldsToShow.map((fieldDef) => {
+      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _35 => _35.some, 'call', _36 => _36((f) => f.fieldName === fieldDef.name)]);
+      const isFieldEditable = fieldDef.editable !== false && !isFixedField;
       return {
-        key: field.name,
-        name: field.label || cambiarGuionesBajosPorEspacios(field.name),
+        key: fieldDef.name,
+        customType: "default",
+        tableDefinition,
+        fieldDef,
+        cellFeedback,
+        primaryKey,
+        fixedFields,
+        localCellChanges,
+        name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
+        //frozen: true,
         editable: isFieldEditable,
-        // Usar la nueva bandera de editable
         flexGrow: 1,
         minWidth: 60,
-        isPK: field.isPk,
-        renderHeaderCell: (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PkHeaderRenderer_default, { ...props }),
-        renderSummaryCell: ({ column }) => {
-          const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _18 => _18.find, 'call', _19 => _19((f) => f.fieldName === column.key)]);
-          if (fixedFieldEntry && fixedFieldEntry.until === void 0) return null;
-          return isFilterRowVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            FilterInputRender_default,
-            {
-              column,
-              filters,
-              setFilters
-            }
-          ) : null;
-        },
-        renderCell: (props) => {
-          const rowId = getPrimaryKeyValues(props.row, primaryKey);
-          const fieldDefinition = tableDefinition.fields.find((f) => f.name === props.column.key);
-          if (_optionalChain([fieldDefinition, 'optionalAccess', _20 => _20.clientSide])) {
-            const ClientSideComponent = clientSides[fieldDefinition.clientSide];
-            if (ClientSideComponent) {
-              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                ClientSideComponent,
-                {
-                  ...props,
-                  fieldDefinition,
-                  tableDefinition,
-                  primaryKey
-                }
-              );
-            } else {
-              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                FallbackClientSideRenderer_default,
-                {
-                  ...props,
-                  fieldDefinition,
-                  tableDefinition,
-                  primaryKey
-                }
-              );
-            }
-          }
-          let cellBackgroundColor = "transparent";
-          if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key) {
-            cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
-          } else {
-            const isNewRowLocalCheck = props.row[NEW_ROW_INDICATOR];
-            const isMandatory = tableDefinition.primaryKey.includes(props.column.key) || _optionalChain([tableDefinition, 'access', _21 => _21.fields, 'access', _22 => _22.find, 'call', _23 => _23((f) => f.name === props.column.key), 'optionalAccess', _24 => _24.nullable]) === false;
-            const hasValue = props.row[props.column.key] !== null && props.row[props.column.key] !== void 0 && String(props.row[props.column.key]).trim() !== "";
-            const isFixedFieldCurrent = _optionalChain([fixedFields, 'optionalAccess', _25 => _25.some, 'call', _26 => _26((f) => f.fieldName === props.column.key)]);
-            if (isFixedFieldCurrent) {
-              cellBackgroundColor = theme.palette.action.selected;
-            } else if (isNewRowLocalCheck && isMandatory && !hasValue || localCellChanges.has(rowId) && _optionalChain([localCellChanges, 'access', _27 => _27.get, 'call', _28 => _28(rowId), 'optionalAccess', _29 => _29.has, 'call', _30 => _30(props.column.key)])) {
-              cellBackgroundColor = theme.palette.info.light;
-            }
-          }
-          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, 
-                PkCellRenderer_default,
-                {
-                  ...props,
-                  column: { ...props.column, isPK: !!field.isPk }
-                }
-              )
-            }
-          );
-        }
+        renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
+        renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields, isFilterRowVisible, filters, setFilters)
       };
     });
-    const filterToggleColumn = {
+    const actionsColumn = {
       key: "filterToggle",
-      name: "",
+      customType: "action",
+      tableDefinition,
+      handleDeleteRow,
+      name: "filterCol",
       width: 50,
       resizable: false,
       sortable: false,
-      frozen: true,
-      renderHeaderCell: () => /* @__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 } })
-        }
-      ),
-      renderSummaryCell: () => null
+      //frozen: true,
+      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
+      renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
-    const deleteActionColumn = {
-      key: "deleteAction",
-      name: "",
-      width: 50,
-      resizable: false,
-      sortable: false,
-      frozen: true,
-      renderHeaderCell: () => null,
-      renderSummaryCell: () => null,
-      renderCell: ({ row }) => {
-        if (!_optionalChain([tableDefinition, 'access', _31 => _31.allow, 'optionalAccess', _32 => _32.delete])) {
-          return null;
-        }
-        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 }
-            }
+    const detailColumns = [];
+    if (tableDefinition.detailTables && tableDefinition.detailTables.length > 0) {
+      tableDefinition.detailTables.forEach((detailTable) => {
+        const detailKey = `detail_${detailTable.abr}`;
+        detailColumns.push({
+          key: detailKey,
+          customType: "detail",
+          tableDefinition,
+          detailTable,
+          primaryKey,
+          tableData,
+          setTableData,
+          detailKey,
+          name: detailTable.label || `Detalle ${detailTable.abr}`,
+          resizable: false,
+          sortable: false,
+          width: 50,
+          //frozen: true,
+          renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
+          renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
+        });
+      });
+    }
+    const allColumns = [
+      actionsColumn,
+      ...detailColumns,
+      ...defaultColumns
+    ];
+    return allColumns.map((col) => ({
+      ...col,
+      colSpan: (args) => {
+        if (args.type === "ROW") {
+          const detailTableAbr = args.row[DETAIL_ROW_INDICATOR];
+          if (col.key === `detail_${detailTableAbr}`) {
+            return allColumns.length;
           }
-        ) });
-      }
-    };
-    const allColumns = [filterToggleColumn, deleteActionColumn, ...defaultColumns];
-    return allColumns.map((col) => {
-      if (col.editable) {
-        const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _33 => _33.some, 'call', _34 => _34((f) => f.fieldName === col.key)]);
-        const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _35 => _35.editable]) !== false && !isFixedField;
-        if (!isFieldEditableByUI) {
-          return { ...col, renderEditCell: void 0 };
         }
-        return {
-          ...col,
-          renderEditCell: (props) => {
-            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              InputRendered_default,
-              {
-                ...props,
-                tableDefinition,
-                setCellFeedback,
-                onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
-                setTableData,
-                setLocalCellChanges,
-                localCellChanges,
-                primaryKey
-              }
-            );
-          }
-        };
-      }
-      return col;
-    });
+        return void 0;
+      },
+      renderEditCell: (props) => defaultColumnEditCellRenderer(props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns),
+      renderCell: (props) => allColumnsCellRenderer(props)
+    }));
   }, [
     tableDefinition,
     isFilterRowVisible,
@@ -1866,22 +1917,20 @@ var GenericDataGrid = ({
     theme.palette.error.light,
     theme.palette.info.light,
     theme.palette.action.selected,
-    // Añade el color de campos fijos
     handleEnterKeyPressInEditor,
     setTableData,
     localCellChanges,
     handleDeleteRow,
-    fixedFields
-    // Añade fixedFields como dependencia
+    fixedFields,
+    tableData
   ]);
-  const showNoRowsMessage = filteredRows.length === 0 && !loading && !error;
   const handleRowsChange = _react.useCallback.call(void 0, (updatedRows) => {
     setTableData(updatedRows);
   }, []);
   const handleCellClick = _react.useCallback.call(void 0, (args) => {
-    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _36 => _36.fields, 'access', _37 => _37.find, 'call', _38 => _38((f) => f.name === args.column.key)]);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _39 => _39.some, 'call', _40 => _40((f) => f.fieldName === args.column.key)]);
-    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _41 => _41.editable]) !== false && !isFixedField;
+    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;
     console.log("Clicked column index:", args.column.idx);
     console.log("Clicked row index:", args.rowIdx);
     console.log("Is editable:", isEditable);
@@ -1898,9 +1947,8 @@ var GenericDataGrid = ({
   if (!tableDefinition) {
     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: { p: 0, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pt: 2, pb: 1 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", gutterBottom: true, sx: { m: 0 }, children: cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name) }) }),
-    _optionalChain([tableDefinition, 'access', _42 => _42.allow, 'optionalAccess', _43 => _43.insert]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", px: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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",
@@ -1909,19 +1957,33 @@ var GenericDataGrid = ({
         children: "Nuevo Registro"
       }
     ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { px: 2, pt: 2, pb: 1, fontSize: "0.9rem" }, children: filteredRows.length === tableData.length ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { children: [
-      "mostrando ",
-      `${tableData.length} registros`
-    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { children: [
-      "mostrando ",
-      `${filteredRows.length} registros filtrados`
-    ] }) }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _material.Box,
       {
         sx: {
-          flexGrow: showNoRowsMessage ? 0 : 1,
-          height: showNoRowsMessage ? "150px" : "100%",
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          padding: theme.spacing(1),
+          textAlign: "left",
+          fontWeight: "bold",
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          borderTopLeftRadius: theme.shape.borderRadius,
+          borderTopRightRadius: theme.shape.borderRadius,
+          ml: 2,
+          mr: 2
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Typography, { variant: "subtitle1", component: "div", children: [
+          cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
+          " - mostrando ",
+          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} registros filtrados`
+        ] })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Box,
+      {
+        sx: {
+          flexGrow: 1,
           boxSizing: "border-box",
           position: "relative",
           overflowX: "auto",
@@ -1929,51 +1991,29 @@ var GenericDataGrid = ({
           px: 2,
           pb: 2
         },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _reactdatagrid.DataGrid,
-            {
-              ref: dataGridRef,
-              columns,
-              rows: filteredRows.map((row) => ({
-                ...row,
-                style: exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? { maxHeight: 0, opacity: 0, overflow: "hidden" } : { maxHeight: "35px", opacity: 1 }
-              })),
-              enableVirtualization: true,
-              rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
-              onSelectedRowsChange: setSelectedRows,
-              onRowsChange: handleRowsChange,
-              selectedRows,
-              rowHeight: (row) => exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? 0 : 35,
-              style: { height: "100%", width: "100%", boxSizing: "border-box" },
-              headerRowHeight: 35,
-              topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
-              summaryRowHeight: isFilterRowVisible ? 35 : 0,
-              onCellClick: handleCellClick
-            }
-          ),
-          showNoRowsMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Box,
-            {
-              sx: {
-                position: "absolute",
-                top: isFilterRowVisible ? "70px" : "36px",
-                left: (theme2) => theme2.spacing(2),
-                right: (theme2) => theme2.spacing(2),
-                bottom: (theme2) => theme2.spacing(2),
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                backgroundColor: "rgba(255, 255, 255, 0.9)",
-                color: (theme2) => theme2.palette.text.secondary,
-                border: (theme2) => `1px solid ${theme2.palette.divider}`,
-                borderRadius: "4px",
-                zIndex: 1
-              },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h6", children: "No hay filas para mostrar." })
-            }
-          )
-        ]
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _reactdatagrid.DataGrid,
+          {
+            ref: dataGridRef,
+            columns,
+            rows: filteredRows.map((row) => ({
+              ...row,
+              style: exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? { maxHeight: 0, opacity: 0, overflow: "hidden" } : { maxHeight: "35px", opacity: 1 }
+            })),
+            enableVirtualization: true,
+            rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
+            onSelectedRowsChange: setSelectedRows,
+            onRowsChange: handleRowsChange,
+            selectedRows,
+            rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 35,
+            style: { height: "100%", width: "100%", boxSizing: "border-box" },
+            headerRowHeight: 35,
+            topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
+            summaryRowHeight: isFilterRowVisible ? 35 : 0,
+            onCellClick: handleCellClick,
+            renderers: { noRowsFallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyRowsRenderer, {}) }
+          }
+        )
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2510,7 +2550,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', _44 => _44.username])}` }),
+    /* @__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: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
@@ -2639,7 +2679,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.username,
-                        helperText: _optionalChain([errors, 'access', _45 => _45.username, 'optionalAccess', _46 => _46.message]),
+                        helperText: _optionalChain([errors, 'access', _46 => _46.username, 'optionalAccess', _47 => _47.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2662,7 +2702,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.password,
-                        helperText: _optionalChain([errors, 'access', _47 => _47.password, 'optionalAccess', _48 => _48.message]),
+                        helperText: _optionalChain([errors, 'access', _48 => _48.password, 'optionalAccess', _49 => _49.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2740,7 +2780,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', _49 => _49.procedure])) {
+    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _50 => _50.procedure])) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
@@ -3031,7 +3071,7 @@ var ProcedureForm = () => {
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = _react.useMemo.call(void 0, () => {
-    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _50 => _50.resultOk])) return null;
+    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _51 => _51.resultOk])) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentToRender, { data: procedureResultData });