@m4l/components 1.0.21 → 1.0.23

package/components/maps/components/GpsTools/{index.94055337.js → index.a19df7ba.js}

@@ -1,240 +1,47 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useRef, useEffect, useContext, useState, useMemo, useCallback } from "react";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useHostTools, useNetwork, useModulePrivileges, usePaginate } from "@m4l/core";
-import { u as useMapStore, C as CommonFeatureRender, b as MAP_DICCTIONARY } from "../Map/index.9edada74.js";
+import { useEnvironment, useModuleDictionary, useHostTools, useNetwork, useModulePrivileges, usePaginate, useModuleSkeleton } from "@m4l/core";
+import { useState, useMemo, useCallback, useRef, useEffect, createContext, useContext } from "react";
 import { shallow } from "zustand/shallow";
-import { createStore, useStore } from "zustand";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { enableMapSet } from "immer";
 import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
 import "@geoman-io/leaflet-geoman-free";
-import { au as RHFormProviderStyled, av as StackGeofenceListRoot, aw as DivGpsToolsRoot } from "../../../../styles/index.b0a69054.js";
-import { generateUtilityClasses } from "@mui/material";
-import "@mui/base";
 import clsx from "clsx";
-import { D as DynamicFilter } from "../../../DynamicFilter/index.1aa60703.js";
+import { au as RHFormProviderStyled, av as StackGeofenceListRoot, aw as DivTabGpsToolsRoot } from "../../../../styles/index.379fa100.js";
+import { D as DynamicFilter } from "../../../DynamicFilter/index.94ef8a65.js";
+import { C as ColumnIconFormatter } from "../../../DataGrid/formatters/index.84c30cd7.js";
 import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index.e00d0cf2.js";
-import { useFormContext, useWatch } from "react-hook-form";
-import { H as HelperError } from "../../../hook-form/HelperError/index.453b8be1.js";
-import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.156f6fb2.js";
-import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.f67b79e2.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.dff2bcc7.js";
-import { B as Button } from "../../../mui_extended/Button/index.1f534053.js";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useFormContext, useWatch, useFormState } from "react-hook-form";
+import { H as HelperError } from "../../../hook-form/HelperError/index.6b671a90.js";
+import { u as useModal } from "../../../../hooks/useModal/index.70c3f0b5.js";
+import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.b3bb56b7.js";
+import { createStore, useStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { enableMapSet } from "immer";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.241ff066.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.746fdae7.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.2083f1d3.js";
+import { B as Button } from "../../../mui_extended/Button/index.dc43db94.js";
 import { useMap } from "react-leaflet";
-import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
 import * as L from "leaflet";
-import { u as useTab } from "../../../../hooks/useTab/index.93e7cf1d.js";
-import { P as PaperForm } from "../../../PaperForm/index.56dab395.js";
-import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.9b605832.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.b9d95bd9.js";
-import { S as Stack } from "../../../mui_extended/Stack/index.84103b22.js";
-import { P as PropertyValue } from "../../../PropertyValue/index.370a03cb.js";
-import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.2962d572.js";
-import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.35947f79.js";
-import { T as Tooltip } from "../../../mui_extended/Tooltip/index.49bb5ee1.js";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import { u as useTab } from "../../../../hooks/useTab/index.6f39459c.js";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
+import { P as PaperForm } from "../../../PaperForm/index.8a387dab.js";
+import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.0c0f1166.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.8ca96674.js";
+import { S as Stack } from "../../../mui_extended/Stack/index.0c52ffa7.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.3284f1d5.js";
+import { P as PropertyValue } from "../../../PropertyValue/index.6445835e.js";
+import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.d6edb266.js";
+import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.c0a8e330.js";
+import { I as Icon } from "../../../Icon/index.8168aa10.js";
 import * as Yup from "yup";
-import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.4738a32a.js";
-import { u as useModal } from "../../../../hooks/useModal/index.e77737dd.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.eaec0ee1.js";
-import { D as DataGrid } from "../../../DataGrid/index.768e62a6.js";
-enableMapSet();
-const createGpsToolsStore = (initProps) => {
-  const startProps = {
-    currentTabGpsTool: "geofences",
-    geofenceState: {
-      rows: [],
-      checkedGeofences: /* @__PURE__ */ new Set(),
-      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
-      checkedInternalFeatures: /* @__PURE__ */ new Set(),
-      hashGeofences: {}
-    },
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, _get) => ({
-        ...startProps,
-        gpsToolsActions: {
-          init: () => {
-            set((state) => {
-              state.ownerState.status = "ready";
-            });
-          },
-          setGpsToolsState: (status) => {
-            set((state) => {
-              state.ownerState.status = status;
-            });
-          },
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
-          },
-          setCurrentTabTool: (newTabTool) => {
-            set((state) => {
-              state.currentTabGpsTool = newTabTool;
-            });
-          }
-        },
-        geofenceActions: {
-          addGeofence: (geofenceId, geofence) => {
-            set((state) => {
-              state.geofenceState.hashGeofences[geofenceId] = geofence;
-            });
-          },
-          updatePartialGeofence: (geofenceId, geofence) => {
-            set((state) => {
-              state.geofenceState.hashGeofences[geofenceId] = {
-                ...state.geofenceState.hashGeofences[geofenceId],
-                ...geofence
-              };
-            });
-          },
-          updateRows: (newRows) => {
-            set((state) => {
-              state.geofenceState.rows = newRows;
-            });
-          },
-          addCheckedGeofence: (geofenceId) => {
-            set((state) => {
-              state.geofenceState.checkedGeofences.add(geofenceId);
-              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
-            });
-          },
-          removeCheckedGeofence: (geofenceId) => {
-            set((state) => {
-              state.geofenceState.checkedGeofences.delete(geofenceId);
-              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
-            });
-          },
-          setCheckedGeofences: (newGeofences) => {
-            set((state) => {
-              state.geofenceState.checkedGeofences = new Set(newGeofences);
-            });
-          },
-          setCheckedCrossingFeatures: (newFeatures) => {
-            set((state) => {
-              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
-            });
-          },
-          setCheckedInternalFeatures: (newFeatures) => {
-            set((state) => {
-              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
-            });
-          }
-        }
-      })),
-      { name: `Map Tools Store` }
-    )
-  );
-};
-const GpsToolsContext = createContext(null);
-function GpsToolsProvider(props) {
-  const { children } = props;
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const mapStoreRef = useRef();
-  if (!mapStoreRef.current) {
-    mapStoreRef.current = createGpsToolsStore({
-      getLabel,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
-      }
-    });
-  }
-  const { setHandlerGetLabel, setExternalState } = useStore(
-    mapStoreRef.current,
-    (state) => state.gpsToolsActions,
-    shallow
-  );
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, { value: mapStoreRef.current, children });
-}
-function useGpsToolsStore(selector, equalityFn) {
-  const context = useContext(GpsToolsContext);
-  if (!context)
-    throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
-  return useStore(context, selector, equalityFn);
-}
-const ENDPOINT_GEOFENCE_GET = "geofences";
-const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
-var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
-  return GeofencesFeaturesLayers2;
-})(GeofencesFeaturesLayers || {});
-function useLayers() {
-  const { addLayer, removeLayer } = useMapStore((state) => state.mapActions, shallow);
-  const { init } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
-  useEffect(() => {
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
-      name: "Geocercas",
-      renderFeature: CommonFeatureRender,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      },
-      autoFocus: false
-    });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
-      name: "Geometr\xEDas de tr\xE1nsito",
-      renderFeature: CommonFeatureRender,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      },
-      autoFocus: false
-    });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
-      name: "Geometr\xEDas internas",
-      renderFeature: CommonFeatureRender,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      },
-      autoFocus: false
-    });
-    init();
-    return () => {
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
-    };
-  }, []);
-}
-const COMPONENT_CLASS_NAME = "M4LGpsTools";
+import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.f4f4dccd.js";
+import { u as useMapStore, C as CommonFeatureRender, G as GPS_TOOLS_POPUP_ID } from "../Map/index.ccb0be2e.js";
+import { D as DataGrid } from "../../../DataGrid/index.3f13b6aa.js";
+const COMPONENT_CLASS_NAME = "M4LMapGpsTools";
 const COMPONENT_MAP_TOOLS_ID = "gps_tools";
 const STYLE_OPACITIES = [
   {
@@ -305,25 +112,89 @@ const gpsToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "gpsToolsGeofencesList",
   "gpsToolsGeofencesAddEdit",
   "gpsToolsGeofencesAddEditContent",
+  "gpsToolsGeofencesAddEditDrawFinishContainer",
   "toolGeofencesAddEditGeneral",
   "toolGeofencesAddEditStyle",
   "visible",
   "hidden"
 ]);
