frontend-plus-react 0.1.5 → 0.1.7

package/dist/index.js

@@ -786,7 +786,7 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import { CircularProgress, Typography as Typography5, Box as Box5, Alert, useTheme as useTheme3, Button as Button3 } from "@mui/material";
+import { CircularProgress, Typography as Typography5, Box as Box7, Alert, useTheme as useTheme3 } from "@mui/material";
 
 // src/utils/functions.tsx
 var JSON4all = __toESM(require_json4all(), 1);
@@ -986,9 +986,18 @@ var useRedirectPath = () => {
 
 // src/utils/functions.tsx
 var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
-
-// src/components/grid/GenericDataGrid.tsx
-import AddIcon from "@mui/icons-material/Add";
+var getDetailTableAndFixedFieldsForDetailTableAbr = (tableDefinition, detailTableAbr, row) => {
+  const detailTable = tableDefinition.detailTables.find((dt) => dt.abr === detailTableAbr);
+  let fixedFields = [];
+  detailTable.fields.forEach((field) => {
+    if (typeof field === "string") {
+      fixedFields.push({ fieldName: field, value: row[field] });
+    } else {
+      fixedFields.push({ fieldName: field.target, value: row[field.source] });
+    }
+  });
+  return { detailTable, fixedFields };
+};
 
 // src/components/ConfirmDialog.tsx
 import Dialog from "@mui/material/Dialog";
@@ -1022,7 +1031,8 @@ var ConfirmDialog = ({ open, onClose, title, message }) => {
 import { Box, IconButton, Tooltip, Typography } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
   const isPrimaryKey = fieldDef.isPk;
@@ -1045,7 +1055,7 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
           sx: {
             fontWeight: "bold",
             textDecoration: isPrimaryKey ? "underline" : "none",
-            fontSize: "0.875rem"
+            fontSize: "o.930rem"
             // Puedes ajustar el tamaño si es necesario
           },
           children: column.name
@@ -1054,17 +1064,30 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
     }
   );
 };
