frontend-plus-react 0.1.7 → 0.1.9

package/dist/index.js

@@ -2151,10 +2151,10 @@ import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as
 import { useEffect as useEffect3 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box9,
+  Box as Box10,
   AppBar,
   Toolbar,
-  Typography as Typography7,
+  Typography as Typography8,
   Button as Button4,
   Drawer,
   CssBaseline,
@@ -2244,21 +2244,60 @@ 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 Box8, Typography as Typography6, Collapse } from "@mui/material";
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, Box as Box9, 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";
 import FolderIcon from "@mui/icons-material/Folder";
 import DnsIcon from "@mui/icons-material/Dns";
 import HomeIcon from "@mui/icons-material/Home";
-import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
+import WarningAmberIcon3 from "@mui/icons-material/WarningAmber";
 import DesktopWindowsIcon from "@mui/icons-material/DesktopWindows";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import { useNavigate as useNavigate2, useLocation } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
-import { Fragment, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
+
+// src/pages/WScreens.tsx
+import { Box as Box8, Typography as Typography6, Paper } from "@mui/material";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
+import { jsx as jsx14, jsxs as jsxs6 } 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: [
+      "\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" } }) })
+  ] }) });
+};
+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: [
+      '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" } }) })
+  ] }) });
+};
+var wScreens = {
+  "MyCustomDashboard": MyCustomDashboard
+  // Agrega más componentes de wScreen aquí:
+  // 'AnotherWScreen': AnotherWScreenComponent,
+};
+var extendWScreens = (newWScreens) => {
+  wScreens = { ...wScreens, ...newWScreens };
+  console.log("wScreens extendidos:", wScreens);
+};
+
+// src/components/SideMenu.tsx
+import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation();
   const open = useSubMenuOpenState(item.name);
