@crystaldesign/diva-backoffice 24.2.3 → 24.3.0-beta.1

package/build/esm/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { createContext, useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle, useReducer, createRef, forwardRef, useContext, memo } from 'react';
 import 'antd/dist/reset.css';
-import { Button, Spin, Descriptions, Select as Select$1, Alert, Modal as Modal$2, Input, Popover, Typography, Divider, Avatar, Form as Form$1, Radio, DatePicker, Checkbox, InputNumber, Card, Tooltip, Upload, Space, Row, Col, Steps, Result as Result$1, Layout, Switch, Menu as Menu$1, Collapse, Table as Table$1, Popconfirm, Tabs, Image, Progress, Slider, Breadcrumb, List as List$1, message, Cascader, Skeleton, Drawer, ConfigProvider, theme } from 'antd';
+import { Button, Spin, Descriptions, Select as Select$2, Alert, Modal as Modal$2, Input, Popover, Typography, Divider, Avatar, Form as Form$1, Radio, DatePicker, Checkbox, InputNumber, Card, Tooltip, Upload, Space, Row, Col, Steps, Result as Result$1, Layout, Switch, Menu as Menu$1, Collapse, Table as Table$1, Popconfirm, Tabs, Image, Progress, Slider, Breadcrumb, List as List$1, message, Cascader, Skeleton, Drawer, ConfigProvider, theme } from 'antd';
 import { observer } from 'mobx-react-lite';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getLogger, CoreError, useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
@@ -96,6 +96,7 @@ import classnames from 'classnames';
 import Collapsible from 'react-collapsible';
 import QuestionOutlined from '@ant-design/icons/QuestionOutlined';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import { useTranslation as useTranslation$1 } from 'react-i18next';
 import { stringify } from 'csv';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import ReactCrop from 'react-image-crop';
@@ -1913,26 +1914,28 @@ function loadConfiguration(t, root, config, lang) {
         },
         select: {
           filterField: 'status',
-          search: false,
-          defaultValue: t('backoffice.table.applicationlogs.filter.dropdown.all'),
-          applyDefaultValue: false,
-          options: [{
-            lable: t('backoffice.table.applicationlogs.filter.dropdown.all'),
-            value: '',
-            data: ''
-          }, {
-            lable: 'Timeout',
-            value: 'Timeout',
-            data: 'TIMEOUT'
-          }, {
-            lable: 'Success',
-            value: 'Success',
-            data: 'SUCCESS'
-          }, {
-            lable: 'Error',
-            value: 'Error',
-            data: 'ERROR'
-          }]
+          settings: {
+            search: false,
+            options: [{
+              label: t('backoffice.table.applicationlogs.filter.dropdown.all'),
+              value: 'ALL',
+              data: 'ALL'
+            }, {
+              label: 'Timeout',
+              value: 'Timeout',
+              data: 'TIMEOUT'
+            }, {
+              label: 'Success',
+              value: 'Success',
+              data: 'SUCCESS'
+            }, {
+              label: 'Error',
+              value: 'Error',
+              data: 'ERROR'
+            }]
+          },
+          defaultValue: 'ALL',
+          applyDefaultValue: false
         }
       },
       mapping: {
@@ -2054,7 +2057,37 @@ function loadConfiguration(t, root, config, lang) {
         }],
         title: t('backoffice.table.allusers.roleselector.title'),
         label: t('backoffice.table.allusers.roleselector.features')
-      }]
+      }, {
+        actionType: 'Modal',
+        title: t('backoffice.table.allusers.modal.title.aktivateuser'),
+        text: t('backoffice.table.allusers.modal.text11'),
+        label: t('backoffice.table.allusers.modal.label.aktivate'),
+        type: 'Form',
+        id: 'FormActivateUser',
+        mapping: {
+          type: 'body',
+          map: [{
+            sourceField: '_id',
+            targetField: 'id'
+          }, {
+            sourceValue: window.location.origin,
+            targetField: 'redirectTo'
+          }]
+        },
+        rule: [{
+          match: {
+            sourceField: 'isActive',
+            value: false
+          }
+        }]
+      }],
+      createAction: {
+        actionType: 'Detail',
+        type: 'Form',
+        id: 'FormUserDetails',
+        title: t('backoffice.table.allusers.createaction.title.userdetails'),
+        permission: 'backoffice_admin_users'
+      }
     },
     TableAllOrganizations: {
       type: 'Table',
@@ -2740,6 +2773,7 @@ function loadConfiguration(t, root, config, lang) {
       canRefresh: true,
       initialCall: false,
       clientRelations: true,
+      dontLoadCatalogData: true,
       columns: [{
         title: t('backoffice.table.partlists.columns.ArticleCodex'),
         field: 'ArticleCodex',
@@ -2795,6 +2829,7 @@ function loadConfiguration(t, root, config, lang) {
       }, {
         title: t('backoffice.table.partlists.columns.RetailPrefix'),
         field: 'RetailPrefix',
+        editable: true,
         sorter: 9,
         filter: 'advanced',
         width: 110
@@ -2948,21 +2983,17 @@ function loadConfiguration(t, root, config, lang) {
         type: 'Form',
         id: 'FormApplicationTranslationsEdit',
         title: t('backoffice.table.translation.title')
-      }, {
-        actionType: 'Detail',
-        type: 'Form',
-        id: 'FormApplicationTranslations',
-        title: 'Lokalisierung',
-        label: t('backoffice.rowAction.title.overwrite')
       }],
       filter: {
         select: {
-          search: true,
+          settings: {
+            search: true,
+            apiInterface: {
+              read: '${adminService}/locales/namespaces'
+            }
+          },
           defaultValue: 'default',
-          filterField: 'namespace',
-          apiInterface: {
-            read: '${adminService}/locales/namespaces'
-          }
+          filterField: 'namespace'
         },
         search: {
           fields: ['key', 'locales.de.default', 'locales.fr.default', 'locales.en.default', 'locales.it.default']
@@ -3736,33 +3767,9 @@ function loadConfiguration(t, root, config, lang) {
         actionType: 'Modal',
         title: t('backoffice.table.invitations.rowAction.aktivateuser.title'),
         text: t('backoffice.table.invitations.rowAction.aktivateuser.text'),
-        label: t('backoffice.table.invitations.rowAction.aktivateuser.label'),
-        type: 'Form',
-        id: 'FormSendInvitation',
-        mapping: {
-          type: 'body',
-          map: [{
-            sourceField: '_id',
-            targetField: 'id'
-          }, {
-            sourceValue: window.location.origin,
-            targetField: 'redirectTo'
-          }, {
-            sourceField: 'organizationId',
-            targetField: 'organizationId'
-          }]
+        label: function label(data) {
+          return data.send == false ? t('backoffice.table.invitations.rowAction.aktivateuser.label') : t('backoffice.table.invitations.rowAction.resendMail');
         },
-        rule: [{
-          match: {
-            sourceField: 'send',
-            value: false
-          }
-        }]
-      }, {
-        actionType: 'Modal',
-        title: t('backoffice.table.invitations.rowAction.aktivateuser.title'),
-        text: t('backoffice.table.invitations.rowAction.aktivateuser.text'),
-        label: t('backoffice.table.invitations.rowAction.resendMail'),
         type: 'Form',
         id: 'FormSendInvitation',
         mapping: {
@@ -3777,13 +3784,7 @@ function loadConfiguration(t, root, config, lang) {
             sourceField: 'organizationId',
             targetField: 'organizationId'
           }]
-        },
-        rule: [{
-          match: {
-            sourceField: 'send',
-            value: true
-          }
-        }]
+        }
       }]
     },
     TableSubOrganizations: {
@@ -3976,6 +3977,15 @@ function loadConfiguration(t, root, config, lang) {
           targetField: 'organizationId'
         }]
       },
+      createAction: {
+        actionType: 'Detail',
+        type: 'SelectOrCreate',
+        id: 'SelectOrCreateNewMember',
+        title: t('backoffice.table.allorgusers.createAction.title'),
+        label: t('backoffice.table.allorgusers.createAction.title'),
+        disableOnToggle: true,
+        permission: 'backoffice_create_user'
+      },
       downloadAction: {
         actionType: 'CsvExport',
         fileName: 'benutzer'
@@ -4007,6 +4017,30 @@ function loadConfiguration(t, root, config, lang) {
             sourceField: 'phoneNumber'
           }]
         }
+      }, {
+        actionType: 'Modal',
+        title: t('backoffice.table.allorgusers.rowAction.title.aktivateuser'),
+        text: t('backoffice.table.allorgusers.rowAction.text'),
+        label: t('backoffice.table.allorgusers.rowAction.lable.aktivate'),
+        type: 'Form',
+        id: 'FormActivateUser',
+        permission: 'backoffice_create_user',
+        mapping: {
+          type: 'body',
+          map: [{
+            sourceField: '_id',
+            targetField: 'id'
+          }, {
+            sourceValue: window.location.origin,
+            targetField: 'redirectTo'
+          }]
+        },
+        rule: [{
+          match: {
+            sourceField: 'isActive',
+            value: false
+          }
+        }]
       }]
     },
     TableViewpoints: {
@@ -5213,8 +5247,7 @@ function loadConfiguration(t, root, config, lang) {
       }, {
         title: t('backoffice.table.idmimports.fullName'),
         field: 'fullName',
-        sorter: 6,
-        filter: 'advanced'
+        sorter: 6
       }, {
         title: t('backoffice.table.idmimports.user.name'),
         field: 'user.name',
@@ -5230,13 +5263,14 @@ function loadConfiguration(t, root, config, lang) {
         field: 'startTime',
         sorter: 3,
         type: 'unixTimeStamp',
-        filter: 'advanced'
+        filter: 'interval'
       }, {
         title: t('backoffice.table.idmimports.endTime'),
         field: 'endTime',
         type: 'unixTimeStamp',
         sorter: 2,
-        dateInSeconds: false
+        dateInSeconds: false,
+        filter: 'interval'
       }, {
         title: t('backoffice.table.idmimports.lastUpdated'),
         field: 'lastUpdated',
@@ -5288,6 +5322,11 @@ function loadConfiguration(t, root, config, lang) {
         title: t('backoffice.table.idmimports.fileName'),
         field: 'fileName'
       }],
+      filter: {
+        search: {
+          fields: ['_id', 'user.name', 'user.familyName', 'state', 'stateMessage', 'fullProgress', 'organizationId', 'serverName', 'fileName']
+        }
+      },
       apiInterface: {
         read: {
           list: '${catalogService}/idmImports',
@@ -6757,6 +6796,29 @@ function loadConfiguration(t, root, config, lang) {
         }]
       }
     },
+    FormActivateUser: {
+      type: 'Form',
+      apiInterface: {
+        create: {
+          url: '${authService}/v2/users/{id}/activate?redirectTo={redirectTo}',
+          method: 'POST'
+        }
+      },
+      items: [{
+        name: 'id',
+        hidden: true,
+        readonly: true
+      }, {
+        name: 'redirectTo',
+        label: t('backoffice.form.activateuser.items.redirectTo'),
+        rules: [{
+          pattern: new RegExp('((https?)://).*'),
+          required: true,
+          message: t('backoffice.form.activateuser.items.redirectTo.rules')
+        }],
+        type: 'input'
+      }]
+    },
     FormApplicationTranslationsEdit: {
       type: 'Form',
       title: t('backoffice.form.applicationtranslationedit.title'),
@@ -8403,7 +8465,33 @@ function loadConfiguration(t, root, config, lang) {
           var _root$dataStore;
           root === null || root === void 0 || (_root$dataStore = root.dataStore) === null || _root$dataStore === void 0 || _root$dataStore.setSelectedOrganizationId(data._id);
         }
-      }
+      },
+      additionalActions: [{
+        actionType: 'Callback',
+        label: t('backoffice.orgtree.openAction'),
+        id: 'ChangeToOrganization',
+        rule: [{
+          or: [{
+            match: {
+              sourceField: 'type',
+              value: 'DEALER'
+            }
+          }, {
+            match: {
+              sourceField: 'type',
+              value: 'RETAILER'
+            }
+          }, {
+            match: {
+              sourceField: 'type',
+              value: 'RETAILERCHILD'
+            }
+          }]
+        }],
+        callback: function callback(data) {
+          root === null || root === void 0 || root.actions.setOrganization(data.id);
+        }
+      }]
     },
     DescriptionCurrentOrganization: {
       type: 'Description',
@@ -8924,6 +9012,50 @@ function loadConfiguration(t, root, config, lang) {
         }]
       }
     },