-var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ jsx3(
-  IconButton,
-  {
-    color: "inherit",
-    onClick: toggleFilterVisibility,
-    size: "small",
-    title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
-    sx: { p: 0.5 },
-    children: isFilterRowVisible ? /* @__PURE__ */ jsx3(SearchOffIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 20 } })
-  }
-);
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      color: "inherit",
+      onClick: toggleFilterVisibility,
+      size: "small",
+      title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+      sx: { p: 0.25 },
+      children: isFilterRowVisible ? /* @__PURE__ */ jsx3(SearchOffIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 18 } })
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      onClick: () => {
+      },
+      size: "small",
+      title: "Opciones de esta tabla",
+      sx: { p: 0.25 },
+      children: /* @__PURE__ */ jsx3(MoreVertIcon, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+    }
+  )
+] });
 var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx3(Tooltip, { title: detailTable.label, children: /* @__PURE__ */ jsx3(Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
 
 // src/components/grid/FilterInputRender.tsx
@@ -1085,6 +1108,7 @@ function FilterInputRenderer({
       }),
       sx: {
         width: "100%",
+        height: 25,
         margin: "0",
         border: "1px solid #ccc",
         borderRadius: "4px",
@@ -1099,35 +1123,38 @@ function FilterInputRenderer({
 var FilterInputRender_default = FilterInputRenderer;
 
 // src/components/grid/renderers/summaryCellRenderers.tsx
+import { Box as Box2 } from "@mui/material";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible, filters, setFilters) => {
   const { column } = props;
   const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === column.key);
   if (fixedFieldEntry && fixedFieldEntry.until === void 0 || !isFilterRowVisible) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx5(Box2, { children: /* @__PURE__ */ jsx5(
     FilterInputRender_default,
     {
       column,
       filters,
       setFilters
     }
-  );
+  ) });
 };
 var actionsColumnSummaryCellRenderer = (props) => null;
 var detailColumnCellSummaryRenderer = (props) => null;
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { Box as Box4, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
+import { Box as Box5, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import ViewHeadlineIcon from "@mui/icons-material/ViewHeadline";
 import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
 
 // src/components/grid/ExampleClientSideComponent.tsx
-import { Box as Box2, Typography as Typography2 } from "@mui/material";
+import { Box as Box3, Typography as Typography2 } from "@mui/material";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
   const value = row[column.key];
-  return /* @__PURE__ */ jsx6(Box2, { sx: {
+  return /* @__PURE__ */ jsx6(Box3, { sx: {
     padding: 0.5,
     width: "100%",
     height: "100%",
@@ -1139,13 +1166,13 @@ var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
 var ExampleClientSideComponent_default = ExampleClientSideComponent;
 
 // src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box3, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box4, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
   const clientSideName = fieldDefinition?.clientSide || "Desconocido";
-  return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs3(
-    Box3,
+  return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs4(
+    Box4,
     {
       sx: {
         display: "flex",
@@ -1205,17 +1232,9 @@ var allColumnsCellRenderer = (props) => {
     const detailTableAbr = row[DETAIL_ROW_INDICATOR];
     const detailColumn = column;
     if (column.customType === "detail" && detailColumn.detailTable.abr === detailTableAbr) {
-      const detailTable = detailColumn.tableDefinition.detailTables.find((dt) => dt.abr === detailTableAbr);
-      let fixedFields = [];
-      detailTable.fields.forEach((field) => {
-        if (typeof field === "string") {
-          fixedFields.push({ fieldName: field, value: row[field] });
-        } else {
-          fixedFields.push({ fieldName: field.target, value: row[field.source] });
-        }
-      });
+      const { detailTable, fixedFields } = getDetailTableAndFixedFieldsForDetailTableAbr(detailColumn.tableDefinition, detailTableAbr, row);
       return /* @__PURE__ */ jsx8(
-        Box4,
+        Box5,
         {
           sx: {
             // Se eliminó el padding para que la sub-grilla se extienda por completo
@@ -1230,7 +1249,7 @@ var allColumnsCellRenderer = (props) => {
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => e.stopPropagation(),
           onDoubleClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields })
+          children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields, gridStyles: { height: 322 } })
         }
       );
     }
@@ -1263,7 +1282,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box4, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box5, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
     }
     case "detail": {
       const detailColumn = column;
@@ -1271,10 +1290,9 @@ var allColumnsCellRenderer = (props) => {
       const isExpanded = tableData.some(
         (r) => r[DETAIL_ROW_INDICATOR] === detailTable.abr && getPrimaryKeyValues(r, primaryKey) === getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey)
       );
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
         IconButton2,
         {
-          size: "small",
           onClick: (event) => {
             let rows = [...tableData];
             const rowId = getPrimaryKeyValues({ ...row, [DETAIL_ROW_INDICATOR]: detailTable.abr }, primaryKey);
@@ -1292,17 +1310,51 @@ var allColumnsCellRenderer = (props) => {
             }
             event.stopPropagation();
           },
-          title: isExpanded ? "Contraer detalle" : "Expandir detalle",
-          sx: { p: 0.5 },
           children: isExpanded ? /* @__PURE__ */ jsx8(KeyboardArrowUpIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx8(KeyboardArrowDownIcon, { sx: { fontSize: 20 } })
         }
       ) }) });
     }
     case "action": {
       const actionColumn = column;
-      const { tableDefinition, handleDeleteRow } = actionColumn;
-      if (!tableDefinition.allow?.delete) return void 0;
-      return /* @__PURE__ */ jsx8(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(Button2, { variant: "outlined", color: "error", size: "small", onClick: () => handleDeleteRow(row), title: "Eliminar fila", sx: { minWidth: 35, height: 30, p: 0.5, "& .MuiButton-startIcon": { m: 0 } }, children: /* @__PURE__ */ jsx8(DeleteIcon, { sx: { fontSize: 18 } }) }) });
+      const { tableDefinition, handleDeleteRow, handleAddRow } = actionColumn;
+      const gridActionButtons = [
+        {
+          action: "insert",
+          handler: handleAddRow,
+          icon: AddIcon,
+          title: "Agregar registro",
+          color: "success"
+        },
+        {
+          action: "delete",
+          handler: handleDeleteRow,
+          icon: DeleteIcon,
+          title: "Eliminar registro",
+          color: "error"
+        },
+        {
+          action: "vertical-edit",
+          handler: () => {
+          },
+          // implementar funcion
+          icon: ViewHeadlineIcon,
+          title: "Editar registro en forma de ficha",
+          color: "primary"
+        }
+      ];
+      return /* @__PURE__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx8(
+        Button2,
+        {
+          variant: "outlined",
+          color: actionDef.color,
+          size: "small",
+          onClick: () => actionDef.handler(row),
+          title: actionDef.title,
+          sx: { width: 22, minWidth: 22, height: 22, "& .MuiButton-startIcon": { m: 0 } },
+          children: /* @__PURE__ */ jsx8(actionDef.icon, { sx: { fontSize: 18 } })
+        },
+        actionDef.action
+      ) : null) });
     }
     default:
       return void 0;
@@ -1432,7 +1484,7 @@ function InputRenderer({
         newRow: rowToSend,
         oldRow: oldRowData,
         status
-      }, { reportOnSnackbar: false });
+      });
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1459,7 +1511,6 @@ function InputRenderer({
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
         onRowChange({ ...response.row }, true);
-        onClose(true, focusNextCell);
       }
       findChangedValues(oldRowData, response.row).forEach(
         (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
@@ -1485,15 +1536,12 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = useCallback3((event) => {
-    console.log("entra");
-    if (event.key === "Enter") {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight"].includes(event.key)) {
       handleCommit(editingValue, true, true);
       event.preventDefault();
       if (onEnterPress) {
-        onEnterPress(rowIdx, column.key);
+        onEnterPress(rowIdx, column.key, event.key);
       }
-    } else if (event.key === "Tab") {
-      handleCommit(editingValue, true, true);
     }
   }, [handleCommit, editingValue, column.key, rowIdx, onEnterPress]);
   const handleBlur = useCallback3(() => {
@@ -1528,6 +1576,7 @@ function InputRenderer({
 var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
+import { Box as Box6, Tooltip as Tooltip4 } from "@mui/material";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
@@ -1552,20 +1601,21 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         if (!isFieldEditableByUI) {
           return void 0;
         }
-        return /* @__PURE__ */ jsx10(
+        const rowId = getPrimaryKeyValues(props.row, primaryKey);
+        return /* @__PURE__ */ jsx10(Tooltip4, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
           InputRenderer_default,
           {
             ...props,
             tableDefinition,
             setCellFeedback,
             cellFeedback,
-            onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+            onEnterPress: (rowIndex, columnKey, key) => handleEnterKeyPressInEditor(rowIndex, columnKey, key, allColumns),
             setTableData,
             setLocalCellChanges,
             localCellChanges,
             primaryKey
           }
-        );
+        ) }) });
       }
       return void 0;
     }
@@ -1602,7 +1652,7 @@ function EmptyRowsRenderer() {
 }
 
 // src/components/grid/GenericDataGrid.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var getPrimaryKeyValues = (row, primaryKey) => {
   if (row[DETAIL_ROW_INDICATOR]) {
     primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
@@ -1615,8 +1665,10 @@ var NEW_ROW_INDICATOR = "$new";
 var DETAIL_ROW_INDICATOR = "$detail";
 var GenericDataGrid = ({
   tableName,
-  fixedFields
+  fixedFields,
+  gridStyles
 }) => {
+  const isOpenMenu = useIsDrawerOpen();
   const [tableDefinition, setTableDefinition] = useState4(null);
   const [tableData, setTableData] = useState4([]);
   const [isFilterRowVisible, setIsFilterRowVisible] = useState4(false);
@@ -1830,12 +1882,12 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, currentColumns) => {
+  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, key, currentColumns) => {
     if (dataGridRef.current && tableDefinition) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        return col.key !== "filterToggle" && col.key !== "deleteAction" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
+        return col.key !== "actionsColumn" && col.customType != "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
@@ -1852,7 +1904,7 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
         }
       }
     }
@@ -1892,13 +1944,20 @@ var GenericDataGrid = ({
         renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields, isFilterRowVisible, filters, setFilters)
       };
     });