-const GPSTOOLSICONS = {
-  GEOMETRY_CIRCLE: "geometry_circle.svg",
-  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
-  GEOMETRY_POLYGON: "geometry_polygon.svg",
-  ADD: "add.svg",
-  MEASURE: "measure.svg",
-  GENERAL: "general.svg",
-  CONFIG: "config.svg",
-  STROKE: "stroke.svg",
-  FILL: "fill.svg",
-  EDIT: "edit.svg",
-  DELETE: "delete.svg",
-  ACTIVE: "active.svg",
-  NAME: "name.svg"
+const MAP_GPSTOOLS_DICCTIONARY = {
+  LABEL_GPSTOOLS_NAME: "label_gpstools_name",
+  ACTION_GEOFENCE_ADD: "action_geofence_add",
+  ACTION_GEOFENCE_EDIT: "action_geofence_edit",
+  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
+  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
+  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
+  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
+  LABEL_TAB_GEO: "label_tab_geo",
+  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
+  PAPER_GENERAL: "paper_general",
+  LABEL_ID: "label_id",
+  LABEL_NAME: "label_name",
+  LABEL_GEOMETRY_TYPE: "label_geometry_type",
+  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
+  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
+  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
+  LABEL_DRAW: "label_draw",
+  LABEL_FINISH: "label_finish",
+  PAPER_CONFIG: "paper_config",
+  LABEL_ALIAS: "label_alias",
+  LABEL_CUSTOMER_ID: "label_customer_id",
+  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
+  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
+  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
+  PAPER_STROKE: "paper_stroke",
+  LABEL_COLOR: "label_color",
+  LABEL_OPACITY: "label_opacity",
+  LABEL_WEIGHT: "label_weight",
+  LABEL_DASH_ARRAY: "label_dash_array",
+  LABEL_DASH_OFFSET: "label_dash_offset",
+  PAPER_FILL: "paper_fill",
+  LABEL_RADIUS: "label_radius",
+  LABEL_LAT: "label_lat",
+  LABEL_LON: "label_lon",
+  LABEL_PLACE_MARKER: "label_place_marker",
+  LABEL_FIRST_VERTEX: "label_first_vertex",
+  LABEL_CONTINUE_LINE: "label_continue_line",
+  LABEL_FINISH_LINE: "label_finish_line",
+  LABEL_FINISH_POLY: "label_finish_poly",
+  LABEL_FINISH_RECT: "label_finish_rect",
+  LABEL_START_CIRCLE: "label_start_circle",
+  LABEL_FINISH_CIRCLE: "label_finish_circle",
+  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
+  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
+  VALIDATION_FIELD_REQUIRED: "validation_field_required",
+  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
+  VALIDATION_FIELD_MIN_NUMBER_ERROR: "validation_field_min_number_error",
+  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
+  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
+  LABEL_CREATED_AT: "label_created_at",
+  LABEL_UPDATED_AT: "label_updated_at",
+  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
+  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
+  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
+  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
+  ACTION_CANCEL: "action_cancel"
+};
+const MAP_GPSTOOLS_ICONS = {
+  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
+  GEOFENCES: "cmp_map_gpstools_geofences.svg",
+  GEOFENCE_ID: "cmp_map_gpstools_geofence_id.svg",
+  GEOFENCE_NAME: "cmp_map_gpstools_geofence_name.svg",
+  GEOFENCE_ADD: "cmp_map_gpstools_add-geofence.svg",
+  GEOFENCE_EDIT: "cmp_map_gpstools_edit-geofence.svg",
+  GEOFENCE_DELETE: "cmp_map_gpstools_delete-geofence.svg",
+  GENERAL: "cmp_map_gpstools_general.svg",
+  DATA: "cmp_map_gpstools_data.svg",
+  STYLE: "cmp_map_gpstools_style.svg",
+  GEOFENCE_DRAW: "cmp_map_gpstools_draw.svg",
+  GEOFENCE_FINISH: "cmp_map_gpstools_finish.svg",
+  GEOFENCE_TYPE_CIRCLE: "cmp_map_gpstools_circle.svg",
+  GEOFENCE_TYPE_RECTANGLE: "cmp_map_gpstools_rectangle.svg",
+  GEOFENCE_TYPE_POLYGON: "cmp_map_gpstools_polygon.svg",
+  CONFIG: "cmp_map_gpstools_config.svg",
+  STROKE: "cmp_map_gpstools_stroke.svg",
+  FILL: "cmp_map_gpstools_fill.svg"
 };
 function Filter(props) {
   const { refresh, setBackendQueryParams } = props;
@@ -345,19 +216,19 @@ function Filter(props) {
       fields: [
         {
           name: "id",
-          dictionaryId: MAP_DICCTIONARY.LABEL_ID,
+          dictionaryId: MAP_GPSTOOLS_DICCTIONARY.LABEL_ID,
           type: "number",
           multiple: true,
           presence: "optional",
-          urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${GPSTOOLSICONS.ACTIVE}`
+          urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_ID}`
         },
         {
           name: "name",
-          dictionaryId: MAP_DICCTIONARY.LABEL_NAME,
+          dictionaryId: MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME,
           type: "string",
           multiple: true,
           presence: "optional",
-          urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${GPSTOOLSICONS.NAME}`
+          urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_NAME}`
         }
       ],
       initialAppliedFilters: initialFilter
@@ -366,24 +237,48 @@ function Filter(props) {
 }
 function useColumns(_props) {
   const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const columns = useMemo(
     () => [
       {
         key: "id",
-        name: getLabel(MAP_DICCTIONARY.LABEL_ID),
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_ID),
         type: "number",
         width: 40,
         visible: false
       },
+      {
+        key: "geometry",
+        name: "",
+        type: "string",
+        formatter: ColumnIconFormatter({
+          getIconUrl: (formatterRowProps) => {
+            const { row } = formatterRowProps;
+            let iconUrl;
+            if (row.type.id === "gt_polygon") {
+              iconUrl = MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_POLYGON;
+            } else if (row.type.id === "gt_circle") {
+              iconUrl = MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_CIRCLE;
+            } else {
+              iconUrl = MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_RECTANGLE;
+            }
+            return {
+              iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${iconUrl}`
+            };
+          }
+        }),
+        width: 30,
+        minWidth: 25
+      },
       {
         key: "name",
-        name: getLabel(MAP_DICCTIONARY.LABEL_NAME),
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME),
         type: "string",
-        width: 300
+        width: 220
       },
       {
         key: "created_at",
-        name: getLabel(MAP_DICCTIONARY.LABEL_CREATED_AT),
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_CREATED_AT),
         type: "date",
         formatter: ColumnDateFormatter({
           presentationType: "datetime",
@@ -393,7 +288,7 @@ function useColumns(_props) {
       },
       {
         key: "updated_at",
-        name: getLabel(MAP_DICCTIONARY.LABEL_UPDATED_AT),
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_UPDATED_AT),
         type: "date",
         formatter: ColumnDateFormatter({
           presentationType: "datetime",
@@ -409,13 +304,36 @@ function useColumns(_props) {
 function MyActions(props) {
   const { geofenceId } = props;
   const { control } = useFormContext();
+  const { getLabel } = useModuleDictionary();
+  const { openModal } = useModal();
   const inEdition = useWatch({
     control,
     name: "inEdition"
   });
+  const { isDirty } = useFormState({
+    control
+  });
   const { closePopup, showPopup } = usePopupsStore((state) => state.popupsActions);
   const { addCheckedGeofence } = useGpsToolsStore((state) => state.geofenceActions);
-  const onClickCancel = () => {
+  const onClickCancelLocal = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel("common_actions.confirm_quit_title"),
+            msg: getLabel("common_actions.confirm_quit_msg"),
+            onClickIntro: onConfirmQuit
+          }
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal]);
+  const onConfirmQuit = () => {
     closePopup("geofencesAddEdit");
     if (geofenceId !== void 0) {
       addCheckedGeofence(geofenceId);
@@ -424,7 +342,7 @@ function MyActions(props) {
   };
   return /* @__PURE__ */ jsxs(Actions, { children: [
     /* @__PURE__ */ jsx(HelperError, { name: "geometry" }),
-    /* @__PURE__ */ jsx(Button, { onClick: onClickCancel, disabled: inEdition, children: "Cancelar" }),
+    /* @__PURE__ */ jsx(Button, { onClick: onClickCancelLocal, disabled: inEdition, children: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_CANCEL) }),
     /* @__PURE__ */ jsx(ActionFormIntro, { disabled: inEdition })
   ] });
 }
@@ -490,11 +408,10 @@ const formatDataEnpoint = (response) => {
 const getLayerFromGeometry = (geometry, geofenceTypeId, radius, options) => {
   if (geometry) {
     if (geofenceTypeId === "gt_circle" && geometry.type === "Point") {
-      return L.circle(
-        [geometry.coordinates[1], geometry.coordinates[0]],
-        radius || 0,
-        options
-      );
+      return L.circle([geometry.coordinates[1], geometry.coordinates[0]], {
+        ...options,
+        radius: radius || 0
+      });
     } else if (geofenceTypeId === "gt_polygon" && geometry.type === "Polygon") {
       const coordinates = geometry.coordinates.map(
         (ring) => ring.map((position) => [position[1], position[0]])
@@ -593,14 +510,14 @@ function useDrawing() {
     map.pm.setLang("en", {
       tooltips: {
         placeMarker: void 0,
-        firstVertex: getLabel(MAP_DICCTIONARY.LABEL_FIRST_VERTEX),
-        continueLine: getLabel(MAP_DICCTIONARY.LABEL_CONTINUE_LINE),
-        finishLine: getLabel(MAP_DICCTIONARY.LABEL_FINISH_LINE),
-        finishPoly: getLabel(MAP_DICCTIONARY.LABEL_FINISH_POLY),
-        finishRect: getLabel(MAP_DICCTIONARY.LABEL_FINISH_RECT),
-        startCircle: getLabel(MAP_DICCTIONARY.LABEL_START_CIRCLE),
-        finishCircle: getLabel(MAP_DICCTIONARY.LABEL_FINISH_CIRCLE),
-        placeCircleMarker: getLabel(MAP_DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
+        firstVertex: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FIRST_VERTEX),
+        continueLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_CONTINUE_LINE),
+        finishLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_LINE),
+        finishPoly: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_POLY),
+        finishRect: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_RECT),
+        startCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_START_CIRCLE),
+        finishCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_CIRCLE),
+        placeCircleMarker: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
       }
     });
   }, [map, getLabel]);
@@ -627,10 +544,10 @@ function useDrawing() {
                   fillColor,
                   fillOpacity
                 });
-                setValue("lat", layer.getLatLng().lat);
-                setValue("lng", layer.getLatLng().lng);
+                setValue("lat", Number(layer.getLatLng().lat.toFixed(8)));
+                setValue("lng", Number(layer.getLatLng().lng.toFixed(8)));
                 layer.on("pm:change", (_e) => {
-                  setValue("properties.radius", layer.getRadius());
+                  setValue("properties.radius", Number(layer.getRadius().toFixed(1)));
                 });
               });
             });
@@ -683,7 +600,10 @@ function useDrawing() {
           if (shape === "Circle") {
             currentLayer.current.on("pm:change", (e) => {
               currentLayer.current = e.layer;
+              setValue("lat", Number(currentLayer.current.getLatLng().lat.toFixed(8)));
+              setValue("lng", Number(currentLayer.current.getLatLng().lng.toFixed(8)));
               setValue("properties.radius", currentLayer.current.getRadius());
+              setValue("properties.radius", Number(currentLayer.current.getRadius().toFixed(1)));
             });
           }
         }
@@ -760,34 +680,34 @@ function GeneralData() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { inEdition, handleDraw, handleFinish, geometrTypeIdCached } = useDrawing();
   useSumbitErrorsFocus();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.GENERAL}`;
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GENERAL}`;
   const geofencesTypes = useMemo(() => {
     return [
       {
         id: "gt_circle",
-        name: getLabel(MAP_DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
-        url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.GEOMETRY_CIRCLE}`
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_CIRCLE}`
       },
       {
         id: "gt_polygon",
-        name: getLabel(MAP_DICCTIONARY.LABEL_GEOMETRY_POLYGON),
-        url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.GEOMETRY_POLYGON}`
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_POLYGON),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_POLYGON}`
       },
       {
         id: "gt_rectangle",
-        name: getLabel(MAP_DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
-        url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.GEOMETRY_RECTANGLE}`
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_RECTANGLE}`
       }
     ];
   }, [getLabel]);
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_DICCTIONARY.PAPER_GENERAL), children: [
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_GENERAL), children: [
     /* @__PURE__ */ jsx(
       RHFTextField,
       {
         name: "name",
         disabled: false,
         type: "text",
-        label: getLabel(`${MAP_DICCTIONARY.LABEL_NAME}`)
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME}`)
       }
     ),
     /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 1, alignItems: "center", children: [
@@ -801,47 +721,78 @@ function GeneralData() {
             getOptionLabel: (option) => option.name,
             isOptionEqualToValue: (option, value) => option.id === value.id,
             getOptionUrlImage: (option) => option.url,
-            label: getLabel(MAP_DICCTIONARY.LABEL_GEOMETRY_TYPE)
+            imageHeight: "12px",
+            imageWidth: "12px",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_TYPE)
           }
         ),
-        /* @__PURE__ */ jsx(Button, { onClick: handleDraw, disabled: inEdition || !geometrTypeIdCached, children: getLabel(MAP_DICCTIONARY.LABEL_DRAW) }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleFinish, disabled: !inEdition, children: getLabel(MAP_DICCTIONARY.LABEL_FINISH) })
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            className: gpsToolsClasses.gpsToolsGeofencesAddEditDrawFinishContainer,
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_DRAW}`,
+                  variant: "primary",
+                  onClick: handleDraw,
+                  disabled: inEdition || !geometrTypeIdCached,
+                  tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_DRAW)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_FINISH}`,
+                  variant: "primary",
+                  onClick: handleFinish,
+                  disabled: !inEdition,
+                  tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH)
+                }
+              )
+            ]
+          }
+        )
       ] }),
       geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
         /* @__PURE__ */ jsx(
           RHFTextField,
           {
             name: "properties.radius",
-            label: getLabel(MAP_DICCTIONARY.LABEL_RADIUS),
-            autoComplete: "on",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_RADIUS),
+            autoComplete: "off",
             skeletonWidth: "70%",
             skeletonHeight: "18px",
             disabled: true,
-            size: "medium"
+            size: "small"
           }
         ),
         /* @__PURE__ */ jsx(
           RHFTextField,
           {
             name: "lat",
-            label: getLabel(MAP_DICCTIONARY.LABEL_LAT),
-            autoComplete: "on",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LAT),
+            autoComplete: "off",
             skeletonWidth: "70%",
             skeletonHeight: "18px",
             disabled: true,
-            size: "medium"
+            size: "small"
           }
         ),
         /* @__PURE__ */ jsx(
           RHFTextField,
           {
             name: "lng",
-            label: getLabel(MAP_DICCTIONARY.LABEL_LON),
-            autoComplete: "on",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LON),
+            autoComplete: "off",
             skeletonWidth: "70%",
             skeletonHeight: "18px",
             disabled: true,
-            size: "medium"
+            size: "small"
           }
         )
       ] })