+    SelectOrCreateNewMember: {
+      type: 'SelectOrCreate',
+      mode: 'single',
+      apiInterface: {
+        create: '${authService}/v2/organizations/{organizationId}/members/{userId}?roleId=seller',
+        read: {
+          list: '${authService}/v2/organizations/${organizationId}/members?all=true',
+          filterServerSide: true,
+          fallBackToParams: false,
+          permissions: {
+            backoffice_admin_users: '${authService}/v2/users'
+          }
+        }
+      },
+      readMapping: {
+        type: 'query',
+        map: [{
+          targetField: 'organizationId',
+          globalValue: 'selectedOrganizationId'
+        }]
+      },
+      selectMapping: {
+        label: 'mainEmail',
+        value: '_id',
+        searchField: [{
+          field: 'mainEmail',
+          filter: 'contains'
+        }]
+      },
+      formId: 'FormUserDetails',
+      actionMapping: {
+        type: 'body',
+        map: [{
+          targetField: 'userId',
+          sourceField: '_id'
+        }, {
+          targetField: 'organizationId',
+          globalValue: 'selectedOrganizationId'
+        }]
+      },
+      onError: {
+        AUTH_0020: t('errorcodes._source.labels.error.AUTH_0020')
+      }
+    },
     MediaUploadOrganizationLogoMobile: {
       type: 'MediaUpload',
       size: 'medium',
@@ -11396,6 +11528,7 @@ function ActionButton (_ref) {
     danger = _ref.danger,
     buttonType = _ref.buttonType;
   var root = useStore();
+  var label = typeof action.label == 'function' ? action.label(data) : action.label;
   var ButtonType = type == 'Button' ? Button : A;
   var disable = false;
   if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
@@ -11472,7 +11605,7 @@ function ActionButton (_ref) {
               width: action.width,
               footer: action.footer
             });
-            return _context.abrupt("break", 31);
+            return _context.abrupt("break", 34);
           case 8:
             if (!(disable || shouldExecuted && !shouldExecuted())) {
               _context.next = 10;
@@ -11481,7 +11614,7 @@ function ActionButton (_ref) {
             return _context.abrupt("return");
           case 10:
             root.contentStore.setSelectedMenuItem(action.id);
-            return _context.abrupt("break", 31);
+            return _context.abrupt("break", 34);
           case 12:
             if (!(disable || shouldExecuted && !shouldExecuted())) {
               _context.next = 14;
@@ -11494,7 +11627,7 @@ function ActionButton (_ref) {
               data: data,
               callback: callback !== null && callback !== void 0 ? callback : function () {}
             });
-            return _context.abrupt("break", 31);
+            return _context.abrupt("break", 34);
           case 16:
             apiInterface = new _default$d({
               apiInterface: action.apiInterface,
@@ -11531,8 +11664,16 @@ function ActionButton (_ref) {
             _context.t1 = _context["catch"](17);
             root.error = action.errorText;
           case 30:
-            return _context.abrupt("break", 31);
+            return _context.abrupt("break", 34);
           case 31:
+            if (!(disable || shouldExecuted && !shouldExecuted())) {
+              _context.next = 33;
+              break;
+            }
+            return _context.abrupt("return");
+          case 33:
+            callback === null || callback === void 0 || callback(data);
+          case 34:
           case "end":
             return _context.stop();
         }
@@ -11544,13 +11685,13 @@ function ActionButton (_ref) {
   }();
   switch (action.actionType) {
     case 'SwitchButton':
-      var lable;
+      var switchLabel;
       var _iterator3 = _createForOfIteratorHelper$h(action.switchLable),
         _step3;
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var element = _step3.value;
-          if (element.sourceValue == data[action.switchField]) lable = element.targetValue;
+          if (element.sourceValue == data[action.switchField]) switchLabel = element.targetValue;
         }
       } catch (err) {
         _iterator3.e(err);
@@ -11561,7 +11702,7 @@ function ActionButton (_ref) {
         disabled: disable,
         style: style,
         onClick: onClick,
-        children: lable
+        children: switchLabel
       }, id);
     case 'Detail':
       return /*#__PURE__*/jsx(ButtonType, {
@@ -11570,7 +11711,7 @@ function ActionButton (_ref) {
         disabled: disable,
         style: style,
         onClick: onClick,
-        children: action.label || defaultLabel
+        children: label || defaultLabel
       }, id);
     case 'GoTo':
       return /*#__PURE__*/jsx(ButtonType, {
@@ -11579,7 +11720,7 @@ function ActionButton (_ref) {
         disabled: disable,
         style: style,
         onClick: onClick,
-        children: action.label || defaultLabel
+        children: label || defaultLabel
       }, id);
     case 'Modal':
       return /*#__PURE__*/jsx(ButtonType, {
@@ -11588,7 +11729,7 @@ function ActionButton (_ref) {
         disabled: disable,
         style: style,
         onClick: onClick,
-        children: action.label || defaultLabel
+        children: label || defaultLabel
       }, id);
     case 'Download':
       var icon = /*#__PURE__*/jsx(FileExcelOutlined, {});
@@ -11610,7 +11751,16 @@ function ActionButton (_ref) {
             action: action
           });
         },
-        children: action.label || icon
+        children: label || icon
+      }, id);
+    case 'Callback':
+      return /*#__PURE__*/jsx(ButtonType, {
+        type: buttonType,
+        danger: danger,
+        disabled: disable,
+        style: style,
+        onClick: onClick,
+        children: label || defaultLabel
       }, id);
     default:
       throw new Error("Action type ".concat(action.actionType, " is not supported"));
@@ -12131,7 +12281,7 @@ var SelectWrapper$1 = function SelectWrapper(_ref) {
   var filterServerSide = _typeof(apiInterface) == 'object' && _typeof(apiInterface.read) == 'object' && apiInterface.read.filterServerSide;
   var selected = state.selected;
   return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(Select$1, {
+    children: /*#__PURE__*/jsx(Select$2, {
       labelInValue: mode === 'tags' ? false : true,
       style: {
         width: '100%',
@@ -12157,7 +12307,7 @@ var SelectWrapper$1 = function SelectWrapper(_ref) {
     })
   });
 };
-var Select = observer(SelectWrapper$1, {
+var Select$1 = observer(SelectWrapper$1, {
   forwardRef: true
 });
 
@@ -12279,7 +12429,7 @@ var FileUploadWrapper = function FileUploadWrapper(_ref) {
           style: {
             marginTop: 18
           },
-          children: /*#__PURE__*/jsx(Select, {
+          children: /*#__PURE__*/jsx(Select$1, {
             mode: "multiple",
             apiInterface: {
               read: {
@@ -12921,7 +13071,7 @@ var Presets = function Presets(_ref) {
     setUsedPreset = _ref.setUsedPreset,
     presets = _ref.presets,
     setPresets = _ref.setPresets;
-  var Option = Select$1.Option;
+  var Option = Select$2.Option;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isModalVisible = _useState2[0],
@@ -13025,7 +13175,7 @@ var Presets = function Presets(_ref) {
     setValue(undefined);
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Select$1, {
+    children: [/*#__PURE__*/jsx(Select$2, {
       showSearch: true,
       value: value,
       placeholder: t('backoffice.form.presets.placeholder'),
@@ -14316,7 +14466,7 @@ var Selector = function Selector(_ref) {
     }
   }, [valueState]);
   return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(Select$1, {
+    children: /*#__PURE__*/jsx(Select$2, {
       className: customSelect,
       showSearch: true,
       labelInValue: true,
@@ -14335,7 +14485,7 @@ var Selector = function Selector(_ref) {
         return onSelect(option === null || option === void 0 ? void 0 : option.key);
       },
       children: items === null || items === void 0 ? void 0 : items.map(function (i) {
-        return /*#__PURE__*/jsxs(Select$1.Option, {
+        return /*#__PURE__*/jsxs(Select$2.Option, {
           value: i.name,
           className: customSelectOption,
           children: [/*#__PURE__*/jsx("div", {
@@ -14429,7 +14579,8 @@ function useSelectSimpleData (_ref) {
   var apiInterface = _ref.apiInterface,
     selectMapping = _ref.selectMapping,
     onChange = _ref.onChange,
-    value = _ref.value;
+    value = _ref.value,
+    configuredOptions = _ref.options;
   var root = useStore();
   var _useMemo = useMemo(function () {
       return {
@@ -14440,23 +14591,18 @@ function useSelectSimpleData (_ref) {
       };
     }, []),
     apiHandler = _useMemo.apiHandler;
-  var _useState = useState(false),
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
-  // used to skip the first render, because antd for some reason sets the value only on the second render
-  var _useState3 = useState(true),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    skipOnRender = _useState4[0],
-    setSkipOnRender = _useState4[1];
-  var _useState5 = useState([]),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
-    options = _useState6[0],
-    setOptions = _useState6[1];
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selected = _useState8[0],
-    setSelected = _useState8[1];
+    selected = _useState6[0],
+    setSelected = _useState6[1];
   var currentValue = useMemo(function () {
     if (!selected) return undefined;
     if (Array.isArray(selected)) return selected.map(function (item) {
@@ -14465,8 +14611,10 @@ function useSelectSimpleData (_ref) {
     return selected.value;
   }, [selected]);
   useEffect(function () {
-    if (skipOnRender) {
-      setSkipOnRender(false);
+    if (configuredOptions) {
+      if (apiHandler.canReadList) LOG$8.warn('If options are provided, apiInterface will not be used');
+      setOptions(configuredOptions);
+      setLoading(false);
       return;
     }
     if (!apiHandler.canReadList) throw Error('SelectSimple: apiInterface must have readList method');
@@ -14478,13 +14626,17 @@ function useSelectSimpleData (_ref) {
         return parseDataEntry(item, selectMapping);
       });
       setOptions(options);
-      if (value) {
-        setSelected(findByValue(value, options, selectMapping));
-      }
     })["finally"](function () {
       setLoading(false);
     });
-  }, [skipOnRender]);
+  }, []);
+  useEffect(function () {
+    // set the selected option only after the options are loaded
+    if (value && options) {
+      LOG$8.debug('value changed', value);
+      setSelected(findByValue(value, options, selectMapping));
+    }
+  }, [value, options]);
   var onSelectionChanged = function onSelectionChanged(value, option) {
     setSelected(option);
     onChange === null || onChange === void 0 || onChange(parseReturnData(option, selectMapping));
@@ -14548,7 +14700,7 @@ function parseReturnData(options, selectMapping) {
   return (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? options.value : options.data;
 }
 
-var _excluded$2 = ["apiInterface", "selectMapping", "onChange", "value", "search"];
+var _excluded$2 = ["apiInterface", "selectMapping", "onChange", "value", "search", "options"];
 function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SelectWrapper = function SelectWrapper(_ref) {
@@ -14557,15 +14709,17 @@ var SelectWrapper = function SelectWrapper(_ref) {
     onChange = _ref.onChange,
     value = _ref.value,
     search = _ref.search,
+    options = _ref.options,
     selectProps = _objectWithoutProperties(_ref, _excluded$2);
   var state = useSelectSimpleData({
     apiInterface: apiInterface,
     selectMapping: selectMapping,
     onChange: onChange,
     value: value,
-    type: 'SelectSimple'
+    type: 'SelectSimple',
+    options: options
   });
-  return /*#__PURE__*/jsx(Select$1, _objectSpread$t(_objectSpread$t({}, selectProps), {}, {
+  return /*#__PURE__*/jsx(Select$2, _objectSpread$t(_objectSpread$t({}, selectProps), {}, {
     showSearch: search,
     loading: state.loading,
     options: state.options,
@@ -14575,7 +14729,7 @@ var SelectWrapper = function SelectWrapper(_ref) {
     filterOption: filterOption
   }));
 };
-var SelectSimple = observer(SelectWrapper, {
+var Select = observer(SelectWrapper, {
   forwardRef: true
 });
 var filterOption = function filterOption(input, option) {
@@ -14764,7 +14918,7 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
     var disabled = (_isReadonly = isReadonly(item, data)) !== null && _isReadonly !== void 0 ? _isReadonly : (_state$hiddenRequired2 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired2 === void 0 ? void 0 : _state$hiddenRequired2.disabled;
     switch (item.type) {
       case 'select':
-        return /*#__PURE__*/jsx(Select, {
+        return /*#__PURE__*/jsx(Select$1, {
           initialValue: item.defaultValue,
           apiInterface: item.apiInterface,
           mode: item.mode,
@@ -14789,7 +14943,7 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
           }
         }, state.selectedItemsIndex);
       case 'selectSimple':
-        return /*#__PURE__*/jsx(SelectSimple, _objectSpread$s(_objectSpread$s({}, item), {}, {
+        return /*#__PURE__*/jsx(Select, _objectSpread$s(_objectSpread$s({}, item), {}, {
           disabled: disabled,
           onChange: function onChange(value) {
             _onChange(item.name, value);
@@ -15898,7 +16052,7 @@ var FormWrapper = function FormWrapper(_ref, ref) {
         span: 4
       }), /*#__PURE__*/jsx(Col, {
         span: 20,
-        children: /*#__PURE__*/jsx(Select$1, {
+        children: /*#__PURE__*/jsx(Select$2, {
           style: {
             width: '100%'
           },
@@ -16609,7 +16763,7 @@ function DropdownCell (_ref) {
       noStyle: true,
       name: dataIndex,
       initialValue: column.translationPrefix ? t(column.translationPrefix + '.' + children[1]) : children,
-      children: /*#__PURE__*/jsx(Select$1, {
+      children: /*#__PURE__*/jsx(Select$2, {
         style: {
           width: column.width - 20
         },
@@ -17592,10 +17746,10 @@ dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
-Select$1.Option;
+Select$2.Option;
 var LOG$4 = getLogger('Backoffice', 'BaseTable');
 var TableWrapper = function TableWrapper(_ref) {
-  var _state$configuration$, _state$configuration$2, _state$configuration$3, _state$configuration$4, _state$configuration$5, _state$configuration$6, _state$globalFilter, _state$globalFilter2, _state$globalFilter3, _state$globalFilter4, _state$configuration$7, _state$configuration$8, _state$globalFilter$s, _state$configuration$9, _state$configuration$10, _state$configuration$11, _state$configuration$12, _state$configuration$13, _state$configuration$14, _state$configuration$15, _state$configuration$18;
+  var _state$configuration$, _state$configuration$2, _state$configuration$3, _state$configuration$4, _state$configuration$5, _state$configuration$6, _state$globalFilter, _state$globalFilter2, _state$globalFilter3, _state$globalFilter4, _state$configuration$7, _state$configuration$8, _state$globalFilter$s, _state$configuration$9, _state$configuration$10, _state$configuration$13;
   var state = _ref.state;
   var root = useStore();
   var _useState = useState(0),
@@ -17673,6 +17827,10 @@ var TableWrapper = function TableWrapper(_ref) {
       rules: state.configuration.downloadAction.rule
     });
   }
+  function checkPermission(permission) {
+    if (!permission) return true;
+    return root.actions.userHasPermission(permission);
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [(state.canDelete || state.configuration.createAction || state.title || state.configuration.canRefresh || state.configuration.clientRelations) && /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsx(Descriptions, {
@@ -17681,8 +17839,11 @@ var TableWrapper = function TableWrapper(_ref) {
             style: {
               "float": 'right'
             },
-            children: [state.configuration.clientRelations && state.configuration.variant !== 'CatalogTable' && /*#__PURE__*/jsx(SelectClientRelationCatalog, {
-              onSelectedCatalog: state.onSelectedCatalog
+            children: [state.configuration.clientRelations && state.configuration.variant !== 'CatalogTable' && /*#__PURE__*/jsx(Fragment, {
+              children: /*#__PURE__*/jsx(SelectClientRelationCatalog, {
+                onSelectedCatalog: state.onSelectedCatalog,
+                dontLoadCatalogData: state.configuration.dontLoadCatalogData
+              })
             }), state.configuration.downloadAction && /*#__PURE__*/jsx(Button, {
               type: "primary",
               disabled: isDownloadActionDisabled(),
@@ -17736,44 +17897,35 @@ var TableWrapper = function TableWrapper(_ref) {
               // Convert to Dayjs
               (_state$globalFilter3 = state.globalFilter) !== null && _state$globalFilter3 !== void 0 && (_state$globalFilter3 = _state$globalFilter3.timeStamp) !== null && _state$globalFilter3 !== void 0 && (_state$globalFilter3 = _state$globalFilter3['toTimeStamp']) !== null && _state$globalFilter3 !== void 0 && _state$globalFilter3[0] ? dayjs((_state$globalFilter4 = state.globalFilter) === null || _state$globalFilter4 === void 0 || (_state$globalFilter4 = _state$globalFilter4.timeStamp) === null || _state$globalFilter4 === void 0 || (_state$globalFilter4 = _state$globalFilter4['toTimeStamp']) === null || _state$globalFilter4 === void 0 ? void 0 : _state$globalFilter4[0]) : dayjs(new Date()) // Convert to Dayjs
               ]
-            }), ((_state$configuration$7 = state.configuration.filter) === null || _state$configuration$7 === void 0 ? void 0 : _state$configuration$7.select) && /*#__PURE__*/jsx(Select, _objectSpread$l(_objectSpread$l({
-              minWidth: "200px"
-            }, (_state$configuration$8 = state.configuration.filter) === null || _state$configuration$8 === void 0 ? void 0 : _state$configuration$8.select), {}, {
-              value: (_state$globalFilter$s = state.globalFilter.select) === null || _state$globalFilter$s === void 0 ? void 0 : _state$globalFilter$s[state.configuration.filter.select.filterField],
-              onChange: function onChange(option, applyDefaultValue, defaultValue) {
-                if (defaultValue != (Array.isArray(option) ? option[0] : option) || applyDefaultValue === true) {
-                  var _value;
-                  state.onGlobalFilterSelect((_value = option.value) !== null && _value !== void 0 ? _value : option);
-                } else {
-                  state.onGlobalFilterSelect('');
-                }
+            }), ((_state$configuration$7 = state.configuration.filter) === null || _state$configuration$7 === void 0 ? void 0 : _state$configuration$7.select) && /*#__PURE__*/jsx(Select, _objectSpread$l(_objectSpread$l({}, (_state$configuration$8 = state.configuration.filter) === null || _state$configuration$8 === void 0 ? void 0 : _state$configuration$8.select.settings), {}, {
+              style: {
+                minWidth: '200px'
               },
-              search: (_state$configuration$9 = (_state$configuration$10 = state.configuration.filter) === null || _state$configuration$10 === void 0 ? void 0 : _state$configuration$10.select.search) !== null && _state$configuration$9 !== void 0 ? _state$configuration$9 : false,
-              mode: "single",
-              options: (_state$configuration$11 = state.configuration.filter) === null || _state$configuration$11 === void 0 ? void 0 : _state$configuration$11.select.options,
-              initialValue: (_state$configuration$12 = state.configuration.filter) === null || _state$configuration$12 === void 0 ? void 0 : _state$configuration$12.select.defaultValue,
-              applyDefaultValue: (_state$configuration$13 = state.configuration.filter) === null || _state$configuration$13 === void 0 ? void 0 : _state$configuration$13.select.applyDefaultValue
+              value: (_state$globalFilter$s = state.globalFilter.select) === null || _state$globalFilter$s === void 0 || (_state$globalFilter$s = _state$globalFilter$s[state.configuration.filter.select.filterField]) === null || _state$globalFilter$s === void 0 ? void 0 : _state$globalFilter$s[0],
+              onChange: function onChange(selected) {
+                state.onGlobalFilterSelect(selected);
+              }
             })), /*#__PURE__*/jsx(SelectionText, {
               selected: state.selected
             }), state.canDelete && /*#__PURE__*/jsx(DeleteButton, {
               selected: state.selected,
               total: state.pagination.total,
-              min: (_state$configuration$14 = state.configuration.rules) === null || _state$configuration$14 === void 0 ? void 0 : _state$configuration$14.min,
+              min: (_state$configuration$9 = state.configuration.rules) === null || _state$configuration$9 === void 0 ? void 0 : _state$configuration$9.min,
               deleting: state.deleting,
               onDelete: state.onDelete
             }), state.configuration.copyAction !== undefined && /*#__PURE__*/jsx(CopyButton, {
               state: state
-            }), (_state$configuration$15 = state.configuration.bulkActions) === null || _state$configuration$15 === void 0 ? void 0 : _state$configuration$15.map(function (action) {
+            }), (_state$configuration$10 = state.configuration.bulkActions) === null || _state$configuration$10 === void 0 ? void 0 : _state$configuration$10.map(function (action) {
               return /*#__PURE__*/jsx(BulkAction, {
                 action: action,
                 state: state
               }, action.id);
-            }), state.configuration.createAction && /*#__PURE__*/jsx(ActionButton, {
+            }), state.configuration.createAction && checkPermission(state.configuration.createAction.permission) && /*#__PURE__*/jsx(ActionButton, {
               action: state.configuration.createAction,
               callback: function callback(data) {
-                var _state$onUpdate, _state$configuration$16, _state$configuration$17;
+                var _state$onUpdate, _state$configuration$11, _state$configuration$12;
                 (_state$onUpdate = state.onUpdate) === null || _state$onUpdate === void 0 || _state$onUpdate.call(state, data);
-                (_state$configuration$16 = state.configuration.createAction) === null || _state$configuration$16 === void 0 || (_state$configuration$17 = _state$configuration$16.callback) === null || _state$configuration$17 === void 0 || _state$configuration$17.call(_state$configuration$16, data);
+                (_state$configuration$11 = state.configuration.createAction) === null || _state$configuration$11 === void 0 || (_state$configuration$12 = _state$configuration$11.callback) === null || _state$configuration$12 === void 0 || _state$configuration$12.call(_state$configuration$11, data);
               },
               type: "Button",
               id: 'create',
@@ -17820,13 +17972,13 @@ var TableWrapper = function TableWrapper(_ref) {
     }), /*#__PURE__*/jsx(Table$1, {
       scroll: {
         x: '100%',
-        y: (_state$configuration$18 = state.configuration.height) !== null && _state$configuration$18 !== void 0 ? _state$configuration$18 : '60vh'
+        y: (_state$configuration$13 = state.configuration.height) !== null && _state$configuration$13 !== void 0 ? _state$configuration$13 : '60vh'
       },
       rowClassName: editableRow,
       components: cellRenderer,
       rowKey: function rowKey(dataRow) {
-        var _state$configuration$19, _state$configuration$20;
-        return goTroughObject(dataRow, (_state$configuration$19 = (_state$configuration$20 = state.configuration.rowKey) === null || _state$configuration$20 === void 0 ? void 0 : _state$configuration$20.split('.')) !== null && _state$configuration$19 !== void 0 ? _state$configuration$19 : ['_id'], 0);
+        var _state$configuration$14, _state$configuration$15;
+        return goTroughObject(dataRow, (_state$configuration$14 = (_state$configuration$15 = state.configuration.rowKey) === null || _state$configuration$15 === void 0 ? void 0 : _state$configuration$15.split('.')) !== null && _state$configuration$14 !== void 0 ? _state$configuration$14 : ['_id'], 0);
       },
       dataSource: data,
       loading: state.loading,
@@ -17900,13 +18052,13 @@ function CopyButton(_ref3) {
   }, root);
   var onCopy = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _state$configuration$21;
+      var _state$configuration$16;
       var copyAction, _iterator3, _step3, selectedRow;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             copyAction = state.configuration.copyAction;
-            if (((_state$configuration$21 = state.configuration.copyAction) === null || _state$configuration$21 === void 0 ? void 0 : _state$configuration$21.apiInterface) != undefined) {
+            if (((_state$configuration$16 = state.configuration.copyAction) === null || _state$configuration$16 === void 0 ? void 0 : _state$configuration$16.apiInterface) != undefined) {
               _iterator3 = _createForOfIteratorHelper$8(state.selected);
               try {
                 for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
@@ -17941,13 +18093,13 @@ function CopyButton(_ref3) {
   }();
   var onCopyAction = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-      var _state$configuration$22, _state$configuration$23;
+      var _state$configuration$17, _state$configuration$18;
       var copyAction, id, filter, data;
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             copyAction = state.configuration.copyAction;
-            if (!(copyAction.id == undefined || copyAction.actionType != 'Detail' || ((_state$configuration$22 = state.configuration.createAction) === null || _state$configuration$22 === void 0 ? void 0 : _state$configuration$22.actionType) != 'Detail')) {
+            if (!(copyAction.id == undefined || copyAction.actionType != 'Detail' || ((_state$configuration$17 = state.configuration.createAction) === null || _state$configuration$17 === void 0 ? void 0 : _state$configuration$17.actionType) != 'Detail')) {
               _context3.next = 3;
               break;
             }
@@ -17977,7 +18129,7 @@ function CopyButton(_ref3) {
               configurationId: copyAction === null || copyAction === void 0 ? void 0 : copyAction.id,
               data: data.data[0],
               type: copyAction === null || copyAction === void 0 ? void 0 : copyAction.type,
-              mapping: (_state$configuration$23 = state.configuration.createAction) === null || _state$configuration$23 === void 0 ? void 0 : _state$configuration$23.mapping,
+              mapping: (_state$configuration$18 = state.configuration.createAction) === null || _state$configuration$18 === void 0 ? void 0 : _state$configuration$18.mapping,
               mappingData: data.data[0],
               callback: function () {
                 var _callback = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
@@ -18395,7 +18547,7 @@ var advancedProps = function advancedProps(title) {
         },
         children: /*#__PURE__*/jsxs(Space, {
           direction: "vertical",
-          children: [/*#__PURE__*/jsxs(Select$1, {
+          children: [/*#__PURE__*/jsxs(Select$2, {
             defaultValue: "contains",
             style: {
               width: 188,
@@ -18404,28 +18556,28 @@ var advancedProps = function advancedProps(title) {
             onSelect: function onSelect(value) {
               setSelectedKeys([selectedKeys[0], value]);
             },
-            children: [/*#__PURE__*/jsx(Select$1.Option, {
+            children: [/*#__PURE__*/jsx(Select$2.Option, {
               value: "eq",
               children: "Ist equivalent zu"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "ne",
               children: "Ist nicht equivalent zu"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "contains",
               children: "Enth\xE4lt"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "doesnotcontain",
               children: "Enth\xE4lt nicht"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "startswith",
               children: "Beginnt mit"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "endswith",
               children: "Endet mit"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "isnull",
               children: "Ist Null"
-            }), /*#__PURE__*/jsx(Select$1.Option, {
+            }), /*#__PURE__*/jsx(Select$2.Option, {
               value: "isnotnull",
               children: "Ist nicht Null"
             })]
@@ -18572,7 +18724,7 @@ var selectProps = function selectProps(title, filter) {
         },
         children: /*#__PURE__*/jsxs(Space, {
           direction: "vertical",
-          children: [/*#__PURE__*/jsx(Select$1, {
+          children: [/*#__PURE__*/jsx(Select$2, {
             placeholder: "Filter ".concat(title),
             value: selectedKeys[0],
             style: {
@@ -19233,7 +19385,7 @@ function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$3 = getLogger('Backoffice', 'TableData');
 function useTableData (_ref) {
-  var _configuration$filter, _configuration$filter2, _configuration$filter3, _configuration$filter4, _configuration$bulkAc, _configuration$apiInt;
+  var _configuration$filter, _configuration$filter2, _configuration$filter3, _configuration$bulkAc, _configuration$apiInt;
   var id = _ref.id,
     i18n = _ref.i18n,
     parentData = _ref.parentData,
@@ -19273,7 +19425,7 @@ function useTableData (_ref) {
     return defaultFilter[f] = [configuration.filter["default"].globalValue ? root.getGlobalValue(configuration.filter["default"].globalValue) : true, 'eq'];
   });
   var _useState9 = useState({
-      select: (_configuration$filter3 = configuration.filter) !== null && _configuration$filter3 !== void 0 && _configuration$filter3.select && ((_configuration$filter4 = configuration.filter) === null || _configuration$filter4 === void 0 ? void 0 : _configuration$filter4.select.applyDefaultValue) !== false ? _defineProperty({}, configuration.filter.select.filterField, [configuration.filter.select.defaultValue, 'eq']) : undefined,
+      select: (_configuration$filter3 = configuration.filter) !== null && _configuration$filter3 !== void 0 && (_configuration$filter3 = _configuration$filter3.select) !== null && _configuration$filter3 !== void 0 && _configuration$filter3.defaultValue ? _defineProperty({}, configuration.filter.select.filterField, [configuration.filter.select.defaultValue, 'eq']) : undefined,
       toggle: toggleConfig !== null && toggleConfig !== void 0 && toggleConfig.defaultChecked && !(toggleConfig !== null && toggleConfig !== void 0 && toggleConfig.inverted) || !(toggleConfig !== null && toggleConfig !== void 0 && toggleConfig.defaultChecked) && toggleConfig !== null && toggleConfig !== void 0 && toggleConfig.inverted ? toggleFilter : undefined,
       "default": defaultFilter ? defaultFilter : undefined
     }),
@@ -19359,8 +19511,8 @@ function useTableData (_ref) {
     for (var i = 0; i < dataArray.length; i++) {
       var dataRow = dataArray[i];
       if (filterServerSide) {
-        var _configuration$filter5;
-        if ((_configuration$filter5 = configuration.filter) !== null && _configuration$filter5 !== void 0 && (_configuration$filter5 = _configuration$filter5.select) !== null && _configuration$filter5 !== void 0 && _configuration$filter5.filterField) {
+        var _configuration$filter4;
+        if ((_configuration$filter4 = configuration.filter) !== null && _configuration$filter4 !== void 0 && (_configuration$filter4 = _configuration$filter4.select) !== null && _configuration$filter4 !== void 0 && _configuration$filter4.filterField) {
           onGlobalFilterSelect(dataRow[configuration.filter.select.filterField]);
         } else {
           var _pagination;
@@ -19376,15 +19528,15 @@ function useTableData (_ref) {
           });
         }
       } else {
-        var _configuration$filter6, _configuration$filter7;
+        var _configuration$filter5, _configuration$filter6;
         var _updateData2 = updateData({
             data: newInitData,
             dataRow: dataRow
           }),
           nextInitData = _updateData2.data;
         var _aplyFilterAndSortati = aplyFilterAndSortation(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, filterData), {}, {
-            filters: _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter6 = configuration.filter) !== null && _configuration$filter6 !== void 0 && (_configuration$filter6 = _configuration$filter6.toggle) !== null && _configuration$filter6 !== void 0 && _configuration$filter6.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"])
-          }, configuration !== null && configuration !== void 0 && (_configuration$filter7 = configuration.filter) !== null && _configuration$filter7 !== void 0 && (_configuration$filter7 = _configuration$filter7.toggle) !== null && _configuration$filter7 !== void 0 && _configuration$filter7.inQuery ? {
+            filters: _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter5 = configuration.filter) !== null && _configuration$filter5 !== void 0 && (_configuration$filter5 = _configuration$filter5.toggle) !== null && _configuration$filter5 !== void 0 && _configuration$filter5.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"])
+          }, configuration !== null && configuration !== void 0 && (_configuration$filter6 = configuration.filter) !== null && _configuration$filter6 !== void 0 && (_configuration$filter6 = _configuration$filter6.toggle) !== null && _configuration$filter6 !== void 0 && _configuration$filter6.inQuery ? {
             genericProps: globalFilter.toggle
           } : undefined), {}, {
             data: nextInitData,
@@ -19471,7 +19623,7 @@ function useTableData (_ref) {
   }, [configuration.title, parentData]);
   var onChange = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(p) {
-      var _configuration$filter8;
+      var _configuration$filter7, _configuration$filter8, _configuration$filter9, _prefilter$select, _configuration$filter10, _configuration$filter11;
       var prefilter,
         refresh,
         currentData,
@@ -19479,7 +19631,7 @@ function useTableData (_ref) {
         currentFilterHash,
         currentPagination,
         currentUrl,
-        _configuration$filter9,
+        _configuration$filter12,
         ssf,
         data,
         _data3,
@@ -19496,7 +19648,7 @@ function useTableData (_ref) {
               loading: true
             }));
             currentData = initData;
-            filterData = _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, p.filters), prefilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter8 = configuration.filter) !== null && _configuration$filter8 !== void 0 && (_configuration$filter8 = _configuration$filter8.toggle) !== null && _configuration$filter8 !== void 0 && _configuration$filter8.inQuery) ? prefilter.toggle : undefined), prefilter.select), prefilter.timeStamp), prefilter["default"]); //remove all null values
+            filterData = _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, p.filters), prefilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter7 = configuration.filter) !== null && _configuration$filter7 !== void 0 && (_configuration$filter7 = _configuration$filter7.toggle) !== null && _configuration$filter7 !== void 0 && _configuration$filter7.inQuery) ? prefilter.toggle : undefined), ((_configuration$filter8 = configuration.filter) === null || _configuration$filter8 === void 0 || (_configuration$filter8 = _configuration$filter8.select) === null || _configuration$filter8 === void 0 ? void 0 : _configuration$filter8.applyDefaultValue) !== false || ((_configuration$filter9 = configuration.filter) === null || _configuration$filter9 === void 0 || (_configuration$filter9 = _configuration$filter9.select) === null || _configuration$filter9 === void 0 ? void 0 : _configuration$filter9.defaultValue) !== ((_prefilter$select = prefilter.select) === null || _prefilter$select === void 0 || (_prefilter$select = _prefilter$select[(_configuration$filter10 = (_configuration$filter11 = configuration.filter) === null || _configuration$filter11 === void 0 || (_configuration$filter11 = _configuration$filter11.select) === null || _configuration$filter11 === void 0 ? void 0 : _configuration$filter11.filterField) !== null && _configuration$filter10 !== void 0 ? _configuration$filter10 : '']) === null || _prefilter$select === void 0 ? void 0 : _prefilter$select[0]) ? prefilter.select : undefined), prefilter.timeStamp), prefilter["default"]); //remove all null values
             filterData = Object.fromEntries(Object.entries(filterData).filter(function (_ref5) {
               var _ref6 = _slicedToArray(_ref5, 2);
                 _ref6[0];
@@ -19517,7 +19669,7 @@ function useTableData (_ref) {
               columns: configuration.columns,
               filters: filterData,
               sorter: p.sorter
-            }, configuration !== null && configuration !== void 0 && (_configuration$filter9 = configuration.filter) !== null && _configuration$filter9 !== void 0 && (_configuration$filter9 = _configuration$filter9.toggle) !== null && _configuration$filter9 !== void 0 && _configuration$filter9.inQuery ? {
+            }, configuration !== null && configuration !== void 0 && (_configuration$filter12 = configuration.filter) !== null && _configuration$filter12 !== void 0 && (_configuration$filter12 = _configuration$filter12.toggle) !== null && _configuration$filter12 !== void 0 && _configuration$filter12.inQuery ? {
               genericProps: prefilter.toggle
             } : undefined);
             _context2.next = 13;
@@ -19583,7 +19735,7 @@ function useTableData (_ref) {
   var onDelete = /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       var _configuration$apiInt2;
-      var newData, newInitData, deleted, userPermissions, _loop, mappingData, deleteResult, _ret, index, total, pages, current, _configuration$filter10, _configuration$filter11, data;
+      var newData, newInitData, deleted, userPermissions, _loop, mappingData, deleteResult, _ret, index, total, pages, current, _configuration$filter13, _configuration$filter14, data;
       return _regeneratorRuntime.wrap(function _callee3$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -19598,7 +19750,7 @@ function useTableData (_ref) {
           case 6:
             userPermissions = _context4.sent;
             _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop(index) {
-              var _configuration$rowKey, _configuration$filter12, _configuration$filter13;
+              var _configuration$rowKey, _configuration$filter15, _configuration$filter16;
               var id, _newData$filter, _newData$filter2, mapToggle, _iterator, _step, _globalFilter$toggle, field, _globalFilter$toggle2, _configuration$delete, _configuration$onErro, _configuration$onErro2, deletedIndex, initDeletedIndex;
               return _regeneratorRuntime.wrap(function _loop$(_context3) {
                 while (1) switch (_context3.prev = _context3.next) {
@@ -19614,7 +19766,7 @@ function useTableData (_ref) {
                       })) === null || _newData$filter2 === void 0 ? void 0 : _newData$filter2[0];
                     }
                     mapToggle = {};
-                    _iterator = _createForOfIteratorHelper$7((_configuration$filter12 = (_configuration$filter13 = configuration.filter) === null || _configuration$filter13 === void 0 || (_configuration$filter13 = _configuration$filter13.toggle) === null || _configuration$filter13 === void 0 ? void 0 : _configuration$filter13.fields) !== null && _configuration$filter12 !== void 0 ? _configuration$filter12 : []);
+                    _iterator = _createForOfIteratorHelper$7((_configuration$filter15 = (_configuration$filter16 = configuration.filter) === null || _configuration$filter16 === void 0 || (_configuration$filter16 = _configuration$filter16.toggle) === null || _configuration$filter16 === void 0 ? void 0 : _configuration$filter16.fields) !== null && _configuration$filter15 !== void 0 ? _configuration$filter15 : []);
                     try {
                       for (_iterator.s(); !(_step = _iterator.n()).done;) {
                         field = _step.value;
@@ -19723,9 +19875,9 @@ function useTableData (_ref) {
                 current: current
               }),
               columns: configuration.columns,
-              filters: _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter10 = configuration.filter) !== null && _configuration$filter10 !== void 0 && (_configuration$filter10 = _configuration$filter10.toggle) !== null && _configuration$filter10 !== void 0 && _configuration$filter10.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"]),
+              filters: _objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g(_objectSpread$g({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter13 = configuration.filter) !== null && _configuration$filter13 !== void 0 && (_configuration$filter13 = _configuration$filter13.toggle) !== null && _configuration$filter13 !== void 0 && _configuration$filter13.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"]),
               sorter: filterData.sorter
-            }, configuration !== null && configuration !== void 0 && (_configuration$filter11 = configuration.filter) !== null && _configuration$filter11 !== void 0 && (_configuration$filter11 = _configuration$filter11.toggle) !== null && _configuration$filter11 !== void 0 && _configuration$filter11.inQuery ? {
+            }, configuration !== null && configuration !== void 0 && (_configuration$filter14 = configuration.filter) !== null && _configuration$filter14 !== void 0 && (_configuration$filter14 = _configuration$filter14.toggle) !== null && _configuration$filter14 !== void 0 && _configuration$filter14.inQuery ? {
               genericProps: globalFilter.toggle
             } : undefined));
           case 25:
@@ -19754,13 +19906,13 @@ function useTableData (_ref) {
     };
   }();
   var onGlobalFilterSelect = function onGlobalFilterSelect(value) {
-    var _configuration$filter14;
-    if (!((_configuration$filter14 = configuration.filter) !== null && _configuration$filter14 !== void 0 && _configuration$filter14.select)) {
+    var _configuration$filter17;
+    if (!((_configuration$filter17 = configuration.filter) !== null && _configuration$filter17 !== void 0 && _configuration$filter17.select)) {
       LOG$3.error('No global select filter defiend');
       return;
     }
     var newGlobalFilter = _objectSpread$g({}, globalFilter);
-    if (value != '') {
+    if (value !== null && value !== void 0 && value.length) {
       newGlobalFilter.select = _defineProperty({}, configuration.filter.select.filterField, Array.isArray(value) ? value : [value]);
     } else {
       newGlobalFilter.select = {};
@@ -19771,8 +19923,8 @@ function useTableData (_ref) {
     }, filterData), newGlobalFilter);
   };
   var onGlobalFilterToggle = function onGlobalFilterToggle() {
-    var _configuration$filter15;
-    if (!((_configuration$filter15 = configuration.filter) !== null && _configuration$filter15 !== void 0 && _configuration$filter15.toggle)) {
+    var _configuration$filter18;
+    if (!((_configuration$filter18 = configuration.filter) !== null && _configuration$filter18 !== void 0 && _configuration$filter18.toggle)) {
       LOG$3.error('No global toggle filter defiend');
       return;
     }
@@ -19789,8 +19941,8 @@ function useTableData (_ref) {
     }, filterData), newGlobalFilter);
   };
   var onGlobalFilterSearch = function onGlobalFilterSearch(value) {
-    var _configuration$filter16;
-    if (!((_configuration$filter16 = configuration.filter) !== null && _configuration$filter16 !== void 0 && _configuration$filter16.search)) {
+    var _configuration$filter19;
+    if (!((_configuration$filter19 = configuration.filter) !== null && _configuration$filter19 !== void 0 && _configuration$filter19.search)) {
       LOG$3.error('No global search filter defiend');
       return;
     }
@@ -19798,8 +19950,8 @@ function useTableData (_ref) {
       search: {}
     });
     if (value) {
-      var _configuration$filter17;
-      (_configuration$filter17 = configuration.filter) === null || _configuration$filter17 === void 0 || _configuration$filter17.search.fields.forEach(function (f) {
+      var _configuration$filter20;
+      (_configuration$filter20 = configuration.filter) === null || _configuration$filter20 === void 0 || _configuration$filter20.search.fields.forEach(function (f) {
         if (typeof f == 'string') {
           newGlobalFilter.search[f] = [value, 'contains', 0];
         } else {
@@ -19813,8 +19965,8 @@ function useTableData (_ref) {
     }, filterData), newGlobalFilter);
   };
   var onGlobalFilterPeriod = function onGlobalFilterPeriod(from, to) {
-    var _configuration$filter18;
-    if (!((_configuration$filter18 = configuration.filter) !== null && _configuration$filter18 !== void 0 && _configuration$filter18.period)) {
+    var _configuration$filter21;
+    if (!((_configuration$filter21 = configuration.filter) !== null && _configuration$filter21 !== void 0 && _configuration$filter21.period)) {
       LOG$3.error('No global period filter defiend');
       return;
     }
@@ -20648,7 +20800,7 @@ var FilterBox = /*#__PURE__*/memo(function (_ref) {
         return /*#__PURE__*/jsxs("div", {
           children: [/*#__PURE__*/jsx(Typography.Text, {
             children: filter.title
-          }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(Select, {
+          }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(Select$1, {
             mode: "single",
             apiInterface: filter.requestOptions,
             wholeData: _objectSpread$a(_objectSpread$a({}, state.filter), {}, {
@@ -21089,7 +21241,7 @@ function getColorClass(data) {
   }
 }
 var OrgItem = function OrgItem(_ref) {
-  var _data$description, _itemChain, _itemChain2, _data$children;
+  var _data$description, _itemChain, _itemChain2, _data$children, _itemChain3, _configuration$additi;
   var data = _ref.data,
     itemChain = _ref.itemChain,
     configuration = _ref.configuration,
@@ -21120,7 +21272,7 @@ var OrgItem = function OrgItem(_ref) {
     }), /*#__PURE__*/jsx("div", {
       className: description$1,
       children: (_data$description = data.description) !== null && _data$description !== void 0 ? _data$description : ''
-    }), configuration.createAction && data.writePermission && !data.isNav && ((_itemChain = itemChain[itemChain.length - 1]) === null || _itemChain === void 0 ? void 0 : _itemChain.id) == data.id && /*#__PURE__*/jsx(ActionButton, {
+    }), configuration.createAction && data.writePermission && ((_itemChain = itemChain[itemChain.length - 1]) === null || _itemChain === void 0 ? void 0 : _itemChain.id) == data.id && /*#__PURE__*/jsx(ActionButton, {
       action: configuration.createAction,
       type: "Button",
       buttonType: "primary",
@@ -21136,7 +21288,7 @@ var OrgItem = function OrgItem(_ref) {
         setUpdate(update + 1);
         (_configuration$create = configuration.createAction) === null || _configuration$create === void 0 || (_configuration$create2 = _configuration$create.callback) === null || _configuration$create2 === void 0 || _configuration$create2.call(_configuration$create, data);
       }
-    }, "create"), configuration.deleteAction && data.deletePermission && !data.isNav && ((_itemChain2 = itemChain[itemChain.length - 1]) === null || _itemChain2 === void 0 ? void 0 : _itemChain2.id) == data.id && !((_data$children = data.children) !== null && _data$children !== void 0 && _data$children.length) && /*#__PURE__*/jsx(ActionButton, {
+    }, "create"), configuration.deleteAction && data.deletePermission && ((_itemChain2 = itemChain[itemChain.length - 1]) === null || _itemChain2 === void 0 ? void 0 : _itemChain2.id) == data.id && !((_data$children = data.children) !== null && _data$children !== void 0 && _data$children.length) && /*#__PURE__*/jsx(ActionButton, {
       action: configuration.deleteAction,
       type: "Button",
       buttonType: "primary",
@@ -21154,7 +21306,23 @@ var OrgItem = function OrgItem(_ref) {
           setUpdate(update + 1);
         });
       }
-    }, "delete")]
+    }, "delete"), ((_itemChain3 = itemChain[itemChain.length - 1]) === null || _itemChain3 === void 0 ? void 0 : _itemChain3.id) == data.id && root.dataStore.organizationId !== data.id && ((_configuration$additi = configuration.additionalActions) === null || _configuration$additi === void 0 ? void 0 : _configuration$additi.map(function (action, i) {
+      var _action$id;
+      return /*#__PURE__*/jsx(ActionButton, {
+        action: action,
+        type: "Button",
+        buttonType: "default",
+        id: (_action$id = action.id) !== null && _action$id !== void 0 ? _action$id : i.toString(),
+        mappingData: data,
+        defaultLabel: "",
+        data: data,
+        callback: function callback() {
+          var _action$callback;
+          setUpdate(update + 1);
+          action === null || action === void 0 || (_action$callback = action.callback) === null || _action$callback === void 0 || _action$callback.call(action, data);
+        }
+      }, action.id);
+    }))]
   }, data.id);
 };
 var OrgItem$1 = observer(OrgItem);
@@ -21287,7 +21455,7 @@ var openClass = "open-class--gGXs";
 var breadcrumb = "breadcrumb-Z0VvH";
 var selected = "selected-w-sfW";
 var disabled = "disabled-0nado";
-var css_248z$6 = ".trigger-wrapper-OkPRc {\n  width: 100%;\n  padding: 12px 0px;\n  display: flex;\n  gap: 32px;\n}\n\n.arrow-Rd0hp {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.open-class--gGXs {\n  transform: rotateZ(90deg);\n}\n\n.breadcrumb-Z0VvH {\n  transition: color 0.3s;\n}\n.breadcrumb-Z0VvH:hover:not(.selected-w-sfW) {\n  cursor: pointer;\n  color: #000;\n}\n\n.selected-w-sfW {\n  color: #000;\n  font-weight: 400;\n}\n\n.selected-w-sfW {\n  color: #000;\n  font-weight: 400;\n}\n\n.disabled-0nado {\n  pointer-events: none;\n  color: lightgray;\n}\n\n.darkmode .selected-w-sfW {\n  color: #fff;\n  font-weight: 400;\n}\n";
+var css_248z$6 = ".trigger-wrapper-OkPRc {\n  width: 100%;\n  padding: 12px 0px;\n  display: flex;\n  gap: 32px;\n}\n\n.arrow-Rd0hp {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n  cursor: pointer;\n}\n\n.open-class--gGXs {\n  transform: rotateZ(90deg);\n}\n\n.breadcrumb-Z0VvH {\n  transition: color 0.3s;\n}\n.breadcrumb-Z0VvH:hover:not(.selected-w-sfW) {\n  cursor: pointer;\n  color: #000;\n}\n\n.selected-w-sfW {\n  color: #000;\n  font-weight: 400;\n}\n\n.selected-w-sfW {\n  color: #000;\n  font-weight: 400;\n}\n\n.disabled-0nado {\n  pointer-events: none;\n  color: lightgray;\n}\n\n.darkmode .selected-w-sfW {\n  color: #fff;\n  font-weight: 400;\n}\n";
 styleInject(css_248z$6);
 
 var BreadCrumbsTrigger = function BreadCrumbsTrigger(_ref) {
@@ -21373,33 +21541,103 @@ var Legend = function Legend(props) {
 };
 
 var buttonsWrapper = "buttons-wrapper-Bubkr";
-var css_248z$4 = ".buttons-wrapper-Bubkr {\n  display: flex;\n  gap: 6px;\n}\n\n.buttons-wrapper-Bubkr button {\n  min-width: 24px;\n}\n";
+var mask = "mask-ssagp";
+var transformWrapper = "transform-wrapper--8t0v";
+var css_248z$4 = ".buttons-wrapper-Bubkr {\n  display: flex;\n  gap: 6px;\n}\n\n.buttons-wrapper-Bubkr button {\n  min-width: 24px;\n}\n\n.mask-ssagp {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.45);\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  -webkit-backdrop-filter: blur(3px);\n          backdrop-filter: blur(3px);\n}\n.mask-ssagp p {\n  font-size: 18px;\n  font-weight: bold;\n  background: rgba(255, 255, 255, 0.4);\n  padding: 10px;\n  border-radius: 5px;\n}\n\n.transform-wrapper--8t0v .ant-modal-mask,\n.transform-wrapper--8t0v .ant-modal-wrap {\n  position: absolute;\n}\n";
 styleInject(css_248z$4);
 
 var ZoomWrapper = function ZoomWrapper(_ref) {
   var _children = _ref.children,
-    zoomToId = _ref.zoomToId;
+    zoomToId = _ref.zoomToId,
+    onInitialized = _ref.onInitialized;
   var transformComponentRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isInit = _useState2[0],
     setIsInit = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isGrapping = _useState4[0],
+    setIsGrapping = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isZooming = _useState6[0],
+    setIsZooming = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showModal = _useState8[0],
+    setShowModal = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    focused = _useState10[0],
+    setFocused = _useState10[1];
+  var _useTranslation = useTranslation$1(),
+    t = _useTranslation.t;
+  var zoomToImage = useCallback(function (id) {
+    if (transformComponentRef.current) {
+      var zoomToElement = transformComponentRef.current.zoomToElement;
+      zoomToElement(id, 1, 700, 'easeOut');
+    }
+  }, []);
   useEffect(function () {
     if (!zoomToId) return;
     if (isInit) {
       setIsInit(false);
       setTimeout(function () {
         zoomToImage(zoomToId);
+        onInitialized();
       }, 300);
     }
     zoomToImage(zoomToId);
   }, [zoomToId]);
-  var zoomToImage = function zoomToImage(id) {
-    if (transformComponentRef.current) {
-      var zoomToElement = transformComponentRef.current.zoomToElement;
-      zoomToElement(id, 1, 700, 'easeOut');
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === 'Shift') {
+      setIsZooming(true);
     }
-  };
+  }, []);
+  var onKeyUp = useCallback(function (e) {
+    if (e.key === 'Shift') {
+      setIsZooming(false);
+    }
+  }, []);
+  var wheelEventTimout;
+  var onScrolling = useCallback(function () {
+    if (!isZooming) {
+      clearTimeout(wheelEventTimout);
+      setShowModal(true);
+      wheelEventTimout = setTimeout(function () {
+        setShowModal(false);
+      }, 2000);
+    }
+  }, [isZooming]);
+  var onMouseEnter = useCallback(function () {
+    setFocused(true);
+  }, [onScrolling]);
+  var onMouseLeave = useCallback(function () {
+    setFocused(false);
+  }, [onScrolling]);
+  var onMouseDown = useCallback(function () {
+    setIsGrapping(true);
+  }, []);
+  var onMouseUp = useCallback(function () {
+    setIsGrapping(false);
+  }, []);
+  useEffect(function () {
+    if (focused) {
+      window.addEventListener('keydown', onKeyDown);
+      window.addEventListener('keyup', onKeyUp);
+      window.addEventListener('wheel', onScrolling);
+    } else {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('wheel', onScrolling);
+    }
+    return function () {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('wheel', onScrolling);
+    };
+  }, [onScrolling, focused]);
   return /*#__PURE__*/jsx(TransformWrapper, {
     ref: transformComponentRef,
     pinch: {
@@ -21409,7 +21647,8 @@ var ZoomWrapper = function ZoomWrapper(_ref) {
     minScale: 0.2,
     wheel: {
       smoothStep: 0.001,
-      step: 0.2
+      step: 0.2,
+      activationKeys: ['Shift']
     },
     children: function children(_ref2) {
       var zoomIn = _ref2.zoomIn,
@@ -21445,11 +21684,26 @@ var ZoomWrapper = function ZoomWrapper(_ref) {
             }),
             size: 'small'
           })]
+        }), showModal && /*#__PURE__*/jsx("div", {
+          className: mask,
+          children: /*#__PURE__*/jsx("p", {
+            children: t('backoffice.orgtree.zoomwrapper.zoominfo')
+          })
         }), /*#__PURE__*/jsx(TransformComponent, {
           wrapperStyle: {
-            width: '100%'
+            width: '100%',
+            cursor: isZooming ? 'nesw-resize' : isGrapping ? 'grabbing' : 'grab'
+          },
+          wrapperProps: {
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            onMouseDown: onMouseDown,
+            onMouseUp: onMouseUp
           },
-          children: _children
+          wrapperClass: transformWrapper,
+          children: /*#__PURE__*/jsx(Fragment, {
+            children: _children
+          })
         })]
       });
     }
@@ -21465,7 +21719,7 @@ var SearchSelect = function SearchSelect(_ref) {
     var _root$dataStore;
     root === null || root === void 0 || (_root$dataStore = root.dataStore) === null || _root$dataStore === void 0 || _root$dataStore.setSelectedOrganizationId(value);
   };
-  return /*#__PURE__*/jsx(Select$1, {
+  return /*#__PURE__*/jsx(Select$2, {
     showSearch: true,
     placeholder: t('filter.global'),
     allowClear: true,
@@ -21507,12 +21761,13 @@ var OrgTreeComponent = function OrgTreeComponent(_ref) {
       breadcrumbs: itemChain,
       open: open
     }),
-    onOpen: function onOpen() {
+    onTriggerOpening: function onTriggerOpening() {
       return setOpen(true);
     },
-    onClose: function onClose() {
+    onTriggerClosing: function onTriggerClosing() {
       return setOpen(false);
     },
+    open: open,
     children: [/*#__PURE__*/jsxs("div", {
       className: toolbarLeft,
       children: [/*#__PURE__*/jsx(SearchSelect, {
@@ -21530,6 +21785,9 @@ var OrgTreeComponent = function OrgTreeComponent(_ref) {
       })]
     }), /*#__PURE__*/jsx(ZoomWrapper, {
       zoomToId: zoomToId,
+      onInitialized: function onInitialized() {
+        return setOpen(true);
+      },
       children: /*#__PURE__*/jsx(OrgTree, {
         data: data,
         horizontal: !!configuration.horizontal,
@@ -23981,7 +24239,7 @@ var DropDown = function DropDown(_ref) {
   }, item.item._id);
 };
 
-var Option = Select$1.Option;
+var Option = Select$2.Option;
 var RelationSelector = function RelationSelector(_ref, ref) {
   var _relationState$config, _relationState$config2, _relationState$config3, _searchPlaceholder;
   var id = _ref.id,
@@ -24007,7 +24265,7 @@ var RelationSelector = function RelationSelector(_ref, ref) {
     relationState.searchItems('');
   }, []);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [relationState.configuration.search != undefined && (((_relationState$config = relationState.configuration.filter) === null || _relationState$config === void 0 ? void 0 : _relationState$config.type) === 'default' ? /*#__PURE__*/jsxs(Select$1, {
+    children: [relationState.configuration.search != undefined && (((_relationState$config = relationState.configuration.filter) === null || _relationState$config === void 0 ? void 0 : _relationState$config.type) === 'default' ? /*#__PURE__*/jsxs(Select$2, {
       className: select,
       showSearch: true,
       suffixIcon: /*#__PURE__*/jsx(PlusSquareOutlined, {}),