@@ -2279,7 +2318,7 @@ var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
       } else if (item.menuType === "proc") {
         path = `/procedures/${item.name}`;
       } else {
-        const WScreenComponent = allWScreens[item.menuType];
+        const WScreenComponent = wScreens[item.menuType];
         if (WScreenComponent !== void 0) {
           path = `/wScreens/${item.menuType}`;
         } else {
@@ -2298,17 +2337,17 @@ var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx14(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx15(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx14(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx15(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx14(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx15(FolderIcon, { sx: { color: orange[800] } });
       default:
-        const WScreenComponent = allWScreens[item2.menuType];
+        const WScreenComponent = wScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx14(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx15(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx14(WarningAmberIcon2, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx15(WarningAmberIcon3, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -2320,33 +2359,32 @@ var MenuListItem = ({ item, level, onMenuItemClick, allWScreens }) => {
   } else {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
       ListItemButton,
       {
         onClick: handleClick,
         sx: { pl: level * 2 },
         selected: isSelected,
         children: [
-          /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: getIcon(item) }),
-          /* @__PURE__ */ jsx14(ListItemText, { primary: item.label || item.name }),
-          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx14(ExpandLess, {}) : /* @__PURE__ */ jsx14(ExpandMore, {}) : null
+          /* @__PURE__ */ jsx15(ListItemIcon, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx15(ListItemText, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx15(ExpandLess, {}) : /* @__PURE__ */ jsx15(ExpandMore, {}) : null
         ]
       }
     ),
-    item.menuType === "menu" && /* @__PURE__ */ jsx14(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx14(List, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx14(
+    item.menuType === "menu" && /* @__PURE__ */ jsx15(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx15(List, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx15(
       MenuListItem,
       {
         item: subItem,
         level: level + 1,
-        onMenuItemClick,
-        allWScreens
+        onMenuItemClick
       },
       subItem.name
     )) }) })
   ] });
 };
-var SideMenu = ({ onMenuItemClick, allWScreens }) => {
+var SideMenu = ({ onMenuItemClick }) => {
   const { clientContext } = useApp();
   const navigate = useNavigate2();
   const location = useLocation();
@@ -2365,28 +2403,27 @@ var SideMenu = ({ onMenuItemClick, allWScreens }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx14(Box8, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx14(Typography6, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx15(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx15(Typography7, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  return /* @__PURE__ */ jsxs6(Box8, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx14(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleToggleAllSubMenus, children: [
-      /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx14(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx14(UnfoldMoreIcon, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: isMostlyOpen ? "colapsar " : "expandir" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ jsx14(Divider, {}),
-    /* @__PURE__ */ jsxs6(List, { children: [
-      /* @__PURE__ */ jsx14(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs6(ListItemButton, { onClick: handleHomeClick, selected: isHomeSelected, children: [
-        /* @__PURE__ */ jsx14(ListItemIcon, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx14(HomeIcon, {}) }),
-        /* @__PURE__ */ jsx14(ListItemText, { primary: "Inicio" })
+    /* @__PURE__ */ jsx15(Divider, {}),
+    /* @__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__ */ jsx14(Divider, {}),
-      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(Divider, {}),
+      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx15(
         MenuListItem,
         {
           item: menuItem,
           level: 1,
-          onMenuItemClick,
-          allWScreens
+          onMenuItemClick
         },
         menuItem.name
       ))
@@ -2424,10 +2461,9 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var drawerWidth = 240;
-var MainLayout = (props) => {
-  const { allWScreens } = props;
+var MainLayout = () => {
   const { clientContext } = useApp();
   const logout = useLogout_default();
   const isDrawerOpen = useIsDrawerOpen();
@@ -2448,12 +2484,12 @@ var MainLayout = (props) => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx15(Box9, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx15(Typography7, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    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..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs7(Box9, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx15(CssBaseline, {}),
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs8(Box10, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx16(CssBaseline, {}),
+    /* @__PURE__ */ jsx16(
       AppBar,
       {
         position: "fixed",
@@ -2472,8 +2508,8 @@ var MainLayout = (props) => {
             })
           }
         },
-        children: /* @__PURE__ */ jsxs7(Toolbar, { children: [
-          /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsxs8(Toolbar, { children: [
+          /* @__PURE__ */ jsx16(
             IconButton3,
             {
               color: "inherit",
@@ -2483,24 +2519,24 @@ var MainLayout = (props) => {
               sx: {
                 marginRight: 2.2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx15(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx15(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx16(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx16(MenuIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx15(Typography7, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
-          /* @__PURE__ */ jsx15(Typography7, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(Typography8, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx16(Typography8, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx16(
             Button4,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx15(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx16(LogoutIcon, {}),
               children: "Salir"
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       Drawer,
       {
         variant: "persistent",
@@ -2517,7 +2553,7 @@ var MainLayout = (props) => {
           }
         },
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             Toolbar,
             {
               sx: {
@@ -2531,12 +2567,12 @@ var MainLayout = (props) => {
               children: isDrawerOpen ? clientContext.config.title : ""
             }
           ),
-          /* @__PURE__ */ jsx15(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile, allWScreens })
+          /* @__PURE__ */ jsx16(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
         ]
       }
     ),
-    /* @__PURE__ */ jsx15(
-      Box9,
+    /* @__PURE__ */ jsx16(
+      Box10,
       {
         component: "main",
         sx: {
@@ -2563,7 +2599,7 @@ var MainLayout = (props) => {
           flexDirection: "column",
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
-        children: /* @__PURE__ */ jsx15(Outlet, {})
+        children: /* @__PURE__ */ jsx16(Outlet, {})
       }
     )
   ] });
@@ -2571,9 +2607,9 @@ var MainLayout = (props) => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box10, Typography as Typography8, Button as Button5, Modal } from "@mui/material";
+import { Box as Box11, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
 import { useNavigate as useNavigate4 } from "react-router-dom";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -2595,7 +2631,7 @@ var SessionExpiredMessage = () => {
     setIsLoggedIn(false);
     navigate("/login", { replace: true });
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -2615,10 +2651,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs8(Box10, { sx: style, children: [
-        /* @__PURE__ */ jsx16(Typography8, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
-        /* @__PURE__ */ jsx16(Typography8, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
-        /* @__PURE__ */ jsx16(Button5, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
+      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" })
       ] })
     }
   );
@@ -2626,27 +2662,27 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box11, Typography as Typography9 } from "@mui/material";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box12, Typography as Typography10 } from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  return /* @__PURE__ */ jsxs9(Box11, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ jsx17(Typography9, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
-    /* @__PURE__ */ jsx17(Typography9, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
+  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." })
   ] });
 };
 var HomePage_default = HomePage;
 
 // src/pages/LogoutPage.tsx
 import { useEffect as useEffect4 } from "react";
-import { Box as Box12, Typography as Typography10, CircularProgress as CircularProgress2 } from "@mui/material";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography11, CircularProgress as CircularProgress2 } from "@mui/material";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect4(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs10(Box12, { sx: {
+  return /* @__PURE__ */ jsxs11(Box13, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -2654,21 +2690,21 @@ var LogoutPage = () => {
     height: "100vh",
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx18(CircularProgress2, { size: 60 }),
-    /* @__PURE__ */ jsx18(Typography10, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
+    /* @__PURE__ */ jsx19(CircularProgress2, { size: 60 }),
+    /* @__PURE__ */ jsx19(Typography11, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
   ] });
 };
 var LogoutPage_default = LogoutPage;
 
 // src/pages/LoginPage.tsx
 import { useState as useState6 } from "react";
-import { Button as Button6, TextField, Typography as Typography11, Alert as Alert2, AlertTitle, Box as Box13, CircularProgress as CircularProgress3 } from "@mui/material";
+import { Button as Button6, TextField, Typography as Typography12, Alert as Alert2, AlertTitle, Box as Box14, CircularProgress as CircularProgress3 } from "@mui/material";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useNavigate as useNavigate5 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -2724,16 +2760,16 @@ var LoginPage = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx19(
-    Box13,
+  return /* @__PURE__ */ jsx20(
+    Box14,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
-      children: /* @__PURE__ */ jsxs11(
-        Box13,
+      children: /* @__PURE__ */ jsxs12(
+        Box14,
         {
           width: "100%",
           maxWidth: "400px",
@@ -2742,16 +2778,16 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx19(Typography11, { variant: "h5", align: "center", gutterBottom: true, children: "Iniciar Sesi\xF3n" }),
-            /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx19("label", { htmlFor: "username", children: /* @__PURE__ */ jsx19(Typography11, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx19(
+            /* @__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(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx19(
+                    render: ({ field }) => /* @__PURE__ */ jsx20(
                       TextField,
                       {
                         ...field,
@@ -2767,14 +2803,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx19("label", { htmlFor: "password", children: /* @__PURE__ */ jsx19(Typography11, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx19(
+              /* @__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(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx19(
+                    render: ({ field }) => /* @__PURE__ */ jsx20(
                       TextField,
                       {
                         ...field,
@@ -2790,14 +2826,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx19(Button6, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
-                /* @__PURE__ */ jsx19(CircularProgress3, { size: 20, sx: { mr: 1 } }),
+              /* @__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 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
-            loginError && /* @__PURE__ */ jsxs11(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
+            loginError && /* @__PURE__ */ jsxs12(Alert2, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
-              /* @__PURE__ */ jsx19(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx20(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -2821,23 +2857,23 @@ import {
   Checkbox,
   FormControlLabel,
   FormHelperText,
-  Typography as Typography13,
-  Box as Box15,
+  Typography as Typography14,
+  Box as Box16,
   CircularProgress as CircularProgress4,
   Alert as Alert3,
   Divider as Divider2,
-  Paper as Paper2
+  Paper as Paper3
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box14, Typography as Typography12, Paper } from "@mui/material";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box15, Typography as Typography13, Paper as Paper2 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
-  return /* @__PURE__ */ jsxs12(Paper, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
-    /* @__PURE__ */ jsx20(Typography12, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
-    /* @__PURE__ */ jsx20(Typography12, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
-    /* @__PURE__ */ jsx20(Box14, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx20("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
-    /* @__PURE__ */ jsx20(Typography12, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
+  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." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -2851,7 +2887,7 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
@@ -3066,9 +3102,9 @@ var ProcedureForm = () => {
       sx: { fontSize: "0.8rem" }
     };
     if (param.options && param.options.length > 0) {
-      return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
-        /* @__PURE__ */ jsx21(InputLabel, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
-        /* @__PURE__ */ jsxs13(
+      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(
           Select,
           {
             labelId: `${param.name}-label`,
@@ -3079,14 +3115,14 @@ var ProcedureForm = () => {
             label: param.label || param.name,
             disabled: apiLoading,
             sx: { fontSize: "0.8rem" },
-            renderValue: (selected) => /* @__PURE__ */ jsx21(Typography13, { sx: { fontSize: "0.8rem" }, children: selected }),
+            renderValue: (selected) => /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem" }, children: selected }),
             children: [
-              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx21(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx21("em", { children: "Seleccione..." }) }),
-              param.options.map((option) => /* @__PURE__ */ jsx21(MenuItem, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
+              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx22(MenuItem, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx22("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx22(MenuItem, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
             ]
           }
         ),
-        (param.description || errorMessage) && /* @__PURE__ */ jsx21(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+        (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -3095,18 +3131,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx21(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
       case "decimal":
       case "double":
-        return /* @__PURE__ */ jsx21(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "integer":
       case "bigint":
-        return /* @__PURE__ */ jsx21(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx22(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx21(
+            control: /* @__PURE__ */ jsx22(
               Checkbox,
               {
                 checked: !!formValues[param.name],
@@ -3117,21 +3153,21 @@ var ProcedureForm = () => {
                 size: "small"
               }
             ),
-            label: /* @__PURE__ */ jsx21(Typography13, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
+            label: /* @__PURE__ */ jsx22(Typography14, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
             sx: { mt: 1, mb: 0 }
           }
         );
       case "date":
       case "timestamp":
       case "time":
-        return /* @__PURE__ */ jsx21(TextField2, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx22(TextField2, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
       case "jsonb":
       case "jsona":
-        return /* @__PURE__ */ jsx21(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx22(TextField2, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
-        return /* @__PURE__ */ jsxs13(FormControl, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
-          /* @__PURE__ */ jsx21(Typography13, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
-          /* @__PURE__ */ jsx21(
+        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(
             "input",
             {
               type: "file",
@@ -3145,34 +3181,34 @@ var ProcedureForm = () => {
               style: { padding: "6px 0", fontSize: "0.8rem" }
             }
           ),
-          (param.description || errorMessage) && /* @__PURE__ */ jsx21(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+          (param.description || errorMessage) && /* @__PURE__ */ jsx22(FormHelperText, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx21(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx22(TextField2, { type: "text", value: formValues[param.name] || "", ...commonProps });
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = useMemo4(() => {
     if (!procedureResultData || !procedure?.resultOk) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
-      return /* @__PURE__ */ jsx21(ComponentToRender, { data: procedureResultData });
+      return /* @__PURE__ */ jsx22(ComponentToRender, { data: procedureResultData });
     } else {
-      return /* @__PURE__ */ jsxs13(Paper2, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs13(Typography13, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+      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: [
           "el componente para resolver el resultOk: '",
           procedure.resultOk,
           "' definido en el procedure no existe o no est\xE1 mapeado."
         ] }),
-        /* @__PURE__ */ jsx21(Box15, { sx: {
+        /* @__PURE__ */ jsx22(Box16, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
-        }, children: /* @__PURE__ */ jsx21("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
+        }, children: /* @__PURE__ */ jsx22("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs13(Box15, { sx: {
+    return /* @__PURE__ */ jsxs14(Box16, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -3182,13 +3218,13 @@ var ProcedureForm = () => {
       boxShadow: 3,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx21(CircularProgress4, { sx: { mb: 2 } }),
-      /* @__PURE__ */ jsx21(Typography13, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
+      /* @__PURE__ */ jsx22(CircularProgress4, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx22(Typography14, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
     ] });
   }
   return (
     // Esta es la Box más externa que ahora controlará el scroll
-    /* @__PURE__ */ jsxs13(Box15, { sx: {
+    /* @__PURE__ */ jsxs14(Box16, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -3205,16 +3241,16 @@ var ProcedureForm = () => {
       overflowX: "hidden"
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
-      /* @__PURE__ */ jsx21(Typography13, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
-      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs13(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
+      /* @__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: [
         "Por favor, corrige los errores en el formulario antes de enviar.",
-        /* @__PURE__ */ jsx21("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx21("li", { children: err }, idx)) })
+        /* @__PURE__ */ jsx22("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx22("li", { children: err }, idx)) })
       ] }),
-      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx21(Alert3, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
-      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx21(Alert3, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
-      /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx21("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx21(
+      !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(
           Button7,
           {
             type: "submit",
@@ -3223,20 +3259,20 @@ var ProcedureForm = () => {
             disabled: apiLoading || Object.values(validationErrors).some((err) => err !== null),
             sx: { mt: 2 },
             size: "medium",
-            startIcon: apiLoading ? /* @__PURE__ */ jsx21(CircularProgress4, { size: 20, color: "inherit" }) : null,
+            startIcon: apiLoading ? /* @__PURE__ */ jsx22(CircularProgress4, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs13(Box15, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs14(Box16, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs13(Box15, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx21(Divider2, { sx: { mb: 2 } }),
-        /* @__PURE__ */ jsx21(Typography13, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
-        /* @__PURE__ */ jsx21(
-          Box15,
+      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,
           {
             sx: {
               bgcolor: "grey.100",
@@ -3249,8 +3285,8 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx21(
-              Typography13,
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx22(
+              Typography14,
               {
                 component: "pre",
                 sx: {
@@ -3277,7 +3313,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 jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation2();
   const dispatch = useAppDispatch();
@@ -3301,14 +3337,14 @@ var PrivateRoute = ({ children }) => {
   }, [isAuthenticated, isLoadingAuth, location, dispatch, clientContextStatus]);
   if (isLoadingAuth) {
     console.log(`[PrivateRoute] Returning loading state...`);
-    return /* @__PURE__ */ jsx22("p", { children: "Verificando autenticaci\xF3n..." });
+    return /* @__PURE__ */ jsx23("p", { children: "Verificando autenticaci\xF3n..." });
   }
   if (!isAuthenticated) {
     console.log(`[PrivateRoute] User not authenticated, navigating to /login`);
-    return /* @__PURE__ */ jsx22(Navigate, { to: "/login", replace: true });
+    return /* @__PURE__ */ jsx23(Navigate, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx22(Fragment3, { children });
+  return /* @__PURE__ */ jsx23(Fragment3, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
@@ -3342,25 +3378,25 @@ var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
 import { useParams as useParams2 } from "react-router-dom";
-import { Box as Box16, Alert as Alert4, Typography as Typography14 } from "@mui/material";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box17, Alert as Alert4, Typography as Typography15 } from "@mui/material";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var GenericDataGridPage = () => {
   const { tableName } = useParams2();
   if (!tableName) {
-    return /* @__PURE__ */ jsx23(Box16, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs14(Alert4, { severity: "error", children: [
-      /* @__PURE__ */ jsx23(Typography14, { variant: "h6", children: "Error: Nombre de tabla no especificado en la URL." }),
-      /* @__PURE__ */ jsx23(Typography14, { variant: "body1", children: "Por favor, aseg\xFArate de que la URL contenga el nombre de la tabla (ej. `/data/users`)." })
+    return /* @__PURE__ */ jsx24(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__ */ jsx23(GenericDataGrid_default, { tableName, fixedFields: [] });
+  return /* @__PURE__ */ jsx24(GenericDataGrid_default, { tableName, fixedFields: [] });
 };
 var GenericDataGridPage_default = GenericDataGridPage;
 
 // src/pages/MenuTablePage.tsx
 import { useMemo as useMemo5 } from "react";
 import { useParams as useParams3 } from "react-router-dom";
-import { Box as Box17, Alert as Alert5, Typography as Typography15 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box as Box18, Alert as Alert5, Typography as Typography16 } from "@mui/material";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -3402,12 +3438,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx24(Box17, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs15(Alert5, { severity: "error", children: [
-      /* @__PURE__ */ jsx24(Typography15, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
-      /* @__PURE__ */ jsx24(Typography15, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
+    return /* @__PURE__ */ jsx25(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__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     GenericDataGrid_default,
     {
       tableName: currentTableName,
@@ -3417,41 +3453,8 @@ var MenuTablePage = () => {
 };
 var MenuTablePage_default = MenuTablePage;
 
-// src/pages/WScreens.tsx
-import { Box as Box18, Typography as Typography16, Paper as Paper3 } from "@mui/material";
-import ConstructionIcon from "@mui/icons-material/Construction";
-import WarningAmberIcon3 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx25(Box18, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs16(Paper3, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ jsxs16(Typography16, { variant: "h5", component: "h1", gutterBottom: true, children: [
-      "\xA1Bienvenido a tu WScreen: ",
-      screenName,
-      "!"
-    ] }),
-    /* @__PURE__ */ jsx25(Typography16, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ jsx25(Box18, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx25(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
-  ] }) });
-};
-var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx25(Box18, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs16(Paper3, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
-    /* @__PURE__ */ jsx25(Typography16, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
-    /* @__PURE__ */ jsxs16(Typography16, { variant: "body1", color: "warning.dark", children: [
-      'No se encontr\xF3 un componente implementado para la **WScreen**: **`"$',
-      screenName,
-      '"`**. Por favor, verifica el `menuType` en la definici\xF3n del men\xFA o aseg\xFArate de que el componente est\xE9 correctamente importado y mapeado en el frontend.'
-    ] }),
-    /* @__PURE__ */ jsx25(Box18, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx25(WarningAmberIcon3, { sx: { fontSize: 80, color: "warning.dark" } }) })
-  ] }) });
-};
-var wScreens = {
-  "MyCustomDashboard": MyCustomDashboard
-  // Agrega más componentes de wScreen aquí:
-  // 'AnotherWScreen': AnotherWScreenComponent,
-};
-var WScreens_default = FallbackWScreen;
-
 // src/App.tsx
+import { Box as Box19 } from "@mui/material";
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
@@ -3461,25 +3464,30 @@ var LocationTracker = () => {
   }, [location, dispatch]);
   return null;
 };
-function FrontendPlusReactRoutes({ myRoutes, allWScreens: myWScreens }) {
-  const allWScreens = { ...wScreens, ...myWScreens || {} };
+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, { allWScreens })
+      /* @__PURE__ */ jsx26(MainLayout_default, {})
     ] }), 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(allWScreens).map((screenName) => /* @__PURE__ */ jsx26(
+      Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx26(
         Route,
         {
           path: `/wScreens/${screenName}`,
-          element: React11.createElement(allWScreens[screenName], { screenName })
+          element: React11.createElement(
+            Box19,
+            {
+              sx: { pt: 3, pl: 4 }
+            },
+            React11.createElement(wScreens[screenName], { screenName })
+          )
         },
         screenName
       )),
@@ -3487,7 +3495,7 @@ function FrontendPlusReactRoutes({ myRoutes, allWScreens: myWScreens }) {
         Route,
         {
           path: "/wScreens-fallback/:screenName",
-          element: /* @__PURE__ */ jsx26(WScreens_default, { screenName: ":screenName" })
+          element: /* @__PURE__ */ jsx26(Box19, { sx: { p: 3 }, children: /* @__PURE__ */ jsx26(FallbackWScreen, { screenName: ":screenName" }) })
         }
       ),
       /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
@@ -3509,15 +3517,17 @@ var App = ({
     if (myResultsOk) {
       extendResultsOk(myResultsOk);
     }
-  }, [myClientSides, myResultsOk]);
+    if (myWScreens) {
+      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,
-          allWScreens: myWScreens
+          myRoutes
         }
       ),
       /* @__PURE__ */ jsx26(SessionExpiredMessage_default, {})