frontend-plus-react 0.1.14 → 0.1.16

package/dist/index.js

@@ -605,7 +605,7 @@ var require_json4all = __commonJS({
 });
 
 // src/components/grid/GenericDataGrid.tsx
-import { useState as useState4, useEffect, useCallback as useCallback4, useMemo as useMemo2, useRef } from "react";
+import { useState as useState5, useEffect, useCallback as useCallback4, useMemo as useMemo2, useRef } from "react";
 import { DataGrid } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 
@@ -757,12 +757,9 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const callApi = useCallback2(async (procedureName, params, opts) => {
+  const callApi = useCallback2(async (procedureName, params) => {
     setLoading(true);
     setError(null);
-    const defaultOpts = { ...{
-      reportOnSnackbar: true
-    }, ...opts };
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
@@ -774,9 +771,7 @@ var useApiCall = () => {
       } else if (err instanceof Error) {
         snackbarMessage = err.message;
       }
-      if (defaultOpts.reportOnSnackbar) {
-        showSnackbar(snackbarMessage, "error");
-      }
+      showSnackbar(snackbarMessage, "error");
       throw err;
     } finally {
       setLoading(false);
@@ -784,9 +779,28 @@ var useApiCall = () => {
   }, [showSnackbar]);
   return { callApi, loading, error };
 };
+var useApiCallWithoutSnackbar = () => {
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const callApi = useCallback2(async (procedureName, params) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await executeBackendProcedure(procedureName, params);
+      return result === null ? void 0 : result;
+    } catch (err) {
+      setError(err);
+      console.error(`Error en la llamada API (WithoutSnackbar) para ${procedureName}:`, err);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { callApi, loading, error };
+};
 
 // src/components/grid/GenericDataGrid.tsx
-import { CircularProgress, Typography as Typography5, Box as Box7, Alert, useTheme as useTheme3 } from "@mui/material";
+import { CircularProgress as CircularProgress2, Typography as Typography5, Box as Box8, Alert, useTheme as useTheme3 } from "@mui/material";
 
 // src/utils/functions.tsx
 var JSON4all = __toESM(require_json4all(), 1);
@@ -1027,17 +1041,131 @@ var ConfirmDialog = ({ open, onClose, title, message }) => {
   );
 };
 
+// src/components/grid/DataGridOptionsDialog.tsx
+import {
+  Popover,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  CircularProgress,
+  Box
+} from "@mui/material";
+import { useState as useState3 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DataGridOptionsDialog = ({
+  open,
+  onClose,
+  options,
+  anchorEl
+}) => {
+  const [isExecuting, setIsExecuting] = useState3(false);
+  const handleOptionClick = async (handler) => {
+    try {
+      setIsExecuting(true);
+      await handler();
+    } catch (error) {
+      console.error("Error ejecutando handler:", error);
+    } finally {
+      setIsExecuting(false);
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    open && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.2)",
+          zIndex: 1200,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              zIndex: 1300
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs3(Paper, { sx: { minWidth: 150, maxWidth: 350 }, children: [
+          isExecuting && /* @__PURE__ */ jsx3(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                p: 5
+              },
+              children: /* @__PURE__ */ jsx3(CircularProgress, { size: 40 })
+            }
+          ),
+          !isExecuting && /* @__PURE__ */ jsx3(List, { sx: {
+            py: 0,
+            "& .MuiListItemButton-root": {
+              py: 0.5,
+              px: 1.5,
+              minHeight: 36
+            },
+            "& .MuiListItemIcon-root": {
+              minWidth: 32
+            },
+            "& .MuiListItemText-primary": {
+              fontSize: "0.85rem"
+            },
+            "& .MuiSvgIcon-root": {
+              fontSize: 18
+            }
+          }, children: options.filter((option) => option.visible !== false).map((option) => /* @__PURE__ */ jsxs3(
+            ListItemButton,
+            {
+              onClick: () => handleOptionClick(option.handler),
+              children: [
+                /* @__PURE__ */ jsx3(ListItemIcon, { children: option.icon }),
+                /* @__PURE__ */ jsx3(ListItemText, { primary: option.label })
+              ]
+            },
+            option.id
+          )) })
+        ] })
+      }
+    )
+  ] });
+};
+
 // src/components/grid/renderers/headerCellRenderers.tsx
-import { Box, IconButton, Tooltip, Typography } from "@mui/material";
+import { Box as Box2, IconButton, Tooltip, Typography } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   const { column } = props;
   const isPrimaryKey = fieldDef.isPk;