@@ -851,15 +802,15 @@ function GeneralData() {
 function ConfigData() {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.CONFIG}`;
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_DICCTIONARY.PAPER_CONFIG), children: [
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.CONFIG}`;
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_CONFIG), children: [
     /* @__PURE__ */ jsx(
       RHFTextField,
       {
         name: "alias",
         disabled: false,
         type: "text",
-        label: getLabel(`${MAP_DICCTIONARY.LABEL_ALIAS}`)
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_ALIAS}`)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -868,7 +819,7 @@ function ConfigData() {
         name: "customerId",
         disabled: false,
         type: "text",
-        label: getLabel(`${MAP_DICCTIONARY.LABEL_CUSTOMER_ID}`)
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_CUSTOMER_ID}`)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -877,7 +828,7 @@ function ConfigData() {
         name: "timeMinInSeconds",
         disabled: false,
         type: "number",
-        label: getLabel(`${MAP_DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -886,7 +837,7 @@ function ConfigData() {
         name: "timeMinOutSeconds",
         disabled: false,
         type: "number",
-        label: getLabel(`${MAP_DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
       }
     )
   ] });
@@ -894,12 +845,12 @@ function ConfigData() {
 function FillData() {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.FILL}`;
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_DICCTIONARY.PAPER_STROKE), children: [
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.FILL}`;
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_FILL), children: [
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_COLOR}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_COLOR}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(RHFColorPicker, { name: "properties.fillColor" })
@@ -909,7 +860,7 @@ function FillData() {
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_OPACITY}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_OPACITY}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
@@ -919,8 +870,7 @@ function FillData() {
             autoComplete: "off",
             options: STYLE_OPACITIES,
             getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value,
-            label: "ssss"
+            isOptionEqualToValue: (option, value) => option.value === value.value
           }
         )
       },