+    const availableActions = [
+      tableDefinition.allow?.insert,
+      tableDefinition.allow?.delete,
+      tableDefinition.allow?.["vertical-edit"]
+    ].filter(Boolean).length;
+    const actionColumnWidth = availableActions === 0 ? 30 : 12 + availableActions * 25;
     const actionsColumn = {
-      key: "filterToggle",
+      key: "actionsColumn",
       customType: "action",
       tableDefinition,
       handleDeleteRow,
+      handleAddRow,
       name: "filterCol",
-      width: 50,
+      width: actionColumnWidth,
       editable: false,
       resizable: false,
       sortable: false,
@@ -1922,7 +1981,8 @@ var GenericDataGrid = ({
           resizable: false,
           sortable: false,
           editable: false,
-          width: 50,
+          width: 30,
+          minWidth: 30,
           renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
           renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
         });
@@ -1944,6 +2004,8 @@ var GenericDataGrid = ({
         }
         return void 0;
       },
+      editorOptions: { closeOnExternalRowChange: false },
+      //con esto no se pierde el foco
       renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
@@ -1962,6 +2024,7 @@ var GenericDataGrid = ({
     setTableData,
     localCellChanges,
     handleDeleteRow,
+    handleAddRow,
     fixedFields,
     tableData
   ]);
@@ -1977,6 +2040,11 @@ var GenericDataGrid = ({
       }
     });
   };
