@m4l/components 0.1.83 → 0.1.85

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/subcomponents/ChipActionsMobile/types.d.ts

@@ -1,4 +1,5 @@
+import { MouseEvent } from "react";
 export interface ChipActionsMobileProps {
-    handlerOpenPopoverEditArea: () => void;
+    handlerOpenPopoverEditArea: (e: MouseEvent | undefined) => void;
     areaId: string;
 }

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/types.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import { FieldValues } from 'react-hook-form';
 export interface AreaChipProps {
     areaId: string;
+    setAnchorMenuAreas?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
     selected: boolean;
     disabled: boolean;
 }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaChipProps } from '../../../AreaChip/types';
+export declare const ChipMobile: {
+    (props: AreaChipProps): import("react").JSX.Element;
+    displayName: string;
+};

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -35,6 +35,7 @@ export interface AreasViewerClasses {
     windowToastyClose: string;
     panelWindowsRoot: string;
     panelWindowsButtonContainer: string;
+    resizeHandle: string;
     selected: string;
     selectedWindow: string;
     colapsed: string;

package/components/areas/components/AreasViewer/{index.9ed7dfd7.js → index.cacec884.js}

@@ -13,26 +13,27 @@ import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.a4c03e23.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.4baec91c.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.a318316e.js";
-import "../../../mui_extended/Accordion/index.5111314b.js";
-import { I as Icon } from "../../../Icon/index.2414ff25.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.be111a34.js";
+import "../../../mui_extended/Accordion/index.854f4c90.js";
+import { I as Icon } from "../../../Icon/index.c3a579e7.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../mui_extended/CheckBox.5f6c78b0.js";
-import "../../../mui_extended/Badge/index.cad260fe.js";
-import "../../../Image/index.c18ebf5a.js";
+import "../../../mui_extended/CheckBox.38abccd8.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
+import { I as Image } from "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.f6bfdd40.js";
+import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.b16e84c1.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.da26e9d4.js";
-import "../../../mui_extended/Tab/index.0989d15d.js";
+import "../../../mui_extended/Stack/index.0e53197c.js";
+import "../../../mui_extended/Tab/index.c1dc7bbf.js";
+import "../../../mui_extended/Pager/index.5b77fa4c.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
@@ -41,58 +42,57 @@ import debounce from "lodash/debounce";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.577bf36b.js";
-import "../../../../contexts/RHFormContext/index.b9266262.js";
-import "../../../GridLayout/subcomponents/Griditem/index.c09681ff.js";
-import "../../../GridLayout/index.70085b00.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.eb04fd5e.js";
-import { S as SizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.9c5e80b2.js";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.36fe6953.js";
+import "../../../../contexts/ModalContext/index.1ea79d7e.js";
+import "../../../../contexts/RHFormContext/index.e019f87d.js";
+import "../../../GridLayout/subcomponents/Griditem/index.58168132.js";
+import { S as SizeProvider } from "../../../GridLayout/index.2383aaf9.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.a6642437.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.6f56b1da.js";
 import "../../../animate/index.4e9774a6.js";
 import "framer-motion";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import "../AreasAdmin/index.7bfec13f.js";
-import "../../../ScrollBar/index.d4410cb5.js";
+import "../AreasAdmin/index.f505897a.js";
+import "../../../ScrollBar/index.1247c1c5.js";
 import "zustand";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.42df8eb4.js";
-import "../../../HelperText/index.28e9105d.js";
-import "../../../hook-form/RHFAutocompleteAsync/index.0441524c.js";
-import "../../../hook-form/RHFCheckbox/index.c66147f7.js";
+import "../../../hook-form/RHFAutocomplete/index.aca6984f.js";
+import "../../../HelperText/index.8b5911d1.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.8511bcf8.js";
+import "../../../hook-form/RHFCheckbox/index.0f45e6b0.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.4698ca29.js";
-import "../../../hook-form/RHFTextField/index.1fa07688.js";
-import "../../../hook-form/RHFPeriod/index.f653934b.js";
-import "../../../Period/index.0e6512b2.js";
-import "../../../CommonActions/components/Actions/index.23a2d6ae.js";
+import "../../../hook-form/RHFDateTime/index.07412ef0.js";
+import "../../../hook-form/RHFTextField/index.94c8c59b.js";
+import "../../../hook-form/RHFPeriod/index.15b8f11e.js";
+import "../../../Period/index.061c9b2f.js";
+import "../../../CommonActions/components/Actions/index.c91c27f9.js";
 import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.1bd35bd5.js";
+import "../../../modal/index.c7e4beba.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.93c2dcb5.js";
-import "../../../DataGrid/index.d5d0d62f.js";
+import "../../../hook-form/RHFUpload/index.7ef1e124.js";
+import "../../../DataGrid/index.37e14e83.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DataGrid/subcomponents/Actions/index.201394f5.js";
+import "../../../DataGrid/subcomponents/Actions/index.155c63af.js";
 import "../../../DataGrid/subcomponents/editors/TextEditor/index.91380a55.js";
-import "../../../DynamicFilter/index.7d134537.js";
+import "../../../DynamicFilter/index.a8c2609c.js";
 import "yup";
 import "lodash";
-import "../../../LanguagePopover/index.065e0296.js";
-import "../../../NavLink/index.2ef07c44.js";
-import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.5d74dfe0.js";
+import "../../../LanguagePopover/index.7681b08e.js";
+import "../../../NavLink/index.bb879650.js";
+import "../../../NoItemSelected/index.a2807715.js";
+import "../../../ObjectLogs/index.2ed38a84.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.f931dc02.js";
+import "../../../PaperForm/index.989377a5.js";
 import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.a67c9916.js";
+import "../../../PropertyValue/index.ac46f441.js";
 import "../../../SplitLayout/index.9ef430f6.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.72564ef2.js";
-import "../../../AppBar/index.ad2a6f0e.js";
-import "../../../AccountPopover/index.2677fe77.js";
+import "../../../SideBar/index.e0587639.js";
+import "../../../AppBar/index.291da9fd.js";
+import "../../../AccountPopover/index.35c29a55.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -131,6 +131,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "containerLinearProgress",
+  "resizeHandle",
   "selected",
   "colapsed",
   "selectedWindow",
@@ -178,7 +179,8 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowToastyPin: ["windowToastyPin"],
     windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
-    panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
+    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
+    resizeHandle: ["resizeHandle"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
@@ -1315,6 +1317,26 @@ const Window = (props) => {
   });
 };
 React__default.memo(Window);
+const ResizeHandle = React__default.forwardRef((props, ref) => {
+  const {
+    handleAxis,
+    ...restProps
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: clsx(`react-resizable-handle react-resizable-handle-${handleAxis}`, areasViewerClasses.resizeHandle),
+    ...restProps,
+    children: /* @__PURE__ */ jsx(Image, {
+      width: "12px",
+      height: "12px",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/control_size.svg`
+    })
+  });
+});
 const ResponsiveGridLayout = SizeProvider(Responsive);
 const AreaGridLayout = (props) => {
   const {
@@ -1364,7 +1386,8 @@ const AreaGridLayout = (props) => {
         onContainerChange(areaId, e);
       },
       preventCollision: false,
-      maximizeId: maximizedId
+      maximizeId: maximizedId,
+      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
     }
   );
 };
@@ -1520,15 +1543,17 @@ const WindowModal = (props) => {
 };
 const MemonizedWindowModal = React__default.memo(WindowModal);
 function AreasViewer() {
-  const areas = useAreasStore((state) => state.areas, shallow);
-  const windowsModals = useAreasStore((state) => state.windowsModals);
-  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
-  const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
+  const areas = useAreasStore((state2) => state2.areasIds, shallow);
+  const windowsModals = useAreasStore((state2) => state2.windowsModals);
+  const hashWindowsModals = useAreasStore((state2) => state2.hashWindowsModals);
+  const currentArea = useAreasStore((state2) => state2.currentAreaId);
+  const status = useAreasStore((state2) => state2.ownerState.status);
+  const classesRoot = useAreasStore((state2) => state2.viwerClasses.root);
+  const state = useAreasStore((state2) => state2);
+  console.log("Areas state >>>>", state);
   const {
     init
-  } = useAreasStore((state) => state.areasActions);
+  } = useAreasStore((state2) => state2.areasActions);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
       className: classesRoot,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { GridLayoutProps } from './types';
+import React from 'react';
 /**
  * @description Retorna el componente GridLayout con las ventanas (layouts) y popups tomados del área de trabajo.
  * @returns JSX
  */
-export declare const AreaGridLayout: (props: GridLayoutProps) => import("react").JSX.Element;
+export declare const AreaGridLayout: (props: GridLayoutProps) => React.JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/subcomponents/ResizeHandle/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ResizeHandle: React.ForwardRefExoticComponent<{
+    handleAxis?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/components/areas/components/index.6d5dfeec.js

@@ -0,0 +1,31 @@
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.c3a579e7.js";
+import "clsx";
+import "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.be111a34.js";
+import "@m4l/graphics";
+import "zustand";
+import "../contexts/AreasContext/index.6f56b1da.js";
+import "./AreasAdmin/index.f505897a.js";
+import "zustand/shallow";
+import "../../ScrollBar/index.1247c1c5.js";
+import "../../mui_extended/Accordion/index.854f4c90.js";
+import "../../mui_extended/Typography/index.443590d6.js";
+import "../../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../../mui_extended/Button/index.40af964e.js";
+import "../../mui_extended/CheckBox.38abccd8.js";
+import "../../mui_extended/Badge/index.8c2b8b66.js";
+import "../../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../../mui_extended/MenuActions/index.b16e84c1.js";
+import "../../mui_extended/Popover/index.9f35d0eb.js";
+import "../../mui_extended/Stack/index.0e53197c.js";
+import "../../mui_extended/Tab/index.c1dc7bbf.js";
+import "../../mui_extended/Pager/index.5b77fa4c.js";
+import "../../mui_extended/Tooltip/index.5a795dcd.js";
+import "./AreasViewer/index.cacec884.js";
+import "../../LinearProgressIndeterminate/index.60dabc06.js";

package/components/areas/contexts/AreasContext/helper.d.ts

@@ -2,8 +2,8 @@ import { WritableDraft } from 'immer/dist/internal';
 import type { Area, AreasStateWithActions } from './types';
 import type { WindowState, WindowStateProps } from '../../types';
 export declare const ROW_HEIGTH_GRIDLAYOUT = 20;
-export declare const PADDING_GRIDLAYOUT = 3;
-export declare const MARGIN_GRIDLAYOUT = 3;
+export declare const PADDING_GRIDLAYOUT = 4;
+export declare const MARGIN_GRIDLAYOUT = 4;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const THROTTLE_RESIZE_TIME = 300;
 export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
@@ -22,9 +22,16 @@ export declare const NORMALIZED_COLS: {
     xs: number;
     xxs: number;
 };
+export declare const DEFAULT_LAYOUTS: {
+    lg: never[];
+    md: never[];
+    sm: never[];
+    xs: never[];
+    xxs: never[];
+};
 import { Layouts } from '../../../GridLayout/types';
 export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading' | 'toasties' | 'toastyCount' | 'hashToasties'>;
-export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'loadWindows' | 'viewMode'>;
+export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'viewMode'>;
 /**
  * @description Función de apoyo que crea un área de trabajo,
  *  El Id del area sale de concatenar la fecha actual con un número aleeatorio de 3 digitos

package/components/areas/contexts/AreasContext/{index.36fe6953.js → index.6f56b1da.js}

@@ -5,24 +5,26 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.9ed7dfd7.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.7bfec13f.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.cacec884.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.f505897a.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
 import "clsx";
-import "../../../GridLayout/subcomponents/Griditem/index.c09681ff.js";
-import { z as isEqualLayouts } from "../../../GridLayout/index.70085b00.js";
+import "../../../GridLayout/subcomponents/Griditem/index.58168132.js";
+import { z as isEqualLayouts } from "../../../GridLayout/index.2383aaf9.js";
 import { jsx } from "react/jsx-runtime";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.eb04fd5e.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.a6642437.js";
 import { debounce, cloneDeep } from "lodash";
+import { useNavigate } from "react-router-dom";
 const ROW_HEIGTH_GRIDLAYOUT = 20;
-const PADDING_GRIDLAYOUT = 3;
-const MARGIN_GRIDLAYOUT = 3;
+const PADDING_GRIDLAYOUT = 4;
+const MARGIN_GRIDLAYOUT = 4;
 const DEBOUCED_SAVE_TIME = 500;
 const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 const COOKIE_WINDOWS = "windows";
 const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 1 };
 const NORMALIZED_COLS = { lg: 64, md: 48, sm: 32, xs: 24, xxs: 1 };
+const DEFAULT_LAYOUTS = { lg: [], md: [], sm: [], xs: [], xxs: [] };
 const DEFAULT_WINDOW = {
   status: "init",
   moduleActions: [],
@@ -35,23 +37,24 @@ const DEFAULT_WINDOW = {
 const DEFAULT_AREA = {
   status: "init",
   zPopUpIndex: 0,
-  layouts: {},
+  layouts: DEFAULT_LAYOUTS,
   layoutItemsIds: [],
   currentLayoutId: "",
   currentPopUpId: "",
   breakpoints: BREAKPOINT_SIZES,
-  cols: NORMALIZED_COLS
+  cols: NORMALIZED_COLS,
+  loadWindows: false
 };
 const addArea = (state) => {
   const areaId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
   const labelNewArea = state.getLabel(getAreasDictionary(DICCTIONARY.label_new_area));
   let isFree;
   let name = `${labelNewArea} 1`;
-  for (let indexNames = 1; indexNames <= state.areas.length + 1; indexNames++) {
-    name = `${labelNewArea} ${indexNames + state.areas.length}`;
+  for (let indexNames = 1; indexNames <= state.areasIds.length + 1; indexNames++) {
+    name = `${labelNewArea} ${indexNames + state.areasIds.length}`;
     isFree = true;
-    for (let index = 0; index < state.areas.length; index++) {
-      if (state.hashAreas[state.areas[index]].name === name) {
+    for (let index = 0; index < state.areasIds.length; index++) {
+      if (state.hashAreas[state.areasIds[index]].name === name) {
         isFree = false;
         break;
       }
@@ -63,11 +66,11 @@ const addArea = (state) => {
   const newArea = {
     id: areaId,
     name,
-    loadWindows: false,
     ...DEFAULT_AREA
   };
-  state.areas.push(areaId);
+  state.areasIds.push(areaId);
   state.hashAreas[areaId] = newArea;
+  state.currentModuleId = "";
   if (state.loadAreasFromNetwork) {
     state.networkOperation({
       method: "POST",
@@ -249,7 +252,7 @@ const createAreasStore = (initProps) => {
     adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
     currentAreaId: "",
     currentModuleId: "",
-    areas: [],
+    areasIds: [],
     hashAreas: {},
     hashWindows: {},
     hashWindowsModals: {},
@@ -262,63 +265,49 @@ const createAreasStore = (initProps) => {
         ...startProps,
         areasActions: {
           init: () => {
-            if (get().ownerState.status === "init") {
-              if (!get().loadAreasFromNetwork) {
-                get().areasActions.addArea();
-                set((state) => {
-                  state.ownerState.status = "loaded";
-                  updateOwnerStateClasses(state);
-                });
-              } else {
-                set((state) => {
-                  state.ownerState.status = "loading";
-                  updateOwnerStateClasses(state);
-                  state.networkOperation({
-                    method: "GET",
-                    endPoint: `areas`,
-                    parms: {},
-                    toastSuccess: false
-                  }).then((response) => {
-                    set((otherState) => {
-                      if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
-                        for (let i = 0; i < response.data.length; i++) {
-                          const newArea = {
-                            ...DEFAULT_AREA,
-                            ...response.data[i],
-                            loadWindows: true
-                          };
-                          otherState.hashAreas[newArea.id] = newArea;
-                          otherState.areas.push(newArea.id);
-                        }
-                      } else {
-                        addArea(otherState);
-                      }
-                    });
-                  }).finally(() => {
-                    set((state2) => {
-                      state2.ownerState.status = "loaded";
-                      updateOwnerStateClasses(state2);
-                    });
-                    if (get().areas.length > 0) {
-                      get().areasActions.selectArea(get().areas[0]);
-                    }
-                  });
-                });
-              }
+            if (get().ownerState.status !== "init") {
+              return;
+            }
+            if (!get().loadAreasFromNetwork) {
+              get().areasActions.addArea();
+              set((state) => {
+                state.ownerState.status = "loaded";
+                updateOwnerStateClasses(state);
+              });
+              return;
             }
-          },
-          editArea: (areaId, newName) => {
             set((state) => {
-              if (state.hashAreas[areaId]) {
-                purgeToastsArea(state, areaId);
-                state.hashAreas[areaId].name = newName;
-                state.networkOperation({
-                  method: "PATCH",
-                  endPoint: `areas/${areaId}`,
-                  data: { name: newName },
-                  toastSuccess: false,
-                  toastError: false
-                });
+              state.ownerState.status = "loading";
+              updateOwnerStateClasses(state);
+            });
+            get().networkOperation({
+              method: "GET",
+              endPoint: `areas`,
+              parms: {},
+              toastSuccess: false
+            }).then((response) => {
+              set((state) => {
+                if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+                  for (let i = 0; i < response.data.length; i++) {
+                    const newArea = {
+                      ...DEFAULT_AREA,
+                      ...response.data[i],
+                      loadWindows: true
+                    };
+                    state.hashAreas[newArea.id] = newArea;
+                    state.areasIds.push(newArea.id);
+                  }
+                } else {
+                  addArea(state);
+                }
+              });
+            }).finally(() => {
+              set((state) => {
+                state.ownerState.status = "loaded";
+                updateOwnerStateClasses(state);
+              });
+              if (get().areasIds.length > 0 && get().currentAreaId === "") {
+                get().areasActions.selectArea(get().areasIds[0]);
               }
             });
           },
@@ -330,25 +319,42 @@ const createAreasStore = (initProps) => {
             get().areasActions.selectArea(newId);
             return newId;
           },
+          editArea: (areaId, newName) => {
+            set((state) => {
+              if (state.hashAreas[areaId]) {
+                state.hashAreas[areaId].name = newName;
+                if (state.loadAreasFromNetwork) {
+                  state.networkOperation({
+                    method: "PATCH",
+                    endPoint: `areas/${areaId}`,
+                    data: { name: newName },
+                    toastSuccess: false,
+                    toastError: false
+                  });
+                }
+              }
+            });
+          },
           deleteArea: (areaId) => {
             let selectNewAreaId = "";
             set((state) => {
-              const removeIndex = state.areas.indexOf(areaId);
+              const ha = state.hashAreas[areaId];
+              if (!ha || state.areasIds.length < 2) {
+                return;
+              }
+              purgeToastsArea(state, areaId);
+              const removeIndex = state.areasIds.indexOf(areaId);
               if (removeIndex > -1) {
                 for (const key in state.hashWindows) {
                   if (state.hashWindows[key].areaId === areaId) {
                     delete state.hashWindows[key];
                   }
                 }
-                state.areas.splice(removeIndex, 1);
+                state.areasIds.splice(removeIndex, 1);
                 delete state.hashAreas[areaId];
               }
               if (state.currentAreaId === areaId) {
-                if (state.areas.length > 0) {
-                  selectNewAreaId = state.areas[0];
-                } else {
-                  state.currentAreaId = "";
-                }
+                selectNewAreaId = state.areasIds[0];
               }
               if (state.loadAreasFromNetwork) {
                 state.networkOperation({
@@ -651,6 +657,12 @@ const createAreasStore = (initProps) => {
           selectLayout: (areaId, layoutId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
+              const moduleId = state.hashWindows[layoutId].moduleId;
+              const searchParams = new URLSearchParams(window.location.search);
+              searchParams.set("module", moduleId);
+              state.navigate({
+                search: `?${searchParams.toString()}`
+              });
               if (state.hashWindows[layoutId].emergeType === "layout") {
                 area.currentLayoutId = layoutId;
                 state.currentModuleId = state.hashWindows[layoutId].moduleId;
@@ -999,6 +1011,14 @@ const createAreasStore = (initProps) => {
               }
             });
           }
+        },
+        areaAdminActions: {
+          setFocus: (newValue) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, focus: newValue };
+              updateOwnerStateClasses(state);
+            });
+          }
         }
       })),
       { name: `Areas store` }
@@ -1026,6 +1046,7 @@ function AreasProvider(props) {
   } = useNetwork();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
+  const navigate = useNavigate();
   const isFirstRender = useFirstRender([getLabel]);
   const areasStoreRef = useRef();
   if (!areasStoreRef.current) {
@@ -1034,10 +1055,12 @@ function AreasProvider(props) {
       loadAreasFromNetwork,
       loadCookiesFromNetwork,
       networkOperation,
+      navigate,
       ownerState: {
         status: "init",
         isMobile: !isDesktop,
-        isSkeleton
+        isSkeleton,
+        focus: false
       }
     });
     areasStoreRef.current?.getState().areasActions.init();
@@ -1051,7 +1074,7 @@ function AreasProvider(props) {
   } = useStore(areasStoreRef.current, (state) => state.areasActions, shallow);
   const addWindow = useCallback((newWindow) => {
     const currentAreaId = areasStoreRef.current?.getState().currentAreaId;
-    const areas = areasStoreRef.current?.getState().areas;
+    const areas = areasStoreRef.current?.getState().areasIds;
     if (currentAreaId && areas) {
       areasStoreRef.current?.getState().areaActions.addWindow(newWindow);
     }