@@ -931,12 +881,12 @@ function FillData() {
 function StrokeData() {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${GPSTOOLSICONS.STROKE}`;
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_DICCTIONARY.PAPER_STROKE), children: [
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.STROKE}`;
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_STROKE), children: [
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_COLOR}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_COLOR}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(RHFColorPicker, { name: "properties.strokeColor" })
@@ -946,7 +896,7 @@ function StrokeData() {
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_OPACITY}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_OPACITY}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
@@ -956,8 +906,7 @@ function StrokeData() {
             autoComplete: "off",
             options: STYLE_OPACITIES,
             getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value,
-            label: "ssss"
+            isOptionEqualToValue: (option, value) => option.value === value.value
           }
         )
       },
@@ -966,7 +915,7 @@ function StrokeData() {
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_WEIGHT}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_WEIGHT}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
@@ -976,8 +925,7 @@ function StrokeData() {
             autoComplete: "off",
             options: STYLE_WHEIGHTS,
             getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value,
-            label: "ssss"
+            isOptionEqualToValue: (option, value) => option.value === value.value
           }
         )
       },
@@ -986,7 +934,7 @@ function StrokeData() {
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
-        property: getLabel(`${MAP_DICCTIONARY.LABEL_DASH_ARRAY}`),
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_DASH_ARRAY}`),
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
@@ -996,8 +944,7 @@ function StrokeData() {
             autoComplete: "off",
             options: STYLE_PATTERNS,
             getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value,
-            label: "ssss"
+            isOptionEqualToValue: (option, value) => option.value === value.value
           }
         )
       },
@@ -1013,24 +960,25 @@ function StyleData() {
 }
 function MyTabs() {
   const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentTab, handleChange } = useTab();
   const geofenceAddEditTabs = useMemo(() => {
     return [
       {
-        value: "general",
-        icon: void 0,
-        components: /* @__PURE__ */ jsxs(Fragment, { children: [
+        id: "general",
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.DATA}`,
+        component: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(GeneralData, {}),
           /* @__PURE__ */ jsx(ConfigData, {})
         ] }),