+  const handleCellKeyDown = (args, event) => {
+    if (["Tab", "Enter"].includes(event.key)) {
+      event.preventGridDefault();
+    }
+  };
   const handleCellClick = useCallback4((args) => {
     deselectAllOtherGrids(dataGridRef.current?.element);
     args.selectCell(true);
@@ -1988,29 +2056,20 @@ var GenericDataGrid = ({
     console.log("Is editable:", isEditable);
   }, [tableDefinition, fixedFields]);
   if (loading) {
-    return /* @__PURE__ */ jsxs4(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+    return /* @__PURE__ */ jsxs5(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
       /* @__PURE__ */ jsx12(CircularProgress, {}),
       /* @__PURE__ */ jsx12(Typography5, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
+    return /* @__PURE__ */ jsx12(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
   }
   if (!tableDefinition) {
-    return /* @__PURE__ */ jsx12(Box5, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
+    return /* @__PURE__ */ jsx12(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsxs4(Box5, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    tableDefinition.allow?.insert && /* @__PURE__ */ jsx12(Box5, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ jsx12(
-      Button3,
-      {
-        variant: "contained",
-        onClick: handleAddRow,
-        startIcon: /* @__PURE__ */ jsx12(AddIcon, {}),
-        children: "Nuevo Registro"
-      }
-    ) }),
+  return /* @__PURE__ */ jsxs5(Box7, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
     /* @__PURE__ */ jsx12(
-      Box5,
+      Box7,
       {
         sx: {
           backgroundColor: theme.palette.primary.main,
@@ -2024,15 +2083,15 @@ var GenericDataGrid = ({
           ml: 2,
           mr: 2
         },
-        children: /* @__PURE__ */ jsxs4(Typography5, { variant: "subtitle1", component: "div", children: [
+        children: /* @__PURE__ */ jsxs5(Typography5, { variant: "subtitle2", component: "div", children: [
           cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
-          " - mostrando ",
-          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} registros filtrados`
+          " - ",
+          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} (F)`
         ] })
       }
     ),
     /* @__PURE__ */ jsx12(
-      Box5,
+      Box7,
       {
         sx: {
           flexGrow: 1,
@@ -2046,6 +2105,7 @@ var GenericDataGrid = ({
         children: /* @__PURE__ */ jsx12(
           DataGrid,
           {
+            className: "rdg-light",
             ref: dataGridRef,
             columns,
             rows: filteredRows.map((row) => ({
@@ -2058,13 +2118,14 @@ var GenericDataGrid = ({
             onSelectedCellChange: handleSelectedCellChange,
             onRowsChange: handleRowsChange,
             selectedRows,
-            rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 35,
-            style: { height: "100%", width: "100%", boxSizing: "border-box" },
-            headerRowHeight: 35,
+            rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 30,
+            style: { ...{ height: "100%", width: "100%", boxSizing: "border-box" }, ...gridStyles },
+            headerRowHeight: 30,
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
-            summaryRowHeight: isFilterRowVisible ? 35 : 0,
+            summaryRowHeight: isFilterRowVisible ? 30 : 0,
             renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
-            onCellClick: handleCellClick
+            onCellClick: handleCellClick,
+            onCellKeyDown: handleCellKeyDown
           }
         )
       }
@@ -2090,10 +2151,10 @@ import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as
 import { useEffect as useEffect3 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box8,
+  Box as Box9,
   AppBar,
   Toolbar,
-  Typography as Typography8,
+  Typography as Typography7,
   Button as Button4,
   Drawer,
   CssBaseline,
@@ -2183,57 +2244,21 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 // src/components/SideMenu.tsx
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box7, Typography as Typography7, Collapse } from "@mui/material";
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box8, Typography as Typography6, 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";
 import FolderIcon from "@mui/icons-material/Folder";
 import DnsIcon from "@mui/icons-material/Dns";
 import HomeIcon from "@mui/icons-material/Home";
-import WarningAmberIcon3 from "@mui/icons-material/WarningAmber";
+import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
 import DesktopWindowsIcon from "@mui/icons-material/DesktopWindows";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import { useNavigate as useNavigate2, useLocation } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
-
-// src/pages/WScreens.tsx
-import { Box as Box6, Typography as Typography6, Paper } from "@mui/material";
-import ConstructionIcon from "@mui/icons-material/Construction";
-import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ jsxs5(Typography6, { variant: "h5", component: "h1", gutterBottom: true, children: [
-      "\xA1Bienvenido a tu WScreen: ",
-      screenName,
-      "!"
-    ] }),
-    /* @__PURE__ */ jsx14(Typography6, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
-  ] }) });
-};
-var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box6, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs5(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
-    /* @__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__ */ jsx14(Box6, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
-  ] }) });
-};
-var wScreens = {
-  "MyCustomDashboard": MyCustomDashboard
-  // Agrega más componentes de wScreen aquí:
-  // 'AnotherWScreen': AnotherWScreenComponent,
-};
-var WScreens_default = FallbackWScreen;
-
-// src/components/SideMenu.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var MenuListItem = ({ item, level, onMenuItemClick }) => {
+import { Fragment, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
   const navigate = useNavigate2();
   const location = useLocation();
   const open = useSubMenuOpenState(item.name);
@@ -2254,7 +2279,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
       } else if (item.menuType === "proc") {
         path = `/procedures/${item.name}`;
       } else {
-        const WScreenComponent = wScreens[item.menuType];
+        const WScreenComponent = allWScreens[item.menuType];
         if (WScreenComponent !== void 0) {
           path = `/wScreens/${item.menuType}`;
         } else {
@@ -2273,17 +2298,17 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx15(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx14(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx15(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx14(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx15(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx14(FolderIcon, { sx: { color: orange[800] } });
       default:
-        const WScreenComponent = wScreens[item2.menuType];
+        const WScreenComponent = allWScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx15(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx14(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx15(WarningAmberIcon3, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -2303,24 +2328,25 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
         sx: { pl: level * 2 },
         selected: isSelected,
         children: [
-          /* @__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
+          /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx14(ListItemText, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx14(ExpandLess, {}) : /* @__PURE__ */ jsx14(ExpandMore, {}) : null
         ]
       }
     ),
-    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(
+    item.menuType === "menu" && /* @__PURE__ */ jsx14(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx14(List, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx14(
       MenuListItem,
       {
         item: subItem,
         level: level + 1,
-        onMenuItemClick
+        onMenuItemClick,
+        allWScreens
       },
       subItem.name
     )) }) })
   ] });
 };
-var SideMenu = ({ onMenuItemClick }) => {
+var SideMenu = ({ onMenuItemClick, allWScreens }) => {
   const { clientContext } = useApp();
   const navigate = useNavigate2();
   const location = useLocation();
@@ -2339,27 +2365,28 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx15(Box7, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx14(Box8, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx14(Typography6, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  return /* @__PURE__ */ jsxs6(Box7, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
-      /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx15(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx15(UnfoldMoreIcon, {}) }),
-      /* @__PURE__ */ jsx15(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
+  return /* @__PURE__ */ jsxs6(Box8, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx14(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
+      /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx14(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx14(UnfoldMoreIcon, {}) }),
+      /* @__PURE__ */ jsx14(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
-    /* @__PURE__ */ jsx15(Divider, {}),
+    /* @__PURE__ */ jsx14(Divider, {}),
     /* @__PURE__ */ jsxs6(List, { children: [
-      /* @__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__ */ jsx14(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
+        /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx14(HomeIcon, {}) }),
+        /* @__PURE__ */ jsx14(ListItemText, { primary: "Inicio" })
       ] }) }),
-      /* @__PURE__ */ jsx15(Divider, {}),
-      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx14(Divider, {}),
+      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx14(
         MenuListItem,
         {
           item: menuItem,
           level: 1,
-          onMenuItemClick
+          onMenuItemClick,
+          allWScreens
         },
         menuItem.name
       ))
@@ -2397,9 +2424,10 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var drawerWidth = 240;
-var MainLayout = () => {
+var MainLayout = (props) => {
+  const { allWScreens } = props;
   const { clientContext } = useApp();
   const logout = useLogout_default();
   const isDrawerOpen = useIsDrawerOpen();
@@ -2420,12 +2448,12 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx16(Box8, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx16(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx15(Box9, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx15(Typography7, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs7(Box8, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx16(CssBaseline, {}),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs7(Box9, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx15(CssBaseline, {}),
+    /* @__PURE__ */ jsx15(
       AppBar,
       {
         position: "fixed",
@@ -2445,7 +2473,7 @@ var MainLayout = () => {
           }
         },
         children: /* @__PURE__ */ jsxs7(Toolbar, { children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx15(
             IconButton3,
             {
               color: "inherit",
@@ -2455,17 +2483,17 @@ var MainLayout = () => {
               sx: {
                 marginRight: 2.2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx16(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx16(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx15(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx15(MenuIcon, {})
             }
           ),
-          /* @__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(
+          /* @__PURE__ */ jsx15(Typography7, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx15(Typography7, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx15(
             Button4,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx16(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx15(LogoutIcon, {}),
               children: "Salir"
             }
           )
@@ -2489,7 +2517,7 @@ var MainLayout = () => {
           }
         },
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx15(
             Toolbar,
             {
               sx: {
@@ -2503,12 +2531,12 @@ var MainLayout = () => {
               children: isDrawerOpen ? clientContext.config.title : ""
             }
           ),
-          /* @__PURE__ */ jsx16(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ jsx15(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile, allWScreens })
         ]
       }
     ),
-    /* @__PURE__ */ jsx16(
-      Box8,
+    /* @__PURE__ */ jsx15(
+      Box9,
       {
         component: "main",
         sx: {
@@ -2535,7 +2563,7 @@ var MainLayout = () => {
           flexDirection: "column",
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
-        children: /* @__PURE__ */ jsx16(Outlet, {})
+        children: /* @__PURE__ */ jsx15(Outlet, {})
       }
     )
   ] });
@@ -2543,9 +2571,9 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box9, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
+import { Box as Box10, Typography as Typography8, Button as Button5, Modal } from "@mui/material";
 import { useNavigate as useNavigate4 } from "react-router-dom";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -2567,7 +2595,7 @@ var SessionExpiredMessage = () => {
     setIsLoggedIn(false);
     navigate("/login", { replace: true });
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -2587,10 +2615,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      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" })
+      children: /* @__PURE__ */ jsxs8(Box10, { sx: style, children: [
+        /* @__PURE__ */ jsx16(Typography8, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
+        /* @__PURE__ */ jsx16(Typography8, { 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__ */ jsx16(Button5, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
       ] })
     }
   );
@@ -2598,27 +2626,27 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box10, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box11, Typography as Typography9 } from "@mui/material";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  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." })
+  return /* @__PURE__ */ jsxs9(Box11, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx17(Typography9, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
+    /* @__PURE__ */ jsx17(Typography9, { 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 Box11, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box12, Typography as Typography10, CircularProgress as CircularProgress2 } from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect4(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs10(Box11, { sx: {
+  return /* @__PURE__ */ jsxs10(Box12, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -2626,21 +2654,21 @@ var LogoutPage = () => {
     height: "100vh",
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx19(CircularProgress2, { size: 60 }),
-    /* @__PURE__ */ jsx19(Typography11, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
+    /* @__PURE__ */ jsx18(CircularProgress2, { size: 60 }),
+    /* @__PURE__ */ jsx18(Typography10, { 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 Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box12, CircularProgress as CircularProgress3 } from "@mui/material";
+import { Button as Button6, TextField, Typography as Typography11, Alert as Alert2, AlertTitle, Box as Box13, CircularProgress as CircularProgress3 } from "@mui/material";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useNavigate as useNavigate5 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, 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
@@ -2696,8 +2724,8 @@ var LoginPage = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx20(
-    Box12,
+  return /* @__PURE__ */ jsx19(
+    Box13,
     {
       display: "flex",
       alignItems: "center",
@@ -2705,7 +2733,7 @@ var LoginPage = () => {
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
       children: /* @__PURE__ */ jsxs11(
-        Box12,
+        Box13,
         {
           width: "100%",
           maxWidth: "400px",
@@ -2714,16 +2742,16 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx20(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
+            /* @__PURE__ */ jsx19(Typography11, { 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__ */ jsx20("label", { htmlFor: "username", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx19("label", { htmlFor: "username", children: /* @__PURE__ */ jsx19(Typography11, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
+                /* @__PURE__ */ jsx19(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx20(
+                    render: ({ field }) => /* @__PURE__ */ jsx19(
                       TextField,
                       {
                         ...field,
@@ -2740,13 +2768,13 @@ var LoginPage = () => {
                 )
               ] }),
               /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx20("label", { htmlFor: "password", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx19("label", { htmlFor: "password", children: /* @__PURE__ */ jsx19(Typography11, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
+                /* @__PURE__ */ jsx19(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx20(
+                    render: ({ field }) => /* @__PURE__ */ jsx19(
                       TextField,
                       {
                         ...field,
@@ -2762,14 +2790,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx20(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
-                /* @__PURE__ */ jsx20(CircularProgress3, { size: 20, sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx19(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+                /* @__PURE__ */ jsx19(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__ */ jsx20(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx19(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -2793,23 +2821,23 @@ import {
   Checkbox,
   FormControlLabel,
   FormHelperText,
-  Typography as Typography14,
-  Box as Box14,
+  Typography as Typography13,
+  Box as Box15,
   CircularProgress as CircularProgress4,
   Alert as Alert3,
   Divider as Divider2,
-  Paper as Paper3
+  Paper as Paper2
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box13, Typography as Typography13, Paper as Paper2 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box14, Typography as Typography12, Paper } from "@mui/material";
+import { jsx as jsx20, 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__ */ 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." })
+  return /* @__PURE__ */ jsxs12(Paper, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
+    /* @__PURE__ */ jsx20(Typography12, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
+    /* @__PURE__ */ jsx20(Typography12, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
+    /* @__PURE__ */ jsx20(Box14, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx20("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx20(Typography12, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -2823,7 +2851,7 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
@@ -3039,7 +3067,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__ */ jsx22(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
+        /* @__PURE__ */ jsx21(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
         /* @__PURE__ */ jsxs13(
           Select,
           {
@@ -3051,14 +3079,14 @@ var ProcedureForm = () => {
             label: param.label || param.name,
             disabled: apiLoading,
             sx: { fontSize: "0.8rem" },
-            renderValue: (selected) => /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem" }, children: selected }),
+            renderValue: (selected) => /* @__PURE__ */ jsx21(Typography13, { sx: { fontSize: "0.8rem" }, children: selected }),
             children: [
-              (!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))
+              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx21(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx21("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx21(MenuItem, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
             ]
           }
         ),
-        (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+        (param.description || errorMessage) && /* @__PURE__ */ jsx21(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -3067,18 +3095,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx21(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
       case "decimal":
       case "double":
-        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx21(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "integer":
       case "bigint":
-        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx21(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx21(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx22(
+            control: /* @__PURE__ */ jsx21(
               Checkbox,
               {
                 checked: !!formValues[param.name],
@@ -3089,21 +3117,21 @@ var ProcedureForm = () => {
                 size: "small"
               }
             ),
-            label: /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
+            label: /* @__PURE__ */ jsx21(Typography13, { 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__ */ 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" } } });
+        return /* @__PURE__ */ jsx21(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__ */ jsx22(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx21(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__ */ 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(
+          /* @__PURE__ */ jsx21(Typography13, { 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__ */ jsx21(
             "input",
             {
               type: "file",
@@ -3117,34 +3145,34 @@ var ProcedureForm = () => {
               style: { padding: "6px 0", fontSize: "0.8rem" }
             }
           ),
-          (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+          (param.description || errorMessage) && /* @__PURE__ */ jsx21(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx21(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__ */ jsx22(ComponentToRender, { data: procedureResultData });
+      return /* @__PURE__ */ jsx21(ComponentToRender, { data: procedureResultData });
     } else {
-      return /* @__PURE__ */ jsxs13(Paper3, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs13(Typography14, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+      return /* @__PURE__ */ jsxs13(Paper2, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
+        /* @__PURE__ */ jsxs13(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
           "el componente para resolver el resultOk: '",
           procedure.resultOk,
           "' definido en el procedure no existe o no est\xE1 mapeado."
         ] }),
-        /* @__PURE__ */ jsx22(Box14, { sx: {
+        /* @__PURE__ */ jsx21(Box15, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
-        }, children: /* @__PURE__ */ jsx22("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
+        }, children: /* @__PURE__ */ jsx21("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs13(Box14, { sx: {
+    return /* @__PURE__ */ jsxs13(Box15, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -3154,13 +3182,13 @@ var ProcedureForm = () => {
       boxShadow: 3,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx22(CircularProgress4, { sx: { mb: 2 } }),
-      /* @__PURE__ */ jsx22(Typography14, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
+      /* @__PURE__ */ jsx21(CircularProgress4, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx21(Typography13, { 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(Box14, { sx: {
+    /* @__PURE__ */ jsxs13(Box15, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -3177,16 +3205,16 @@ var ProcedureForm = () => {
       overflowX: "hidden"
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
-      /* @__PURE__ */ jsx22(Typography14, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
+      /* @__PURE__ */ jsx21(Typography13, { 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__ */ jsx22("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx22("li", { children: err }, idx)) })
+        /* @__PURE__ */ jsx21("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx21("li", { children: err }, idx)) })
       ] }),
-      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx22(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
-      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx22(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
+      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx21(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
+      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx21(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
       /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx22("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx22(
+        procedure.parameters.map((param) => /* @__PURE__ */ jsx21("div", { children: renderInputField(param) }, param.name)),
+        /* @__PURE__ */ jsx21(
           Button7,
           {
             type: "submit",
@@ -3195,20 +3223,20 @@ var ProcedureForm = () => {
             disabled: apiLoading || Object.values(validationErrors).some((err) => err !== null),
             sx: { mt: 2 },
             size: "medium",
-            startIcon: apiLoading ? /* @__PURE__ */ jsx22(CircularProgress4, { size: 20, color: "inherit" }) : null,
+            startIcon: apiLoading ? /* @__PURE__ */ jsx21(CircularProgress4, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box14, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box15, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      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,
+      executionLog.length > 0 && /* @__PURE__ */ jsxs13(Box15, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx21(Divider2, { sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx21(Typography13, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
+        /* @__PURE__ */ jsx21(
+          Box15,
           {
             sx: {
               bgcolor: "grey.100",
@@ -3221,8 +3249,8 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx22(
-              Typography14,
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx21(
+              Typography13,
               {
                 component: "pre",
                 sx: {
@@ -3249,7 +3277,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 Fragment3, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation2();
   const dispatch = useAppDispatch();
@@ -3273,14 +3301,14 @@ var PrivateRoute = ({ children }) => {
   }, [isAuthenticated, isLoadingAuth, location, dispatch, clientContextStatus]);
   if (isLoadingAuth) {
     console.log(`[PrivateRoute] Returning loading state...`);
-    return /* @__PURE__ */ jsx23("p", { children: "Verificando autenticaci\xF3n..." });
+    return /* @__PURE__ */ jsx22("p", { children: "Verificando autenticaci\xF3n..." });
   }
   if (!isAuthenticated) {
     console.log(`[PrivateRoute] User not authenticated, navigating to /login`);
-    return /* @__PURE__ */ jsx23(Navigate, { to: "/login", replace: true });
+    return /* @__PURE__ */ jsx22(Navigate, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx23(Fragment3, { children });
+  return /* @__PURE__ */ jsx22(Fragment3, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
@@ -3314,25 +3342,25 @@ var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
 import { useParams as useParams2 } from "react-router-dom";
-import { Box as Box15, Alert as Alert4, Typography as Typography15 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box16, Alert as Alert4, Typography as Typography14 } from "@mui/material";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var GenericDataGridPage = () => {
   const { tableName } = useParams2();
   if (!tableName) {
-    return /* @__PURE__ */ jsx24(Box15, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
-      /* @__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__ */ jsx23(Box16, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
+      /* @__PURE__ */ jsx23(Typography14, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
+      /* @__PURE__ */ jsx23(Typography14, { variant: "body1", children: "Por favor, aseg\xFArate de que la URL contenga el nombre de la tabla (ej. `/data/users`)." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx24(GenericDataGrid_default, { tableName, fixedFields: [] });
+  return /* @__PURE__ */ jsx23(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 Box16, Alert as Alert5, Typography as Typography16 } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box as Box17, Alert as Alert5, Typography as Typography15 } from "@mui/material";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -3374,12 +3402,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx25(Box16, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
-      /* @__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__ */ jsx24(Box17, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
+      /* @__PURE__ */ jsx24(Typography15, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
+      /* @__PURE__ */ jsx24(Typography15, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     GenericDataGrid_default,
     {
       tableName: currentTableName,
@@ -3389,8 +3417,42 @@ var MenuTablePage = () => {
 };
 var MenuTablePage_default = MenuTablePage;
 
+// src/pages/WScreens.tsx
+import { Box as Box18, Typography as Typography16, Paper as Paper3 } from "@mui/material";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import WarningAmberIcon3 from "@mui/icons-material/WarningAmber";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var MyCustomDashboard = ({ screenName }) => {
+  return /* @__PURE__ */ jsx25(Box18, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs16(Paper3, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+    /* @__PURE__ */ jsxs16(Typography16, { variant: "h5", component: "h1", gutterBottom: true, children: [
+      "\xA1Bienvenido a tu WScreen: ",
+      screenName,
+      "!"
+    ] }),
+    /* @__PURE__ */ jsx25(Typography16, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
+    /* @__PURE__ */ jsx25(Box18, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx25(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
+  ] }) });
+};
+var FallbackWScreen = ({ screenName }) => {
+  return /* @__PURE__ */ jsx25(Box18, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs16(Paper3, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+    /* @__PURE__ */ jsx25(Typography16, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
+    /* @__PURE__ */ jsxs16(Typography16, { 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__ */ jsx25(Box18, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx25(WarningAmberIcon3, { sx: { fontSize: 80, color: "warning.dark" } }) })
+  ] }) });
+};
+var wScreens = {
+  "MyCustomDashboard": MyCustomDashboard
+  // Agrega más componentes de wScreen aquí:
+  // 'AnotherWScreen': AnotherWScreenComponent,
+};
+var WScreens_default = FallbackWScreen;
+
 // src/App.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
   const dispatch = useAppDispatch();
@@ -3399,14 +3461,14 @@ var LocationTracker = () => {
   }, [location, dispatch]);
   return null;
 };
-function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
+function FrontendPlusReactRoutes({ myRoutes, allWScreens: myWScreens }) {
   const allWScreens = { ...wScreens, ...myWScreens || {} };
-  return /* @__PURE__ */ jsxs16(Routes, { children: [
+  return /* @__PURE__ */ jsxs17(Routes, { children: [
     /* @__PURE__ */ jsx26(Route, { path: "/login", element: /* @__PURE__ */ jsx26(LoginPage_default, {}) }),
     /* @__PURE__ */ jsx26(Route, { path: "/logout", element: /* @__PURE__ */ jsx26(LogoutPage_default, {}) }),
-    /* @__PURE__ */ jsxs16(Route, { element: /* @__PURE__ */ jsxs16(PrivateRoute_default, { children: [
+    /* @__PURE__ */ jsxs17(Route, { element: /* @__PURE__ */ jsxs17(PrivateRoute_default, { children: [
       /* @__PURE__ */ jsx26(InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ jsx26(MainLayout_default, {})
+      /* @__PURE__ */ jsx26(MainLayout_default, { allWScreens })
     ] }), children: [
       /* @__PURE__ */ jsx26(Route, { path: "/", element: /* @__PURE__ */ jsx26(HomePage_default, {}) }),
       /* @__PURE__ */ jsx26(Route, { path: "/home", element: /* @__PURE__ */ jsx26(HomePage_default, {}) }),
@@ -3417,7 +3479,7 @@ function FrontendPlusReactRoutes({ myRoutes, myWScreens }) {
         Route,
         {
           path: `/wScreens/${screenName}`,
-          element: React11.createElement(wScreens[screenName], { screenName })
+          element: React11.createElement(allWScreens[screenName], { screenName })
         },
         screenName
       )),
@@ -3448,14 +3510,14 @@ var App = ({
       extendResultsOk(myResultsOk);
     }
   }, [myClientSides, myResultsOk]);
-  return /* @__PURE__ */ jsx26(Provider, { store, children: /* @__PURE__ */ jsx26(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs16(BrowserRouter, { children: [
+  return /* @__PURE__ */ jsx26(Provider, { store, children: /* @__PURE__ */ jsx26(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs17(BrowserRouter, { children: [
     /* @__PURE__ */ jsx26(LocationTracker, {}),
-    /* @__PURE__ */ jsx26(AppProvider, { children: /* @__PURE__ */ jsxs16(SnackbarProvider, { children: [
+    /* @__PURE__ */ jsx26(AppProvider, { children: /* @__PURE__ */ jsxs17(SnackbarProvider, { children: [
       /* @__PURE__ */ jsx26(
         FrontendPlusReactRoutes,
         {
           myRoutes,
-          myWScreens
+          allWScreens: myWScreens
         }
       ),
       /* @__PURE__ */ jsx26(SessionExpiredMessage_default, {})