frontend-plus-react 0.1.3 → 0.1.5

package/dist/index.js

@@ -622,7 +622,7 @@ var SnackbarAlert = React.forwardRef(function SnackbarAlert2(props, ref) {
 });
 var SnackbarContext = createContext(void 0);
 var DEFAULT_SUCCESS_DURATION = 3e3;
-var DEFAULT_ERROR_DURATION = 5e3;
+var DEFAULT_ERROR_DURATION = 1e4;
 var SnackbarProvider = ({ children }) => {
   const [snackbar, setSnackbar] = useState({
     open: false,
@@ -757,9 +757,12 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const callApi = useCallback2(async (procedureName, params) => {
+  const callApi = useCallback2(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,15 +786,7 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import {
-  CircularProgress,
-  Typography as Typography5,
-  Box as Box4,
-  Alert,
-  useTheme,
-  Button as Button2,
-  IconButton
-} from "@mui/material";
+import { CircularProgress, Typography as Typography5, Box as Box5, Alert, useTheme as useTheme3, Button as Button3 } from "@mui/material";
 
 // src/utils/functions.tsx
 var JSON4all = __toESM(require_json4all(), 1);
@@ -991,18 +988,45 @@ var useRedirectPath = () => {
 var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
 
 // src/components/grid/GenericDataGrid.tsx
-import SearchIcon from "@mui/icons-material/Search";
-import SearchOffIcon from "@mui/icons-material/SearchOff";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
 
-// src/components/grid/PkHeaderRenderer.tsx
-import { Box, Typography } from "@mui/material";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function PkHeaderRenderer(props) {
+// src/components/ConfirmDialog.tsx
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ConfirmDialog = ({ open, onClose, title, message }) => {
+  return /* @__PURE__ */ jsxs2(
+    Dialog,
+    {
+      open,
+      onClose: () => onClose(false),
+      "aria-labelledby": "confirm-dialog-title",
+      "aria-describedby": "confirm-dialog-description",
+      children: [
+        /* @__PURE__ */ jsx2(DialogTitle, { id: "confirm-dialog-title", children: title }),
+        /* @__PURE__ */ jsx2(DialogContent, { children: /* @__PURE__ */ jsx2(DialogContentText, { id: "confirm-dialog-description", children: message }) }),
+        /* @__PURE__ */ jsxs2(DialogActions, { children: [
+          /* @__PURE__ */ jsx2(Button, { onClick: () => onClose(false), color: "primary", children: "Cancelar" }),
+          /* @__PURE__ */ jsx2(Button, { onClick: () => onClose(true), color: "error", autoFocus: true, children: "Confirmar" })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/grid/renderers/headerCellRenderers.tsx
+import { Box, IconButton, Tooltip, Typography } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import SearchOffIcon from "@mui/icons-material/SearchOff";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
-  const isPrimaryKey = column.isPK;
-  return /* @__PURE__ */ jsx2(
+  const isPrimaryKey = fieldDef.isPk;
+  return /* @__PURE__ */ jsx3(
     Box,
     {
       sx: {
@@ -1014,7 +1038,7 @@ function PkHeaderRenderer(props) {
         boxSizing: "border-box",
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         Typography,
         {
           variant: "body2",
@@ -1029,73 +1053,29 @@ function PkHeaderRenderer(props) {
       )
     }
   );
-}
-var PkHeaderRenderer_default = PkHeaderRenderer;
-
-// src/components/grid/PkCellRenderer.tsx
-import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function PkCellRenderer(props) {
-  const { column, row } = props;
-  const isPrimaryKey = column.isPK;
-  const rowAsRecord = row;
-  const value = rowAsRecord[column.key];
-  return /* @__PURE__ */ jsx3(
-    Typography2,
-    {
-      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
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
-import Button from "@mui/material/Button";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var ConfirmDialog = ({ open, onClose, title, message }) => {
-  return /* @__PURE__ */ jsxs2(
-    Dialog,
-    {
-      open,
-      onClose: () => onClose(false),
-      "aria-labelledby": "confirm-dialog-title",
-      "aria-describedby": "confirm-dialog-description",
-      children: [
-        /* @__PURE__ */ jsx4(DialogTitle, { id: "confirm-dialog-title", children: title }),
-        /* @__PURE__ */ jsx4(DialogContent, { children: /* @__PURE__ */ jsx4(DialogContentText, { id: "confirm-dialog-description", children: message }) }),
-        /* @__PURE__ */ jsxs2(DialogActions, { children: [
-          /* @__PURE__ */ jsx4(Button, { onClick: () => onClose(false), color: "primary", children: "Cancelar" }),
-          /* @__PURE__ */ jsx4(Button, { onClick: () => onClose(true), color: "error", autoFocus: true, children: "Confirmar" })
-        ] })
-      ]
-    }
-  );
 };
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ jsx3(
+  IconButton,
+  {
+    color: "inherit",
+    onClick: toggleFilterVisibility,
+    size: "small",
+    title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+    sx: { p: 0.5 },
+    children: isFilterRowVisible ? /* @__PURE__ */ jsx3(SearchOffIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 20 } })
+  }
+);
+var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx3(Tooltip, { title: detailTable.label, children: /* @__PURE__ */ jsx3(Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
 
 // src/components/grid/FilterInputRender.tsx
 import { InputBase } from "@mui/material";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function FilterInputRenderer({
   column,
   filters,
   setFilters
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     InputBase,
     {
       value: filters[column.key] || "",
@@ -1118,10 +1098,231 @@ function FilterInputRenderer({
 }
 var FilterInputRender_default = FilterInputRenderer;
 
-// src/components/grid/InputRendered.tsx
+// src/components/grid/renderers/summaryCellRenderers.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible, filters, setFilters) => {
+  const { column } = props;
+  const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === column.key);
+  if (fixedFieldEntry && fixedFieldEntry.until === void 0 || !isFilterRowVisible) return null;
+  return /* @__PURE__ */ jsx5(
+    FilterInputRender_default,
+    {
+      column,
+      filters,
+      setFilters
+    }
+  );
+};
+var actionsColumnSummaryCellRenderer = (props) => null;
+var detailColumnCellSummaryRenderer = (props) => null;
+
+// src/components/grid/renderers/cellRenderers.tsx
+import { Box as Box4, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+// src/components/grid/ExampleClientSideComponent.tsx
+import { Box as Box2, Typography as Typography2 } from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
+  const value = row[column.key];
+  return /* @__PURE__ */ jsx6(Box2, { sx: {
+    padding: 0.5,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: value === "Special" ? "lightblue" : "transparent"
+  }, children: /* @__PURE__ */ jsx6(Typography2, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
+};
+var ExampleClientSideComponent_default = ExampleClientSideComponent;
+
+// src/components/grid/FallbackClientSideRenderer.tsx
+import { Box as Box3, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
+  const clientSideName = fieldDefinition?.clientSide || "Desconocido";
+  return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      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__ */ jsx7(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
+        /* @__PURE__ */ jsx7(
+          WarningAmberIcon,
+          {
+            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 = { ...clientSides, ...newRenderers };
+  console.log("clientSides extendidos:", clientSides);
+};
+
+// src/components/grid/renderers/cellRenderers.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var allColumnsCellRenderer = (props) => {
+  const theme = useTheme();
+  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__ */ jsx8(
+        Box4,
+        {
+          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__ */ jsx8(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 (fieldDef?.clientSide) {
+        const ClientSideComponent = clientSides[fieldDef.clientSide];
+        if (ClientSideComponent) {
+          return /* @__PURE__ */ jsx8(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+        }
+        return /* @__PURE__ */ jsx8(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) || tableDefinition.fields.find((f) => f.name === props.column.key)?.nullable === false;
+        const hasValue = row[props.column.key] !== null && row[props.column.key] !== void 0 && String(row[props.column.key]).trim() !== "";
+        const isFixedFieldCurrent = fixedFields?.some((f) => f.fieldName === props.column.key);
+        if (isFixedFieldCurrent) {
+          cellBackgroundColor = theme.palette.action.selected;
+        } else if (isNewRowLocalCheck && isMandatory && !hasValue || localCellChanges.has(rowId) && localCellChanges.get(rowId)?.has(props.column.key)) {
+          cellBackgroundColor = theme.palette.info.light;
+        }
+      }
+      const value = row[props.column.key];
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box4, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
+    }
+    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__ */ jsx8(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
+        IconButton2,
+        {
+          size: "small",
+          onClick: (event) => {
+            let rows = [...tableData];
+            const rowId = getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey);
+            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__ */ jsx8(KeyboardArrowUpIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx8(KeyboardArrowDownIcon, { sx: { fontSize: 20 } })
+        }
+      ) }) });
+    }
+    case "action": {
+      const actionColumn = column;
+      const { tableDefinition, handleDeleteRow } = actionColumn;
+      if (!tableDefinition.allow?.delete) return void 0;
+      return /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(Button2, { variant: "outlined", color: "error", size: "small", onClick: () => handleDeleteRow(row), title: "Eliminar fila", sx: { minWidth: 35, height: 30, p: 0.5, "& .MuiButton-startIcon": { m: 0 } }, children: /* @__PURE__ */ jsx8(DeleteIcon, { sx: { fontSize: 18 } }) }) });
+    }
+    default:
+      return void 0;
+  }
+};
+
+// src/components/grid/InputRenderer.tsx
 import { useCallback as useCallback3, useMemo, useState as useState3 } from "react";
 import InputBase2 from "@mui/material/InputBase";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useTheme as useTheme2 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+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,
@@ -1129,6 +1330,7 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
+  cellFeedback,
   setCellFeedback,
   onEnterPress,
   setTableData,
@@ -1138,9 +1340,15 @@ function InputRenderer({
 }) {
   const tableName = tableDefinition.tableName;
   const [editingValue, setEditingValue] = useState3(row[column.key]);
+  const theme = useTheme2();
   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 = useMemo(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
-  const { callApi, loading, error } = useApiCall();
+  const { callApi } = useApiCall();
   const handleCommit = useCallback3(async (currentValue, closeEditor, focusNextCell) => {
     const processedNewValue = typeof currentValue === "string" ? currentValue.trim() === "" ? null : currentValue.trim() : currentValue;
     const potentialUpdatedRow = { ...row, [column.key]: processedNewValue };
@@ -1152,27 +1360,12 @@ function InputRenderer({
     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;
@@ -1239,21 +1432,7 @@ function InputRenderer({
         newRow: rowToSend,
         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!");
+      }, { reportOnSnackbar: false });
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1276,15 +1455,18 @@ 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);
+        onClose(true, focusNextCell);
       }
-      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,
@@ -1303,6 +1485,7 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = useCallback3((event) => {
+    console.log("entra");
     if (event.key === "Enter") {
       handleCommit(editingValue, true, true);
       event.preventDefault();
@@ -1318,7 +1501,7 @@ function InputRenderer({
   }, [handleCommit, editingValue]);
   const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
   const isFieldEditable = fieldDefinition?.editable !== false;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     InputBase2,
     {
       value: editingValue === null ? "" : editingValue,
@@ -1333,7 +1516,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,
@@ -1341,90 +1525,94 @@ function InputRenderer({
     }
   );
 }
-var InputRendered_default = InputRenderer;
-
-// src/components/grid/ExampleClientSideComponent.tsx
-import { Box as Box2, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
-  const value = row[column.key];
-  return /* @__PURE__ */ jsx7(Box2, { sx: {
-    padding: 0.5,
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    backgroundColor: value === "Special" ? "lightblue" : "transparent"
-  }, children: /* @__PURE__ */ jsx7(Typography3, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
-};
-var ExampleClientSideComponent_default = ExampleClientSideComponent;
+var InputRenderer_default = InputRenderer;
 
-// src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box3, Typography as Typography4, Tooltip } from "@mui/material";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
-  const value = row[column.key];
-  const clientSideName = fieldDefinition?.clientSide || "Desconocido";
-  return /* @__PURE__ */ jsx8(Tooltip, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs3(
-    Box3,
-    {
-      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__ */ jsx8(Typography4, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: value !== null && value !== void 0 ? String(value) : "*Vac\xEDo*" }),
-        /* @__PURE__ */ jsx8(
-          WarningAmberIcon,
+// src/components/grid/renderers/editCellRenderers.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var allColumnsEditCellRenderer = (props, allColumns) => {
+  const column = props.column;
+  switch (column.customType) {
+    case "default": {
+      const defaultColumn = column;
+      const {
+        tableDefinition,
+        fixedFields,
+        primaryKey,
+        setTableData,
+        cellFeedback,
+        setCellFeedback,
+        handleEnterKeyPressInEditor,
+        localCellChanges,
+        setLocalCellChanges
+      } = defaultColumn;
+      if (column.editable) {
+        const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
+        const isFixedField = fixedFields?.some((f) => f.fieldName === column.key);
+        const isFieldEditableByUI = fieldDefinition?.editable !== false && !isFixedField;
+        if (!isFieldEditableByUI) {
+          return void 0;
+        }
+        return /* @__PURE__ */ jsx10(
+          InputRenderer_default,
           {
-            sx: {
-              fontSize: 18,
-              color: "warning.main",
-              marginRight: "4px"
-              // Pequeño margen a la derecha del icono
-            }
+            ...props,
+            tableDefinition,
+            setCellFeedback,
+            cellFeedback,
+            onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+            setTableData,
+            setLocalCellChanges,
+            localCellChanges,
+            primaryKey
           }
-        )
-      ]
+        );
+      }
+      return void 0;
     }
-  ) });
+    case "detail": {
+      return void 0;
+    }
+    case "action": {
+      return void 0;
+    }
+    default:
+      return void 0;
+  }
 };
-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 = { ...clientSides, ...newRenderers };
-  console.log("clientSides extendidos:", clientSides);
-};
+// src/components/grid/renderers/emptyRowRenderer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function EmptyRowsRenderer() {
+  return /* @__PURE__ */ jsx11("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__ */ jsx11("div", { style: { textAlign: "center" }, children: "No hay filas para mostrar" }) });
+}
 
 // src/components/grid/GenericDataGrid.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var getPrimaryKeyValues = (row, primaryKey) => {
+  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("|");
 };
-var NEW_ROW_INDICATOR = ".$new";
+var NEW_ROW_INDICATOR = "$new";
+var DETAIL_ROW_INDICATOR = "$detail";
 var GenericDataGrid = ({
   tableName,
   fixedFields
@@ -1434,9 +1622,10 @@ var GenericDataGrid = ({
   const [isFilterRowVisible, setIsFilterRowVisible] = useState4(false);
   const [filters, setFilters] = useState4({});
   const [selectedRows, setSelectedRows] = useState4(() => /* @__PURE__ */ new Set());
+  const [selectedCell, setSelectedCell] = useState4(void 0);
   const [cellFeedback, setCellFeedback] = useState4(null);
   const [localCellChanges, setLocalCellChanges] = useState4(/* @__PURE__ */ new Map());
-  const theme = useTheme();
+  const theme = useTheme3();
   const [openConfirmDialog, setOpenConfirmDialog] = useState4(false);
   const [rowToDelete, setRowToDelete] = useState4(null);
   const [exitingRowIds, setExitingRowIds] = useState4(/* @__PURE__ */ new Set());
@@ -1444,6 +1633,8 @@ var GenericDataGrid = ({
   const feedbackTimerRef = useRef(null);
   const dataGridRef = useRef(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;
   useEffect(() => {
     setFilters({});
     setIsFilterRowVisible(false);
@@ -1467,7 +1658,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) {
@@ -1478,15 +1668,20 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [tableName, fixedFields, showError]);
+  }, [
+    tableName,
+    /*fixedFields,*/
+    showError
+  ]);
   useEffect(() => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
         clearTimeout(feedbackTimerRef.current);
       }
-      const timerDuration = cellFeedback.type === "success" ? 4e3 : 3e3;
+      const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        setCellFeedback(null);
+        if (cellFeedback.type == "success")
+          setCellFeedback(null);
       }, timerDuration);
     }
     return () => {
@@ -1638,225 +1833,120 @@ var GenericDataGrid = ({
   const handleEnterKeyPressInEditor = useCallback4((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" && (fieldDefinition?.editable !== false && !fieldDefinition?.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 = fieldDefinition?.editable !== false;
-            if (nextColumn.key !== "filterToggle" && nextColumn.key !== "deleteAction" && isEditableField) {
-              foundNextTarget = true;
-            } else {
-              nextColumnIndex++;
-            }
-          } else {
-            nextColumnIndex++;
-          }
-        }
-        if (foundNextTarget) {
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: false, scrollIntoView: true });
+          const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
+          const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
+          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
         }
       }
     }
   }, [filteredRows, tableDefinition]);
+  const handleSelectedCellChange = useCallback4((args) => {
+    setSelectedCell(args);
+  }, []);
   const columns = useMemo2(() => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
       const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === field.name);
       return !(fixedFieldEntry && fixedFieldEntry.until === void 0);
     });
-    const defaultColumns = fieldsToShow.map((field) => {
-      const isFixedField = fixedFields?.some((f) => f.fieldName === field.name);
-      const isFieldEditable = field.editable !== false && !isFixedField;
+    const defaultColumns = fieldsToShow.map((fieldDef) => {
+      const isFixedField = fixedFields?.some((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,
+        setLocalCellChanges,
+        setTableData,
+        setCellFeedback,
+        name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
         editable: isFieldEditable,
-        // Usar la nueva bandera de editable
+        handleEnterKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
-        isPK: field.isPk,
-        renderHeaderCell: (props) => /* @__PURE__ */ jsx9(PkHeaderRenderer_default, { ...props }),
-        renderSummaryCell: ({ column }) => {
-          const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === column.key);
-          if (fixedFieldEntry && fixedFieldEntry.until === void 0) return null;
-          return isFilterRowVisible ? /* @__PURE__ */ jsx9(
-            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 (fieldDefinition?.clientSide) {
-            const ClientSideComponent = clientSides[fieldDefinition.clientSide];
-            if (ClientSideComponent) {
-              return /* @__PURE__ */ jsx9(
-                ClientSideComponent,
-                {
-                  ...props,
-                  fieldDefinition,
-                  tableDefinition,
-                  primaryKey
-                }
-              );
-            } else {
-              return /* @__PURE__ */ jsx9(
-                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) || tableDefinition.fields.find((f) => f.name === props.column.key)?.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 = fixedFields?.some((f) => f.fieldName === props.column.key);
-            if (isFixedFieldCurrent) {
-              cellBackgroundColor = theme.palette.action.selected;
-            } else if (isNewRowLocalCheck && isMandatory && !hasValue || localCellChanges.has(rowId) && localCellChanges.get(rowId)?.has(props.column.key)) {
-              cellBackgroundColor = theme.palette.info.light;
-            }
-          }
-          return /* @__PURE__ */ jsx9(
-            Box4,
-            {
-              sx: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                backgroundColor: cellBackgroundColor,
-                transition: "background-color 0.3s ease-in-out",
-                display: "flex",
-                alignItems: "center",
-                paddingLeft: "8px",
-                boxSizing: "border-box"
-              },
-              children: /* @__PURE__ */ jsx9(
-                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,
+      editable: false,
       resizable: false,
       sortable: false,
-      frozen: true,
-      renderHeaderCell: () => /* @__PURE__ */ jsx9(
-        IconButton,
-        {
-          color: "inherit",
-          onClick: toggleFilterVisibility,
-          size: "small",
-          title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
-          sx: { p: 0.5 },
-          children: isFilterRowVisible ? /* @__PURE__ */ jsx9(SearchOffIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx9(SearchIcon, { sx: { fontSize: 20 } })
-        }
-      ),
-      renderSummaryCell: () => null
+      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 (!tableDefinition.allow?.delete) {
-          return null;
-        }
-        return /* @__PURE__ */ jsx9(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx9(
-          Button2,
-          {
-            variant: "outlined",
-            color: "error",
-            size: "small",
-            onClick: () => handleDeleteRow(row),
-            title: "Eliminar fila",
-            sx: {
-              minWidth: 35,
-              height: 30,
-              p: 0.5,
-              "& .MuiButton-startIcon": { m: 0 }
-            },
-            children: /* @__PURE__ */ jsx9(DeleteIcon, { sx: { fontSize: 18 } })
+    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,
+          editable: false,
+          width: 50,
+          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 = fixedFields?.some((f) => f.fieldName === col.key);
-        const isFieldEditableByUI = fieldDefinition?.editable !== false && !isFixedField;
-        if (!isFieldEditableByUI) {
-          return { ...col, renderEditCell: void 0 };
         }
-        return {
-          ...col,
-          renderEditCell: (props) => {
-            return /* @__PURE__ */ jsx9(
-              InputRendered_default,
-              {
-                ...props,
-                tableDefinition,
-                setCellFeedback,
-                onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
-                setTableData,
-                setLocalCellChanges,
-                localCellChanges,
-                primaryKey
-              }
-            );
-          }
-        };
-      }
-      return col;
-    });
+        return void 0;
+      },
+      renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
+      renderCell: (props) => allColumnsCellRenderer(props)
+    }));
   }, [
     tableDefinition,
     isFilterRowVisible,
@@ -1868,19 +1958,28 @@ 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 = useCallback4((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 handleCellClick = useCallback4((args) => {
+    deselectAllOtherGrids(dataGridRef.current?.element);
+    args.selectCell(true);
     const fieldDefinition = tableDefinition?.fields.find((f) => f.name === args.column.key);
     const isFixedField = fixedFields?.some((f) => f.fieldName === args.column.key);
     const isEditable = fieldDefinition?.editable !== false && !isFixedField;
@@ -1889,41 +1988,54 @@ var GenericDataGrid = ({
     console.log("Is editable:", isEditable);
   }, [tableDefinition, fixedFields]);
   if (loading) {
-    return /* @__PURE__ */ jsxs4(Box4, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
-      /* @__PURE__ */ jsx9(CircularProgress, {}),
-      /* @__PURE__ */ jsx9(Typography5, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
+    return /* @__PURE__ */ jsxs4(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+      /* @__PURE__ */ jsx12(CircularProgress, {}),
+      /* @__PURE__ */ jsx12(Typography5, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx9(Box4, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx9(Alert, { severity: "error", children: error.message }) });
+    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
   }
   if (!tableDefinition) {
-    return /* @__PURE__ */ jsx9(Box4, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx9(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
+    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsxs4(Box4, { sx: { p: 0, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsx9(Box4, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pt: 2, pb: 1 }, children: /* @__PURE__ */ jsx9(Typography5, { variant: "h4", gutterBottom: true, sx: { m: 0 }, children: cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name) }) }),
-    tableDefinition.allow?.insert && /* @__PURE__ */ jsx9(Box4, { sx: { display: "flex", px: 2 }, children: /* @__PURE__ */ jsx9(
-      Button2,
+  return /* @__PURE__ */ jsxs4(Box5, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
+    tableDefinition.allow?.insert && /* @__PURE__ */ jsx12(Box5, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ jsx12(
+      Button3,
       {
         variant: "contained",
         onClick: handleAddRow,
-        startIcon: /* @__PURE__ */ jsx9(AddIcon, {}),
+        startIcon: /* @__PURE__ */ jsx12(AddIcon, {}),
         children: "Nuevo Registro"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Box4, { sx: { px: 2, pt: 2, pb: 1, fontSize: "0.9rem" }, children: filteredRows.length === tableData.length ? /* @__PURE__ */ jsxs4(Box4, { children: [
-      "mostrando ",
-      `${tableData.length} registros`
-    ] }) : /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsxs4(Box4, { children: [
-      "mostrando ",
-      `${filteredRows.length} registros filtrados`
-    ] }) }) }),
-    /* @__PURE__ */ jsxs4(
-      Box4,
+    /* @__PURE__ */ jsx12(
+      Box5,
+      {
+        sx: {
+          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__ */ jsxs4(Typography5, { variant: "subtitle1", component: "div", children: [
+          cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
+          " - mostrando ",
+          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} registros filtrados`
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      Box5,
       {
         sx: {
-          flexGrow: showNoRowsMessage ? 0 : 1,
-          height: showNoRowsMessage ? "150px" : "100%",
+          flexGrow: 1,
           boxSizing: "border-box",
           position: "relative",
           overflowX: "auto",
@@ -1931,54 +2043,33 @@ var GenericDataGrid = ({
           px: 2,
           pb: 2
         },
-        children: [
-          /* @__PURE__ */ jsx9(
-            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__ */ jsx9(
-            Box4,
-            {
-              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__ */ jsx9(Typography5, { variant: "h6", children: "No hay filas para mostrar." })
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsx12(
+          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,
+            onSelectedCellChange: handleSelectedCellChange,
+            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,
+            renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
+            onCellClick: handleCellClick
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx12(
       ConfirmDialog,
       {
         open: openConfirmDialog,
@@ -1999,15 +2090,15 @@ import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as
 import { useEffect as useEffect3 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box7,
+  Box as Box8,
   AppBar,
   Toolbar,
   Typography as Typography8,
-  Button as Button3,
+  Button as Button4,
   Drawer,
   CssBaseline,
-  IconButton as IconButton2,
-  useTheme as useTheme2,
+  IconButton as IconButton3,
+  useTheme as useTheme4,
   useMediaQuery
 } from "@mui/material";
 
@@ -2015,7 +2106,7 @@ import {
 import { createContext as createContext2, useContext as useContext2, useState as useState5, useEffect as useEffect2, useCallback as useCallback5, useMemo as useMemo3 } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector as useSelector2, useDispatch as useDispatch2 } from "react-redux";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var AuthContext = createContext2(void 0);
 var useApp = () => {
   const context = useContext2(AuthContext);
@@ -2083,7 +2174,7 @@ var AppProvider = ({ children }) => {
     showSessionExpiredMessage,
     setShowSessionExpiredMessage
   ]);
-  return /* @__PURE__ */ jsx10(AuthContext.Provider, { value: authContextValue, children });
+  return /* @__PURE__ */ jsx13(AuthContext.Provider, { value: authContextValue, children });
 };
 
 // src/components/MainLayout.tsx
@@ -2092,7 +2183,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 // src/components/SideMenu.tsx
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box6, Typography as Typography7, Collapse } from "@mui/material";
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box7, Typography as Typography7, Collapse } from "@mui/material";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import TableChartIcon from "@mui/icons-material/TableChart";
@@ -2107,30 +2198,30 @@ import { useNavigate as useNavigate2, useLocation } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
 
 // src/pages/WScreens.tsx
-import { Box as Box5, Typography as Typography6, Paper } from "@mui/material";
+import { Box as Box6, Typography as Typography6, Paper } from "@mui/material";
 import ConstructionIcon from "@mui/icons-material/Construction";
 import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx11(Box5, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
     /* @__PURE__ */ jsxs5(Typography6, { variant: "h5", component: "h1", gutterBottom: true, children: [
       "\xA1Bienvenido a tu WScreen: ",
       screenName,
       "!"
     ] }),
-    /* @__PURE__ */ jsx11(Typography6, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ jsx11(Box5, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx11(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
+    /* @__PURE__ */ jsx14(Typography6, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
+    /* @__PURE__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
   ] }) });
 };
 var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx11(Box5, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
-    /* @__PURE__ */ jsx11(Typography6, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
+  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+    /* @__PURE__ */ jsx14(Typography6, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
     /* @__PURE__ */ jsxs5(Typography6, { variant: "body1", color: "warning.dark", children: [
       'No se encontr\xF3 un componente implementado para la **WScreen**: **`"$',
       screenName,
       '"`**. Por favor, verifica el `menuType` en la definici\xF3n del men\xFA o aseg\xFArate de que el componente est\xE9 correctamente importado y mapeado en el frontend.'
     ] }),
-    /* @__PURE__ */ jsx11(Box5, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx11(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
+    /* @__PURE__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
   ] }) });
 };
 var wScreens = {
@@ -2141,7 +2232,7 @@ var wScreens = {
 var WScreens_default = FallbackWScreen;
 
 // src/components/SideMenu.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation();
@@ -2182,17 +2273,17 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx12(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx15(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx12(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx15(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx12(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx15(FolderIcon, { sx: { color: orange[800] } });
       default:
         const WScreenComponent = wScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx12(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx15(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx12(WarningAmberIcon3, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx15(WarningAmberIcon3, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -2204,7 +2295,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   } else {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
     /* @__PURE__ */ jsxs6(
       ListItemButton,
       {
@@ -2212,13 +2303,13 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
         sx: { pl: level * 2 },
         selected: isSelected,
         children: [
-          /* @__PURE__ */ jsx12(ListItemIcon, { sx: { minWidth: "38px" }, children: getIcon(item) }),
-          /* @__PURE__ */ jsx12(ListItemText, { primary: item.label || item.name }),
-          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx12(ExpandLess, {}) : /* @__PURE__ */ jsx12(ExpandMore, {}) : null
+          /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx15(ListItemText, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx15(ExpandLess, {}) : /* @__PURE__ */ jsx15(ExpandMore, {}) : null
         ]
       }
     ),
-    item.menuType === "menu" && /* @__PURE__ */ jsx12(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx12(List, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx12(
+    item.menuType === "menu" && /* @__PURE__ */ jsx15(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx15(List, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx15(
       MenuListItem,
       {
         item: subItem,
@@ -2248,22 +2339,22 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx12(Box6, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx12(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx15(Box7, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  return /* @__PURE__ */ jsxs6(Box6, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx12(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
-      /* @__PURE__ */ jsx12(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx12(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx12(UnfoldMoreIcon, {}) }),
-      /* @__PURE__ */ jsx12(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
+  return /* @__PURE__ */ jsxs6(Box7, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
+      /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx15(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx15(UnfoldMoreIcon, {}) }),
+      /* @__PURE__ */ jsx15(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
-    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsx15(Divider, {}),
     /* @__PURE__ */ jsxs6(List, { children: [
-      /* @__PURE__ */ jsx12(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
-        /* @__PURE__ */ jsx12(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx12(HomeIcon, {}) }),
-        /* @__PURE__ */ jsx12(ListItemText, { primary: "Inicio" })
+      /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
+        /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx15(HomeIcon, {}) }),
+        /* @__PURE__ */ jsx15(ListItemText, { primary: "Inicio" })
       ] }) }),
-      /* @__PURE__ */ jsx12(Divider, {}),
-      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx15(Divider, {}),
+      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx15(
         MenuListItem,
         {
           item: menuItem,
@@ -2306,14 +2397,14 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var drawerWidth = 240;
 var MainLayout = () => {
   const { clientContext } = useApp();
   const logout = useLogout_default();
   const isDrawerOpen = useIsDrawerOpen();
   const dispatch = useAppDispatch();
-  const theme = useTheme2();
+  const theme = useTheme4();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   useEffect3(() => {
     if (isMobile && isDrawerOpen) {
@@ -2329,12 +2420,12 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx13(Box7, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx13(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx16(Box8, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx16(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx13(CssBaseline, {}),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs7(Box8, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx16(CssBaseline, {}),
+    /* @__PURE__ */ jsx16(
       AppBar,
       {
         position: "fixed",
@@ -2354,8 +2445,8 @@ var MainLayout = () => {
           }
         },
         children: /* @__PURE__ */ jsxs7(Toolbar, { children: [
-          /* @__PURE__ */ jsx13(
-            IconButton2,
+          /* @__PURE__ */ jsx16(
+            IconButton3,
             {
               color: "inherit",
               "aria-label": "open drawer",
@@ -2364,17 +2455,17 @@ var MainLayout = () => {
               sx: {
                 marginRight: 2.2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx13(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx13(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx16(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx16(MenuIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx13(Typography8, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
-          /* @__PURE__ */ jsx13(Typography8, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
-          /* @__PURE__ */ jsx13(
-            Button3,
+          /* @__PURE__ */ jsx16(Typography8, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx16(Typography8, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx16(
+            Button4,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx13(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx16(LogoutIcon, {}),
               children: "Salir"
             }
           )
@@ -2398,7 +2489,7 @@ var MainLayout = () => {
           }
         },
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             Toolbar,
             {
               sx: {
@@ -2412,12 +2503,12 @@ var MainLayout = () => {
               children: isDrawerOpen ? clientContext.config.title : ""
             }
           ),
-          /* @__PURE__ */ jsx13(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ jsx16(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
         ]
       }
     ),
-    /* @__PURE__ */ jsx13(
-      Box7,
+    /* @__PURE__ */ jsx16(
+      Box8,
       {
         component: "main",
         sx: {
@@ -2444,7 +2535,7 @@ var MainLayout = () => {
           flexDirection: "column",
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
-        children: /* @__PURE__ */ jsx13(Outlet, {})
+        children: /* @__PURE__ */ jsx16(Outlet, {})
       }
     )
   ] });
@@ -2452,9 +2543,9 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box8, Typography as Typography9, Button as Button4, Modal } from "@mui/material";
+import { Box as Box9, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
 import { useNavigate as useNavigate4 } from "react-router-dom";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -2476,7 +2567,7 @@ var SessionExpiredMessage = () => {
     setIsLoggedIn(false);
     navigate("/login", { replace: true });
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -2496,10 +2587,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs8(Box8, { sx: style, children: [
-        /* @__PURE__ */ jsx14(Typography9, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
-        /* @__PURE__ */ jsx14(Typography9, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
-        /* @__PURE__ */ jsx14(Button4, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
+      children: /* @__PURE__ */ jsxs8(Box9, { sx: style, children: [
+        /* @__PURE__ */ jsx17(Typography9, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
+        /* @__PURE__ */ jsx17(Typography9, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
+        /* @__PURE__ */ jsx17(Button5, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
       ] })
     }
   );
@@ -2507,27 +2598,27 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box9, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box10, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  return /* @__PURE__ */ jsxs9(Box9, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ jsx15(Typography10, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
-    /* @__PURE__ */ jsx15(Typography10, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
+  return /* @__PURE__ */ jsxs9(Box10, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx18(Typography10, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
+    /* @__PURE__ */ jsx18(Typography10, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
 var HomePage_default = HomePage;
 
 // src/pages/LogoutPage.tsx
 import { useEffect as useEffect4 } from "react";
-import { Box as Box10, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box11, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect4(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs10(Box10, { sx: {
+  return /* @__PURE__ */ jsxs10(Box11, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -2535,21 +2626,21 @@ var LogoutPage = () => {
     height: "100vh",
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx16(CircularProgress2, { size: 60 }),
-    /* @__PURE__ */ jsx16(Typography11, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
+    /* @__PURE__ */ jsx19(CircularProgress2, { size: 60 }),
+    /* @__PURE__ */ jsx19(Typography11, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
   ] });
 };
 var LogoutPage_default = LogoutPage;
 
 // src/pages/LoginPage.tsx
 import { useState as useState6 } from "react";
-import { Button as Button5, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box11, CircularProgress as CircularProgress3 } from "@mui/material";
+import { Button as Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box12, CircularProgress as CircularProgress3 } from "@mui/material";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useNavigate as useNavigate5 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -2605,8 +2696,8 @@ var LoginPage = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx17(
-    Box11,
+  return /* @__PURE__ */ jsx20(
+    Box12,
     {
       display: "flex",
       alignItems: "center",
@@ -2614,7 +2705,7 @@ var LoginPage = () => {
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
       children: /* @__PURE__ */ jsxs11(
-        Box11,
+        Box12,
         {
           width: "100%",
           maxWidth: "400px",
@@ -2623,16 +2714,16 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx17(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
+            /* @__PURE__ */ jsx20(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
             /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
               /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx17("label", { htmlFor: "username", children: /* @__PURE__ */ jsx17(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx20("label", { htmlFor: "username", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
+                /* @__PURE__ */ jsx20(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx17(
+                    render: ({ field }) => /* @__PURE__ */ jsx20(
                       TextField,
                       {
                         ...field,
@@ -2649,13 +2740,13 @@ var LoginPage = () => {
                 )
               ] }),
               /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx17("label", { htmlFor: "password", children: /* @__PURE__ */ jsx17(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx20("label", { htmlFor: "password", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
+                /* @__PURE__ */ jsx20(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx17(
+                    render: ({ field }) => /* @__PURE__ */ jsx20(
                       TextField,
                       {
                         ...field,
@@ -2671,14 +2762,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx17(Button5, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
-                /* @__PURE__ */ jsx17(CircularProgress3, { size: 20, sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx20(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+                /* @__PURE__ */ jsx20(CircularProgress3, { size: 20, sx: { mr: 1 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
             loginError && /* @__PURE__ */ jsxs11(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
-              /* @__PURE__ */ jsx17(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx20(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -2694,7 +2785,7 @@ import React7, { useState as useState7, useCallback as useCallback7, useMemo as
 import { useParams } from "react-router-dom";
 import {
   TextField as TextField2,
-  Button as Button6,
+  Button as Button7,
   FormControl,
   InputLabel,
   Select,
@@ -2703,7 +2794,7 @@ import {
   FormControlLabel,
   FormHelperText,
   Typography as Typography14,
-  Box as Box13,
+  Box as Box14,
   CircularProgress as CircularProgress4,
   Alert as Alert3,
   Divider as Divider2,
@@ -2711,14 +2802,14 @@ import {
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box12, Typography as Typography13, Paper as Paper2 } from "@mui/material";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography13, Paper as Paper2 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
   return /* @__PURE__ */ jsxs12(Paper2, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
-    /* @__PURE__ */ jsx18(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
-    /* @__PURE__ */ jsx18(Typography13, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
-    /* @__PURE__ */ jsx18(Box12, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx18("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
-    /* @__PURE__ */ jsx18(Typography13, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
+    /* @__PURE__ */ jsx21(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
+    /* @__PURE__ */ jsx21(Typography13, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
+    /* @__PURE__ */ jsx21(Box13, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx21("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx21(Typography13, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -2732,7 +2823,7 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
@@ -2948,7 +3039,7 @@ var ProcedureForm = () => {
     };
     if (param.options && param.options.length > 0) {
       return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
-        /* @__PURE__ */ jsx19(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
+        /* @__PURE__ */ jsx22(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
         /* @__PURE__ */ jsxs13(
           Select,
           {
@@ -2960,14 +3051,14 @@ var ProcedureForm = () => {
             label: param.label || param.name,
             disabled: apiLoading,
             sx: { fontSize: "0.8rem" },
-            renderValue: (selected) => /* @__PURE__ */ jsx19(Typography14, { sx: { fontSize: "0.8rem" }, children: selected }),
+            renderValue: (selected) => /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem" }, children: selected }),
             children: [
-              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx19(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx19("em", { children: "Seleccione..." }) }),
-              param.options.map((option) => /* @__PURE__ */ jsx19(MenuItem, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
+              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx22(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx22("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx22(MenuItem, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
             ]
           }
         ),
-        (param.description || errorMessage) && /* @__PURE__ */ jsx19(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+        (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -2976,18 +3067,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx19(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
       case "decimal":
       case "double":
-        return /* @__PURE__ */ jsx19(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "integer":
       case "bigint":
-        return /* @__PURE__ */ jsx19(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx22(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx19(
+            control: /* @__PURE__ */ jsx22(
               Checkbox,
               {
                 checked: !!formValues[param.name],
@@ -2998,21 +3089,21 @@ var ProcedureForm = () => {
                 size: "small"
               }
             ),
-            label: /* @__PURE__ */ jsx19(Typography14, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
+            label: /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
             sx: { mt: 1, mb: 0 }
           }
         );
       case "date":
       case "timestamp":
       case "time":
-        return /* @__PURE__ */ jsx19(TextField2, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx22(TextField2, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
       case "jsonb":
       case "jsona":
-        return /* @__PURE__ */ jsx19(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx22(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
         return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
-          /* @__PURE__ */ jsx19(Typography14, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx22(Typography14, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "file",
@@ -3026,17 +3117,17 @@ var ProcedureForm = () => {
               style: { padding: "6px 0", fontSize: "0.8rem" }
             }
           ),
-          (param.description || errorMessage) && /* @__PURE__ */ jsx19(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+          (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx19(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = useMemo4(() => {
     if (!procedureResultData || !procedure?.resultOk) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
-      return /* @__PURE__ */ jsx19(ComponentToRender, { data: procedureResultData });
+      return /* @__PURE__ */ jsx22(ComponentToRender, { data: procedureResultData });
     } else {
       return /* @__PURE__ */ jsxs13(Paper3, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
         /* @__PURE__ */ jsxs13(Typography14, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
@@ -3044,16 +3135,16 @@ var ProcedureForm = () => {
           procedure.resultOk,
           "' definido en el procedure no existe o no est\xE1 mapeado."
         ] }),
-        /* @__PURE__ */ jsx19(Box13, { sx: {
+        /* @__PURE__ */ jsx22(Box14, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
-        }, children: /* @__PURE__ */ jsx19("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
+        }, children: /* @__PURE__ */ jsx22("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs13(Box13, { sx: {
+    return /* @__PURE__ */ jsxs13(Box14, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -3063,13 +3154,13 @@ var ProcedureForm = () => {
       boxShadow: 3,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx19(CircularProgress4, { sx: { mb: 2 } }),
-      /* @__PURE__ */ jsx19(Typography14, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
+      /* @__PURE__ */ jsx22(CircularProgress4, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx22(Typography14, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
     ] });
   }
   return (
     // Esta es la Box más externa que ahora controlará el scroll
-    /* @__PURE__ */ jsxs13(Box13, { sx: {
+    /* @__PURE__ */ jsxs13(Box14, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -3086,17 +3177,17 @@ var ProcedureForm = () => {
       overflowX: "hidden"
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
-      /* @__PURE__ */ jsx19(Typography14, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
+      /* @__PURE__ */ jsx22(Typography14, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
       Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs13(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
         "Por favor, corrige los errores en el formulario antes de enviar.",
-        /* @__PURE__ */ jsx19("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx19("li", { children: err }, idx)) })
+        /* @__PURE__ */ jsx22("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx22("li", { children: err }, idx)) })
       ] }),
-      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx19(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
-      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx19(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
+      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx22(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
+      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx22(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
       /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx19("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx19(
-          Button6,
+        procedure.parameters.map((param) => /* @__PURE__ */ jsx22("div", { children: renderInputField(param) }, param.name)),
+        /* @__PURE__ */ jsx22(
+          Button7,
           {
             type: "submit",
             variant: "contained",
@@ -3104,20 +3195,20 @@ var ProcedureForm = () => {
             disabled: apiLoading || Object.values(validationErrors).some((err) => err !== null),
             sx: { mt: 2 },
             size: "medium",
-            startIcon: apiLoading ? /* @__PURE__ */ jsx19(CircularProgress4, { size: 20, color: "inherit" }) : null,
+            startIcon: apiLoading ? /* @__PURE__ */ jsx22(CircularProgress4, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box13, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box14, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs13(Box13, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx19(Divider2, { sx: { mb: 2 } }),
-        /* @__PURE__ */ jsx19(Typography14, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
-        /* @__PURE__ */ jsx19(
-          Box13,
+      executionLog.length > 0 && /* @__PURE__ */ jsxs13(Box14, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx22(Divider2, { sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx22(Typography14, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
+        /* @__PURE__ */ jsx22(
+          Box14,
           {
             sx: {
               bgcolor: "grey.100",
@@ -3130,7 +3221,7 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx19(
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx22(
               Typography14,
               {
                 component: "pre",
@@ -3158,7 +3249,7 @@ import { PersistGate } from "redux-persist/integration/react";
 // src/components/PrivateRoute.tsx
 import { useEffect as useEffect5 } from "react";
 import { Navigate, useLocation as useLocation2 } from "react-router-dom";
-import { Fragment as Fragment4, jsx as jsx20 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation2();
   const dispatch = useAppDispatch();
@@ -3182,14 +3273,14 @@ var PrivateRoute = ({ children }) => {
   }, [isAuthenticated, isLoadingAuth, location, dispatch, clientContextStatus]);
   if (isLoadingAuth) {
     console.log(`[PrivateRoute] Returning loading state...`);
-    return /* @__PURE__ */ jsx20("p", { children: "Verificando autenticaci\xF3n..." });
+    return /* @__PURE__ */ jsx23("p", { children: "Verificando autenticaci\xF3n..." });
   }
   if (!isAuthenticated) {
     console.log(`[PrivateRoute] User not authenticated, navigating to /login`);
-    return /* @__PURE__ */ jsx20(Navigate, { to: "/login", replace: true });
+    return /* @__PURE__ */ jsx23(Navigate, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx20(Fragment4, { children });
+  return /* @__PURE__ */ jsx23(Fragment3, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
@@ -3223,25 +3314,25 @@ var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
 import { useParams as useParams2 } from "react-router-dom";
-import { Box as Box14, Alert as Alert4, Typography as Typography15 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box15, Alert as Alert4, Typography as Typography15 } from "@mui/material";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var GenericDataGridPage = () => {
   const { tableName } = useParams2();
   if (!tableName) {
-    return /* @__PURE__ */ jsx21(Box14, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
-      /* @__PURE__ */ jsx21(Typography15, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
-      /* @__PURE__ */ jsx21(Typography15, { variant: "body1", children: "Por favor, aseg\xFArate de que la URL contenga el nombre de la tabla (ej. `/data/users`)." })
+    return /* @__PURE__ */ jsx24(Box15, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
+      /* @__PURE__ */ jsx24(Typography15, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
+      /* @__PURE__ */ jsx24(Typography15, { variant: "body1", children: "Por favor, aseg\xFArate de que la URL contenga el nombre de la tabla (ej. `/data/users`)." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx21(GenericDataGrid_default, { tableName, fixedFields: [] });
+  return /* @__PURE__ */ jsx24(GenericDataGrid_default, { tableName, fixedFields: [] });
 };
 var GenericDataGridPage_default = GenericDataGridPage;
 
 // src/pages/MenuTablePage.tsx
 import { useMemo as useMemo5 } from "react";
 import { useParams as useParams3 } from "react-router-dom";
-import { Box as Box15, Alert as Alert5, Typography as Typography16 } from "@mui/material";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box as Box16, Alert as Alert5, Typography as Typography16 } from "@mui/material";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -3283,12 +3374,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx22(Box15, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
-      /* @__PURE__ */ jsx22(Typography16, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
-      /* @__PURE__ */ jsx22(Typography16, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
+    return /* @__PURE__ */ jsx25(Box16, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
+      /* @__PURE__ */ jsx25(Typography16, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
+      /* @__PURE__ */ jsx25(Typography16, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     GenericDataGrid_default,
     {
       tableName: currentTableName,
@@ -3299,7 +3390,7 @@ var MenuTablePage = () => {
 var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
   const dispatch = useAppDispatch();
@@ -3311,18 +3402,18 @@ var LocationTracker = () => {
 function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
   const allWScreens = { ...wScreens, ...myWScreens || {} };
   return /* @__PURE__ */ jsxs16(Routes, { children: [
-    /* @__PURE__ */ jsx23(Route, { path: "/login", element: /* @__PURE__ */ jsx23(LoginPage_default, {}) }),
-    /* @__PURE__ */ jsx23(Route, { path: "/logout", element: /* @__PURE__ */ jsx23(LogoutPage_default, {}) }),
+    /* @__PURE__ */ jsx26(Route, { path: "/login", element: /* @__PURE__ */ jsx26(LoginPage_default, {}) }),
+    /* @__PURE__ */ jsx26(Route, { path: "/logout", element: /* @__PURE__ */ jsx26(LogoutPage_default, {}) }),
     /* @__PURE__ */ jsxs16(Route, { element: /* @__PURE__ */ jsxs16(PrivateRoute_default, { children: [
-      /* @__PURE__ */ jsx23(InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ jsx23(MainLayout_default, {})
+      /* @__PURE__ */ jsx26(InitialRedirectHandler_default, {}),
+      /* @__PURE__ */ jsx26(MainLayout_default, {})
     ] }), children: [
-      /* @__PURE__ */ jsx23(Route, { path: "/", element: /* @__PURE__ */ jsx23(HomePage_default, {}) }),
-      /* @__PURE__ */ jsx23(Route, { path: "/home", element: /* @__PURE__ */ jsx23(HomePage_default, {}) }),
-      /* @__PURE__ */ jsx23(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx23(GenericDataGridPage_default, {}) }),
-      /* @__PURE__ */ jsx23(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx23(MenuTablePage_default, {}) }),
-      /* @__PURE__ */ jsx23(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx23(ProcedureForm_default, {}) }),
-      Object.keys(allWScreens).map((screenName) => /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx26(Route, { path: "/", element: /* @__PURE__ */ jsx26(HomePage_default, {}) }),
+      /* @__PURE__ */ jsx26(Route, { path: "/home", element: /* @__PURE__ */ jsx26(HomePage_default, {}) }),
+      /* @__PURE__ */ jsx26(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx26(GenericDataGridPage_default, {}) }),
+      /* @__PURE__ */ jsx26(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx26(MenuTablePage_default, {}) }),
+      /* @__PURE__ */ jsx26(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx26(ProcedureForm_default, {}) }),
+      Object.keys(allWScreens).map((screenName) => /* @__PURE__ */ jsx26(
         Route,
         {
           path: `/wScreens/${screenName}`,
@@ -3330,17 +3421,17 @@ function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
         },
         screenName
       )),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx26(
         Route,
         {
           path: "/wScreens-fallback/:screenName",
-          element: /* @__PURE__ */ jsx23(WScreens_default, { screenName: ":screenName" })
+          element: /* @__PURE__ */ jsx26(WScreens_default, { screenName: ":screenName" })
         }
       ),
-      /* @__PURE__ */ jsx23(Route, { path: "*", element: /* @__PURE__ */ jsx23("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
+      /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
     ] }),
     myRoutes,
-    /* @__PURE__ */ jsx23(Route, { path: "*", element: /* @__PURE__ */ jsx23(Navigate2, { to: "/", replace: true }) })
+    /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26(Navigate2, { to: "/", replace: true }) })
   ] });
 }
 var App = ({
@@ -3357,17 +3448,17 @@ var App = ({
       extendResultsOk(myResultsOk);
     }
   }, [myClientSides, myResultsOk]);
-  return /* @__PURE__ */ jsx23(Provider, { store, children: /* @__PURE__ */ jsx23(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs16(BrowserRouter, { children: [
-    /* @__PURE__ */ jsx23(LocationTracker, {}),
-    /* @__PURE__ */ jsx23(AppProvider, { children: /* @__PURE__ */ jsxs16(SnackbarProvider, { children: [
-      /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(Provider, { store, children: /* @__PURE__ */ jsx26(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs16(BrowserRouter, { children: [
+    /* @__PURE__ */ jsx26(LocationTracker, {}),
+    /* @__PURE__ */ jsx26(AppProvider, { children: /* @__PURE__ */ jsxs16(SnackbarProvider, { children: [
+      /* @__PURE__ */ jsx26(
         FrontendPlusReactRoutes,
         {
           myRoutes,
           myWScreens
         }
       ),
-      /* @__PURE__ */ jsx23(SessionExpiredMessage_default, {})
+      /* @__PURE__ */ jsx26(SessionExpiredMessage_default, {})
     ] }) })
   ] }) }) });
 };