-        toolTip: getLabel(MAP_DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
         className: gpsToolsClasses.toolGeofencesAddEditGeneral
       },
       {
-        value: "style",
-        icon: void 0,
-        components: /* @__PURE__ */ jsx(StyleData, {}),
-        toolTip: getLabel(MAP_DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
+        id: "style",
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.STYLE}`,
+        component: /* @__PURE__ */ jsx(StyleData, {}),
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
         className: gpsToolsClasses.toolGeofencesAddEditStyle
       }
     ];
@@ -1047,18 +995,18 @@ function MyTabs() {
         children: geofenceAddEditTabs.map((tab) => /* @__PURE__ */ jsx(
           Tab,
           {
-            value: tab.value,
-            icon: tab.icon,
-            label: /* @__PURE__ */ jsx(Tooltip, { title: tab.toolTip, children: /* @__PURE__ */ jsx("span", { children: tab.toolTip }) }),
+            value: tab.id,
+            icon: /* @__PURE__ */ jsx(Icon, { src: tab.iconUrl }),
+            label: "",
             SKTWidth: "100px",
             SKTHeight: "14px"
           },
-          tab.value
+          tab.id
         ))
       }
     ),
     geofenceAddEditTabs.map((tab) => {
-      const isMatched = tab.value === currentTab;
+      const isMatched = tab.id === currentTab;
       return /* @__PURE__ */ jsx(
         TabContent,
         {
@@ -1067,24 +1015,24 @@ function MyTabs() {
             tab.className,
             isMatched ? gpsToolsClasses.visible : gpsToolsClasses.hidden
           ),
-          children: tab.components
+          children: tab.component
         },
-        tab.value
+        tab.id
       );
     })
   ] });
 }
 function GeneralDataValidation(getLabel) {
   return {
-    name: Yup.string().required(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
-    geometry: Yup.object().nullable().required(getLabel(MAP_DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
-    geofenceType: Yup.object().nullable().required(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_REQUIRED))
+    name: Yup.string().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
+    geometry: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
+    geofenceType: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED))
   };
 }
 function ConfigDataValidation(getLabel) {
   return {
-    timeMinInSeconds: Yup.number().required(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)),
-    timeMinOutSeconds: Yup.number().required(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR))
+    timeMinInSeconds: Yup.number().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)).min(0, getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_MIN_NUMBER_ERROR)),
+    timeMinOutSeconds: Yup.number().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)).min(0, getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_MIN_NUMBER_ERROR))
   };
 }
 function useValidation() {
@@ -1098,6 +1046,14 @@ function useValidation() {
   );
   return { validationSchema };
 }
+const ENDPOINT_GEOFENCE_GET = "geofences";
+const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
+var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
+  return GeofencesFeaturesLayers2;
+})(GeofencesFeaturesLayers || {});
 const getSummitData = (values, geofenceId) => {
   const newEditObj = {
     name: values.name,
@@ -1194,7 +1150,7 @@ function GeofenceAddEdit(props) {
   });
   const { validationSchema } = useValidation();
   const { onSubmit } = useSubmit({ objectId: geofenceId });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     RHFormProviderStyled,
     {
       statusLoad,
@@ -1202,10 +1158,10 @@ function GeofenceAddEdit(props) {
       values: formValues,
       validationSchema,
       className: gpsToolsClasses.gpsToolsGeofencesAddEdit,
-      children: [
+      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "8px", children: [
         /* @__PURE__ */ jsx(TabProvider, { initialValue: "general", children: /* @__PURE__ */ jsx(MyTabs, {}) }),
         /* @__PURE__ */ jsx(MyActions, { ...props })
-      ]
+      ] })
     }
   );
 }
@@ -1221,23 +1177,24 @@ function useRowActionsGetter(props) {
   const { toast } = useHostTools();
   const isDesktop = useResponsiveDesktop();
   const [urlIconEdit] = useState(
-    `${host_static_assets}/${environment_assets}/frontend/components/maptools/assets/icons/${GPSTOOLSICONS.EDIT}`
+    `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_EDIT}`
   );
   const [urlIconDelete] = useState(
-    `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/maptools/assets/icons/${GPSTOOLSICONS.DELETE}`
+    `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_DELETE}`
   );
-  const goEdit = (objectId) => {
+  const goEdit = (objectId, name) => {
     hidePopup("gpsTools");
     addPopup({
       popupId: "geofencesAddEdit",
-      title: "geofencesAddEdit",
+      title: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_GEOFENCE_EDIT),
+      editionInfo: `${getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_ID)}:${objectId} - ${name} `,
       componentProps: { fullRefresh, geofenceId: objectId },
       functionComponent: GeofenceAddEdit,
       defaultPosition: {
         vertical: { top: 50, bottom: 50 },
         horizontal: { right: 50, width: 380 }
       },
-      iconUrl: ""
+      iconUrl: urlIconEdit
     });
     removeCheckedGeofence(objectId);
   };
@@ -1247,8 +1204,8 @@ function useRowActionsGetter(props) {
         window: /* @__PURE__ */ jsx(
           WindowConfirm,
           {
-            title: getLabel(MAP_DICCTIONARY.MODAL_DELETE_GEO_TITLE),
-            msg: getLabel(MAP_DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
+            title: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODAL_DELETE_GEO_TITLE),
+            msg: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
             onClickIntro: () => onConfirmDelete(row)
           }
         ),
@@ -1274,10 +1231,19 @@ function useRowActionsGetter(props) {
       const conditionalItems = [];
       conditionalItems.push({
         urlIcon: urlIconEdit,
-        dictionaryId: MAP_DICCTIONARY.ROW_ACTION_GEO_EDIT,
+        dictionaryId: MAP_GPSTOOLS_DICCTIONARY.ROW_ACTION_GEO_EDIT,
+        onClick: () => {
+          goEdit(row.id, row.name);
+        },
+        disabled: !row.authUserOptions.edit
+      });
+      conditionalItems.push({
+        urlIcon: urlIconDelete,
+        dictionaryId: MAP_GPSTOOLS_DICCTIONARY.ROW_ACTION_GEO_DELETE,
         onClick: () => {
-          goEdit(row.id);
+          onDelete(row);
         },
+        variant: "delete",
         disabled: !row.authUserOptions.edit
       });
       return conditionalItems;
@@ -1441,18 +1407,20 @@ function useCheckedFeatures(layerId, featuresType, endpoint) {
   return [checkedFeatures, setCheckedFeatures];
 }
 function useMaster() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const { hidePopup, addPopup } = usePopupsStore((state) => state.popupsActions, shallow);
-  const onClickAddGeofence = () => {
+  const goToAdd = () => {
     hidePopup("gpsTools");
     addPopup({
       popupId: "geofencesAddEdit",
-      title: "geofencesAddEdit",
+      title: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_GEOFENCE_ADD),
       functionComponent: () => /* @__PURE__ */ jsx(GeofenceAddEdit, {}),
       defaultPosition: {
         vertical: { top: 50, bottom: 50 },
         horizontal: { right: 50, width: 380 }
       },
-      iconUrl: ""
+      iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_ADD}`
     });
   };
   const [checkedGeofences, hashGeofences, initialRows] = useGpsToolsStore(
@@ -1577,10 +1545,11 @@ function useMaster() {
     checkedRows: checkedGeofences,
     onCheckedRowsChange: setCheckedGeofences,
     setRows,
-    goToAddEdit: onClickAddGeofence
+    goToAdd
   };
 }
 function GeofencesList() {
+  const { getLabel } = useModuleDictionary();
   const {
     refresh,
     setBackendQueryParams,
@@ -1596,7 +1565,7 @@ function GeofencesList() {
     onCheckedRowsChange,
     setRows,
     rowKeyGetter,
-    goToAddEdit
+    goToAdd
   } = useMaster();
   return /* @__PURE__ */ jsxs(
     StackGeofenceListRoot,
@@ -1636,84 +1605,271 @@ function GeofencesList() {
           },
           "list"
         ),
-        /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Button, { onClick: () => goToAddEdit(), children: "Agregar geocerca" }) })
+        /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Button, { onClick: () => goToAdd(), children: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_GEOFENCE_ADD) }) })
       ]
     }
   );
 }