-  return /* @__PURE__ */ jsx3(
-    Box,
+  return /* @__PURE__ */ jsx4(
+    Box2,
     {
       sx: {
         display: "flex",
@@ -1048,7 +1176,7 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
         boxSizing: "border-box",
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         Typography,
         {
           variant: "body2",
@@ -1064,41 +1192,42 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
     }
   );
 };
-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() }) });
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility, handleDataGridOptions) => {
+  return /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        color: "inherit",
+        onClick: toggleFilterVisibility,
+        size: "small",
+        title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+        sx: { p: 0.25 },
+        children: isFilterRowVisible ? /* @__PURE__ */ jsx4(SearchOffIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx4(SearchIcon, { sx: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        onClick: (event) => handleDataGridOptions(event),
+        size: "small",
+        title: "Opciones de esta tabla",
+        sx: { p: 0.25 },
+        children: /* @__PURE__ */ jsx4(MoreVertIcon, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+      }
+    )
+  ] });
+};
+var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx4(Tooltip, { title: detailTable.label, children: /* @__PURE__ */ jsx4(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 jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function FilterInputRenderer({
   column,
   filters,
   setFilters
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     InputBase,
     {
       value: filters[column.key] || "",
@@ -1123,13 +1252,13 @@ 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";
+import { Box as Box3 } from "@mui/material";
+import { jsx as jsx6 } 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(Box2, { children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(Box3, { children: /* @__PURE__ */ jsx6(
     FilterInputRender_default,
     {
       column,
@@ -1142,7 +1271,7 @@ var actionsColumnSummaryCellRenderer = (props) => null;
 var detailColumnCellSummaryRenderer = (props) => null;
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { Box as Box5, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
+import { Box as Box6, 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";
@@ -1150,29 +1279,29 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import AddIcon from "@mui/icons-material/Add";
 
 // src/components/grid/ExampleClientSideComponent.tsx
-import { Box as Box3, Typography as Typography2 } from "@mui/material";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Box as Box4, Typography as Typography2 } from "@mui/material";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
   const value = row[column.key];
-  return /* @__PURE__ */ jsx6(Box3, { sx: {
+  return /* @__PURE__ */ jsx7(Box4, { 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" }) });
+  }, children: /* @__PURE__ */ jsx7(Typography2, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
 };
 var ExampleClientSideComponent_default = ExampleClientSideComponent;
 
 // src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box4, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box5, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } 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__ */ jsxs4(
-    Box4,
+  return /* @__PURE__ */ jsx8(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs5(
+    Box5,
     {
       sx: {
         display: "flex",
@@ -1192,8 +1321,8 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ jsx7(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
+        /* @__PURE__ */ jsx8(
           WarningAmberIcon,
           {
             sx: {
@@ -1223,7 +1352,7 @@ var extendClientSides = (newRenderers) => {
 };
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var allColumnsCellRenderer = (props) => {
   const theme = useTheme();
   const column = props.column;
@@ -1233,8 +1362,8 @@ var allColumnsCellRenderer = (props) => {
     const detailColumn = column;
     if (column.customType === "detail" && detailColumn.detailTable.abr === detailTableAbr) {
       const { detailTable, fixedFields } = getDetailTableAndFixedFieldsForDetailTableAbr(detailColumn.tableDefinition, detailTableAbr, row);
-      return /* @__PURE__ */ jsx8(
-        Box5,
+      return /* @__PURE__ */ jsx9(
+        Box6,
         {
           sx: {
             // Se eliminó el padding para que la sub-grilla se extienda por completo
@@ -1249,7 +1378,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, gridStyles: { height: 322 } })
+          children: /* @__PURE__ */ jsx9(GenericDataGrid_default, { tableName: detailTable.table, fixedFields, gridStyles: { height: 322 } })
         }
       );
     }
@@ -1265,9 +1394,9 @@ var allColumnsCellRenderer = (props) => {
       if (fieldDef?.clientSide) {
         const ClientSideComponent = clientSides[fieldDef.clientSide];
         if (ClientSideComponent) {
-          return /* @__PURE__ */ jsx8(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+          return /* @__PURE__ */ jsx9(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
         }
-        return /* @__PURE__ */ jsx8(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+        return /* @__PURE__ */ jsx9(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
       }
       let cellBackgroundColor = "transparent";
       if (currentCellFeedback) {
@@ -1284,7 +1413,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: currentCellFeedback?.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) }) }) });
+      return /* @__PURE__ */ jsx9(Tooltip3, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx9(Box6, { 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(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;
@@ -1292,7 +1421,7 @@ 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(Box5, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx9(Box6, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx9(
         IconButton2,
         {
           onClick: (event) => {
@@ -1312,7 +1441,7 @@ var allColumnsCellRenderer = (props) => {
             }
             event.stopPropagation();
           },
-          children: isExpanded ? /* @__PURE__ */ jsx8(KeyboardArrowUpIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx8(KeyboardArrowDownIcon, { sx: { fontSize: 20 } })
+          children: isExpanded ? /* @__PURE__ */ jsx9(KeyboardArrowUpIcon, { sx: { fontSize: 20 } }) : /* @__PURE__ */ jsx9(KeyboardArrowDownIcon, { sx: { fontSize: 20 } })
         }
       ) }) });
     }
@@ -1344,7 +1473,7 @@ var allColumnsCellRenderer = (props) => {
           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(
+      return /* @__PURE__ */ jsx9(Box6, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx9(
         Button2,
         {
           variant: "outlined",
@@ -1353,7 +1482,7 @@ var allColumnsCellRenderer = (props) => {
           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 } })
+          children: /* @__PURE__ */ jsx9(actionDef.icon, { sx: { fontSize: 18 } })
         },
         actionDef.action
       ) : null) });
@@ -1364,10 +1493,10 @@ var allColumnsCellRenderer = (props) => {
 };
 
 // src/components/grid/InputRenderer.tsx
-import { useCallback as useCallback3, useMemo, useState as useState3 } from "react";
+import { useCallback as useCallback3, useMemo, useState as useState4 } from "react";
 import InputBase2 from "@mui/material/InputBase";
 import { useTheme as useTheme2 } from "@mui/material";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function findChangedValues(oldRowData, newRowData, isNewRow) {
   let changes = [];
   for (const key in newRowData) {
@@ -1395,7 +1524,7 @@ function InputRenderer({
   primaryKey
 }) {
   const tableName = tableDefinition.tableName;
-  const [editingValue, setEditingValue] = useState3(row[column.key]);
+  const [editingValue, setEditingValue] = useState4(row[column.key]);
   const theme = useTheme2();
   const { showSuccess, showError } = useSnackbar();
   const cellKey = getCellKey(row, column.key, primaryKey);
@@ -1568,7 +1697,7 @@ function InputRenderer({
   }, [handleCommit, editingValue]);
   const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
   const isFieldEditable = fieldDefinition?.editable !== false;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     InputBase2,
     {
       value: editingValue === null ? "" : editingValue,
@@ -1595,8 +1724,8 @@ 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";
+import { Box as Box7, Tooltip as Tooltip4 } from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
   switch (column.customType) {
@@ -1627,7 +1756,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
         return (
           // --- TOOLTIP ADAPTADO: Lee el mensaje de error desde el Mapa ---
-          /* @__PURE__ */ jsx10(Tooltip4, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(Tooltip4, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx11(Box7, { children: /* @__PURE__ */ jsx11(
             InputRenderer_default,
             {
               ...props,
@@ -1657,9 +1786,9 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
 };
 
 // src/components/grid/renderers/emptyRowRenderer.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function EmptyRowsRenderer() {
-  return /* @__PURE__ */ jsx11("div", { style: {
+  return /* @__PURE__ */ jsx12("div", { style: {
     // Posicionamiento absoluto respecto a la pantalla
     position: "fixed",
     top: "50%",
@@ -1674,11 +1803,114 @@ function EmptyRowsRenderer() {
     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" }) });
+  }, children: /* @__PURE__ */ jsx12("div", { style: { textAlign: "center" }, children: "No hay filas para mostrar" }) });
 }
 
+// src/components/grid/menu/options.tsx
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var buildMenuOptions = (params) => {
+  const {
+    tableDefinition,
+    tableName,
+    fixedFields,
+    setTableData,
+    callApi,
+    showSuccess,
+    showError,
+    showWarning
+  } = params;
+  if (!tableDefinition) return [];
+  const options = [];
+  options.push({
+    id: "refresh",
+    label: "refrescar la grilla desde la base de datos",
+    icon: /* @__PURE__ */ jsx13(RefreshIcon, {}),
+    handler: async () => {
+      try {
+        const data = await callApi("table_data", {
+          table: tableName,
+          fixedFields
+        });
+        setTableData(data);
+        showSuccess("Grilla refrescada correctamente");
+      } catch (err) {
+        showError(`Error al refrescar: ${err.message || "Error desconocido"}`);
+      }
+    },
+    visible: true
+  });
+  options.push({
+    id: "showColumns",
+    label: "mostrar las columnas relacionadas",
+    icon: /* @__PURE__ */ jsx13(ViewColumnIcon, {}),
+    handler: async () => {
+      console.log("Mostrar columnas relacionadas");
+    },
+    visible: true
+  });
+  options.push({
+    id: "hideColumns",
+    label: "ocultar o mostrar columnas",
+    icon: /* @__PURE__ */ jsx13(VisibilityOffIcon, {}),
+    handler: async () => {
+      console.log("Ocultar/mostrar columnas");
+    },
+    visible: true
+  });
+  if (tableDefinition.allow?.export) {
+    options.push({
+      id: "export",
+      label: "exportar",
+      icon: /* @__PURE__ */ jsx13(FileDownloadIcon, {}),
+      handler: async () => {
+        console.log("Exportar datos");
+      },
+      visible: true
+    });
+  }
+  if (tableDefinition.allow?.import) {
+    options.push({
+      id: "import",
+      label: "importar",
+      icon: /* @__PURE__ */ jsx13(FileUploadIcon, {}),
+      handler: async () => {
+        console.log("Importar datos");
+      },
+      visible: true
+    });
+  }
+  if (tableDefinition.allow?.delete) {
+    options.push({
+      id: "deleteAll",
+      label: "borrar todos los registros",
+      icon: /* @__PURE__ */ jsx13(DeleteSweepIcon, {}),
+      handler: async () => {
+        showWarning("Esta operaci\xF3n eliminar\xE1 TODOS los registros de la tabla");
+      },
+      visible: true
+    });
+  }
+  options.push({
+    id: "completeTable",
+    label: "tabla completa y filtrada",
+    icon: /* @__PURE__ */ jsx13(FilterAltIcon, {}),
+    handler: async () => {
+      console.log("Toggle tabla completa/filtrada");
+    },
+    visible: true
+  });
+  return options;
+};
+
 // src/components/grid/GenericDataGrid.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var NEW_ROW_INDICATOR = "$new";
 var DETAIL_ROW_INDICATOR = "$detail";
 var getPrimaryKeyValues = (row, primaryKey) => {
@@ -1699,18 +1931,20 @@ var GenericDataGrid = ({
   gridStyles
 }) => {
   const isOpenMenu = useIsDrawerOpen();
-  const [tableDefinition, setTableDefinition] = useState4(null);
-  const [tableData, setTableData] = useState4([]);
-  const [isFilterRowVisible, setIsFilterRowVisible] = useState4(false);
-  const [filters, setFilters] = useState4({});
-  const [selectedRows, setSelectedRows] = useState4(() => /* @__PURE__ */ new Set());
-  const [selectedCell, setSelectedCell] = useState4(void 0);
-  const [cellFeedbackMap, setCellFeedbackMap] = useState4(/* @__PURE__ */ new Map());
-  const [localCellChanges, setLocalCellChanges] = useState4(/* @__PURE__ */ new Map());
+  const [tableDefinition, setTableDefinition] = useState5(null);
+  const [tableData, setTableData] = useState5([]);
+  const [isFilterRowVisible, setIsFilterRowVisible] = useState5(false);
+  const [filters, setFilters] = useState5({});
+  const [selectedRows, setSelectedRows] = useState5(() => /* @__PURE__ */ new Set());
+  const [selectedCell, setSelectedCell] = useState5(void 0);
+  const [cellFeedbackMap, setCellFeedbackMap] = useState5(/* @__PURE__ */ new Map());
+  const [localCellChanges, setLocalCellChanges] = useState5(/* @__PURE__ */ new Map());
   const theme = useTheme3();
-  const [openConfirmDialog, setOpenConfirmDialog] = useState4(false);
-  const [rowToDelete, setRowToDelete] = useState4(null);
-  const [exitingRowIds, setExitingRowIds] = useState4(/* @__PURE__ */ new Set());
+  const [openConfirmDialog, setOpenConfirmDialog] = useState5(false);
+  const [openDataGridOptions, setOpenDataGridOptions] = useState5(false);
+  const [dataGridOptionsAnchorEl, setDataGridOptionsAnchorEl] = useState5(null);
+  const [rowToDelete, setRowToDelete] = useState5(null);
+  const [exitingRowIds, setExitingRowIds] = useState5(/* @__PURE__ */ new Set());
   const { showSuccess, showError, showWarning, showInfo } = useSnackbar();
   const feedbackTimerRef = useRef(null);
   const dataGridRef = useRef(null);
@@ -2027,6 +2261,16 @@ var GenericDataGrid = ({
   const handleSelectedCellChange = useCallback4((args) => {
     setSelectedCell(args);
   }, []);
+  const menuOptions = useMemo2(() => buildMenuOptions({
+    tableDefinition,
+    tableName,
+    fixedFields,
+    setTableData,
+    callApi,
+    showSuccess,
+    showError,
+    showWarning
+  }), [tableDefinition, tableName, fixedFields, setTableData, callApi, showSuccess, showError, showWarning]);
   const columns = useMemo2(() => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
@@ -2077,7 +2321,10 @@ var GenericDataGrid = ({
       editable: false,
       resizable: false,
       sortable: false,
-      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
+      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility, (e) => {
+        setDataGridOptionsAnchorEl(e.currentTarget);
+        setOpenDataGridOptions(true);
+      }),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
     const detailColumns = [];
@@ -2181,20 +2428,20 @@ var GenericDataGrid = ({
     console.log("Is editable:", isEditable);
   }, [tableDefinition, fixedFields]);
   if (loading) {
-    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..." })
+    return /* @__PURE__ */ jsxs6(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+      /* @__PURE__ */ jsx14(CircularProgress2, {}),
+      /* @__PURE__ */ jsx14(Typography5, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx12(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx12(Alert, { severity: "error", children: error.message }) });
+    return /* @__PURE__ */ jsx14(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx14(Alert, { severity: "error", children: error.message }) });
   }
   if (!tableDefinition) {
-    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__ */ jsx14(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx14(Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsxs5(Box7, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsx12(
-      Box7,
+  return /* @__PURE__ */ jsxs6(Box8, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsx14(
+      Box8,
       {
         sx: {
           backgroundColor: theme.palette.primary.main,
@@ -2208,15 +2455,15 @@ var GenericDataGrid = ({
           ml: 2,
           mr: 2
         },
-        children: /* @__PURE__ */ jsxs5(Typography5, { variant: "subtitle2", component: "div", children: [
+        children: /* @__PURE__ */ jsxs6(Typography5, { variant: "subtitle2", component: "div", children: [
           cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
           " - ",
           getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} (F)`
         ] })
       }
     ),
-    /* @__PURE__ */ jsx12(
-      Box7,
+    /* @__PURE__ */ jsx14(
+      Box8,
       {
         sx: {
           flexGrow: 1,
@@ -2227,7 +2474,7 @@ var GenericDataGrid = ({
           px: 2,
           pb: 2
         },
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx14(
           DataGrid,
           {
             className: "rdg-light",
@@ -2248,7 +2495,7 @@ var GenericDataGrid = ({
             headerRowHeight: 30,
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
             summaryRowHeight: isFilterRowVisible ? 30 : 0,
-            renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
+            renderers: { noRowsFallback: /* @__PURE__ */ jsx14(EmptyRowsRenderer, {}) },
             onCellMouseDown: handleCellMouseDown,
             onCellDoubleClick: handlCellDoubleClick,
             onCellClick: handleCellClick,
@@ -2257,7 +2504,7 @@ var GenericDataGrid = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       ConfirmDialog,
       {
         open: openConfirmDialog,
@@ -2265,6 +2512,15 @@ var GenericDataGrid = ({
         title: "Confirmar Eliminaci\xF3n",
         message: rowToDelete && rowToDelete[NEW_ROW_INDICATOR] ? `\xBFEst\xE1s seguro de que quieres eliminar esta nueva fila (ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)}) localmente?` : rowToDelete ? `\xBFEst\xE1s seguro de que quieres eliminar la fila con ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)} de la base de datos? Esta acci\xF3n es irreversible.` : "\xBFEst\xE1s seguro de que quieres eliminar este registro? Esta acci\xF3n es irreversible."
       }
+    ),
+    /* @__PURE__ */ jsx14(
+      DataGridOptionsDialog,
+      {
+        open: openDataGridOptions,
+        onClose: () => setOpenDataGridOptions(false),
+        options: menuOptions,
+        anchorEl: dataGridOptionsAnchorEl
+      }
     )
   ] });
 };
@@ -2278,7 +2534,7 @@ import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as
 import { useEffect as useEffect3 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box10,
+  Box as Box11,
   AppBar,
   Toolbar,
   Typography as Typography8,
@@ -2291,10 +2547,10 @@ import {
 } from "@mui/material";
 
 // src/contexts/AppContext.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState5, useEffect as useEffect2, useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState6, 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 jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var AuthContext = createContext2(void 0);
 var useApp = () => {
   const context = useContext2(AuthContext);
@@ -2306,8 +2562,8 @@ var useApp = () => {
 };
 var AppProvider = ({ children }) => {
   console.log("AppProvider rendered/re-rendered");
-  const [isLoggedIn, setIsLoggedIn] = useState5(false);
-  const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState5(false);
+  const [isLoggedIn, setIsLoggedIn] = useState6(false);
+  const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState6(false);
   const dispatch = useDispatch2();
   const clientContext = useSelector2((state) => state.clientContext);
   const navigate = useNavigate();
@@ -2362,7 +2618,7 @@ var AppProvider = ({ children }) => {
     showSessionExpiredMessage,
     setShowSessionExpiredMessage
   ]);
-  return /* @__PURE__ */ jsx13(AuthContext.Provider, { value: authContextValue, children });
+  return /* @__PURE__ */ jsx15(AuthContext.Provider, { value: authContextValue, children });
 };
 
 // src/components/MainLayout.tsx
@@ -2371,7 +2627,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 Box9, Typography as Typography7, Collapse } from "@mui/material";
+import { List as List2, ListItem, ListItemButton as ListItemButton2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider, Box as Box10, 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";
@@ -2386,30 +2642,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 Box8, Typography as Typography6, Paper } from "@mui/material";
+import { Box as Box9, Typography as Typography6, Paper as Paper2 } from "@mui/material";
 import ConstructionIcon from "@mui/icons-material/Construction";
 import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box8, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs6(Paper, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ jsxs6(Typography6, { variant: "h5", component: "h1", gutterBottom: true, children: [
+  return /* @__PURE__ */ jsx16(Box9, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs7(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+    /* @__PURE__ */ jsxs7(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(Box8, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
+    /* @__PURE__ */ jsx16(Typography6, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
+    /* @__PURE__ */ jsx16(Box9, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx16(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
   ] }) });
 };
 var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx14(Box8, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs6(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__ */ jsxs6(Typography6, { variant: "body1", color: "warning.dark", children: [
+  return /* @__PURE__ */ jsx16(Box9, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs7(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+    /* @__PURE__ */ jsx16(Typography6, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
+    /* @__PURE__ */ jsxs7(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(Box8, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
+    /* @__PURE__ */ jsx16(Box9, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx16(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
   ] }) });
 };
 var wScreens = {
@@ -2423,7 +2679,7 @@ var extendWScreens = (newWScreens) => {
 };
 
 // src/components/SideMenu.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation();
@@ -2464,17 +2720,17 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx15(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx17(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx15(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx17(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx15(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx17(FolderIcon, { sx: { color: orange[800] } });
       default:
         const WScreenComponent = wScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx15(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx17(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx15(WarningAmberIcon3, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx17(WarningAmberIcon3, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -2486,21 +2742,21 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   } else {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7(
-      ListItemButton,
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8(
+      ListItemButton2,
       {
         onClick: handleClick,
         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__ */ jsx17(ListItemIcon2, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx17(ListItemText2, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx17(ExpandLess, {}) : /* @__PURE__ */ jsx17(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__ */ jsx17(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx17(List2, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx17(
       MenuListItem,
       {
         item: subItem,
@@ -2530,22 +2786,22 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx15(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx17(Box10, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx17(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  return /* @__PURE__ */ jsxs7(Box9, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs7(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__ */ jsxs8(Box10, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx17(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs8(ListItemButton2, { onClick: handleToggleAllSubMenus, children: [
+      /* @__PURE__ */ jsx17(ListItemIcon2, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx17(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx17(UnfoldMoreIcon, {}) }),
+      /* @__PURE__ */ jsx17(ListItemText2, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
-    /* @__PURE__ */ jsx15(Divider, {}),
-    /* @__PURE__ */ jsxs7(List, { children: [
-      /* @__PURE__ */ jsx15(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs7(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
-        /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx15(HomeIcon, {}) }),
-        /* @__PURE__ */ jsx15(ListItemText, { primary: "Inicio" })
+    /* @__PURE__ */ jsx17(Divider, {}),
+    /* @__PURE__ */ jsxs8(List2, { children: [
+      /* @__PURE__ */ jsx17(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs8(ListItemButton2, { onClick: handleHomeClick, selected: isHomeSelected, children: [
+        /* @__PURE__ */ jsx17(ListItemIcon2, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx17(HomeIcon, {}) }),
+        /* @__PURE__ */ jsx17(ListItemText2, { primary: "Inicio" })
       ] }) }),
-      /* @__PURE__ */ jsx15(Divider, {}),
-      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(Divider, {}),
+      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx17(
         MenuListItem,
         {
           item: menuItem,
@@ -2588,7 +2844,7 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var drawerWidth = 240;
 var MainLayout = () => {
   const { clientContext } = useApp();
@@ -2611,12 +2867,12 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx16(Box10, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx16(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx18(Box11, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx18(Typography8, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs8(Box10, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx16(CssBaseline, {}),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs9(Box11, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx18(CssBaseline, {}),
+    /* @__PURE__ */ jsx18(
       AppBar,
       {
         position: "fixed",
@@ -2635,8 +2891,8 @@ var MainLayout = () => {
             })
           }
         },
-        children: /* @__PURE__ */ jsxs8(Toolbar, { children: [
-          /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsxs9(Toolbar, { children: [
+          /* @__PURE__ */ jsx18(
             IconButton3,
             {
               color: "inherit",
@@ -2646,24 +2902,24 @@ var MainLayout = () => {
               sx: {
                 marginRight: 2.2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx16(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx16(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx18(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx18(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__ */ jsx18(Typography8, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx18(Typography8, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx18(
             Button4,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx16(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx18(LogoutIcon, {}),
               children: "Salir"
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       Drawer,
       {
         variant: "persistent",
@@ -2680,7 +2936,7 @@ var MainLayout = () => {
           }
         },
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(
             Toolbar,
             {
               sx: {
@@ -2694,12 +2950,12 @@ var MainLayout = () => {
               children: isDrawerOpen ? clientContext.config.title : ""
             }
           ),
-          /* @__PURE__ */ jsx16(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ jsx18(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
         ]
       }
     ),
-    /* @__PURE__ */ jsx16(
-      Box10,
+    /* @__PURE__ */ jsx18(
+      Box11,
       {
         component: "main",
         sx: {
@@ -2726,7 +2982,7 @@ var MainLayout = () => {
           flexDirection: "column",
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
-        children: /* @__PURE__ */ jsx16(Outlet, {})
+        children: /* @__PURE__ */ jsx18(Outlet, {})
       }
     )
   ] });
@@ -2734,9 +2990,9 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box11, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
+import { Box as Box12, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
 import { useNavigate as useNavigate4 } from "react-router-dom";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -2758,7 +3014,7 @@ var SessionExpiredMessage = () => {
     setIsLoggedIn(false);
     navigate("/login", { replace: true });
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -2778,10 +3034,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs9(Box11, { 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__ */ jsxs10(Box12, { sx: style, children: [
+        /* @__PURE__ */ jsx19(Typography9, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
+        /* @__PURE__ */ jsx19(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__ */ jsx19(Button5, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
       ] })
     }
   );
@@ -2789,27 +3045,27 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box12, Typography as Typography10 } from "@mui/material";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  return /* @__PURE__ */ jsxs10(Box12, { 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__ */ jsxs11(Box13, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx20(Typography10, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
+    /* @__PURE__ */ jsx20(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 Box13, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Box as Box14, Typography as Typography11, CircularProgress as CircularProgress3 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect4(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs11(Box13, { sx: {
+  return /* @__PURE__ */ jsxs12(Box14, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -2817,21 +3073,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__ */ jsx21(CircularProgress3, { size: 60 }),
+    /* @__PURE__ */ jsx21(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 Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box14, CircularProgress as CircularProgress3 } from "@mui/material";
+import { useState as useState7 } from "react";
+import { Button as Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box15, CircularProgress as CircularProgress4 } 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 jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -2840,8 +3096,8 @@ var loginSchema = z.object({
 });
 var LoginPage = () => {
   const navigate = useNavigate5();
-  const [loginError, setLoginError] = useState6(null);
-  const [isSubmitting, setIsSubmitting] = useState6(false);
+  const [loginError, setLoginError] = useState7(null);
+  const [isSubmitting, setIsSubmitting] = useState7(false);
   const { setIsLoggedIn, checkSession } = useApp();
   const dispatch = useDispatch4();
   const {
@@ -2887,16 +3143,16 @@ var LoginPage = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx20(
-    Box14,
+  return /* @__PURE__ */ jsx22(
+    Box15,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
-      children: /* @__PURE__ */ jsxs12(
-        Box14,
+      children: /* @__PURE__ */ jsxs13(
+        Box15,
         {
           width: "100%",
           maxWidth: "400px",
@@ -2905,16 +3161,16 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx20(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
-            /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx20("label", { htmlFor: "username", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx22(Typography12, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
+            /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs13("div", { children: [
+                /* @__PURE__ */ jsx22("label", { htmlFor: "username", children: /* @__PURE__ */ jsx22(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
+                /* @__PURE__ */ jsx22(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx20(
+                    render: ({ field }) => /* @__PURE__ */ jsx22(
                       TextField,
                       {
                         ...field,
@@ -2930,14 +3186,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx20("label", { htmlFor: "password", children: /* @__PURE__ */ jsx20(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsxs13("div", { children: [
+                /* @__PURE__ */ jsx22("label", { htmlFor: "password", children: /* @__PURE__ */ jsx22(Typography12, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
+                /* @__PURE__ */ jsx22(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx20(
+                    render: ({ field }) => /* @__PURE__ */ jsx22(
                       TextField,
                       {
                         ...field,
@@ -2953,14 +3209,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx20(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
-                /* @__PURE__ */ jsx20(CircularProgress3, { size: 20, sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx22(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+                /* @__PURE__ */ jsx22(CircularProgress4, { size: 20, sx: { mr: 1 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
-            loginError && /* @__PURE__ */ jsxs12(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
+            loginError && /* @__PURE__ */ jsxs13(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
-              /* @__PURE__ */ jsx20(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx22(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -2972,7 +3228,7 @@ var LoginPage = () => {
 var LoginPage_default = LoginPage;
 
 // src/components/ProcedureForm.tsx
-import React7, { useState as useState7, useCallback as useCallback7, useMemo as useMemo4 } from "react";
+import React7, { useState as useState8, useCallback as useCallback7, useMemo as useMemo4 } from "react";
 import { useParams } from "react-router-dom";
 import {
   TextField as TextField2,
@@ -2985,22 +3241,22 @@ import {
   FormControlLabel,
   FormHelperText,
   Typography as Typography14,
-  Box as Box16,
-  CircularProgress as CircularProgress4,
+  Box as Box17,
+  CircularProgress as CircularProgress5,
   Alert as Alert3,
   Divider as Divider2,
-  Paper as Paper3
+  Paper as Paper4
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box15, Typography as Typography13, Paper as Paper2 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Box as Box16, Typography as Typography13, Paper as Paper3 } from "@mui/material";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
-  return /* @__PURE__ */ jsxs13(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(Box15, { 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__ */ jsxs14(Paper3, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
+    /* @__PURE__ */ jsx23(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
+    /* @__PURE__ */ jsx23(Typography13, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
+    /* @__PURE__ */ jsx23(Box16, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx23("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx23(Typography13, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -3014,22 +3270,22 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
   const { callApi, loading: apiLoading, error: apiError } = useApiCall();
-  const [validationErrors, setValidationErrors] = useState7({});
-  const [successMessage, setSuccessMessage] = useState7(null);
-  const [executionLog, setExecutionLog] = useState7([]);
-  const [procedureResultData, setProcedureResultData] = useState7(null);
+  const [validationErrors, setValidationErrors] = useState8({});
+  const [successMessage, setSuccessMessage] = useState8(null);
+  const [executionLog, setExecutionLog] = useState8([]);
+  const [procedureResultData, setProcedureResultData] = useState8(null);
   const procedure = useMemo4(() => {
     if (procedureName && clientContext?.procedure) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
   }, [procedureName, clientContext]);
-  const [formValues, setFormValues] = useState7(() => {
+  const [formValues, setFormValues] = useState8(() => {
     if (!procedure) return {};
     const initialValues = {};
     procedure.parameters.forEach((param) => {
@@ -3229,9 +3485,9 @@ var ProcedureForm = () => {
       sx: { fontSize: "0.8rem" }
     };
     if (param.options && param.options.length > 0) {
-      return /* @__PURE__ */ jsxs14(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__ */ jsxs14(
+      return /* @__PURE__ */ jsxs15(FormControl, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
+        /* @__PURE__ */ jsx24(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
+        /* @__PURE__ */ jsxs15(
           Select,
           {
             labelId: `${param.name}-label`,
@@ -3242,14 +3498,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__ */ jsx24(Typography14, { 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__ */ jsx24(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx24("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx24(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__ */ jsx24(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -3258,18 +3514,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx24(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__ */ jsx24(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__ */ jsx24(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx24(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx22(
+            control: /* @__PURE__ */ jsx24(
               Checkbox,
               {
                 checked: !!formValues[param.name],
@@ -3280,21 +3536,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__ */ jsx24(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__ */ 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__ */ jsx24(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__ */ jsx24(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
-        return /* @__PURE__ */ jsxs14(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(
+        return /* @__PURE__ */ jsxs15(FormControl, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
+          /* @__PURE__ */ jsx24(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__ */ jsx24(
             "input",
             {
               type: "file",
@@ -3308,34 +3564,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__ */ jsx24(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx24(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__ */ jsx24(ComponentToRender, { data: procedureResultData });
     } else {
-      return /* @__PURE__ */ jsxs14(Paper3, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs14(Typography14, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+      return /* @__PURE__ */ jsxs15(Paper4, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
+        /* @__PURE__ */ jsxs15(Typography14, { 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(Box16, { sx: {
+        /* @__PURE__ */ jsx24(Box17, { 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__ */ jsx24("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs14(Box16, { sx: {
+    return /* @__PURE__ */ jsxs15(Box17, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -3345,13 +3601,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__ */ jsx24(CircularProgress5, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx24(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__ */ jsxs14(Box16, { sx: {
+    /* @__PURE__ */ jsxs15(Box17, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -3368,16 +3624,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) }),
-      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs14(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
+      /* @__PURE__ */ jsx24(Typography14, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
+      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs15(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__ */ jsx24("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx24("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 }),
-      /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx22("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx22(
+      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx24(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
+      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx24(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
+      /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, children: [
+        procedure.parameters.map((param) => /* @__PURE__ */ jsx24("div", { children: renderInputField(param) }, param.name)),
+        /* @__PURE__ */ jsx24(
           Button7,
           {
             type: "submit",
@@ -3386,20 +3642,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__ */ jsx24(CircularProgress5, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs14(Box16, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs15(Box17, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs14(Box16, { 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(
-          Box16,
+      executionLog.length > 0 && /* @__PURE__ */ jsxs15(Box17, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx24(Divider2, { sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx24(Typography14, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
+        /* @__PURE__ */ jsx24(
+          Box17,
           {
             sx: {
               bgcolor: "grey.100",
@@ -3412,7 +3668,7 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx22(
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx24(
               Typography14,
               {
                 component: "pre",
@@ -3440,7 +3696,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 Fragment4, jsx as jsx25 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation2();
   const dispatch = useAppDispatch();
@@ -3464,14 +3720,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__ */ jsx25("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__ */ jsx25(Navigate, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx23(Fragment3, { children });
+  return /* @__PURE__ */ jsx25(Fragment4, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
@@ -3505,25 +3761,25 @@ var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
 import { useParams as useParams2 } from "react-router-dom";
-import { Box as Box17, Alert as Alert4, Typography as Typography15 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box as Box18, Alert as Alert4, Typography as Typography15 } from "@mui/material";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var GenericDataGridPage = () => {
   const { tableName } = useParams2();
   if (!tableName) {
-    return /* @__PURE__ */ jsx24(Box17, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(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__ */ jsx26(Box18, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs16(Alert4, { severity: "error", children: [
+      /* @__PURE__ */ jsx26(Typography15, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
+      /* @__PURE__ */ jsx26(Typography15, { 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__ */ jsx26(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 Box18, Alert as Alert5, Typography as Typography16 } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Box as Box19, Alert as Alert5, Typography as Typography16 } from "@mui/material";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -3565,12 +3821,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx25(Box18, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs16(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__ */ jsx27(Box19, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs17(Alert5, { severity: "error", children: [
+      /* @__PURE__ */ jsx27(Typography16, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
+      /* @__PURE__ */ jsx27(Typography16, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     GenericDataGrid_default,
     {
       tableName: currentTableName,
@@ -3581,8 +3837,8 @@ var MenuTablePage = () => {
 var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
-import { Box as Box19 } from "@mui/material";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Box as Box20 } from "@mui/material";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
   const dispatch = useAppDispatch();
@@ -3591,25 +3847,25 @@ var LocationTracker = () => {
   }, [location, dispatch]);
   return null;
 };
-function FrontendPlusReactRoutes({ myRoutes }) {
-  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__ */ jsxs17(Route, { element: /* @__PURE__ */ jsxs17(PrivateRoute_default, { children: [
-      /* @__PURE__ */ jsx26(InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ jsx26(MainLayout_default, {})
+function FrontendPlusReactRoutes({ myRoutes, layout: Layout = MainLayout_default }) {
+  return /* @__PURE__ */ jsxs18(Routes, { children: [
+    /* @__PURE__ */ jsx28(Route, { path: "/login", element: /* @__PURE__ */ jsx28(LoginPage_default, {}) }),
+    /* @__PURE__ */ jsx28(Route, { path: "/logout", element: /* @__PURE__ */ jsx28(LogoutPage_default, {}) }),
+    /* @__PURE__ */ jsxs18(Route, { element: /* @__PURE__ */ jsxs18(PrivateRoute_default, { children: [
+      /* @__PURE__ */ jsx28(InitialRedirectHandler_default, {}),
+      /* @__PURE__ */ jsx28(Layout, {})
     ] }), children: [
-      /* @__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(wScreens).map((screenName) => /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28(Route, { path: "/", element: /* @__PURE__ */ jsx28(HomePage_default, {}) }),
+      /* @__PURE__ */ jsx28(Route, { path: "/home", element: /* @__PURE__ */ jsx28(HomePage_default, {}) }),
+      /* @__PURE__ */ jsx28(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx28(GenericDataGridPage_default, {}) }),
+      /* @__PURE__ */ jsx28(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx28(MenuTablePage_default, {}) }),
+      /* @__PURE__ */ jsx28(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx28(ProcedureForm_default, {}) }),
+      Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx28(
         Route,
         {
           path: `/wScreens/${screenName}`,
           element: React11.createElement(
-            Box19,
+            Box20,
             {
               sx: { pt: 3, pl: 4 }
             },
@@ -3618,19 +3874,29 @@ function FrontendPlusReactRoutes({ myRoutes }) {
         },
         screenName
       )),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28(
         Route,
         {
           path: "/wScreens-fallback/:screenName",
-          element: /* @__PURE__ */ jsx26(Box19, { sx: { p: 3 }, children: /* @__PURE__ */ jsx26(FallbackWScreen, { screenName: ":screenName" }) })
+          element: /* @__PURE__ */ jsx28(Box20, { sx: { p: 3 }, children: /* @__PURE__ */ jsx28(FallbackWScreen, { screenName: ":screenName" }) })
         }
       ),
-      /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
+      /* @__PURE__ */ jsx28(Route, { path: "*", element: /* @__PURE__ */ jsx28("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
     ] }),
     myRoutes,
-    /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26(Navigate2, { to: "/", replace: true }) })
+    /* @__PURE__ */ jsx28(Route, { path: "*", element: /* @__PURE__ */ jsx28(Navigate2, { to: "/", replace: true }) })
   ] });
 }
+var FrontendPlusProviders = ({ children }) => {
+  return /* @__PURE__ */ jsx28(Provider, { store, children: /* @__PURE__ */ jsx28(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs18(BrowserRouter, { children: [
+    /* @__PURE__ */ jsx28(LocationTracker, {}),
+    " ",
+    /* @__PURE__ */ jsx28(AppProvider, { children: /* @__PURE__ */ jsxs18(SnackbarProvider, { children: [
+      children,
+      /* @__PURE__ */ jsx28(SessionExpiredMessage_default, {})
+    ] }) })
+  ] }) }) });
+};
 var App = ({
   myRoutes,
   myWScreens,
@@ -3648,24 +3914,14 @@ var App = ({
       extendWScreens(myWScreens);
     }
   }, [myClientSides, myResultsOk, myWScreens]);
-  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__ */ jsxs17(SnackbarProvider, { children: [
-      /* @__PURE__ */ jsx26(
-        FrontendPlusReactRoutes,
-        {
-          myRoutes
-        }
-      ),
-      /* @__PURE__ */ jsx26(SessionExpiredMessage_default, {})
-    ] }) })
-  ] }) }) });
+  return /* @__PURE__ */ jsx28(FrontendPlusProviders, { children: /* @__PURE__ */ jsx28(FrontendPlusReactRoutes, { myRoutes }) });
 };
 var App_default = App;
 export {
   App_default as App,
   AppProvider,
   ConfirmDialog,
+  FrontendPlusProviders,
   FrontendPlusReactRoutes,
   GenericDataGrid_default as GenericDataGrid,
   MainLayout_default as MainLayout,
@@ -3673,8 +3929,11 @@ export {
   cambiarGuionesBajosPorEspacios,
   clientSides,
   extendClientSides,
+  extendResultsOk,
+  extendWScreens,
   resultsOk as resultComponents,
   useApiCall,
+  useApiCallWithoutSnackbar,
   useApp,
   useLogout_default as useLogout,
   useSnackbar,