+enableMapSet();
+const createGpsToolsStore = (initProps) => {
+  const startProps = {
+    currentTabGpsTool: "geofences",
+    geofenceState: {
+      rows: [],
+      checkedGeofences: /* @__PURE__ */ new Set(),
+      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
+      checkedInternalFeatures: /* @__PURE__ */ new Set(),
+      hashGeofences: {}
+    },
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, _get) => ({
+        ...startProps,
+        gpsToolsActions: {
+          init: () => {
+            set((state) => {
+              state.ownerState.status = "ready";
+            });
+          },
+          setGpsToolsState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          setCurrentTabTool: (newTabTool) => {
+            set((state) => {
+              state.currentTabGpsTool = newTabTool;
+            });
+          }
+        },
+        geofenceActions: {
+          addGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = geofence;
+            });
+          },
+          updatePartialGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = {
+                ...state.geofenceState.hashGeofences[geofenceId],
+                ...geofence
+              };
+            });
+          },
+          updateRows: (newRows) => {
+            set((state) => {
+              state.geofenceState.rows = newRows;
+            });
+          },
+          addCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.add(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          removeCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.delete(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          setCheckedGeofences: (newGeofences) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences = new Set(newGeofences);
+            });
+          },
+          setCheckedCrossingFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
+            });
+          },
+          setCheckedInternalFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
+            });
+          }
+        }
+      })),
+      { name: `Map Tools Store` }
+    )
+  );
+};
+const GpsToolsContext = createContext(null);
+function GpsToolsProvider(props) {
+  const { children } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createGpsToolsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      }
+    });
+  }
+  const { setHandlerGetLabel, setExternalState } = useStore(
+    mapStoreRef.current,
+    (state) => state.gpsToolsActions,
+    shallow
+  );
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, { value: mapStoreRef.current, children });
+}
+function useGpsToolsStore(selector, equalityFn) {
+  const context = useContext(GpsToolsContext);
+  if (!context)
+    throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
+  return useStore(context, selector, equalityFn);
+}
+function useLayers() {
+  const { addLayer, removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const { init } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
+  useEffect(() => {
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
+      name: "Geocercas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
+      name: "Geometr\xEDas de tr\xE1nsito",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
+      name: "Geometr\xEDas internas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    init();
+    return () => {
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
+    };
+  }, []);
+}
 function TabsGpsTools() {
   const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const status = useGpsToolsStore((state) => state.ownerState.status, shallow);
   const currentTabTool = useGpsToolsStore((state) => state.currentTabGpsTool, shallow);
   const { setCurrentTabTool } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
+  const { updatePopup } = usePopupsStore((state) => state.popupsActions, shallow);
   const toolTabs = useMemo(() => {
     return [
       {
         id: "geofences",
-        icon: void 0,
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES}`,
         component: /* @__PURE__ */ jsx(GeofencesList, {}),
-        label: getLabel(MAP_DICCTIONARY.LABEL_TAB_GEO),
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_GEO),
         className: gpsToolsClasses.gpsToolsGeofencesList
       }
     ];
   }, [getLabel]);
+  useEffect(() => {
+    updatePopup(GPS_TOOLS_POPUP_ID, {
+      subTitle: currentTabTool === "geofences" ? getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_GEO) : ""
+    });
+  }, [currentTabTool]);
   useLayers();
   if (status !== "ready") {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
-    DivGpsToolsRoot,
-    {
-      className: gpsToolsClasses.gpsToolsRoot,
-      children: [
-        /* @__PURE__ */ jsx(
-          Tabs,
+  return /* @__PURE__ */ jsxs(DivTabGpsToolsRoot, { className: gpsToolsClasses.gpsToolsRoot, children: [
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentTabTool,
+        scrollButtons: "auto",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        onChange: (_e, value) => setCurrentTabTool(value),
+        children: toolTabs.map((tab) => /* @__PURE__ */ jsx(
+          Tab,
           {
-            value: currentTabTool,
-            scrollButtons: "auto",
-            variant: "scrollable",
-            allowScrollButtonsMobile: true,
-            onChange: (_e, value) => setCurrentTabTool(value),
-            children: toolTabs.map((tab) => /* @__PURE__ */ jsx(
-              Tab,
-              {
-                value: tab.id,
-                icon: tab.icon,
-                label: tab.label,
-                className: clsx(gpsToolsClasses.gpsToolsTab, tab.className),
-                SKTWidth: "100px",
-                SKTHeight: "14px"
-              },
-              tab.id
-            ))
-          }
-        ),
-        toolTabs.map((tab) => {
-          const isMatched = tab.id === currentTabTool;
-          return /* @__PURE__ */ jsx(
-            TabContent,
-            {
-              className: clsx(
-                gpsToolsClasses.gpsToolsTabContent,
-                tab.className,
-                isMatched ? gpsToolsClasses.visible : gpsToolsClasses.hidden
-              ),
-              children: tab.component
-            },
-            tab.id
-          );
-        })
-      ]
-    }
-  );
+            value: tab.id,
+            icon: /* @__PURE__ */ jsx(Icon, { src: tab.iconUrl }),
+            className: clsx(gpsToolsClasses.gpsToolsTab, tab.className),
+            SKTWidth: "100px",
+            SKTHeight: "14px"
+          },
+          tab.id
+        ))
+      }
+    ),
+    toolTabs.map((tab) => {
+      const isMatched = tab.id === currentTabTool;
+      return /* @__PURE__ */ jsx(
+        TabContent,
+        {
+          className: clsx(
+            gpsToolsClasses.gpsToolsTabContent,
+            tab.className,
+            isMatched ? gpsToolsClasses.visible : gpsToolsClasses.hidden
+          ),
+          children: tab.component
+        },
+        tab.id
+      );
+    })
+  ] });
 }
-function GpsTools() {
+function MapGpsTools() {
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(Fragment, { children: !isSkeleton && /* @__PURE__ */ jsx(TabsGpsTools, {}) });
+  return !isSkeleton && /* @__PURE__ */ jsx(TabsGpsTools, {});
 }
 export {
-  GpsTools as G,
-  GpsToolsProvider as a,
+  GpsToolsProvider as G,
+  MapGpsTools as M,
   gpsToolsClasses as g,
   useGpsToolsStore as u
 };