From 32a4e4c22e2ab75ffa57c6c9efe788d1e8c276a3 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Tue, 24 Sep 2024 21:09:00 +0300
Subject: [PATCH 01/10] refactor: users refactor to compositions api in
 progress [WTEL-3392]

---
 package-lock.json                             | 828 +++++++++++++++++-
 package.json                                  |   4 +-
 src/app/components/app.vue                    |  27 +-
 src/app/css/main.scss                         |  26 +
 src/app/locale/i18n.js                        |  11 +-
 .../accessControlMixin/useAccessControl.js    |  33 +
 .../useCachedItemInstanceName.js              |  33 +
 src/app/store/store.js                        |  14 +-
 src/main.js                                   |   1 +
 .../_shared/object-wrap/the-object-wrap.vue   |  27 +-
 .../license/store/_internals/headers.js       |   2 +-
 .../users/components/opened-user-devices.vue  |  66 +-
 .../users/components/opened-user-general.vue  |  67 +-
 .../users/components/opened-user-license.vue  |  61 +-
 .../users/components/opened-user-roles.vue    |  39 +-
 .../components/opened-user-variables.vue      |  45 +-
 .../modules/users/components/opened-user.vue  | 307 ++++---
 .../modules/users/components/the-users.vue    | 248 +++---
 .../modules/filters/store/filters.store.js    |  20 +
 .../logs/components/opened-user-logs.vue      | 206 +++--
 .../components/opened-user-logs-filters.vue   |  44 +-
 .../logs/modules/filters/store/filters.js     |  97 +-
 .../modules/users/modules/logs/store/logs.js  |  45 +-
 .../opened-user-token-created-popup.vue       |  86 --
 .../components/opened-user-token-popup.vue    | 141 ++-
 .../tokens/components/opened-user-token.vue   | 238 ++---
 .../modules/filters/store/filters.store.js    |  19 +
 .../users/modules/tokens/store/usersTokens.js |  71 +-
 .../modules/users/store/_internals/headers.js |   4 +-
 .../directory/modules/users/store/users.js    | 120 ++-
 vite.config.js                                |   9 +-
 31 files changed, 2076 insertions(+), 863 deletions(-)
 create mode 100644 src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
 create mode 100644 src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js
 create mode 100644 src/modules/directory/modules/users/modules/filters/store/filters.store.js
 delete mode 100644 src/modules/directory/modules/users/modules/tokens/components/opened-user-token-created-popup.vue
 create mode 100644 src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js

diff --git a/package-lock.json b/package-lock.json
index 40762b023..1fa7d5c1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,13 @@
       "name": "web-client",
       "version": "24.08.0",
       "dependencies": {
+        "@morev/vue-transitions": "^3.0.2",
         "@vue/compat": "^3.5.1",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.5",
+        "@webitel/ui-sdk": "^24.10.22",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -47,6 +48,7 @@
         "vite": "5.4.3",
         "vite-plugin-node-polyfills": "^0.22.0",
         "vite-plugin-svg-sprite": "^0.5.2",
+        "vite-plugin-vue-devtools": "^7.4.5",
         "vitest": "^2.0.5",
         "vue-color": "^2.8.1"
       }
@@ -64,6 +66,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -122,11 +133,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.25.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
-      "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
+      "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
       "dependencies": {
-        "@babel/types": "^7.25.4",
+        "@babel/types": "^7.25.6",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
@@ -135,6 +146,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
+      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
@@ -171,6 +194,49 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
+      "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/traverse": "^7.25.4",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
+      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
@@ -200,6 +266,44 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
+      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
+      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
@@ -212,6 +316,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
+      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
@@ -270,11 +387,11 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
-      "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
       "dependencies": {
-        "@babel/types": "^7.25.4"
+        "@babel/types": "^7.25.6"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -283,6 +400,114 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.24.7.tgz",
+      "integrity": "sha512-RL9GR0pUG5Kc8BUWLNDm2T5OpYwSX15r98I0IkgmRQTXuELq/OynH8xtMTMvTJFjXbMWFVTKtYkTaYQsuAwQlQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-decorators": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.24.7.tgz",
+      "integrity": "sha512-Ui4uLJJrRV1lb38zg1yYTmRKmiZLiftDEvZN2iq3kd9kUFU+PttmzTbAFC2ucRk/XJmtek6G23gPsuZbhrT8fQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.6.tgz",
+      "integrity": "sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
+      "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.4.tgz",
+      "integrity": "sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.2.tgz",
+      "integrity": "sha512-lBwRvjSmqiMYe/pS0+1gggjJleUJi7NzjvQ1Fkqtt69hBa/0t1YuW/MLQMAPixfwaQOHUXsd6jeU3Z+vdGv3+A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-syntax-typescript": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.25.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
@@ -316,15 +541,15 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
-      "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
+      "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.4",
-        "@babel/parser": "^7.25.4",
+        "@babel/generator": "^7.25.6",
+        "@babel/parser": "^7.25.6",
         "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.4",
+        "@babel/types": "^7.25.6",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -333,9 +558,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
-      "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -1193,6 +1418,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-inject": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
@@ -1647,6 +1878,110 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz",
+      "integrity": "sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.5.tgz",
+      "integrity": "sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/plugin-syntax-jsx": "^7.24.7",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.6",
+        "@babel/types": "^7.25.6",
+        "@vue/babel-helper-vue-transform-on": "1.2.5",
+        "@vue/babel-plugin-resolve-type": "1.2.5",
+        "html-tags": "^3.3.1",
+        "svg-tags": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.5.tgz",
+      "integrity": "sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/parser": "^7.25.6",
+        "@vue/compiler-sfc": "^3.5.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@vue/compiler-core": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.6.tgz",
+      "integrity": "sha512-r+gNu6K4lrvaQLQGmf+1gc41p3FO2OUJyWmNqaIITaJU6YFiV5PtQSFZt8jfztYyARwqhoCayjprC7KMvT3nRA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.6",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@vue/compiler-dom": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.6.tgz",
+      "integrity": "sha512-xRXqxDrIqK8v8sSScpistyYH0qYqxakpsIvqMD2e5sV/PXQ1mTwtXp4k42yHK06KXxKSmitop9e45Ui/3BrTEw==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.6",
+        "@vue/shared": "3.5.6"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@vue/compiler-sfc": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.6.tgz",
+      "integrity": "sha512-pjWJ8Kj9TDHlbF5LywjVso+BIxCY5wVOLhkEXRhuCHDxPFIeX1zaFefKs8RYoHvkSMqRWt93a0f2gNJVJixHwg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.6",
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/compiler-ssr": "3.5.6",
+        "@vue/shared": "3.5.6",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@vue/compiler-ssr": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.6.tgz",
+      "integrity": "sha512-VpWbaZrEOCqnmqjE83xdwegtr5qO/2OPUC6veWgvNqTJ3bYysz6vY3VqMuOijubuUYPRpG3OOKIh9TD0Stxb9A==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/shared": "3.5.6"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@vue/shared": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.6.tgz",
+      "integrity": "sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA==",
+      "dev": true
+    },
     "node_modules/@vue/compat": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.5.1.tgz",
@@ -1712,6 +2047,47 @@
       "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-core": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.4.5.tgz",
+      "integrity": "sha512-QwrgKYxwafJUJrKRvJGbzQLuGt0BC1P4qTr4qlEKgOOs+GV0n6zTry2oeHiwmj5H6pOkLoHnwFMOTB9rFtn9QQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-kit": "^7.4.5",
+        "@vue/devtools-shared": "^7.4.5",
+        "mitt": "^3.0.1",
+        "nanoid": "^3.3.4",
+        "pathe": "^1.1.2",
+        "vite-hot-client": "^0.2.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.4.5.tgz",
+      "integrity": "sha512-Uuki4Z6Bc/ExvtlPkeDNGSAe4580R+HPcVABfTE9TF7BTz3Nntk7vxIRUyWblZkUEcB/x+wn2uofyt5i2LaUew==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-shared": "^7.4.5",
+        "birpc": "^0.2.17",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.4.5.tgz",
+      "integrity": "sha512-2XgUOkL/7QDmyYI9J7cm+rz/qBhcGv+W5+i1fhwdQ0HQ1RowhdK66F0QBuJSz/5k12opJY8eN6m03/XZMs7imQ==",
+      "dev": true,
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.1.tgz",
@@ -2131,9 +2507,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.5",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.5.tgz",
-      "integrity": "sha512-T6RKu3rWmFRHQfTlb+l33PEUUG8KYCIo7P8rCKh1mStD5e0muRRe3Qf94o8Hgkhlq8EZduiKAHBm5q2p2Jna3A==",
+      "version": "24.10.22",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.22.tgz",
+      "integrity": "sha512-zNXlP/STPYnsthtbQe/jTOO1JLkOqXGlgv3RN4y1HdzOhhwd/l+4NYHus7xv8FU3J+L92MHd9rOISDfxGqBGUg==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
@@ -2597,6 +2973,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/birpc": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.17.tgz",
+      "integrity": "sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -2831,6 +3216,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/c12": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
@@ -3275,6 +3675,21 @@
       "integrity": "sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==",
       "license": "MIT"
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -3731,6 +4146,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/default-browser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz",
+      "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==",
+      "dev": true,
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.0.tgz",
+      "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3748,6 +4191,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -4024,6 +4479,15 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-stack-parser-es": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.5.tgz",
+      "integrity": "sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -4587,6 +5051,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -4858,6 +5336,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
     "node_modules/graphlib": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
@@ -5137,6 +5621,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -5449,6 +5945,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -5506,6 +6017,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -5750,6 +6279,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -5760,6 +6301,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
+      "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+      "dev": true,
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -5988,6 +6544,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jssip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jssip/-/jssip-3.10.1.tgz",
@@ -6042,6 +6610,12 @@
       "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.1.0.tgz",
       "integrity": "sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw=="
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -6484,6 +7058,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -6959,6 +7542,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
+      "integrity": "sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==",
+      "dev": true,
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
@@ -7178,10 +7779,9 @@
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "license": "ISC"
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7250,9 +7850,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.45",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -7269,8 +7869,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -7690,6 +8290,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true
+    },
     "node_modules/ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -7736,6 +8342,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-applescript": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.0.0.tgz",
+      "integrity": "sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7986,6 +8604,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/slash": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
@@ -8138,10 +8770,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "license": "BSD-3-Clause",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8169,6 +8800,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -8586,6 +9226,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.1.tgz",
+      "integrity": "sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8897,6 +9549,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "node_modules/svgo": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
@@ -9153,6 +9811,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/traverse": {
       "version": "0.6.9",
       "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.9.tgz",
@@ -9418,6 +10085,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unplugin": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.12.2.tgz",
@@ -9673,6 +10349,18 @@
         }
       }
     },
+    "node_modules/vite-hot-client": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-0.2.3.tgz",
+      "integrity": "sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      }
+    },
     "node_modules/vite-node": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
@@ -9695,6 +10383,37 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-plugin-inspect": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.7.tgz",
+      "integrity": "sha512-/XXou3MVc13A5O9/2Nd6xczjrUwt7ZyI9h8pTnUMkr5SshLcb0PJUOVq2V+XVkdeU4njsqAtmK87THZuO2coGA==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.0",
+        "debug": "^4.3.6",
+        "error-stack-parser-es": "^0.1.5",
+        "fs-extra": "^11.2.0",
+        "open": "^10.1.0",
+        "perfect-debounce": "^1.0.0",
+        "picocolors": "^1.0.1",
+        "sirv": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite-plugin-node-polyfills": {
       "version": "0.22.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.22.0.tgz",
@@ -9727,6 +10446,47 @@
         "vite": "^2 || ^3 || ^4 || ^5"
       }
     },
+    "node_modules/vite-plugin-vue-devtools": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.4.5.tgz",
+      "integrity": "sha512-8D9Dv7uw620r96uI45M7hCyfsBA9KwttdmxA/DAd0/1KpuGmrFEhNwo4ob/sjaou1noAeK2TrnKdW+sFMR6aKQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-core": "^7.4.5",
+        "@vue/devtools-kit": "^7.4.5",
+        "@vue/devtools-shared": "^7.4.5",
+        "execa": "^8.0.1",
+        "sirv": "^2.0.4",
+        "vite-plugin-inspect": "^0.8.7",
+        "vite-plugin-vue-inspector": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=v14.21.3"
+      },
+      "peerDependencies": {
+        "vite": "^3.1.0 || ^4.0.0-0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.2.0.tgz",
+      "integrity": "sha512-wWxyb9XAtaIvV/Lr7cqB1HIzmHZFVUJsTNm3yAxkS87dgh/Ky4qr2wDEWNxF23fdhVa3jQ8MZREpr4XyiuaRqA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.0",
+        "@babel/plugin-proposal-decorators": "^7.23.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.22.15",
+        "@vue/babel-plugin-jsx": "^1.1.5",
+        "@vue/compiler-dom": "^3.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.4"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0"
+      }
+    },
     "node_modules/vitest": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
diff --git a/package.json b/package.json
index d41b04393..f983cc71d 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,13 @@
   },
   "type": "module",
   "dependencies": {
+    "@morev/vue-transitions": "^3.0.2",
     "@vue/compat": "^3.5.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.5",
+    "@webitel/ui-sdk": "^24.10.22",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
@@ -53,6 +54,7 @@
     "vite": "5.4.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svg-sprite": "^0.5.2",
+    "vite-plugin-vue-devtools": "^7.4.5",
     "vitest": "^2.0.5",
     "vue-color": "^2.8.1"
   }
diff --git a/src/app/components/app.vue b/src/app/components/app.vue
index 1c6c280f2..96a675fa9 100755
--- a/src/app/components/app.vue
+++ b/src/app/components/app.vue
@@ -1,21 +1,20 @@
 <template>
   <!--  :class="$i18n.locale" root element class to control fonts on each locale  -->
-  <router-view :class="$i18n.locale" />
+  <router-view :class="locale" />
 </template>
 
-<script>
-export default {
-  name: 'App',
-  created() {
-    this.setLanguage();
-  },
-  methods: {
-    setLanguage() {
-      const lang = localStorage.getItem('lang');
-      if (lang) this.$i18n.locale = lang;
-    },
-  },
-};
+<script setup>
+import { computed, provide } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+
+provide('darkMode', darkMode);
+
+const { locale } = useI18n();
 </script>
 
 <style>
diff --git a/src/app/css/main.scss b/src/app/css/main.scss
index e8636553b..3e07271d8 100644
--- a/src/app/css/main.scss
+++ b/src/app/css/main.scss
@@ -115,3 +115,29 @@ $srollbar-border-radius: 4px;
 .value-pair-wrap {
   position: relative;
 }
+
+.wt-page-wrapper__main {
+  min-height: 0;
+
+  .table-wrapper {
+    min-height: 0;
+    gap: var(--spacing-sm);
+
+    .wt-table__head {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .wt-pagination {
+      margin-top: auto;
+    }
+  }
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
diff --git a/src/app/locale/i18n.js b/src/app/locale/i18n.js
index 23132273e..804ae8fd7 100644
--- a/src/app/locale/i18n.js
+++ b/src/app/locale/i18n.js
@@ -1,8 +1,8 @@
 import { createI18n } from 'vue-i18n';
-import en from './en/en';
-import kz from './kz/kz';
-import ru from './ru/ru';
-import ua from './ua/ua';
+import en from './en/en.js';
+import kz from './kz/kz.js';
+import ru from './ru/ru.js';
+import ua from './ua/ua.js';
 
 const messages = {
   en,
@@ -12,7 +12,8 @@ const messages = {
 };
 
 export default new createI18n({
-  locale: 'en',
+  // legacy: false,
+  locale: localStorage.getItem('lang'),
   fallbackLocale: 'en',
   allowComposition: true,
   messages,
diff --git a/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js b/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
new file mode 100644
index 000000000..3c1988123
--- /dev/null
+++ b/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useAccessControl = () => {
+  const store = useStore();
+  const route = useRoute();
+
+  const hasReadAccess = computed(() => store.getters['userinfo/HAS_READ_ACCESS']({ route }));
+  const hasCreateAccess = computed(() => store.getters['userinfo/HAS_CREATE_ACCESS']({ route }));
+  const hasEditAccess = computed(() => store.getters['userinfo/HAS_EDIT_ACCESS']({ route }));
+  const hasDeleteAccess = computed(() => store.getters['userinfo/HAS_DELETE_ACCESS']({ route }));
+
+  const hasSaveActionAccess = computed(() => {
+    if (route.params.id === 'new') return hasEditAccess.value;
+    return hasCreateAccess.value;
+  });
+
+  const disableUserInput = computed(() => {
+    if (route.params.id === 'new') return !hasEditAccess.value;
+    return !hasCreateAccess.value;
+  });
+
+  return {
+    hasReadAccess,
+    hasCreateAccess,
+    hasEditAccess,
+    hasDeleteAccess,
+
+    hasSaveActionAccess,
+    disableUserInput,
+  };
+};
diff --git a/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js b/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js
new file mode 100644
index 000000000..26f8618fb
--- /dev/null
+++ b/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js
@@ -0,0 +1,33 @@
+import get from 'lodash/get.js';
+import { onMounted, ref, watch } from 'vue';
+
+export const useCachedItemInstanceName = (itemInstance, { namePath = 'name' } = {}) => {
+  const name = ref('');
+
+  const updateName = () => {
+    name.value = get(itemInstance.value, namePath);
+  };
+
+  watch(
+    () => itemInstance.value._dirty,
+    (value) => {
+      if (!value) updateName();
+    },
+  );
+
+  onMounted(() => {
+    // itemInstance._dirty isn't init as "false",
+    // so that we should set up first name representation in other way
+    const unwatch = watch(
+      () => itemInstance.value.name,
+      (name) => {
+        updateName();
+        if (name) unwatch();
+      },
+    );
+  });
+
+  return {
+    name,
+  };
+};
diff --git a/src/app/store/store.js b/src/app/store/store.js
index d27cfa585..b469094b6 100755
--- a/src/app/store/store.js
+++ b/src/app/store/store.js
@@ -9,8 +9,16 @@ import routing from '../../modules/routing/store/routing';
 import system from '../../modules/system/store/system';
 import userinfo from '../../modules/userinfo/store/userinfo';
 
-export default createStore({
+const store = createStore({
   strict: false,
+  state: {
+    router: null,
+  },
+  mutations: {
+    SET_ROUTER: (state, router) => {
+      state.router = router;
+    },
+  },
   modules: {
     userinfo,
     directory,
@@ -23,3 +31,7 @@ export default createStore({
     appearance,
   },
 });
+
+window.store = store;
+
+export default store;
diff --git a/src/main.js b/src/main.js
index 4997c4b78..0a504f23f 100755
--- a/src/main.js
+++ b/src/main.js
@@ -68,6 +68,7 @@ const createVueInstance = () => {
   let config = {};
   try {
     setTokenFromUrl();
+    store.commit('SET_ROUTER', router);
 
     config = await fetchConfig();
     await initSession();
diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 02581573f..8827d9d5c 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,19 +4,27 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <transition-slide
+            :offset="{
+              enter: ['-50%', 0],
+              leave: [0, 0]
+            }"
+            duration="200"
+            mode="out-in"
+            appear
+          >
+            <component :is="Component" />
+          </transition-slide>
+        </router-view>
       </div>
     </section>
   </main>
 </template>
 
-<script>
+<script setup>
+import { TransitionSlide } from '@morev/vue-transitions';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
-
-export default {
-  name: 'ModuleWrap',
-  components: { AppHeader },
-};
 </script>
 
 <style lang="scss" scoped>
@@ -24,7 +32,7 @@ export default {
 .object-wrap {
   display: flex;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
 }
 
 // main content itself, without nav but with main header
@@ -32,13 +40,12 @@ export default {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-width: 100%;
-  min-height: 100%;
   background: var(--wt-page-wrapper-background-color);
 }
 
 .object-content-wrap {
   display: flex;
   flex-grow: 1;
+  min-height: 0;
 }
 </style>
diff --git a/src/modules/directory/modules/license/store/_internals/headers.js b/src/modules/directory/modules/license/store/_internals/headers.js
index cb0c691ed..990c11cba 100644
--- a/src/modules/directory/modules/license/store/_internals/headers.js
+++ b/src/modules/directory/modules/license/store/_internals/headers.js
@@ -1,4 +1,4 @@
-import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters.js';
 
 export default [
   {
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index a7bd23ae2..cb02c9e2f 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -2,38 +2,38 @@
   <section>
     <header class="content-header">
       <h3 class="content-title">
-        {{ $tc('objects.directory.devices.devices', 2) }}
+        {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
     <div class="object-input-grid">
       <wt-select
         :disabled="disableUserInput"
-        :label="$t('objects.directory.users.defaultDevice')"
+        :label="t('objects.directory.users.defaultDevice')"
         :options="itemInstance.devices"
         :value="itemInstance.device"
         required
         track-by="id"
-        @input="setItemProp({ prop: 'device', value: $event })"
-        @reset="setItemProp({ prop: 'device', value: {} })"
+        @input="setItemProp({ path: 'device', value: $event })"
+        @reset="setItemProp({ path: 'device', value: {} })"
       />
       <div>
         <wt-select
           :close-on-select="false"
           :disabled="disableUserInput"
-          :label="$tc('objects.directory.devices.devices', 2)"
+          :label="t('objects.directory.devices.devices', 2)"
           :search-method="loadDropdownOptionsList"
           :value="itemInstance.devices"
           multiple
-          @input="setItemProp({ prop: 'devices', value: $event })"
+          @input="setItemProp({ path: 'devices', value: $event })"
         />
         <div class="hint-link__wrap">
-          <span>{{ $t('objects.directory.users.deviceNotFound') }} </span>
+          <span>{{ t('objects.directory.users.deviceNotFound') }} </span>
           <adm-item-link
               class="hint-link__link"
               id="new"
               :route-name="RouteNames.DEVICES"
           >
-            {{ $t('objects.directory.users.createNewDevice') }}
+            {{ t('objects.directory.users.createNewDevice') }}
           </adm-item-link>
         </div>
       </div>
@@ -41,26 +41,40 @@
   </section>
 </template>
 
-<script>
-import ItemLinkMixin from '../../../../../app/mixins/baseMixins/baseTableMixin/itemLinkMixin.js';
-import openedTabComponentMixin
-  from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
-import DevicesAPI from '../../devices/api/devices';
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+import DevicesAPI from '../../devices/api/devices.js';
 
-export default {
-  name: 'OpenedUserDevices',
-  mixins: [openedTabComponentMixin, ItemLinkMixin],
-  methods: {
-    async loadDropdownOptionsList(params) {
-      const fields = ['id', 'name', 'hotdesk'];
-      const response = await DevicesAPI.getLookup({
-        ...params,
-        fields,
-      });
-      response.items = response.items.filter((item) => !item.hotdesk);
-      return response;
-    },
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
+  v: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
+
+const loadDropdownOptionsList = async (params) => {
+  const fields = ['id', 'name', 'hotdesk'];
+  const response = await DevicesAPI.getLookup({
+    ...params,
+    fields,
+  });
+  response.items = response.items.filter((item) => !item.hotdesk);
+  return response;
 };
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 8a358baa4..21bf342e4 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -2,54 +2,54 @@
   <section>
     <header class="content-header">
       <h3 class="content-title">
-        {{ $t('objects.generalInfo') }}
+        {{ t('objects.generalInfo') }}
       </h3>
     </header>
     <div class="object-input-grid">
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.name')"
+        :label="t('objects.name')"
         :value="itemInstance.name"
-        @input="setItemProp({ prop: 'name', value: $event })"
+        @input="setItemProp({ path: 'name', value: $event })"
       />
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.directory.users.extensions')"
+        :label="t('objects.directory.users.extensions')"
         :value="itemInstance.extension"
-        @input="setItemProp({ prop: 'extension', value: $event })"
+        @input="setItemProp({ path: 'extension', value: $event })"
       />
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.directory.users.login')"
+        :label="t('objects.directory.users.login')"
         :v="v.itemInstance.username"
         :value="itemInstance.username"
         required
-        @input="setItemProp({ prop: 'username', value: $event })"
+        @input="setItemProp({ path: 'username', value: $event })"
       />
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.email')"
+        :label="t('objects.email')"
         :value="itemInstance.email"
-        @input="setItemProp({ prop: 'email', value: $event })"
+        @input="setItemProp({ path: 'email', value: $event })"
       />
 
       <user-password-input
         :disabled="disableUserInput"
         :model-value="itemInstance.password"
         required
-        @update:model-value="setItemProp({ prop: 'password', value: $event })"
+        @update:model-value="setItemProp({ path: 'password', value: $event })"
       />
 
       <wt-select
         :disabled="disableUserInput"
-        :label="$tc('vocabulary.contact', 1)"
-        :search-method="loadContactsOptions"
+        :label="t('vocabulary.contact', 1)"
+        :search-method="ContactsAPI.getLookup"
         :value="itemInstance.contact"
         :track-by="name"
-        @input="setItemProp({ prop: 'contact', value: $event })"
+        @input="setItemProp({ path: 'contact', value: $event })"
       />
 
       <qrcode
@@ -61,28 +61,35 @@
   </section>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/store';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import UserPasswordInput from '../../../../../app/components/utils/user-password-input.vue';
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
-import Qrcode from './_internals/qrcode-two-factor-auth.vue';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 import ContactsAPI from '../api/contacts.js';
+import Qrcode from './_internals/qrcode-two-factor-auth.vue';
 
-export default {
-  name: 'OpenedUserGeneral',
-  components: { UserPasswordInput, Qrcode },
-  mixins: [openedTabComponentMixin],
-  computed: {
-    ...mapGetters('directory/users', {
-      isDisplayQRCode: 'IS_DISPLAY_QR_CODE',
-    }),
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
-  methods: {
-    loadContactsOptions(params) {
-      return ContactsAPI.getLookup(params);
-    },
+  v: {
+    type: Object,
+    required: true,
   },
-};
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
+
+const isDisplayQRCode = computed(() => store.getters[`${props.namespace}/IS_DISPLAY_QR_CODE`]);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index 61e34ae2f..10bc969e4 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -2,44 +2,59 @@
   <section>
     <header class="content-header">
       <h3 class="content-title">
-        {{ $tc('objects.directory.license.license', 1) }}
+        {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
     <div class="object-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
-        :label="$tc('objects.directory.license.license', 1)"
+        :label="t('objects.directory.license.license', 1)"
         :search-method="loadDropdownOptionsList"
         :value="itemInstance.license"
         multiple
-        @input="setItemProp({ prop: 'license', value: $event })"
+        @input="setItemProp({ path: 'license', value: $event })"
       />
     </div>
   </section>
 </template>
 
-<script>
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
-import LicenseAPI from '../../license/api/license';
-
-export default {
-  name: 'OpenedUserLicense',
-  mixins: [openedTabComponentMixin],
-  methods: {
-    async loadDropdownOptionsList(params) {
-      const fields = ['product', 'id'];
-      const response = await LicenseAPI.getList({
-        ...params,
-        fields,
-      });
-      response.items = response.items.map(({ product, id }) => ({
-        name: product,
-        id,
-      }));
-      return response;
-    },
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import LicenseAPI from '../../license/api/license.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  v: {
+    type: Object,
+    required: true,
   },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
+
+const loadDropdownOptionsList = async (params) => {
+  const fields = ['product', 'id'];
+  const response = await LicenseAPI.getList({
+    ...params,
+    fields,
+  });
+  response.items = response.items.map(({ product, id }) => ({
+    name: product,
+    id,
+  }));
+  return response;
 };
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index c3c66f4d8..08507673a 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -2,34 +2,45 @@
   <section>
     <header class="content-header">
       <h3 class="content-title">
-        {{ $tc('objects.permissions.permissionsRole') }}
+        {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
     <div class="object-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
-        :label="$tc('objects.permissions.permissionsRole')"
-        :search-method="loadDropdownOptionsList"
+        :label="t('objects.permissions.permissionsRole')"
+        :search-method="RolesAPI.getLookup"
         :value="itemInstance.roles"
         multiple
-        @input="setItemProp({ prop: 'roles', value: $event })"
+        @input="setItemProp({ path: 'roles', value: $event })"
       />
     </div>
   </section>
 </template>
 
-<script>
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 import RolesAPI from '../../../../permissions/modules/roles/api/roles';
 
-export default {
-  name: 'OpenedUserRoles',
-  mixins: [openedTabComponentMixin],
-  methods: {
-    loadDropdownOptionsList(params) {
-      return RolesAPI.getLookup(params);
-    },
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
-};
+  v: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
 </script>
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 52c384cea..2bec877b5 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -2,7 +2,7 @@
   <section>
     <header class="content-header">
       <h3 class="content-title">
-        {{ $t('objects.directory.users.variables') }}
+        {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
         v-if="!disableUserInput"
@@ -19,17 +19,17 @@
         >
           <wt-input
             :disabled="disableUserInput"
-            :placeholder="$t('objects.directory.users.varKey')"
+            :placeholder="t('objects.directory.users.varKey')"
             :v="v.itemInstance.variables.$each.$response.$data[key].key"
             :value="variable.key"
-            @input="setVariableProp({index: key, prop: 'key', value: $event})"
+            @input="setItemProp({path: `variables[${key}].key`, value: $event})"
           />
           <wt-input
             :disabled="disableUserInput"
-            :placeholder="$t('objects.directory.users.varVal')"
+            :placeholder="t('objects.directory.users.varVal')"
             :v="v.itemInstance.variables.$each.$response.$data[key].value"
             :value="variable.value"
-            @input="setVariableProp({index: key, prop: 'value', value: $event})"
+            @input="setItemProp({path: `variables[${key}].value`, value: $event})"
           />
           <wt-icon-action
             v-if="!disableUserInput"
@@ -43,12 +43,37 @@
   </section>
 </template>
 
-<script>
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 
-export default {
-  name: 'OpenedUserVariables',
-  mixins: [openedTabComponentMixin],
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  v: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
+
+const addVariable = () => {
+  const value = [...itemInstance.value.variables, { key: '', value: '' }];
+  return setItemProp({ path: 'variables', value });
+};
+const deleteVariable = (index) => {
+  const value = itemInstance.value.variables.filter((_, i) => i !== index);
+  return setItemProp({ path: 'variables', value });
 };
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index ed5c5a454..2ec083d95 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -45,151 +45,210 @@
   </wt-page-wrapper>
 </template>
 
-<script>
+<script setup>
 import { useVuelidate } from '@vuelidate/core';
 import { helpers, required, requiredIf } from '@vuelidate/validators';
-import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
-import { computed } from 'vue';
+import { useCardStore } from '@webitel/ui-sdk/store';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-import openedObjectMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useCachedItemInstanceName } from '../../../../../app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+import Permissions from '../../../../_shared/permissions-tab/components/permissions-tab.vue';
 import Logs from '../modules/logs/components/opened-user-logs.vue';
 import LogsFilters from '../modules/logs/modules/filters/components/opened-user-logs-filters.vue';
 import Tokens from '../modules/tokens/components/opened-user-token.vue';
+import UsersRouteNames from '../router/_internals/UsersRouteNames.enum.js';
 import Devices from './opened-user-devices.vue';
 import General from './opened-user-general.vue';
 import License from './opened-user-license.vue';
 import Roles from './opened-user-roles.vue';
 import Variables from './opened-user-variables.vue';
-import UsersRouteNames from '../router/_internals/UsersRouteNames.enum.js';
 
 const namespace = 'directory/users';
 
-export default {
-  name: 'OpenedUser',
-  components: {
-    General,
-    Roles,
-    License,
-    Devices,
-    Variables,
-    Tokens,
-    Logs,
-    LogsFilters,
-  },
-  mixins: [openedObjectMixin],
-
-  setup: () => {
-    const store = useStore();
-
-    const itemInstance = computed(() => getNamespacedState(store.state, namespace).itemInstance);
-
-    /** useVuelidate collects nested validations,
-     *  so that it collects validation from nested user-password-input.vue */
-    const v$ = useVuelidate(
-      computed(() => ({
-        itemInstance: {
-          username: { required },
-
-          /** see comment above */
-          // password: {
-          //   required: requiredUnless((value, item) => !!item.id),
-          // },
-          variables: {
-            $each: helpers.forEach({
-              key: {
-                required: requiredIf((value, item) => !!item.value),
-              },
-              value: {
-                required: requiredIf((value, item) => !!item.key),
-              },
-            }),
+// mixins: [openedObjectMixin],
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const {
+  namespace: cardNamespace,
+  id,
+  itemInstance,
+
+  loadItem,
+  addItem,
+  updateItem,
+  setId,
+  resetState,
+} = useCardStore(namespace);
+
+const { hasSaveActionAccess } = useAccessControl();
+
+const isLoading = ref(false);
+
+/** useVuelidate collects nested validations,
+ *  so that it collects validation from nested user-password-input.vue */
+const v$ = useVuelidate(
+  computed(() => ({
+    itemInstance: {
+      username: { required },
+
+      /** see comment above */
+      // password: {
+      //   required: requiredUnless((value, item) => !!item.id),
+      // },
+      variables: {
+        $each: helpers.forEach({
+          key: {
+            required: requiredIf((value, item) => !!item.value),
           },
-        },
-      })),
-      { itemInstance },
-      { $autoDirty: true },
-    );
-
-    return { v$ };
-  },
-  data: () => ({
-    namespace,
-    permissionsTabPathName: `${UsersRouteNames.PERMISSIONS}-card`,
-    passwordRegExp: '',
-    validationText: '',
-  }),
-
-  computed: {
-    path() {
-      const baseUrl = '/directory/users';
-      return [
-        {
-          name: this.$t('objects.directory.directory'),
-        },
-        {
-          name: this.$tc('objects.directory.users.users', 2),
-          route: baseUrl,
-        },
-        {
-          name: this.new ? this.$t('objects.new') : this.pathName,
-          route: {
-            name: this.currentTab.pathName,
-            query: this.$route.query,
+          value: {
+            required: requiredIf((value, item) => !!item.key),
           },
-        },
-      ];
+        }),
+      },
     },
+  })),
+  { itemInstance },
+  { $autoDirty: true },
+);
+
+const isNew = computed(() => route.params.id === 'new');
+
+const tabs = computed(() => {
+  const general = {
+    text: t('objects.general'),
+    value: General,
+    pathName: UsersRouteNames.GENERAL,
+  };
+  const roles = {
+    text: t('objects.directory.users.roles'),
+    value: Roles,
+    pathName: UsersRouteNames.ROLES,
+  };
+  const license = {
+    text: t('objects.directory.users.license'),
+    value: License,
+    pathName: UsersRouteNames.LICENSE,
+  };
+  const devices = {
+    text: t('objects.directory.users.devices'),
+    value: Devices,
+    pathName: UsersRouteNames.DEVICES,
+  };
+  const variables = {
+    text: t('objects.directory.users.variables'),
+    value: Variables,
+    pathName: UsersRouteNames.VARIABLES,
+  };
+  const tokens = {
+    text: t('objects.directory.users.tokens'),
+    value: Tokens,
+    pathName: UsersRouteNames.TOKENS,
+  };
+  const logs = {
+    text: t('objects.system.changelogs.changelogs', 2),
+    value: Logs,
+    filters: LogsFilters,
+    filtersNamespace: `${cardNamespace}/logs/filters`,
+    pathName: UsersRouteNames.LOGS,
+  };
+  const permissions = {
+    text: t('objects.permissions.permissions', 2),
+    value: Permissions,
+    pathName: UsersRouteNames.PERMISSIONS,
+  };
+
+  const tabs = [general, roles, license, devices, variables, tokens];
+
+  if (id.value) tabs.push(logs, permissions);
+  return tabs;
+});
+
+const currentTab = computed(() => {
+  return tabs.value.find(({ pathName }) => route.name === pathName) || tabs.value[0];
+});
+
+const changeTab = (tab) => {
+  return router.push({ ...route, name: tab.pathName });
+};
 
-    tabs() {
-      const general = {
-        text: this.$t('objects.general'),
-        value: 'general',
-        pathName: UsersRouteNames.GENERAL,
-      };
-      const roles = {
-        text: this.$t('objects.directory.users.roles'),
-        value: 'roles',
-        pathName: UsersRouteNames.ROLES,
-      };
-      const license = {
-        text: this.$t('objects.directory.users.license'),
-        value: 'license',
-        pathName: UsersRouteNames.LICENSE
-      };
-      const devices = {
-        text: this.$t('objects.directory.users.devices'),
-        value: 'devices',
-        pathName: UsersRouteNames.DEVICES,
-      };
-      const variables = {
-        text: this.$t('objects.directory.users.variables'),
-        value: 'variables',
-        pathName: UsersRouteNames.VARIABLES,
-      };
-      const tokens = {
-        text: this.$t('objects.directory.users.tokens'),
-        value: 'tokens',
-        pathName: UsersRouteNames.TOKENS,
-      };
-      const logs = {
-        text: this.$t('objects.system.changelogs.changelogs', 2),
-        value: 'logs',
-        filters: 'logs-filters',
-        filtersNamespace: `${this.namespace}/logs/filters`,
-        pathName: UsersRouteNames.LOGS,
-      };
-
-      const tabs = [general, roles, license, devices, variables, tokens];
-
-      if (this.id) tabs.push(logs, this.permissionsTab);
-      return tabs;
+const { name: pathName } = useCachedItemInstanceName(itemInstance);
+
+const path = computed(() => {
+  const baseUrl = '/directory/users';
+  return [
+    {
+      name: t('objects.directory.directory'),
+    },
+    {
+      name: t('objects.directory.users.users', 2),
+      route: baseUrl,
     },
-  },
-  methods: {
-    close() {
-      this.$router.push(`/${this.namespace}`);
+    {
+      name: isNew.value ? t('objects.new') : pathName.value,
+      route: {
+        name: currentTab.value.pathName,
+        query: route.query,
+      },
     },
+  ];
+});
+
+const disabledSave = computed(() => {
+  return v$.value.$invalid || !itemInstance.value._dirty;
+});
+
+const saveText = computed(() => {
+  return isNew.value || itemInstance.value._dirty ? t('objects.save') : t('objects.saved');
+});
+
+const redirectToEdit = (_id = id.value) => {
+  return router.replace({
+    ...route,
+    params: { id: _id },
+  });
+};
+
+const save = async () => {
+  if (disabledSave.value) return;
+
+  if (isNew.value) {
+    await addItem();
+  } else {
+    await updateItem();
   }
+
+  if (id.value) {
+    await redirectToEdit();
+  }
+};
+
+async function initializeCard() {
+  try {
+    isLoading.value = true;
+
+    const { id: itemId } = route.params;
+    await setId(itemId);
+    await loadItem();
+  } finally {
+    setTimeout(() => {
+      isLoading.value = false;
+    }, 500);
+  }
+}
+
+onMounted(() => initializeCard());
+onUnmounted(() => resetState());
+
+const close = () => {
+  return router.push({ name: RouteNames.USERS });
 };
 </script>
 
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index 306721f6e..1e4177e0a 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -6,7 +6,7 @@
     <template #header>
       <wt-page-header
         :hide-primary="!hasCreateAccess"
-        :primary-action="create"
+        :primary-action="() => router.push({ name: `${RouteNames.USERS}-card`, params: { id: 'new' } })"
       >
         <wt-headline-nav :path="path" />
       </wt-page-header>
@@ -17,36 +17,33 @@
         @close="closeCSVPopup"
       />
       <delete-confirmation-popup
-        :shown="isDeleteConfirmationPopup"
-        :delete-count="deleteCount"
         :callback="deleteCallback"
+        :delete-count="deleteCount"
+        :shown="isDeleteConfirmationPopup"
         @close="closeDelete"
       />
 
       <section class="main-section__wrapper">
         <header class="content-header">
           <h3 class="content-title">
-            {{ $t('objects.directory.users.allUsers') }}
+            {{ t('objects.directory.users.allUsers') }}
           </h3>
           <div class="content-header__actions-wrap">
-            <wt-search-bar
-              :value="search"
-              debounce
-              @enter="loadList"
-              @input="setSearch"
-              @search="loadList"
+            <filter-search
+              :namespace="filtersNamespace"
+              name="search"
             />
             <wt-table-actions
               :icons="['refresh']"
-              @input="tableActionsHandler"
+              @input="(event) => event === 'refresh' && loadData()"
             >
               <delete-all-action
                 v-if="hasDeleteAccess"
-                :class="{'hidden': anySelected}"
-                :selected-count="selectedRows.length"
+                :class="{'hidden': !selected.length}"
+                :selected-count="selected.length"
                 @click="askDeleteConfirmation({
-                  deleted: selectedRows,
-                  callback: () => deleteData(selectedRows),
+                  deleted: selected,
+                  callback: () => deleteData(selected),
                 })"
               />
               <upload-file-icon-btn
@@ -59,23 +56,35 @@
           </div>
         </header>
 
-        <wt-loader v-show="!isLoaded" />
+        <wt-loader v-show="isLoading" />
         <wt-dummy
-          v-if="dummy && isLoaded"
-          :src="dummy.src"
+          v-if="dummy && !isLoading"
           :dark-mode="darkMode"
-          :text="dummy.text && $t(dummy.text)"
+          :src="dummy.src"
+          :text="dummy.text && t(dummy.text)"
           class="dummy-wrapper"
         />
-        <div
-          v-show="dataList.length && isLoaded"
-          class="table-wrapper"
-        >
+        <div class="table-wrapper">
+          <div
+            style="display:contents;"
+            v-if="dataList.length && !isLoading"
+          >
+          <transition-slide
+            :offset="{
+              enter: ['-5%', 0],
+              leave: [0, 0]
+            }"
+            duration="200"
+            mode="out-in"
+            appear
+          >
           <wt-table
+            :selected="selected"
             :data="dataList"
-            :grid-actions="hasTableActions"
+            :grid-actions="hasEditAccess || hasDeleteAccess"
             :headers="headers"
             sortable
+            @update:selected="setSelected"
             @sort="sort"
           >
             <template #name="{ item }">
@@ -123,15 +132,11 @@
               />
             </template>
           </wt-table>
-          <wt-pagination
+          </transition-slide>
+          </div>
+          <filter-pagination
+            :namespace="filtersNamespace"
             :next="isNext"
-            :prev="page > 1"
-            :size="size"
-            debounce
-            @change="loadList"
-            @input="setSize"
-            @next="nextPage"
-            @prev="prevPage"
           />
         </div>
       </section>
@@ -139,101 +144,122 @@
   </wt-page-wrapper>
 </template>
 
-<script>
+<script setup>
+import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
-import { mapActions } from 'vuex';
+import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
+import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
+import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
+import { useTableStore } from '@webitel/ui-sdk/store';
+import { computed, inject, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 import UploadFileIconBtn from '../../../../../app/components/utils/upload-file-icon-btn.vue';
 import { useDummy } from '../../../../../app/composables/useDummy';
-import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin';
+import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import UserStatus from './_internals/user-status-chips.vue';
 import UploadPopup from './upload-users-popup.vue';
 
 const namespace = 'directory/users';
 
-export default {
-  name: 'TheUsers',
-  components: {
-    UploadPopup,
-    UserStatus,
-    UploadFileIconBtn,
-    DeleteConfirmationPopup,
-  },
-  mixins: [tableComponentMixin],
-
-  setup() {
-    const { dummy } = useDummy({
-      namespace,
-      hiddenText: true,
-    });
-    const {
-      isVisible: isDeleteConfirmationPopup,
-      deleteCount,
-      deleteCallback,
-
-      askDeleteConfirmation,
-      closeDelete,
-    } = useDeleteConfirmationPopup();
-
-    return {
-      dummy,
-      isDeleteConfirmationPopup,
-      deleteCount,
-      deleteCallback,
-
-      askDeleteConfirmation,
-      closeDelete,
-    };
-  },
-  data: () => ({
-    csvFile: null,
-    namespace,
-    routeName: RouteNames.USERS,
-  }),
-
-  computed: {
-    path() {
-      return [
-        {
-          name: this.$t('objects.directory.directory'),
-        },
-        {
-          name: this.$tc('objects.directory.users.users', 2),
-          route: '/directory/users',
-        },
-      ];
+const store = useStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const darkMode = inject('darkMode');
+
+const { hasCreateAccess, hasEditAccess, hasDeleteAccess } = useAccessControl();
+
+const {
+  namespace: tableNamespace,
+
+  dataList,
+  selected,
+  isLoading,
+  headers,
+  isNext,
+  error,
+
+  loadData,
+  deleteData,
+  sort,
+  setSelected,
+  onFilterEvent,
+} = useTableStore(namespace);
+
+const {
+  namespace: filtersNamespace,
+  restoreFilters,
+
+  subscribe,
+  flushSubscribers,
+} = useTableFilters(tableNamespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
+
+const { dummy } = useDummy({
+  namespace,
+  hiddenText: true,
+});
+const {
+  isVisible: isDeleteConfirmationPopup,
+  deleteCount,
+  deleteCallback,
+
+  askDeleteConfirmation,
+  closeDelete,
+} = useDeleteConfirmationPopup();
+
+const csvFile = ref(null);
+
+const path = computed(() => {
+  return [
+    {
+      name: t('objects.directory.directory'),
     },
-  },
-
-  methods: {
-    ...mapActions({
-      setDND(dispatch, payload) {
-        return dispatch(`${this.namespace}/SET_USER_DND`, payload);
-      },
-    }),
-
-    getDND(value) {
-      if (value?.status) {
-        return value.status.includes('dnd');
-      }
-      return false;
+    {
+      name: t('objects.directory.users.users', 2),
+      route: '/directory/users',
     },
+  ];
+});
 
-    processCSV(files) {
-      const file = files[0];
-      if (file) {
-        this.csvFile = file;
-      }
-    },
+const setDND = (payload) => {
+  return store.dispatch(`${tableNamespace}/SET_USER_DND`, payload);
+};
 
-    closeCSVPopup() {
-      this.csvFile = null;
-      this.loadList();
-    },
-  },
+const getDND = (value) => {
+  if (value?.status) {
+    return value.status.includes('dnd');
+  }
+  return false;
+};
+
+const processCSV = (files) => {
+  const file = files[0];
+  if (file) {
+    csvFile.value = file;
+  }
+};
+
+const closeCSVPopup = () => {
+  csvFile.value = null;
+  return loadData();
 };
 </script>
 
 <style lang="scss" scoped>
+
 </style>
diff --git a/src/modules/directory/modules/users/modules/filters/store/filters.store.js b/src/modules/directory/modules/users/modules/filters/store/filters.store.js
new file mode 100644
index 000000000..e569b6cf7
--- /dev/null
+++ b/src/modules/directory/modules/users/modules/filters/store/filters.store.js
@@ -0,0 +1,20 @@
+import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
+
+const filtersList = [
+  {
+    name: 'page',
+    value: 1,
+    defaultValue: 1,
+  },
+  {
+    name: 'size',
+    value: 10,
+    defaultValue: 10,
+  },
+  { name: 'sort' },
+  { name: 'search' },
+];
+
+const filters = new FiltersStoreModule().addFilter(filtersList).getModule();
+
+export default filters;
diff --git a/src/modules/directory/modules/users/modules/logs/components/opened-user-logs.vue b/src/modules/directory/modules/users/modules/logs/components/opened-user-logs.vue
index 8f828a786..7c91d37bb 100644
--- a/src/modules/directory/modules/users/modules/logs/components/opened-user-logs.vue
+++ b/src/modules/directory/modules/users/modules/logs/components/opened-user-logs.vue
@@ -2,7 +2,7 @@
   <section class="content-wrapper">
     <header class="content-header">
       <h3 class="content-title">
-        {{ $t('objects.system.changelogs.logs.logs', 2) }}
+        {{ t('objects.system.changelogs.logs.logs', 2) }}
       </h3>
       <div class="content-header__actions-wrap">
         <wt-icon-action
@@ -11,22 +11,38 @@
         />
         <wt-table-actions
           :icons="['refresh']"
-          @input="tableActionsHandler"
+          @input="(event) => event === 'refresh' && loadData()"
         />
       </div>
     </header>
 
-    <wt-loader v-show="!isLoaded" />
+
+    <wt-loader v-show="isLoading" />
+
     <wt-dummy
-          v-if="dummy && isLoaded"
-          :src="dummy.src"
-          :dark-mode="darkMode"
-          :text="dummy.text && $t(dummy.text)"
-          class="dummy-wrapper"
-    ></wt-dummy>
+      v-if="dummy && !isLoading"
+      :src="dummy.src"
+      :dark-mode="darkMode"
+      :text="dummy.text && t(dummy.text)"
+      class="dummy-wrapper"
+    />
+
     <div
-      v-show="dataList.length && isLoaded"
+      v-show="!isLoading"
       class="table-wrapper"
+    >
+      <div
+        v-if="dataList.length && !isLoading"
+        style="display:contents;"
+      >
+      <transition-slide
+      :offset="{
+              enter: ['-5%', 0],
+              leave: [0, 0]
+            }"
+      appear
+      duration="200"
+      mode="out-in"
     >
       <wt-table
         :data="dataList"
@@ -37,7 +53,7 @@
         @sort="sort"
       >
         <template #action="{ item }">
-          {{ $t(`objects.system.changelogs.logs.actionType.${item.action}`) }}
+          {{ t(`objects.system.changelogs.logs.actionType.${item.action}`) }}
         </template>
         <template #date="{ item }">
           {{ new Date(+item.date).toLocaleString() }}
@@ -46,7 +62,7 @@
           <adm-item-link
             v-if="item.object"
             :id="item.configId"
-            :route-name="changelogsRouteName"
+            :route-name="RouteNames.CHANGELOGS"
           >
             {{ item.object.name }}
           </adm-item-link>
@@ -57,84 +73,116 @@
           />
         </template>
       </wt-table>
-      <wt-pagination
+      </transition-slide>
+      </div>
+      <filter-pagination
+        :namespace="filtersNamespace"
         :next="isNext"
-        :prev="page > 1"
-        :size="size"
-        debounce
-        @change="loadList"
-        @input="setSize"
-        @next="nextPage"
-        @prev="prevPage"
       />
     </div>
   </section>
 </template>
 
-<script>
-import ExportCSVMixin from '@webitel/ui-sdk/src/modules/CSVExport/mixins/exportCSVMixin';
-import openedObjectTableTabMixin from '../../../../../../../app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin';
+<script setup>
+import { TransitionSlide } from '@morev/vue-transitions';
+import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
+import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
+import { useCardStore, useTableStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { inject, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useDummy } from '../../../../../../../app/composables/useDummy';
 import RouteNames from '../../../../../../../app/router/_internals/RouteNames.enum';
 import RecordLink from '../../../../../../system/modules/changelogs/modules/logs/components/changelog-logs-record-link.vue';
-import LogsAPI from '../api/logs';
-import { useDummy } from '../../../../../../../app/composables/useDummy';
 
-const namespace = 'directory/users';
-const subNamespace = 'logs';
-
-export default {
-  name: 'OpenedUsersLogs',
-  components: { RecordLink },
-  mixins: [openedObjectTableTabMixin, ExportCSVMixin],
-  data: () => ({
-    namespace,
-    subNamespace,
-    changelogsRouteName: RouteNames.CHANGELOGS,
-  }),
-
-  setup() {
-    const { dummy } = useDummy({ namespace: `${namespace}/${subNamespace}`, hiddenText: true });
-    return { dummy };
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
+});
 
-  computed: {
-    getFilters() {
-      return this.$store.getters[`${namespace}/${subNamespace}/filters/GET_FILTERS`];
-    },
-  },
-  watch: {
-    '$route.query': {
-      async handler() {
-        await this.loadList();
-      },
-    },
-  },
-  created() {
-    this.initCSVExport(this.getDataForCSVExport, {
-      filename: `${this.itemInstance.name}-logs-at-${new Date().toLocaleString()}`,
-    });
-  },
-  methods: {
-    async getDataForCSVExport(params) {
-      const filters = this.getFilters;
-      const { items, next } = await LogsAPI.getList({
-        ...filters,
-        ...params,
-        parentId: this.parentId,
-      });
-
-      const transformedItems = items.map((item) => ({
-        ...item,
-        date: new Date(+item.date).toLocaleString(),
-      }));
-
-      return {
-        items: transformedItems,
-        next,
-      };
-    },
-  },
-};
+const {
+  namespace: parentCardNamespace,
+  id: parentId,
+
+  addItem,
+} = useCardStore(props.namespace);
+
+const namespace = `${parentCardNamespace}/logs`;
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const darkMode = inject('darkMode');
+
+const {
+  namespace: tableNamespace,
+
+  dataList,
+  selected,
+  isLoading,
+  headers,
+  isNext,
+  error,
+
+  loadData,
+  deleteData,
+  sort,
+  setSelected,
+  onFilterEvent,
+} = useTableStore(namespace);
+
+const {
+  namespace: filtersNamespace,
+  restoreFilters,
+
+  subscribe,
+  flushSubscribers,
+} = useTableFilters(tableNamespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
+
+const { dummy } = useDummy({ namespace: tableNamespace, hiddenText: true });
+
+// const getFilters = computed(() => {
+//   return this.$store.getters[`${namespace}/${subNamespace}/filters/GET_FILTERS`];
+// });
+//
+// this.initCSVExport(this.getDataForCSVExport, {
+//   filename: `${this.itemInstance.name}-logs-at-${new Date().toLocaleString()}`,
+// });
+//
+// const getDataForCSVExport = async (params) => {
+//   const filters = this.getFilters;
+//   const { items, next } = await LogsAPI.getList({
+//     ...filters,
+//     ...params,
+//     parentId: this.parentId,
+//   });
+//
+//   const transformedItems = items.map((item) => ({
+//     ...item,
+//     date: new Date(+item.date).toLocaleString(),
+//   }));
+//
+//   return {
+//     items: transformedItems,
+//     next,
+//   };
+// };
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue b/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
index 91ddfd02a..08791daf8 100644
--- a/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
+++ b/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
@@ -1,27 +1,27 @@
 <template>
   <wt-filters-panel-wrapper @reset="resetFilters">
-    <component
-      :is="`abstract-${filter.type}-filter`"
-      v-for="(filter, key) of filters"
-      :key="key"
-      :filter-query="filter.filterQuery"
-      :namespace="namespace"
-      class="history-filters__filter"
-    />
-    <filter-datetime
-      :label="`${
-        $t('reusable.modifiedAt')}: ${$t('reusable.from').toLowerCase()
-      }`"
-      :namespace="namespace"
-      filter-query="from"
-    />
-    <filter-datetime
-      :label="`${
-        $t('reusable.modifiedAt')}: ${$t('reusable.to').toLowerCase()
-      }`"
-      :namespace="namespace"
-      filter-query="to"
-    />
+<!--    <component-->
+<!--      :is="`abstract-${filter.type}-filter`"-->
+<!--      v-for="(filter, key) of filters"-->
+<!--      :key="key"-->
+<!--      :filter-query="filter.filterQuery"-->
+<!--      :namespace="namespace"-->
+<!--      class="history-filters__filter"-->
+<!--    />-->
+<!--    <filter-datetime-->
+<!--      :label="`${-->
+<!--        $t('reusable.modifiedAt')}: ${$t('reusable.from').toLowerCase()-->
+<!--      }`"-->
+<!--      :namespace="namespace"-->
+<!--      filter-query="from"-->
+<!--    />-->
+<!--    <filter-datetime-->
+<!--      :label="`${-->
+<!--        $t('reusable.modifiedAt')}: ${$t('reusable.to').toLowerCase()-->
+<!--      }`"-->
+<!--      :namespace="namespace"-->
+<!--      filter-query="to"-->
+<!--    />-->
   </wt-filters-panel-wrapper>
 </template>
 
diff --git a/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js b/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
index a06479baa..cc6c0f7e7 100644
--- a/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
+++ b/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
@@ -1,41 +1,60 @@
-import ApiFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/ApiFilterSchema';
-import BaseFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/BaseFilterSchema';
-import EnumFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/EnumFilterSchema';
-import QueryFiltersStoreModule from '@webitel/ui-sdk/src/modules/QueryFilters/store/QueryFiltersStoreModule';
-import { LoggerAction } from 'webitel-sdk';
-import ChangelogsAPI from '../../../../../../../../system/modules/changelogs/api/changelogs';
+// import ApiFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/ApiFilterSchema';
+// import BaseFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/BaseFilterSchema';
+// import EnumFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/EnumFilterSchema';
+// import QueryFiltersStoreModule from '@webitel/ui-sdk/src/modules/QueryFilters/store/QueryFiltersStoreModule';
+// import { LoggerAction } from 'webitel-sdk';
+// import ChangelogsAPI from '../../../../../../../../system/modules/changelogs/api/changelogs';
+//
+// const state = {
+//   search: new BaseFilterSchema(),
+//   action: new EnumFilterSchema({
+//     locale: {
+//       label: ['objects.system.changelogs.logs.actions', 1],
+//     },
+//     options: Object.values(LoggerAction)
+//       .filter((action) => action !== LoggerAction.DefaultNoAction && action !== LoggerAction.Read)
+//       .map((action) => ({
+//         value: action,
+//         locale: `objects.system.changelogs.logs.actionType.${action}`,
+//       })),
+//   }),
+//   object: new ApiFilterSchema({
+//     locale: {
+//       label: ['objects.system.changelogs.objects', 1],
+//     },
+//     API: (params) =>
+//       ChangelogsAPI.getObjectsList({
+//         ...params,
+//         includeExisting: true,
+//       }),
+//   }),
+//   from: new BaseFilterSchema({
+//     value: new Date().setHours(0, 0, 0, 0),
+//     defaultValue: new Date().setHours(0, 0, 0, 0),
+//   }),
+//   to: new BaseFilterSchema({
+//     value: new Date().setHours(23, 59, 59, 0),
+//     defaultValue: new Date().setHours(23, 59, 59, 0),
+//   }),
+// };
 
-const state = {
-  search: new BaseFilterSchema(),
-  action: new EnumFilterSchema({
-    locale: {
-      label: ['objects.system.changelogs.logs.actions', 1],
-    },
-    options: Object.values(LoggerAction)
-      .filter((action) => action !== LoggerAction.DefaultNoAction && action !== LoggerAction.Read)
-      .map((action) => ({
-        value: action,
-        locale: `objects.system.changelogs.logs.actionType.${action}`,
-      })),
-  }),
-  object: new ApiFilterSchema({
-    locale: {
-      label: ['objects.system.changelogs.objects', 1],
-    },
-    API: (params) =>
-      ChangelogsAPI.getObjectsList({
-        ...params,
-        includeExisting: true,
-      }),
-  }),
-  from: new BaseFilterSchema({
-    value: new Date().setHours(0, 0, 0, 0),
-    defaultValue: new Date().setHours(0, 0, 0, 0),
-  }),
-  to: new BaseFilterSchema({
-    value: new Date().setHours(23, 59, 59, 0),
-    defaultValue: new Date().setHours(23, 59, 59, 0),
-  }),
-};
+import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule.js';
 
-export default new QueryFiltersStoreModule({ state }).getModule();
+const filtersList = [
+  {
+    name: 'page',
+    value: 1,
+    defaultValue: 1,
+  },
+  {
+    name: 'size',
+    value: 10,
+    defaultValue: 10,
+  },
+  { name: 'sort' },
+  { name: 'search' },
+];
+
+const filters = new FiltersStoreModule().addFilter(filtersList).getModule();
+
+export default filters;
diff --git a/src/modules/directory/modules/users/modules/logs/store/logs.js b/src/modules/directory/modules/users/modules/logs/store/logs.js
index 3494a23ed..c89871bf3 100644
--- a/src/modules/directory/modules/users/modules/logs/store/logs.js
+++ b/src/modules/directory/modules/users/modules/logs/store/logs.js
@@ -1,12 +1,37 @@
-import NestedObjectStoreModule from '../../../../../../../app/store/BaseStoreModules/StoreModules/NestedObjectStoreModule';
-import LogsAPI from '../api/logs';
-import filters from '../modules/filters/store/filters';
-import headers from './_internals/headers';
-
-const logs = new NestedObjectStoreModule({ headers })
-  .attachAPIModule(LogsAPI)
-  .generateAPIActions()
-  .setChildModules({ filters })
-  .getModule();
+import {
+  createApiStoreModule,
+  createBaseStoreModule,
+  createTableStoreModule,
+} from '@webitel/ui-sdk/store';
+import LogsAPI from '../api/logs.js';
+import filters from '../modules/filters/store/filters.js';
+import headers from './_internals/headers.js';
+
+const getters = {
+  PARENT_ID: (s, g, rootState) => rootState.directory.users.card.itemId,
+};
+
+const api = createApiStoreModule({
+  state: {
+    api: LogsAPI,
+  },
+});
+
+const table = createTableStoreModule({
+  state: {
+    headers,
+  },
+  getters,
+  modules: {
+    api,
+    filters,
+  },
+});
+
+const logs = createBaseStoreModule({
+  modules: {
+    table,
+  },
+});
 
 export default logs;
diff --git a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-created-popup.vue b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-created-popup.vue
deleted file mode 100644
index 43198ee5d..000000000
--- a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-created-popup.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <wt-popup
-    class="token-created-popup"
-    v-bind="$attrs"
-    @close="close"
-  >
-    <template #title>
-      {{ $t('objects.directory.users.tokenPopupHeader') }}
-    </template>
-    <template #main>
-      <div class="token-created-popup__token__wrapper">
-        <div class="token-created-popup__token__token">
-          {{ token }}
-        </div>
-      </div>
-      <h4 class="token-created-popup__text">
-        {{ $t('objects.directory.users.tokenPopupText') }}
-      </h4>
-    </template>
-    <template #actions>
-      <wt-button @click="copy">
-        {{ $t('objects.directory.users.tokenPopupCopy') }}
-      </wt-button>
-      <wt-button
-        class="button-save"
-        color="secondary"
-        @click="saveTxt"
-      >
-        {{ $t('objects.directory.users.tokenPopupSave') }}
-      </wt-button>
-    </template>
-  </wt-popup>
-</template>
-
-<script>
-import clipboardCopy from 'clipboard-copy';
-import { mapState } from 'vuex';
-import { downloadAsTXT } from '../../../../../../../app/utils/download';
-
-export default {
-  name: 'OpenedUserTokenCreatedPopup',
-
-  computed: {
-    ...mapState('directory/users', {
-      userName: (state) => state.itemInstance.name,
-    }),
-    ...mapState('directory/users/tokens', {
-      token: (state) => state.itemInstance.token,
-    }),
-  },
-
-  methods: {
-    copy() {
-      clipboardCopy(this.token);
-    },
-
-    async saveTxt() {
-      const filename = `${this.userName}-token`;
-      downloadAsTXT(this.token, filename);
-    },
-
-    close() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.token-created-popup__token__wrapper {
-  width: 75%;
-  margin: 10px auto 30px;
-  padding: 20px;
-  border: 2px solid var(--false-color);
-  border-radius: 10px;
-}
-
-.token-created-popup__token__token {
-  @extend %typo-subtitle-2;
-  text-align: center;
-}
-
-.token-created-popup__text {
-  @extend %typo-body-1;
-}
-</style>
diff --git a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-popup.vue b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-popup.vue
index 46fa6946a..b2c897af3 100644
--- a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-popup.vue
+++ b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token-popup.vue
@@ -1,63 +1,140 @@
 <template>
   <wt-popup
+    :shown="shown && !itemInstance.token"
     size="sm"
-    v-bind="$attrs"
     @close="close"
   >
     <template #title>
-      {{ $tc('objects.directory.users.token', 2) }}
+      {{ t('objects.directory.users.token', 2) }}
     </template>
     <template #main>
-      <form @submit.prevent="save">
+      <form @submit.prevent="generateToken">
         <wt-input
-          :label="$t('objects.name')"
+          :label="t('objects.name')"
           :value="itemInstance.usage"
-          @input="setItemProp({ prop: 'usage', value: $event })"
+          @input="setItemProp({ path: 'usage', value: $event })"
         />
       </form>
     </template>
     <template #actions>
-      <wt-button @click="save">
-        {{ $t('objects.add') }}
+      <wt-button @click="generateToken">
+        {{ t('objects.add') }}
       </wt-button>
       <wt-button
         color="secondary"
         @click="close"
       >
-        {{ $t('objects.close') }}
+        {{ t('objects.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+
+  <wt-popup
+    :shown="shown && !!itemInstance.token"
+    class="token-created-popup"
+    @close="close"
+  >
+    <template #title>
+      {{ t('objects.directory.users.tokenPopupHeader') }}
+    </template>
+    <template #main>
+      <div class="token-created-popup__token__wrapper">
+        <div class="token-created-popup__token__token">
+          {{ itemInstance.token }}
+        </div>
+      </div>
+      <h4 class="token-created-popup__text">
+        {{ t('objects.directory.users.tokenPopupText') }}
+      </h4>
+    </template>
+    <template #actions>
+      <wt-button @click="copy(itemInstance.token)">
+        {{ t('objects.directory.users.tokenPopupCopy') }}
+      </wt-button>
+      <wt-button
+        class="button-save"
+        color="secondary"
+        @click="saveTxt(itemInstance.token)"
+      >
+        {{ t('objects.directory.users.tokenPopupSave') }}
       </wt-button>
     </template>
   </wt-popup>
 </template>
 
-<script>
-import { mapActions } from 'vuex';
-import nestedObjectMixin from '../../../../../../../app/mixins/objectPagesMixins/openedObjectMixin/nestedObjectMixin';
-
-export default {
-  name: 'OpenedUserTokensPopup',
-  mixins: [nestedObjectMixin],
-  data: () => ({
-    namespace: 'directory/users/tokens',
-  }),
-
-  methods: {
-    ...mapActions({
-      addToken(dispatch, payload) {
-        return dispatch(`${this.namespace}/ADD_TOKEN`, payload);
-      },
-    }),
-    async save() {
-      try {
-        await this.addToken();
-        this.$emit('token-created');
-      } catch {}
-    },
-    resetState() {},
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/store';
+import clipboardCopy from 'clipboard-copy';
+import { computed, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { downloadAsTXT } from '../../../../../../../app/utils/download.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
+});
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const {
+  namespace: cardNamespace,
+  itemInstance,
+  resetState,
+  setItemProp,
+} = useCardStore(props.namespace);
+
+const shown = computed(() => !!route.params.tokenId);
+
+const userName = computed(() => store.state.directory.users.itemInstance.name);
+
+const generateToken = () => store.dispatch(`${cardNamespace}/ADD_TOKEN`);
+
+const copy = (token) => {
+  clipboardCopy(token);
 };
+
+const saveTxt = (token) => {
+  const filename = `${userName.value}-token`;
+  downloadAsTXT(token, filename);
+};
+
+const close = () => {
+  const params = { ...route.params };
+  delete params.tokenId;
+
+  return router.push({
+    ...route,
+    params,
+  });
+};
+
+watch(shown, (value) => {
+  if (!value) resetState();
+});
 </script>
 
 <style lang="scss" scoped>
+.token-created-popup__token__wrapper {
+  width: 75%;
+  margin: 10px auto 30px;
+  padding: 20px;
+  border: 2px solid var(--false-color);
+  border-radius: 10px;
+}
+
+.token-created-popup__token__token {
+  @extend %typo-subtitle-2;
+  text-align: center;
+}
 
+.token-created-popup__text {
+  @extend %typo-body-1;
+}
 </style>
diff --git a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
index 293c24cf5..edc81d5c1 100644
--- a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
+++ b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
@@ -1,13 +1,7 @@
 <template>
   <section>
     <token-popup
-      :shown="isPopup"
-      @close="closePopup"
-      @token-created="openTokenCreatedPopup"
-    />
-    <token-created-popup
-      v-if="isTokenGenerated"
-      @close="closeTokenCreatedPopup"
+      :namespace="namespace"
     />
     <delete-confirmation-popup
       :shown="isDeleteConfirmationPopup"
@@ -18,20 +12,20 @@
 
     <header class="content-header">
       <h3 class="content-title">
-        {{ $tc('objects.directory.users.token', 2) }}
+        {{ t('objects.directory.users.token', 2) }}
       </h3>
 
       <wt-table-actions
         :icons="['refresh']"
-        @input="tableActionsHandler"
+        @input="(event) => event === 'refresh' && loadData()"
       >
         <delete-all-action
           v-if="!disableUserInput"
-          :class="{'hidden': anySelected}"
-          :selected-count="selectedRows.length"
+          :class="{'hidden': !selected.length}"
+          :selected-count="selected.length"
           @click="askDeleteConfirmation({
-            deleted: selectedRows,
-            callback: () => deleteData(selectedRows),
+            deleted: selected,
+            callback: () => deleteData(selected),
           })"
         />
         <wt-icon-action
@@ -42,17 +36,32 @@
       </wt-table-actions>
     </header>
 
-    <wt-loader v-show="!isLoaded" />
+    <wt-loader v-show="isLoading" />
     <div
-      v-show="isLoaded"
+      v-show="!isLoading"
       class="table-wrapper"
     >
+      <div
+        style="display:contents;"
+        v-if="dataList.length && !isLoading"
+      >
+        <transition-slide
+          :offset="{
+              enter: ['-5%', 0],
+              leave: [0, 0]
+            }"
+          duration="200"
+          mode="out-in"
+          appear
+        >
       <wt-table
         :data="dataList"
         :grid-actions="!disableUserInput"
         :headers="headers"
+        :selected="selected"
         sortable
         @sort="sort"
+        @update:selected="setSelected"
       >
         <template #usage="{ item }">
           {{ item.usage }}
@@ -75,109 +84,132 @@
           />
         </template>
       </wt-table>
-      <wt-pagination
+        </transition-slide>
+      </div>
+      <filter-pagination
+        :namespace="filtersNamespace"
         :next="isNext"
-        :prev="page > 1"
-        :size="size"
-        debounce
-        @change="loadList"
-        @input="setSize"
-        @next="nextPage"
-        @prev="prevPage"
       />
     </div>
   </section>
 </template>
 
-<script>
+<script setup>
+import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
-import openedObjectTableTabMixin from '../../../../../../../app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin';
-import TokenCreatedPopup from './opened-user-token-created-popup.vue';
+import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
+import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
+import { useCardStore, useTableStore } from '@webitel/ui-sdk/store';
+import { inject, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useAccessControl } from '../../../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 import TokenPopup from './opened-user-token-popup.vue';
 
-export default {
-  name: 'OpenedUserTokens',
-  components: {
-    TokenPopup,
-    TokenCreatedPopup,
-    DeleteConfirmationPopup,
-  },
-  mixins: [openedObjectTableTabMixin],
-
-  setup() {
-    const {
-      isVisible: isDeleteConfirmationPopup,
-      deleteCount,
-      deleteCallback,
-
-      askDeleteConfirmation,
-      closeDelete,
-    } = useDeleteConfirmationPopup();
-
-    return {
-      isDeleteConfirmationPopup,
-      deleteCount,
-      deleteCallback,
-
-      askDeleteConfirmation,
-      closeDelete,
-    };
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
-
-  data: () => ({
-    subNamespace: 'tokens',
-    isPopup: false,
-    isTokenGenerated: false,
-  }),
-
-  computed: {
-    tokenId() {
-      return this.$route.params.tokenId;
-    },
-  },
-
-  methods: {
-    addItem() {
-      return this.$router.push({
-        ...this.$route,
-        params: { tokenId: 'new' },
-      });
-    },
-    openPopup() {
-      this.isPopup = true;
-    },
-    closePopup() {
-      this.$router.go(-1);
-      this.isPopup = false;
-      this.resetItemState();
-    },
-
-    openTokenCreatedPopup() {
-      this.isPopup = false;
-      this.isTokenGenerated = true;
-    },
-
-    closeTokenCreatedPopup() {
-      this.isTokenGenerated = false;
-      this.resetItemState();
+});
+
+const {
+  namespace: parentCardNamespace,
+  id: parentId,
+
+  addItem,
+} = useCardStore(props.namespace);
+
+const namespace = `${parentCardNamespace}/tokens`;
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const darkMode = inject('darkMode');
+
+const { disableUserInput } = useAccessControl();
+
+const {
+  namespace: tableNamespace,
+
+  dataList,
+  selected,
+  isLoading,
+  headers,
+  isNext,
+  error,
+
+  loadData,
+  deleteData,
+  sort,
+  setSelected,
+  onFilterEvent,
+} = useTableStore(namespace);
+
+const {
+  namespace: filtersNamespace,
+  restoreFilters,
+
+  subscribe,
+  flushSubscribers,
+} = useTableFilters(tableNamespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
+
+const {
+  isVisible: isDeleteConfirmationPopup,
+  deleteCount,
+  deleteCallback,
+
+  askDeleteConfirmation,
+  closeDelete,
+} = useDeleteConfirmationPopup();
+
+const create = async () => {
+  if (!parentId.value) {
+    await addItem();
+    await router.replace({
+      ...route,
+      params: {
+        ...route.params,
+        id: parentId.value,
+      },
+    });
+  }
+
+  return router.push({
+    ...route,
+    params: {
+      ...route.params,
+      tokenId: 'new',
     },
+  });
+};
+const prettifyDate = (value) => {
+  return new Date(+value).toLocaleString();
+};
 
-    prettifyDate(value) {
-      return new Date(+value).toLocaleString();
-    },
-  },
-  watch: {
-    tokenId: {
-      async handler(value) {
-        if (value === 'new') {
-          this.openPopup();
-        }
-      },
-      immediate: true,
+watch(
+  () => route.params.tokenId,
+  () => {
+    if (!route.params.tokenId) {
+      loadData();
     }
   },
-};
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js b/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js
new file mode 100644
index 000000000..9a687b644
--- /dev/null
+++ b/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js
@@ -0,0 +1,19 @@
+import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
+
+const filtersList = [
+  {
+    name: 'page',
+    value: 1,
+    defaultValue: 1,
+  },
+  {
+    name: 'size',
+    value: 10,
+    defaultValue: 10,
+  },
+  { name: 'sort' },
+];
+
+const filters = new FiltersStoreModule().addFilter(filtersList).getModule();
+
+export default filters;
diff --git a/src/modules/directory/modules/users/modules/tokens/store/usersTokens.js b/src/modules/directory/modules/users/modules/tokens/store/usersTokens.js
index 9dcc0cd8a..fadf26230 100644
--- a/src/modules/directory/modules/users/modules/tokens/store/usersTokens.js
+++ b/src/modules/directory/modules/users/modules/tokens/store/usersTokens.js
@@ -1,6 +1,12 @@
-import NestedObjectStoreModule from '../../../../../../../app/store/BaseStoreModules/StoreModules/NestedObjectStoreModule';
-import UserTokensAPI from '../api/userTokens';
-import headers from './_internals/headers';
+import {
+  createApiStoreModule,
+  createBaseStoreModule,
+  createCardStoreModule,
+  createTableStoreModule,
+} from '@webitel/ui-sdk/store';
+import UserTokensAPI from '../api/userTokens.js';
+import filters from '../modules/filters/store/filters.store.js';
+import headers from './_internals/headers.js';
 
 const resettableItemState = {
   itemInstance: {
@@ -9,27 +15,56 @@ const resettableItemState = {
   },
 };
 
-const actions = {
+const getters = {
+  PARENT_ID: (s, g, rootState) => rootState.directory.users.card.itemId,
+};
+
+const cardActions = {
   ADD_TOKEN: async (context) => {
-    try {
-      const { token } = await context.dispatch('POST_ITEM');
-      await context.dispatch('LOAD_DATA_LIST');
-      context.commit('SET_TOKEN', token);
-    } catch (err) {
-      throw err;
-    }
+    const { token } = await context.dispatch('api/POST_ITEM', { context });
+    return context.dispatch('SET_ITEM_PROPERTY', { path: 'token', value: token });
   },
 };
 
-const mutations = {
-  SET_TOKEN: async (state, token) => {
-    state.itemInstance.token = token;
+const api = createApiStoreModule({
+  state: {
+    api: UserTokensAPI,
+  },
+});
+
+const table = createTableStoreModule({
+  state: {
+    headers,
+  },
+  getters,
+  modules: {
+    api,
+    filters,
   },
+});
+
+const original = table.actions.LOAD_DATA_LIST;
+
+table.actions.LOAD_DATA_LIST = (context) => {
+  if (!context.getters.PARENT_ID) return;
+
+  return original(context);
 };
 
-const userTokens = new NestedObjectStoreModule({ resettableItemState, headers })
-  .attachAPIModule(UserTokensAPI)
-  .generateAPIActions()
-  .getModule({ actions, mutations });
+const card = createCardStoreModule({
+  state: { _resettable: resettableItemState },
+  getters,
+  actions: cardActions,
+  modules: {
+    api,
+  },
+});
+
+const userTokens = createBaseStoreModule({
+  modules: {
+    table,
+    card,
+  },
+});
 
 export default userTokens;
diff --git a/src/modules/directory/modules/users/store/_internals/headers.js b/src/modules/directory/modules/users/store/_internals/headers.js
index 576d7c83f..c75c145dd 100644
--- a/src/modules/directory/modules/users/store/_internals/headers.js
+++ b/src/modules/directory/modules/users/store/_internals/headers.js
@@ -11,7 +11,7 @@ export default [
     value: 'status',
     locale: 'objects.directory.users.status',
     width: 'minmax(320px, 1fr)',
-    field: 'presence.status',
+    field: 'presence',
     sort: SortSymbols.NONE,
   },
   {
@@ -30,7 +30,7 @@ export default [
     value: 'DnD',
     locale: 'objects.directory.users.DnD',
     width: '120px',
-    field: 'dnd',
+    field: 'presence',
     sort: SortSymbols.NONE,
   },
 ];
diff --git a/src/modules/directory/modules/users/store/users.js b/src/modules/directory/modules/users/store/users.js
index 3c149ad73..883d7cf27 100644
--- a/src/modules/directory/modules/users/store/users.js
+++ b/src/modules/directory/modules/users/store/users.js
@@ -1,9 +1,15 @@
-import ObjectStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/ObjectStoreModule';
+import {
+  createApiStoreModule,
+  createBaseStoreModule,
+  createCardStoreModule,
+  createTableStoreModule,
+} from '@webitel/ui-sdk/store';
 import PermissionsStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/PermissionsStoreModule/PermissionsStoreModule';
 import UsersAPI from '../api/users';
 import Users2faAPI from '../api/users-2fa.js';
-import logs from '../modules/logs/store/logs';
-import tokens from '../modules/tokens/store/usersTokens';
+import filters from '../modules/filters/store/filters.store.js';
+import logs from '../modules/logs/store/logs.js';
+import tokens from '../modules/tokens/store/usersTokens.js';
 import headers from './_internals/headers';
 
 const resettableState = {
@@ -27,38 +33,7 @@ const resettableState = {
   },
 };
 
-const getters = {
-  IS_DISPLAY_QR_CODE: (state, getters, rootState, rootGetters) =>
-    rootGetters['userinfo/IS_CHANGE_USER_PASSWORD_ALLOW'] && !!state.itemInstance.totpUrl,
-};
-
-const actions = {
-  ADD_VARIABLE_PAIR: (context) => {
-    const pair = { key: '', value: '' };
-    context.commit('ADD_VARIABLE_PAIR', pair);
-    context.commit('SET_ITEM_PROPERTY', {
-      prop: '_dirty',
-      value: true,
-    });
-  },
-  SET_VARIABLE_PROP: (context, { index, prop, value }) => {
-    context.commit('SET_VARIABLE_PROP', {
-      index,
-      prop,
-      value,
-    });
-    context.commit('SET_ITEM_PROPERTY', {
-      prop: '_dirty',
-      value: true,
-    });
-  },
-  DELETE_VARIABLE_PAIR: (context, index) => {
-    context.commit('DELETE_VARIABLE_PAIR', index);
-    context.commit('SET_ITEM_PROPERTY', {
-      prop: '_dirty',
-      value: true,
-    });
-  },
+const tableActions = {
   SET_USER_DND: async (context, { item, value }) => {
     const dnd = value ? 'dnd' : '';
     const changes = { status: dnd };
@@ -67,37 +42,23 @@ const actions = {
         id: item.id,
         changes,
       });
-    } catch (err) {
-      throw err;
     } finally {
       await context.dispatch('LOAD_DATA_LIST');
     }
   },
-  RESET_ITEM_STATE: (context) => {
-    context.commit('RESET_ITEM_STATE');
-    context.dispatch('directory/users/tokens/RESET_STATE', {}, { root: true });
-  },
-  REGENERATE_2FA_URL: async (context) => {
-    try {
-      await Users2faAPI.generate({
-        id: context.state.itemId,
-      });
-      await context.dispatch('LOAD_ITEM');
-    } catch (err) {
-      throw err;
-    }
-  },
 };
 
-const mutations = {
-  ADD_VARIABLE_PAIR: (state, pair) => {
-    state.itemInstance.variables.push(pair);
-  },
-  SET_VARIABLE_PROP: (state, { index, prop, value }) => {
-    state.itemInstance.variables[index][prop] = value;
-  },
-  DELETE_VARIABLE_PAIR: (state, index) => {
-    state.itemInstance.variables.splice(index, 1);
+const cardGetters = {
+  IS_DISPLAY_QR_CODE: (state, getters, rootState, rootGetters) =>
+    rootGetters['userinfo/IS_CHANGE_USER_PASSWORD_ALLOW'] && !!state.itemInstance.totpUrl,
+};
+
+const cardActions = {
+  REGENERATE_2FA_URL: async (context) => {
+    await Users2faAPI.generate({
+      id: context.state.itemId,
+    });
+    await context.dispatch('LOAD_ITEM');
   },
 };
 
@@ -106,10 +67,39 @@ const permissions = new PermissionsStoreModule()
   .generateAPIActions(PERMISSIONS_API_URL)
   .getModule();
 
-const users = new ObjectStoreModule({ resettableState, headers })
-  .attachAPIModule(UsersAPI)
-  .generateAPIActions()
-  .setChildModules({ tokens, logs, permissions })
-  .getModule({ getters, actions, mutations });
+const api = createApiStoreModule({
+  state: {
+    api: UsersAPI,
+  },
+});
+
+const table = createTableStoreModule({
+  state: {
+    headers,
+  },
+  actions: tableActions,
+  modules: {
+    filters,
+    api,
+  },
+});
+
+const card = createCardStoreModule({
+  state: { _resettable: resettableState },
+  getters: cardGetters,
+  actions: cardActions,
+  modules: {
+    api,
+    tokens,
+    logs,
+  },
+});
+
+const users = createBaseStoreModule({
+  modules: {
+    table,
+    card,
+  },
+});
 
 export default users;
diff --git a/vite.config.js b/vite.config.js
index 43f7235fe..d95fab181 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,6 +2,7 @@ import vue from '@vitejs/plugin-vue';
 import { defineConfig, loadEnv } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
@@ -9,8 +10,7 @@ export default ({ mode }) => {
 
   return defineConfig({
     define: {
-      'process.env': JSON.parse(JSON.stringify(env)
-      .replaceAll('VITE_', 'VUE_APP_')),
+      'process.env': JSON.parse(JSON.stringify(env).replaceAll('VITE_', 'VUE_APP_')),
     },
     server: {
       host: true,
@@ -50,6 +50,9 @@ export default ({ mode }) => {
       createSvgSpritePlugin({
         include: '**/sprite/*.svg',
       }),
+      vueDevTools({
+        // launchEditor: 'webstorm',
+      }),
     ],
     test: {
       globals: true,
@@ -61,4 +64,4 @@ export default ({ mode }) => {
       setupFiles: ['./tests/config/config.js'],
     },
   });
-}
+};

From 2a53f28cc4bb25198650109efe8cee546aed8643 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Tue, 8 Oct 2024 15:58:55 +0300
Subject: [PATCH 02/10] refactor: user logs filters refactor to compositions
 api [WTEL-3392]

---
 package-lock.json                             |  36 +-----
 package.json                                  |   2 +-
 .../modules/users/components/opened-user.vue  |   3 +-
 .../components/opened-user-logs-filters.vue   | 113 +++++++-----------
 .../logs/modules/filters/store/filters.js     |  69 +++++------
 .../modules/filters/store/filters.store.js    |   2 -
 6 files changed, 73 insertions(+), 152 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1fa7d5c1d..531c58093 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2506,41 +2506,7 @@
         "tslib": ">=1.10.0"
       }
     },
-    "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.22",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.22.tgz",
-      "integrity": "sha512-zNXlP/STPYnsthtbQe/jTOO1JLkOqXGlgv3RN4y1HdzOhhwd/l+4NYHus7xv8FU3J+L92MHd9rOISDfxGqBGUg==",
-      "dependencies": {
-        "@floating-ui/vue": "^1.0.1",
-        "@morev/vue-transitions": "^3.0.2",
-        "@vuelidate/core": "^2.0.3",
-        "@vuelidate/validators": "^2.0.4",
-        "@vuepic/vue-datepicker": "^4.4.0",
-        "@vueuse/components": "^10.7.2",
-        "axios": "^1.7.1",
-        "clipboard-copy": "^4.0.1",
-        "csv-stringify": "^5.5.3",
-        "deep-copy": "^1.4.2",
-        "deep-equal": "^2.0.3",
-        "deepmerge": "^4.3.1",
-        "file-saver-es": "^2.0.5",
-        "is-valid-domain": "^0.1.6",
-        "jszip": "^3.5.0",
-        "jszip-utils": "^0.1.0",
-        "lodash": "^4.17.21",
-        "mitt": "3.0.1",
-        "path-browserify": "^1.0.1",
-        "plyr": "3.6.3",
-        "query-string": "^8.1.0",
-        "sortablejs": "^1.15.0",
-        "vue-i18n": "^9.2.2",
-        "vue-multiselect": "^3.0.0-beta.3",
-        "vue-observe-visibility": "^2.0.0-alpha.1",
-        "vue-router": "^4.1.6",
-        "webitel-sdk": "^24.8.1",
-        "xlsx": "^0.18.5"
-      }
-    },
+
     "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
diff --git a/package.json b/package.json
index f983cc71d..4c1a94378 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.22",
+    "@webitel/ui-sdk": "^24.10.32",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 2ec083d95..82d976c6e 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -17,7 +17,7 @@
     <template #actions-panel>
       <component
         :is="currentTab.filters"
-        :namespace="currentTab.filtersNamespace"
+        :namespace="namespace"
       />
     </template>
 
@@ -156,7 +156,6 @@ const tabs = computed(() => {
     text: t('objects.system.changelogs.changelogs', 2),
     value: Logs,
     filters: LogsFilters,
-    filtersNamespace: `${cardNamespace}/logs/filters`,
     pathName: UsersRouteNames.LOGS,
   };
   const permissions = {
diff --git a/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue b/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
index 08791daf8..a85d8b28b 100644
--- a/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
+++ b/src/modules/directory/modules/users/modules/logs/modules/filters/components/opened-user-logs-filters.vue
@@ -1,80 +1,53 @@
 <template>
   <wt-filters-panel-wrapper @reset="resetFilters">
-<!--    <component-->
-<!--      :is="`abstract-${filter.type}-filter`"-->
-<!--      v-for="(filter, key) of filters"-->
-<!--      :key="key"-->
-<!--      :filter-query="filter.filterQuery"-->
-<!--      :namespace="namespace"-->
-<!--      class="history-filters__filter"-->
-<!--    />-->
-<!--    <filter-datetime-->
-<!--      :label="`${-->
-<!--        $t('reusable.modifiedAt')}: ${$t('reusable.from').toLowerCase()-->
-<!--      }`"-->
-<!--      :namespace="namespace"-->
-<!--      filter-query="from"-->
-<!--    />-->
-<!--    <filter-datetime-->
-<!--      :label="`${-->
-<!--        $t('reusable.modifiedAt')}: ${$t('reusable.to').toLowerCase()-->
-<!--      }`"-->
-<!--      :namespace="namespace"-->
-<!--      filter-query="to"-->
-<!--    />-->
+    <filter-select
+      :namespace="namespace"
+      :label="t('objects.system.changelogs.logs.actions', 1)"
+      filter-query="action"
+    />
+    <filter-select
+      :namespace="namespace"
+      :label="t('objects.system.changelogs.objects', 1)"
+      filter-query="object"
+    />
+    <filter-datetime
+      :label="`${
+        t('reusable.modifiedAt')}: ${t('reusable.from').toLowerCase()
+      }`"
+      :namespace="namespace"
+      filter-query="from"
+    />
+    <filter-datetime
+      :label="`${
+        t('reusable.modifiedAt')}: ${t('reusable.to').toLowerCase()
+      }`"
+      :namespace="namespace"
+      filter-query="to"
+    />
   </wt-filters-panel-wrapper>
 </template>
 
-<script>
-import AbstractApiFilter from '@webitel/ui-sdk/src/modules/QueryFilters/components/abstract-api-filter.vue';
-import AbstractEnumFilter from '@webitel/ui-sdk/src/modules/QueryFilters/components/abstract-enum-filter.vue';
-import FilterDatetime from '@webitel/ui-sdk/src/modules/QueryFilters/components/filter-datetime.vue';
-import FilterFromTo from '@webitel/ui-sdk/src/modules/QueryFilters/components/filter-from-to.vue';
-import { mapActions } from 'vuex';
+<script setup>
+import FilterDatetime from '@webitel/ui-sdk/src/modules/Filters/components/filter-datetime.vue';
+import FilterSelect from '@webitel/ui-sdk/src/modules/Filters/components/filter-select.vue';
+import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
+import { onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  name: 'OpenedUserLogsFilters',
-  components: {
-    FilterDatetime,
-    FilterFromTo,
-    AbstractApiFilter,
-    AbstractEnumFilter,
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
-  props: {
-    namespace: {
-      type: String,
-      required: true,
-    },
-  },
-  data: () => ({
-    filters: [
-      {
-        type: 'enum',
-        filterQuery: 'action',
-      },
-      {
-        type: 'api',
-        filterQuery: 'object',
-      },
-    ],
-  }),
-  methods: {
-    ...mapActions({
-      resetFilterValues(dispatch, payload) {
-        return dispatch(`${this.namespace}/RESET_FILTERS`, payload);
-      },
-    }),
-    resetFilters() {
-      this.$router.push({
-        query: null,
-      });
-      this.resetFilterValues();
-    },
-  },
-  unmounted() {
-    this.resetFilters();
-  },
-};
+});
+
+const { namespace, resetFilters } = useTableFilters(`${props.namespace}/card/logs/table`);
+
+const { t } = useI18n();
+
+onUnmounted(() => {
+  resetFilters();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js b/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
index cc6c0f7e7..9b8e55112 100644
--- a/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
+++ b/src/modules/directory/modules/users/modules/logs/modules/filters/store/filters.js
@@ -1,58 +1,43 @@
-// import ApiFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/ApiFilterSchema';
-// import BaseFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/BaseFilterSchema';
-// import EnumFilterSchema from '@webitel/ui-sdk/src/modules/QueryFilters/classes/EnumFilterSchema';
-// import QueryFiltersStoreModule from '@webitel/ui-sdk/src/modules/QueryFilters/store/QueryFiltersStoreModule';
-// import { LoggerAction } from 'webitel-sdk';
-// import ChangelogsAPI from '../../../../../../../../system/modules/changelogs/api/changelogs';
-//
-// const state = {
-//   search: new BaseFilterSchema(),
-//   action: new EnumFilterSchema({
-//     locale: {
-//       label: ['objects.system.changelogs.logs.actions', 1],
-//     },
-//     options: Object.values(LoggerAction)
-//       .filter((action) => action !== LoggerAction.DefaultNoAction && action !== LoggerAction.Read)
-//       .map((action) => ({
-//         value: action,
-//         locale: `objects.system.changelogs.logs.actionType.${action}`,
-//       })),
-//   }),
-//   object: new ApiFilterSchema({
-//     locale: {
-//       label: ['objects.system.changelogs.objects', 1],
-//     },
-//     API: (params) =>
-//       ChangelogsAPI.getObjectsList({
-//         ...params,
-//         includeExisting: true,
-//       }),
-//   }),
-//   from: new BaseFilterSchema({
-//     value: new Date().setHours(0, 0, 0, 0),
-//     defaultValue: new Date().setHours(0, 0, 0, 0),
-//   }),
-//   to: new BaseFilterSchema({
-//     value: new Date().setHours(23, 59, 59, 0),
-//     defaultValue: new Date().setHours(23, 59, 59, 0),
-//   }),
-// };
-
 import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule.js';
+import { LoggerAction } from 'webitel-sdk';
+import ChangelogsAPI from '../../../../../../../../system/modules/changelogs/api/changelogs';
 
 const filtersList = [
   {
     name: 'page',
     value: 1,
-    defaultValue: 1,
   },
   {
     name: 'size',
     value: 10,
-    defaultValue: 10,
   },
   { name: 'sort' },
   { name: 'search' },
+  {
+    name: 'action',
+    options: Object.values(LoggerAction)
+      .filter((action) => action !== LoggerAction.DefaultNoAction && action !== LoggerAction.Read)
+      .map((action) => ({
+        value: action,
+        locale: `objects.system.changelogs.logs.actionType.${action}`,
+      })),
+  },
+  {
+    name: 'object',
+    search: (params) =>
+      ChangelogsAPI.getObjectsList({
+        ...params,
+        includeExisting: true,
+      }),
+  },
+  {
+    name: 'from',
+    value: new Date().setHours(0, 0, 0, 0),
+  },
+  {
+    name: 'to',
+    value: new Date().setHours(23, 59, 59, 0),
+  },
 ];
 
 const filters = new FiltersStoreModule().addFilter(filtersList).getModule();
diff --git a/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js b/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js
index 9a687b644..2ed2633db 100644
--- a/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js
+++ b/src/modules/directory/modules/users/modules/tokens/modules/filters/store/filters.store.js
@@ -4,12 +4,10 @@ const filtersList = [
   {
     name: 'page',
     value: 1,
-    defaultValue: 1,
   },
   {
     name: 'size',
     value: 10,
-    defaultValue: 10,
   },
   { name: 'sort' },
 ];

From e78071c7fb73887cc1da56fa3e2ad8bd724c2ee5 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Thu, 17 Oct 2024 16:03:52 +0300
Subject: [PATCH 03/10] refactor: small refactors [WTEL-3392]

---
 .../directory/modules/users/api/contacts.js   |  2 +-
 .../modules/users/components/opened-user.vue  | 48 +++++++++--------
 .../modules/filters/store/filters.store.js    | 17 ++++++
 .../directory/modules/users/router/users.js   | 53 +++++++++++--------
 .../directory/modules/users/store/users.js    | 21 +++++---
 5 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 src/modules/directory/modules/users/modules/permissions/modules/filters/store/filters.store.js

diff --git a/src/modules/directory/modules/users/api/contacts.js b/src/modules/directory/modules/users/api/contacts.js
index 03488d39d..f56248cbb 100644
--- a/src/modules/directory/modules/users/api/contacts.js
+++ b/src/modules/directory/modules/users/api/contacts.js
@@ -1,3 +1,3 @@
-import { contacts } from '@webitel/ui-sdk/src/api/crm/index.js';
+import { contacts } from '@webitel/ui-sdk/src/api/clients/index.js';
 
 export default contacts;
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 82d976c6e..6ee8be2e1 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -31,11 +31,14 @@
           :tabs="tabs"
           @change="changeTab"
         />
-        <component
-          :is="currentTab.value"
-          :namespace="namespace"
-          :v="v$"
-        />
+        <router-view v-slot="{ Component }">
+          <component
+            :is="Component"
+            :namespace="cardNamespace"
+            :v="v$"
+            :access="{ read: true, edit: !disableUserInput, delete: !disableUserInput, add: !disableUserInput }"
+          />
+        </router-view>
         <input
           hidden
           type="submit"
@@ -56,16 +59,8 @@ import { useStore } from 'vuex';
 import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
 import { useCachedItemInstanceName } from '../../../../../app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
-import Permissions from '../../../../_shared/permissions-tab/components/permissions-tab.vue';
-import Logs from '../modules/logs/components/opened-user-logs.vue';
 import LogsFilters from '../modules/logs/modules/filters/components/opened-user-logs-filters.vue';
-import Tokens from '../modules/tokens/components/opened-user-token.vue';
 import UsersRouteNames from '../router/_internals/UsersRouteNames.enum.js';
-import Devices from './opened-user-devices.vue';
-import General from './opened-user-general.vue';
-import License from './opened-user-license.vue';
-import Roles from './opened-user-roles.vue';
-import Variables from './opened-user-variables.vue';
 
 const namespace = 'directory/users';
 
@@ -88,7 +83,7 @@ const {
   resetState,
 } = useCardStore(namespace);
 
-const { hasSaveActionAccess } = useAccessControl();
+const { hasSaveActionAccess, disableUserInput } = useAccessControl();
 
 const isLoading = ref(false);
 
@@ -124,43 +119,43 @@ const isNew = computed(() => route.params.id === 'new');
 const tabs = computed(() => {
   const general = {
     text: t('objects.general'),
-    value: General,
+    value: UsersRouteNames.GENERAL,
     pathName: UsersRouteNames.GENERAL,
   };
   const roles = {
     text: t('objects.directory.users.roles'),
-    value: Roles,
+    value: UsersRouteNames.ROLES,
     pathName: UsersRouteNames.ROLES,
   };
   const license = {
     text: t('objects.directory.users.license'),
-    value: License,
+    value: UsersRouteNames.LICENSE,
     pathName: UsersRouteNames.LICENSE,
   };
   const devices = {
     text: t('objects.directory.users.devices'),
-    value: Devices,
+    value: UsersRouteNames.DEVICES,
     pathName: UsersRouteNames.DEVICES,
   };
   const variables = {
     text: t('objects.directory.users.variables'),
-    value: Variables,
+    value: UsersRouteNames.VARIABLES,
     pathName: UsersRouteNames.VARIABLES,
   };
   const tokens = {
     text: t('objects.directory.users.tokens'),
-    value: Tokens,
+    value: UsersRouteNames.TOKENS,
     pathName: UsersRouteNames.TOKENS,
   };
   const logs = {
     text: t('objects.system.changelogs.changelogs', 2),
-    value: Logs,
     filters: LogsFilters,
+    value: UsersRouteNames.LOGS,
     pathName: UsersRouteNames.LOGS,
   };
   const permissions = {
     text: t('objects.permissions.permissions', 2),
-    value: Permissions,
+    value: UsersRouteNames.PERMISSIONS,
     pathName: UsersRouteNames.PERMISSIONS,
   };
 
@@ -175,7 +170,14 @@ const currentTab = computed(() => {
 });
 
 const changeTab = (tab) => {
-  return router.push({ ...route, name: tab.pathName });
+  const { params, query, hash } = route;
+
+  return router.push({
+    name: tab.pathName,
+    params,
+    query,
+    hash,
+  });
 };
 
 const { name: pathName } = useCachedItemInstanceName(itemInstance);
diff --git a/src/modules/directory/modules/users/modules/permissions/modules/filters/store/filters.store.js b/src/modules/directory/modules/users/modules/permissions/modules/filters/store/filters.store.js
new file mode 100644
index 000000000..2ed2633db
--- /dev/null
+++ b/src/modules/directory/modules/users/modules/permissions/modules/filters/store/filters.store.js
@@ -0,0 +1,17 @@
+import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
+
+const filtersList = [
+  {
+    name: 'page',
+    value: 1,
+  },
+  {
+    name: 'size',
+    value: 10,
+  },
+  { name: 'sort' },
+];
+
+const filters = new FiltersStoreModule().addFilter(filtersList).getModule();
+
+export default filters;
diff --git a/src/modules/directory/modules/users/router/users.js b/src/modules/directory/modules/users/router/users.js
index f9a794e77..9e4609e89 100644
--- a/src/modules/directory/modules/users/router/users.js
+++ b/src/modules/directory/modules/users/router/users.js
@@ -1,17 +1,19 @@
-import { checkRouteAccess } from '../../../../../app/router/_internals/guards.js';
+const PermissionsTab = () =>
+  import('@webitel/ui-sdk/src/modules/ObjectPermissions/components/permissions-tab.vue');
+
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+import { checkRouteAccess } from '../../../../../app/router/_internals/guards.js';
 import UsersRouteNames from './_internals/UsersRouteNames.enum.js';
 
 const Users = () => import('../components/the-users.vue');
-const OpenedUser = () =>import('../components/opened-user.vue');
-const OpenedUserGeneral = () =>import('../components/opened-user-general.vue');
-const OpenedUserRoles = () =>import('../components/opened-user-roles.vue');
-const OpenedUserLicense = () =>import('../components/opened-user-license.vue');
-const OpenedUserDevices = () =>import('../components/opened-user-devices.vue');
-const OpenedUserVariables = () =>import('../components/opened-user-variables.vue');
-const OpenedUserToken = () =>import('../modules/tokens/components/opened-user-token.vue');
-const OpenedUserLogs = () =>import('../modules/logs/components/opened-user-logs.vue');
-const PermissionsTab = () =>import('../../../../_shared/permissions-tab/components/permissions-tab.vue');
+const OpenedUser = () => import('../components/opened-user.vue');
+const OpenedUserGeneral = () => import('../components/opened-user-general.vue');
+const OpenedUserRoles = () => import('../components/opened-user-roles.vue');
+const OpenedUserLicense = () => import('../components/opened-user-license.vue');
+const OpenedUserDevices = () => import('../components/opened-user-devices.vue');
+const OpenedUserVariables = () => import('../components/opened-user-variables.vue');
+const OpenedUserToken = () => import('../modules/tokens/components/opened-user-token.vue');
+const OpenedUserLogs = () => import('../modules/logs/components/opened-user-logs.vue');
 
 const UsersRoutes = [
   {
@@ -24,44 +26,51 @@ const UsersRoutes = [
     path: '/directory/users/:id',
     name: `${RouteNames.USERS}-card`,
     component: OpenedUser,
-    redirect: {name: UsersRouteNames.GENERAL},
+    redirect: { name: UsersRouteNames.GENERAL },
     beforeEnter: checkRouteAccess,
     children: [
       {
         path: 'general',
         name: UsersRouteNames.GENERAL,
         component: OpenedUserGeneral,
-      },{
+      },
+      {
         path: 'roles',
         name: UsersRouteNames.ROLES,
         component: OpenedUserRoles,
-      },{
+      },
+      {
         path: 'license',
         name: UsersRouteNames.LICENSE,
         component: OpenedUserLicense,
-      },{
+      },
+      {
         path: 'devices',
         name: UsersRouteNames.DEVICES,
         component: OpenedUserDevices,
-      },{
+      },
+      {
         path: 'variables',
         name: UsersRouteNames.VARIABLES,
         component: OpenedUserVariables,
-      },{
+      },
+      {
         path: 'tokens/:tokenId?',
         name: UsersRouteNames.TOKENS,
         component: OpenedUserToken,
-      },{
+      },
+      {
         path: 'logs',
         name: UsersRouteNames.LOGS,
         component: OpenedUserLogs,
-      },{
+      },
+      {
         path: 'permissions/:permissionId?',
-        name: `${UsersRouteNames.PERMISSIONS}-card`,
+        name: UsersRouteNames.PERMISSIONS,
         component: PermissionsTab,
-      }
+      },
     ],
   },
-]
+];
 
-export  default UsersRoutes;
+export default UsersRoutes;
diff --git a/src/modules/directory/modules/users/store/users.js b/src/modules/directory/modules/users/store/users.js
index 883d7cf27..163549ba6 100644
--- a/src/modules/directory/modules/users/store/users.js
+++ b/src/modules/directory/modules/users/store/users.js
@@ -1,10 +1,10 @@
+import { createObjectPermissionsStoreModule } from '@webitel/ui-sdk/src/modules/ObjectPermissions/store/index.js';
 import {
   createApiStoreModule,
   createBaseStoreModule,
   createCardStoreModule,
   createTableStoreModule,
 } from '@webitel/ui-sdk/store';
-import PermissionsStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/PermissionsStoreModule/PermissionsStoreModule';
 import UsersAPI from '../api/users';
 import Users2faAPI from '../api/users-2fa.js';
 import filters from '../modules/filters/store/filters.store.js';
@@ -62,17 +62,25 @@ const cardActions = {
   },
 };
 
-const PERMISSIONS_API_URL = '/users';
-const permissions = new PermissionsStoreModule()
-  .generateAPIActions(PERMISSIONS_API_URL)
-  .getModule();
-
 const api = createApiStoreModule({
   state: {
     api: UsersAPI,
   },
 });
 
+const permissions = createObjectPermissionsStoreModule({
+  modules: {
+    table: {
+      getters: {
+        PARENT_ID: (s, g, rootState) => rootState.directory.users.card.itemId,
+      },
+      modules: {
+        api,
+      },
+    },
+  },
+});
+
 const table = createTableStoreModule({
   state: {
     headers,
@@ -92,6 +100,7 @@ const card = createCardStoreModule({
     api,
     tokens,
     logs,
+    permissions,
   },
 });
 

From dfba7678b0302f84ce4a60e793c679d1da421ffe Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Fri, 18 Oct 2024 00:09:45 +0300
Subject: [PATCH 04/10] refactor: upd permissions webitel-ui version
 [WTEL-3392]

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4c1a94378..94f950e26 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.32",
+    "@webitel/ui-sdk": "^24.10.46",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

From 969fb306c5b2ad2880c7d8f3d298676e16ba2bfb Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 24 Oct 2024 16:10:45 +0300
Subject: [PATCH 05/10] refactor: add new composables in
 opened-user.vue[WTEL-5282]

---
 package-lock.json                             | 686 ++++++++++++++++--
 package.json                                  |   2 +-
 .../accessControlMixin/useAccessControl.js    |  33 -
 .../useCachedItemInstanceName.js              |  33 -
 .../users/components/opened-user-devices.vue  |   2 +-
 .../users/components/opened-user-general.vue  |   2 +-
 .../users/components/opened-user-license.vue  |   2 +-
 .../users/components/opened-user-roles.vue    |   2 +-
 .../components/opened-user-variables.vue      |   2 +-
 .../modules/users/components/opened-user.vue  | 157 +---
 .../modules/users/components/the-users.vue    |   2 +-
 .../tokens/components/opened-user-token.vue   |   2 +-
 12 files changed, 693 insertions(+), 232 deletions(-)
 delete mode 100644 src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
 delete mode 100644 src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js

diff --git a/package-lock.json b/package-lock.json
index 531c58093..5a71e5c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.22",
+        "@webitel/ui-sdk": "^24.10.49",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -1677,6 +1677,57 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.0.tgz",
+      "integrity": "sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==",
+      "peer": true,
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.22.0",
+        "@shikijs/engine-oniguruma": "1.22.0",
+        "@shikijs/types": "1.22.0",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.3"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.0.tgz",
+      "integrity": "sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==",
+      "peer": true,
+      "dependencies": {
+        "@shikijs/types": "1.22.0",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "oniguruma-to-js": "0.4.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.0.tgz",
+      "integrity": "sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==",
+      "peer": true,
+      "dependencies": {
+        "@shikijs/types": "1.22.0",
+        "@shikijs/vscode-textmate": "^9.3.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.0.tgz",
+      "integrity": "sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==",
+      "peer": true,
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+      "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+      "peer": true
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@@ -1719,6 +1770,24 @@
       "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==",
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/ms": {
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
@@ -1737,6 +1806,12 @@
         "undici-types": "~6.11.1"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "peer": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -1749,6 +1824,12 @@
       "integrity": "sha512-W5FyScaZ+nLb0CXP/4UaRiNr042RwW/RnLUZYt0uwveZN8w+X1gtt0bYIg9oMzt5ODiU/aQV/kyCFv24wfNrXA==",
       "license": "MIT"
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "peer": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
@@ -2506,13 +2587,40 @@
         "tslib": ">=1.10.0"
       }
     },
-
-    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
-      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
-      "engines": {
-        "node": ">=14.16"
+    "node_modules/@webitel/ui-sdk": {
+      "version": "24.10.49",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.49.tgz",
+      "integrity": "sha512-v17ZkqDKJvkSoL9J2DIUZ2yU3UA+kttdCXIV06F0pa/Il7V9dsoVoI2msLk1Q/tx7RI2Siow8RRlebs6O/1ctA==",
+      "dependencies": {
+        "@floating-ui/vue": "^1.0.1",
+        "@morev/vue-transitions": "^3.0.2",
+        "@vuelidate/core": "^2.0.3",
+        "@vuelidate/validators": "^2.0.4",
+        "@vuepic/vue-datepicker": "^4.4.0",
+        "@vueuse/components": "^10.7.2",
+        "autosize": "^6.0.1",
+        "axios": "^1.7.1",
+        "clipboard-copy": "^4.0.1",
+        "csv-stringify": "^5.5.3",
+        "deep-copy": "^1.4.2",
+        "deep-equal": "^2.0.3",
+        "deepmerge": "^4.3.1",
+        "file-saver-es": "^2.0.5",
+        "is-valid-domain": "^0.1.6",
+        "jszip": "^3.5.0",
+        "jszip-utils": "^0.1.0",
+        "lodash": "^4.17.21",
+        "mitt": "3.0.1",
+        "path-browserify": "^1.0.1",
+        "plyr": "3.6.3",
+        "query-string": "^8.1.0",
+        "sortablejs": "^1.15.0",
+        "vue-i18n": "^9.2.2",
+        "vue-multiselect": "^3.0.0-beta.3",
+        "vue-observe-visibility": "^2.0.0-alpha.1",
+        "vue-router": "^4.1.6",
+        "webitel-sdk": "^24.8.2",
+        "xlsx": "^0.18.5"
       }
     },
     "node_modules/@webitel/ui-sdk/node_modules/deep-equal": {
@@ -2546,22 +2654,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
-      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@webitel/ui-sdk/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
-    },
     "node_modules/@webitel/ui-sdk/node_modules/query-string": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz",
@@ -2578,17 +2670,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
-      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -2835,6 +2916,11 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/autosize": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-6.0.1.tgz",
+      "integrity": "sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2864,7 +2950,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/base": {
@@ -2973,7 +3058,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -3302,6 +3386,16 @@
         }
       ]
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
@@ -3370,6 +3464,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -3567,6 +3681,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -4213,6 +4337,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
@@ -4229,6 +4362,19 @@
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz",
       "integrity": "sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ=="
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dezalgo": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
@@ -5544,6 +5690,42 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+      "peer": true,
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "peer": true,
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -5599,6 +5781,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -6591,6 +6783,15 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "peer": true,
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
@@ -6684,6 +6885,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "peer": true
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -6743,6 +6950,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "peer": true
+    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -6762,6 +6992,27 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "peer": true,
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -6769,6 +7020,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "peer": true
+    },
     "node_modules/merge-options": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-1.0.1.tgz",
@@ -6804,6 +7061,95 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "peer": true
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "peer": true
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "peer": true
+    },
     "node_modules/micromatch": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
@@ -7508,6 +7854,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-to-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+      "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+      "peer": true,
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
@@ -7951,6 +8309,16 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -7995,6 +8363,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qrcode.vue": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.4.1.tgz",
@@ -8132,6 +8509,12 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
+    "node_modules/regex": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+      "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+      "peer": true
+    },
     "node_modules/regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -8534,6 +8917,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/shiki": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.0.tgz",
+      "integrity": "sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==",
+      "peer": true,
+      "dependencies": {
+        "@shikijs/core": "1.22.0",
+        "@shikijs/engine-javascript": "1.22.0",
+        "@shikijs/engine-oniguruma": "1.22.0",
+        "@shikijs/types": "1.22.0",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -8766,6 +9163,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
@@ -9093,6 +9500,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "peer": true,
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -9804,6 +10225,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
@@ -9927,6 +10358,54 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedoc": {
+      "version": "0.26.10",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.10.tgz",
+      "integrity": "sha512-xLmVKJ8S21t+JeuQLNueebEuTVphx6IrP06CdV7+0WVflUSW3SPmR+h1fnWVdAR/FQePEgsSWCUHXqKKjzuUAw==",
+      "peer": true,
+      "dependencies": {
+        "lunr": "^2.3.9",
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "shiki": "^1.16.2",
+        "yaml": "^2.5.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
+      }
+    },
+    "node_modules/typedoc-github-theme": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/typedoc-github-theme/-/typedoc-github-theme-0.1.2.tgz",
+      "integrity": "sha512-GFwQeq+z4FMtA9u2+wBx/UvzaX6t3xueigv6Jrt1G8JQLLyYuFfWwE3ESuKzpLfDu1+29GK4n70GbIqFRG+gaw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "typedoc": "^0.26.0"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
@@ -9941,6 +10420,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "peer": true
+    },
     "node_modules/ufo": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
@@ -10051,6 +10536,74 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -10256,6 +10809,34 @@
       "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
       "license": "ISC"
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
@@ -10646,16 +11227,17 @@
       }
     },
     "node_modules/webitel-sdk": {
-      "version": "24.8.1",
-      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.1.tgz",
-      "integrity": "sha512-abdjKyIX7OgykvRJwAAJiIZAyvCExGa9aA9obtXbSfQtMvrF9mTXVQFYv5STYWLQGgpU04Q8BSLp2nj+GSFOZQ==",
+      "version": "24.8.3",
+      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.3.tgz",
+      "integrity": "sha512-NdRhJbCZZTg4JxxQCK6EgVLyeztO50tFn163dLHDhrb58reIECN8MKg7HPBkB8wghZhvBimKKDww6e/mQB+LdQ==",
       "dependencies": {
         "@types/webrtc": "~0.0.41",
         "deep-copy": "1.4.2",
         "ee-ts": "1.0.1",
         "json-refs": "3.0.13",
         "jssip": "=3.10.1",
-        "query-string": "7.0.0"
+        "query-string": "7.0.0",
+        "typedoc-github-theme": "0.1.2"
       },
       "peerDependencies": {
         "axios": "^1.6.8",
@@ -10973,6 +11555,18 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -10985,6 +11579,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 94f950e26..b61490b7f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.46",
+    "@webitel/ui-sdk": "^24.10.49",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js b/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
deleted file mode 100644
index 3c1988123..000000000
--- a/src/app/mixins/baseMixins/accessControlMixin/useAccessControl.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
-
-export const useAccessControl = () => {
-  const store = useStore();
-  const route = useRoute();
-
-  const hasReadAccess = computed(() => store.getters['userinfo/HAS_READ_ACCESS']({ route }));
-  const hasCreateAccess = computed(() => store.getters['userinfo/HAS_CREATE_ACCESS']({ route }));
-  const hasEditAccess = computed(() => store.getters['userinfo/HAS_EDIT_ACCESS']({ route }));
-  const hasDeleteAccess = computed(() => store.getters['userinfo/HAS_DELETE_ACCESS']({ route }));
-
-  const hasSaveActionAccess = computed(() => {
-    if (route.params.id === 'new') return hasEditAccess.value;
-    return hasCreateAccess.value;
-  });
-
-  const disableUserInput = computed(() => {
-    if (route.params.id === 'new') return !hasEditAccess.value;
-    return !hasCreateAccess.value;
-  });
-
-  return {
-    hasReadAccess,
-    hasCreateAccess,
-    hasEditAccess,
-    hasDeleteAccess,
-
-    hasSaveActionAccess,
-    disableUserInput,
-  };
-};
diff --git a/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js b/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js
deleted file mode 100644
index 26f8618fb..000000000
--- a/src/app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import get from 'lodash/get.js';
-import { onMounted, ref, watch } from 'vue';
-
-export const useCachedItemInstanceName = (itemInstance, { namePath = 'name' } = {}) => {
-  const name = ref('');
-
-  const updateName = () => {
-    name.value = get(itemInstance.value, namePath);
-  };
-
-  watch(
-    () => itemInstance.value._dirty,
-    (value) => {
-      if (!value) updateName();
-    },
-  );
-
-  onMounted(() => {
-    // itemInstance._dirty isn't init as "false",
-    // so that we should set up first name representation in other way
-    const unwatch = watch(
-      () => itemInstance.value.name,
-      (name) => {
-        updateName();
-        if (name) unwatch();
-      },
-    );
-  });
-
-  return {
-    name,
-  };
-};
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index cb02c9e2f..6a29d0c99 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -45,7 +45,7 @@
 import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
 import DevicesAPI from '../../devices/api/devices.js';
 
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 21bf342e4..81790e9a0 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -67,7 +67,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import UserPasswordInput from '../../../../../app/components/utils/user-password-input.vue';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import ContactsAPI from '../api/contacts.js';
 import Qrcode from './_internals/qrcode-two-factor-auth.vue';
 
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index 10bc969e4..b7644af6b 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -23,7 +23,7 @@
 import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import LicenseAPI from '../../license/api/license.js';
 
 const props = defineProps({
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index 08507673a..d4394f0e0 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -23,7 +23,7 @@
 import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import RolesAPI from '../../../../permissions/modules/roles/api/roles';
 
 const props = defineProps({
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 2bec877b5..3f93f198d 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -47,7 +47,7 @@
 import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 
 const props = defineProps({
   namespace: {
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 6ee8be2e1..fda1943de 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -49,72 +49,59 @@
 </template>
 
 <script setup>
-import { useVuelidate } from '@vuelidate/core';
-import { helpers, required, requiredIf } from '@vuelidate/validators';
-import { useCardStore } from '@webitel/ui-sdk/store';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
-import { useCachedItemInstanceName } from '../../../../../app/mixins/baseMixins/headlineNavMixin/useCachedItemInstanceName.js';
+import { useRoute } from 'vue-router';
+import { helpers, required, requiredIf } from '@vuelidate/validators';
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
+import { useCardComponent } from '@webitel/ui-sdk/src/composables/useCard/useCardComponent.js';
+import { useCardTabs } from '@webitel/ui-sdk/src/composables/useCard/useCardTabs.js';
+import { useValidate } from '@webitel/ui-sdk/src/composables/useValidate/useValidate.js';
+import { useClose } from '@webitel/ui-sdk/src/composables/useClose/useClose.js';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
 import LogsFilters from '../modules/logs/modules/filters/components/opened-user-logs-filters.vue';
 import UsersRouteNames from '../router/_internals/UsersRouteNames.enum.js';
 
 const namespace = 'directory/users';
-
-// mixins: [openedObjectMixin],
-
-const store = useStore();
-const router = useRouter();
-const route = useRoute();
 const { t } = useI18n();
+const route = useRoute();
+
+/** useVuelidate collects nested validations,
+ *  so that it collects validation from nested user-password-input.vue */
+const validateSchema = computed(() => ({
+  itemInstance: {
+    username: { required },
+
+    /** see comment above */
+    // password: {
+    //   required: requiredUnless((value, item) => !!item.id),
+    // },
+    variables: {
+      $each: helpers.forEach({
+        key: {
+          required: requiredIf((value, item) => !!item.value),
+        },
+        value: {
+          required: requiredIf((value, item) => !!item.key),
+        },
+      }),
+    },
+  },
+}));
 
 const {
   namespace: cardNamespace,
   id,
   itemInstance,
-
-  loadItem,
-  addItem,
-  updateItem,
-  setId,
-  resetState,
+  ...restStore
 } = useCardStore(namespace);
 
+const { v$, invalid } = useValidate(validateSchema, { itemInstance });
+const { isNew, pathName, disabledSave, saveText, save, initialize } = useCardComponent({...restStore, itemInstance, invalid});
 const { hasSaveActionAccess, disableUserInput } = useAccessControl();
 
-const isLoading = ref(false);
-
-/** useVuelidate collects nested validations,
- *  so that it collects validation from nested user-password-input.vue */
-const v$ = useVuelidate(
-  computed(() => ({
-    itemInstance: {
-      username: { required },
-
-      /** see comment above */
-      // password: {
-      //   required: requiredUnless((value, item) => !!item.id),
-      // },
-      variables: {
-        $each: helpers.forEach({
-          key: {
-            required: requiredIf((value, item) => !!item.value),
-          },
-          value: {
-            required: requiredIf((value, item) => !!item.key),
-          },
-        }),
-      },
-    },
-  })),
-  { itemInstance },
-  { $autoDirty: true },
-);
-
-const isNew = computed(() => route.params.id === 'new');
+const { close } = useClose(RouteNames.USERS);
 
 const tabs = computed(() => {
   const general = {
@@ -165,32 +152,16 @@ const tabs = computed(() => {
   return tabs;
 });
 
-const currentTab = computed(() => {
-  return tabs.value.find(({ pathName }) => route.name === pathName) || tabs.value[0];
-});
-
-const changeTab = (tab) => {
-  const { params, query, hash } = route;
-
-  return router.push({
-    name: tab.pathName,
-    params,
-    query,
-    hash,
-  });
-};
-
-const { name: pathName } = useCachedItemInstanceName(itemInstance);
+const { currentTab, changeTab } = useCardTabs(tabs.value);
 
 const path = computed(() => {
-  const baseUrl = '/directory/users';
   return [
     {
       name: t('objects.directory.directory'),
     },
     {
       name: t('objects.directory.users.users', 2),
-      route: baseUrl,
+      route: namespace,
     },
     {
       name: isNew.value ? t('objects.new') : pathName.value,
@@ -202,55 +173,7 @@ const path = computed(() => {
   ];
 });
 
-const disabledSave = computed(() => {
-  return v$.value.$invalid || !itemInstance.value._dirty;
-});
-
-const saveText = computed(() => {
-  return isNew.value || itemInstance.value._dirty ? t('objects.save') : t('objects.saved');
-});
-
-const redirectToEdit = (_id = id.value) => {
-  return router.replace({
-    ...route,
-    params: { id: _id },
-  });
-};
-
-const save = async () => {
-  if (disabledSave.value) return;
-
-  if (isNew.value) {
-    await addItem();
-  } else {
-    await updateItem();
-  }
-
-  if (id.value) {
-    await redirectToEdit();
-  }
-};
-
-async function initializeCard() {
-  try {
-    isLoading.value = true;
-
-    const { id: itemId } = route.params;
-    await setId(itemId);
-    await loadItem();
-  } finally {
-    setTimeout(() => {
-      isLoading.value = false;
-    }, 500);
-  }
-}
-
-onMounted(() => initializeCard());
-onUnmounted(() => resetState());
-
-const close = () => {
-  return router.push({ name: RouteNames.USERS });
-};
+initialize();
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index 1e4177e0a..e79e13764 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -158,7 +158,7 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import UploadFileIconBtn from '../../../../../app/components/utils/upload-file-icon-btn.vue';
 import { useDummy } from '../../../../../app/composables/useDummy';
-import { useAccessControl } from '../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import UserStatus from './_internals/user-status-chips.vue';
 import UploadPopup from './upload-users-popup.vue';
diff --git a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
index edc81d5c1..e56f03011 100644
--- a/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
+++ b/src/modules/directory/modules/users/modules/tokens/components/opened-user-token.vue
@@ -105,7 +105,7 @@ import { inject, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-import { useAccessControl } from '../../../../../../../app/mixins/baseMixins/accessControlMixin/useAccessControl.js';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
 import TokenPopup from './opened-user-token-popup.vue';
 
 const props = defineProps({

From 54fcfcdd904858246a87dc7a2258d69e7bc18f0f Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 24 Oct 2024 20:51:59 +0300
Subject: [PATCH 06/10] fix: add baseUrl in path computed[WTEL-5282]

---
 .../directory/modules/users/components/opened-user.vue        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index fda1943de..88cb2b3d4 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -155,13 +155,15 @@ const tabs = computed(() => {
 const { currentTab, changeTab } = useCardTabs(tabs.value);
 
 const path = computed(() => {
+  const baseUrl = '/directory/users';
+
   return [
     {
       name: t('objects.directory.directory'),
     },
     {
       name: t('objects.directory.users.users', 2),
-      route: namespace,
+      route: baseUrl,
     },
     {
       name: isNew.value ? t('objects.new') : pathName.value,

From c6a902b691653699a50d2b6a1d5d5a47535ed49f Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Thu, 31 Oct 2024 17:15:11 +0200
Subject: [PATCH 07/10] feat/ added new transitions and styles to users page
 [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)

---
 package-lock.json                             |  51 +++++--
 package.json                                  |   2 +-
 .../_shared/object-wrap/the-object-wrap.vue   |  18 +--
 .../users/components/opened-user-devices.vue  |   6 +-
 .../users/components/opened-user-general.vue  |   6 +-
 .../users/components/opened-user-license.vue  |   6 +-
 .../users/components/opened-user-roles.vue    |   6 +-
 .../components/opened-user-variables.vue      |   6 +-
 .../modules/users/components/opened-user.vue  |   4 +-
 .../modules/users/components/the-users.vue    | 134 ++++++++----------
 10 files changed, 127 insertions(+), 112 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a71e5c4b..f731aaa9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.49",
+        "@webitel/ui-sdk": "^24.10.56",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -2588,9 +2588,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.49",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.49.tgz",
-      "integrity": "sha512-v17ZkqDKJvkSoL9J2DIUZ2yU3UA+kttdCXIV06F0pa/Il7V9dsoVoI2msLk1Q/tx7RI2Siow8RRlebs6O/1ctA==",
+      "version": "24.10.56",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.56.tgz",
+      "integrity": "sha512-n51xamchqY88f1AaPdnv8KkbqjBkk633tIQwqvSICV3Gvm25Z9PyYaVQk1VeZu8egR+xzU1FT5p5D8Reg7bEFQ==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
@@ -2619,10 +2619,18 @@
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-observe-visibility": "^2.0.0-alpha.1",
         "vue-router": "^4.1.6",
-        "webitel-sdk": "^24.8.2",
+        "webitel-sdk": "^24.8.5",
         "xlsx": "^0.18.5"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/@webitel/ui-sdk/node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2654,6 +2662,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
     "node_modules/@webitel/ui-sdk/node_modules/query-string": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz",
@@ -2670,6 +2694,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -11227,9 +11262,9 @@
       }
     },
     "node_modules/webitel-sdk": {
-      "version": "24.8.3",
-      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.3.tgz",
-      "integrity": "sha512-NdRhJbCZZTg4JxxQCK6EgVLyeztO50tFn163dLHDhrb58reIECN8MKg7HPBkB8wghZhvBimKKDww6e/mQB+LdQ==",
+      "version": "24.8.5",
+      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.5.tgz",
+      "integrity": "sha512-OHqAYVzcAqUns3n8qrfP/oW1o7pQlC++MyEC+u2kOOE69krWEFlrnNPqEm3S0XnBzIQa9mAIlZ1v5y+13hCv7w==",
       "dependencies": {
         "@types/webrtc": "~0.0.41",
         "deep-copy": "1.4.2",
diff --git a/package.json b/package.json
index b61490b7f..e70c560d9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.49",
+    "@webitel/ui-sdk": "^24.10.56",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 8827d9d5c..7dce20ff9 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,26 +4,16 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <router-view v-slot="{ Component }">
-          <transition-slide
-            :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-            <component :is="Component" />
-          </transition-slide>
-        </router-view>
+        <wt-route-transition>
+          <router-view />
+        </wt-route-transition>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import { TransitionSlide } from '@morev/vue-transitions';
+import WtRouteTransition from '@webitel/ui-sdk/src/components/on-demand/wt-route-transition/wt-route-transition.vue';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index 6a29d0c99..a638d9898 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :disabled="disableUserInput"
         :label="t('objects.directory.users.defaultDevice')"
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 81790e9a0..1fc89a03b 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.generalInfo') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-input
         :disabled="disableUserInput"
         :label="t('objects.name')"
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index b7644af6b..a507ce287 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index d4394f0e0..17e01e544 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 3f93f198d..2637d1ac9 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
@@ -10,7 +10,7 @@
         @click="addVariable"
       />
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <div class="variables">
         <div
           v-for="(variable, key) in itemInstance.variables"
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 88cb2b3d4..87ad704c4 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,5 +1,6 @@
 <template>
   <wt-page-wrapper
+    class="table-page"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
@@ -23,7 +24,7 @@
 
     <template #main>
       <form
-        class="main-container"
+        class="opened-card-form"
         @submit.prevent="save"
       >
         <wt-tabs
@@ -33,6 +34,7 @@
         />
         <router-view v-slot="{ Component }">
           <component
+            class="opened-card-tabs__tab"
             :is="Component"
             :namespace="cardNamespace"
             :v="v$"
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index e79e13764..6453084db 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,7 +1,7 @@
 <template>
   <wt-page-wrapper
+    class="users table-page"
     :actions-panel="false"
-    class="users"
   >
     <template #header>
       <wt-page-header
@@ -23,12 +23,12 @@
         @close="closeDelete"
       />
 
-      <section class="main-section__wrapper">
-        <header class="content-header">
-          <h3 class="content-title">
+      <section class="table-section">
+        <header class="table-title">
+          <h3 class="table-title__title">
             {{ t('objects.directory.users.allUsers') }}
           </h3>
-          <div class="content-header__actions-wrap">
+          <div class="table-title__actions-wrap">
             <filter-search
               :namespace="filtersNamespace"
               name="search"
@@ -64,76 +64,63 @@
           :text="dummy.text && t(dummy.text)"
           class="dummy-wrapper"
         />
-        <div class="table-wrapper">
-          <div
-            style="display:contents;"
-            v-if="dataList.length && !isLoading"
-          >
-          <transition-slide
-            :offset="{
-              enter: ['-5%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-          <wt-table
-            :selected="selected"
-            :data="dataList"
-            :grid-actions="hasEditAccess || hasDeleteAccess"
-            :headers="headers"
-            sortable
-            @update:selected="setSelected"
-            @sort="sort"
-          >
-            <template #name="{ item }">
-              <adm-item-link
-                :id="item.id"
-                :route-name="RouteNames.USERS"
-              >
-                {{ item.name }}
-              </adm-item-link>
-            </template>
-            <template #status="{ item }">
-              <user-status :presence="item.presence" />
-            </template>
-            <template #username="{ item }">
-              {{ item.username }}
-            </template>
-            <template #extensions="{ item }">
-              {{ item.extension }}
-            </template>
-            <template #DnD="{ item }">
-              <wt-switcher
-                :disabled="!hasEditAccess"
-                :value="getDND(item.presence)"
-                @change="setDND({item, value: $event})"
-              />
-            </template>
-            <template #actions="{ item }">
-              <adm-item-link
-                v-if="hasEditAccess"
-                :id="item.id"
-                :route-name="RouteNames.USERS">
-
+        <div class="table-section__table-wrapper">
+          <wt-table-transition v-if="dataList.length && !isLoading">
+            <wt-table
+              :selected="selected"
+              :data="dataList"
+              :grid-actions="hasEditAccess || hasDeleteAccess"
+              :headers="headers"
+              sortable
+              @update:selected="setSelected"
+              @sort="sort"
+            >
+              <template #name="{ item }">
+                <adm-item-link
+                  :id="item.id"
+                  :route-name="RouteNames.USERS"
+                >
+                  {{ item.name }}
+                </adm-item-link>
+              </template>
+              <template #status="{ item }">
+                <user-status :presence="item.presence" />
+              </template>
+              <template #username="{ item }">
+                {{ item.username }}
+              </template>
+              <template #extensions="{ item }">
+                {{ item.extension }}
+              </template>
+              <template #DnD="{ item }">
+                <wt-switcher
+                  :disabled="!hasEditAccess"
+                  :value="getDND(item.presence)"
+                  @change="setDND({item, value: $event})"
+                />
+              </template>
+              <template #actions="{ item }">
+                <adm-item-link
+                  v-if="hasEditAccess"
+                  :id="item.id"
+                  :route-name="RouteNames.USERS">
+
+                  <wt-icon-action
+                    action="edit"
+                  />
+                </adm-item-link>
                 <wt-icon-action
-                  action="edit"
+                  v-if="hasDeleteAccess"
+                  action="delete"
+                  class="table-action"
+                  @click="askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteData(item),
+                  })"
                 />
-              </adm-item-link>
-              <wt-icon-action
-                v-if="hasDeleteAccess"
-                action="delete"
-                class="table-action"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-              />
-            </template>
-          </wt-table>
-          </transition-slide>
-          </div>
+              </template>
+            </wt-table>
+          </wt-table-transition>
           <filter-pagination
             :namespace="filtersNamespace"
             :next="isNext"
@@ -148,6 +135,7 @@
 import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
 import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';

From 8b190b7e66b852f9c208acff2051cbc7b8cb1cce Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Thu, 31 Oct 2024 17:59:21 +0200
Subject: [PATCH 08/10] Revert "feat/ added new transitions and styles to users
 page [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)"

This reverts commit c6a902b691653699a50d2b6a1d5d5a47535ed49f.
---
 package-lock.json                             |  51 ++-----
 package.json                                  |   2 +-
 .../_shared/object-wrap/the-object-wrap.vue   |  18 ++-
 .../users/components/opened-user-devices.vue  |   6 +-
 .../users/components/opened-user-general.vue  |   6 +-
 .../users/components/opened-user-license.vue  |   6 +-
 .../users/components/opened-user-roles.vue    |   6 +-
 .../components/opened-user-variables.vue      |   6 +-
 .../modules/users/components/opened-user.vue  |   4 +-
 .../modules/users/components/the-users.vue    | 134 ++++++++++--------
 10 files changed, 112 insertions(+), 127 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f731aaa9c..5a71e5c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.56",
+        "@webitel/ui-sdk": "^24.10.49",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -2588,9 +2588,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.56",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.56.tgz",
-      "integrity": "sha512-n51xamchqY88f1AaPdnv8KkbqjBkk633tIQwqvSICV3Gvm25Z9PyYaVQk1VeZu8egR+xzU1FT5p5D8Reg7bEFQ==",
+      "version": "24.10.49",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.49.tgz",
+      "integrity": "sha512-v17ZkqDKJvkSoL9J2DIUZ2yU3UA+kttdCXIV06F0pa/Il7V9dsoVoI2msLk1Q/tx7RI2Siow8RRlebs6O/1ctA==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
@@ -2619,18 +2619,10 @@
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-observe-visibility": "^2.0.0-alpha.1",
         "vue-router": "^4.1.6",
-        "webitel-sdk": "^24.8.5",
+        "webitel-sdk": "^24.8.2",
         "xlsx": "^0.18.5"
       }
     },
-    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
-      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
-      "engines": {
-        "node": ">=14.16"
-      }
-    },
     "node_modules/@webitel/ui-sdk/node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2662,22 +2654,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
-      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@webitel/ui-sdk/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
-    },
     "node_modules/@webitel/ui-sdk/node_modules/query-string": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz",
@@ -2694,17 +2670,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
-      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -11262,9 +11227,9 @@
       }
     },
     "node_modules/webitel-sdk": {
-      "version": "24.8.5",
-      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.5.tgz",
-      "integrity": "sha512-OHqAYVzcAqUns3n8qrfP/oW1o7pQlC++MyEC+u2kOOE69krWEFlrnNPqEm3S0XnBzIQa9mAIlZ1v5y+13hCv7w==",
+      "version": "24.8.3",
+      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.3.tgz",
+      "integrity": "sha512-NdRhJbCZZTg4JxxQCK6EgVLyeztO50tFn163dLHDhrb58reIECN8MKg7HPBkB8wghZhvBimKKDww6e/mQB+LdQ==",
       "dependencies": {
         "@types/webrtc": "~0.0.41",
         "deep-copy": "1.4.2",
diff --git a/package.json b/package.json
index e70c560d9..b61490b7f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.56",
+    "@webitel/ui-sdk": "^24.10.49",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 7dce20ff9..8827d9d5c 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,16 +4,26 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <wt-route-transition>
-          <router-view />
-        </wt-route-transition>
+        <router-view v-slot="{ Component }">
+          <transition-slide
+            :offset="{
+              enter: ['-50%', 0],
+              leave: [0, 0]
+            }"
+            duration="200"
+            mode="out-in"
+            appear
+          >
+            <component :is="Component" />
+          </transition-slide>
+        </router-view>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import WtRouteTransition from '@webitel/ui-sdk/src/components/on-demand/wt-route-transition/wt-route-transition.vue';
+import { TransitionSlide } from '@morev/vue-transitions';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index a638d9898..6a29d0c99 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
+    <header class="content-header">
+      <h3 class="content-title">
         {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
-    <div class="opened-card-input-grid">
+    <div class="object-input-grid">
       <wt-select
         :disabled="disableUserInput"
         :label="t('objects.directory.users.defaultDevice')"
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 1fc89a03b..81790e9a0 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
+    <header class="content-header">
+      <h3 class="content-title">
         {{ t('objects.generalInfo') }}
       </h3>
     </header>
-    <div class="opened-card-input-grid">
+    <div class="object-input-grid">
       <wt-input
         :disabled="disableUserInput"
         :label="t('objects.name')"
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index a507ce287..b7644af6b 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
+    <header class="content-header">
+      <h3 class="content-title">
         {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
-    <div class="opened-card-input-grid">
+    <div class="object-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index 17e01e544..d4394f0e0 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
+    <header class="content-header">
+      <h3 class="content-title">
         {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
-    <div class="opened-card-input-grid">
+    <div class="object-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 2637d1ac9..3f93f198d 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
+    <header class="content-header">
+      <h3 class="content-title">
         {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
@@ -10,7 +10,7 @@
         @click="addVariable"
       />
     </header>
-    <div class="opened-card-input-grid">
+    <div class="object-input-grid">
       <div class="variables">
         <div
           v-for="(variable, key) in itemInstance.variables"
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 87ad704c4..88cb2b3d4 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,6 +1,5 @@
 <template>
   <wt-page-wrapper
-    class="table-page"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
@@ -24,7 +23,7 @@
 
     <template #main>
       <form
-        class="opened-card-form"
+        class="main-container"
         @submit.prevent="save"
       >
         <wt-tabs
@@ -34,7 +33,6 @@
         />
         <router-view v-slot="{ Component }">
           <component
-            class="opened-card-tabs__tab"
             :is="Component"
             :namespace="cardNamespace"
             :v="v$"
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index 6453084db..e79e13764 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,7 +1,7 @@
 <template>
   <wt-page-wrapper
-    class="users table-page"
     :actions-panel="false"
+    class="users"
   >
     <template #header>
       <wt-page-header
@@ -23,12 +23,12 @@
         @close="closeDelete"
       />
 
-      <section class="table-section">
-        <header class="table-title">
-          <h3 class="table-title__title">
+      <section class="main-section__wrapper">
+        <header class="content-header">
+          <h3 class="content-title">
             {{ t('objects.directory.users.allUsers') }}
           </h3>
-          <div class="table-title__actions-wrap">
+          <div class="content-header__actions-wrap">
             <filter-search
               :namespace="filtersNamespace"
               name="search"
@@ -64,63 +64,76 @@
           :text="dummy.text && t(dummy.text)"
           class="dummy-wrapper"
         />
-        <div class="table-section__table-wrapper">
-          <wt-table-transition v-if="dataList.length && !isLoading">
-            <wt-table
-              :selected="selected"
-              :data="dataList"
-              :grid-actions="hasEditAccess || hasDeleteAccess"
-              :headers="headers"
-              sortable
-              @update:selected="setSelected"
-              @sort="sort"
-            >
-              <template #name="{ item }">
-                <adm-item-link
-                  :id="item.id"
-                  :route-name="RouteNames.USERS"
-                >
-                  {{ item.name }}
-                </adm-item-link>
-              </template>
-              <template #status="{ item }">
-                <user-status :presence="item.presence" />
-              </template>
-              <template #username="{ item }">
-                {{ item.username }}
-              </template>
-              <template #extensions="{ item }">
-                {{ item.extension }}
-              </template>
-              <template #DnD="{ item }">
-                <wt-switcher
-                  :disabled="!hasEditAccess"
-                  :value="getDND(item.presence)"
-                  @change="setDND({item, value: $event})"
-                />
-              </template>
-              <template #actions="{ item }">
-                <adm-item-link
-                  v-if="hasEditAccess"
-                  :id="item.id"
-                  :route-name="RouteNames.USERS">
-
-                  <wt-icon-action
-                    action="edit"
-                  />
-                </adm-item-link>
+        <div class="table-wrapper">
+          <div
+            style="display:contents;"
+            v-if="dataList.length && !isLoading"
+          >
+          <transition-slide
+            :offset="{
+              enter: ['-5%', 0],
+              leave: [0, 0]
+            }"
+            duration="200"
+            mode="out-in"
+            appear
+          >
+          <wt-table
+            :selected="selected"
+            :data="dataList"
+            :grid-actions="hasEditAccess || hasDeleteAccess"
+            :headers="headers"
+            sortable
+            @update:selected="setSelected"
+            @sort="sort"
+          >
+            <template #name="{ item }">
+              <adm-item-link
+                :id="item.id"
+                :route-name="RouteNames.USERS"
+              >
+                {{ item.name }}
+              </adm-item-link>
+            </template>
+            <template #status="{ item }">
+              <user-status :presence="item.presence" />
+            </template>
+            <template #username="{ item }">
+              {{ item.username }}
+            </template>
+            <template #extensions="{ item }">
+              {{ item.extension }}
+            </template>
+            <template #DnD="{ item }">
+              <wt-switcher
+                :disabled="!hasEditAccess"
+                :value="getDND(item.presence)"
+                @change="setDND({item, value: $event})"
+              />
+            </template>
+            <template #actions="{ item }">
+              <adm-item-link
+                v-if="hasEditAccess"
+                :id="item.id"
+                :route-name="RouteNames.USERS">
+
                 <wt-icon-action
-                  v-if="hasDeleteAccess"
-                  action="delete"
-                  class="table-action"
-                  @click="askDeleteConfirmation({
-                    deleted: [item],
-                    callback: () => deleteData(item),
-                  })"
+                  action="edit"
                 />
-              </template>
-            </wt-table>
-          </wt-table-transition>
+              </adm-item-link>
+              <wt-icon-action
+                v-if="hasDeleteAccess"
+                action="delete"
+                class="table-action"
+                @click="askDeleteConfirmation({
+                  deleted: [item],
+                  callback: () => deleteData(item),
+                })"
+              />
+            </template>
+          </wt-table>
+          </transition-slide>
+          </div>
           <filter-pagination
             :namespace="filtersNamespace"
             :next="isNext"
@@ -135,7 +148,6 @@
 import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
-import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
 import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';

From cc4d01f9a61debcf1ce5f3e22a154b6b75319a3d Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Thu, 31 Oct 2024 19:26:13 +0200
Subject: [PATCH 09/10] feat/ added new transitions and styles to users page
 [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)

---
 package-lock.json                             |  51 ++++++--
 package.json                                  |   2 +-
 .../_shared/object-wrap/the-object-wrap.vue   |  18 +--
 .../users/components/opened-user-devices.vue  |   6 +-
 .../users/components/opened-user-general.vue  |   6 +-
 .../users/components/opened-user-license.vue  |   6 +-
 .../users/components/opened-user-roles.vue    |   6 +-
 .../components/opened-user-variables.vue      |   6 +-
 .../modules/users/components/opened-user.vue  |   4 +-
 .../modules/users/components/the-users.vue    | 116 ++++++++----------
 10 files changed, 118 insertions(+), 103 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a71e5c4b..f731aaa9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.49",
+        "@webitel/ui-sdk": "^24.10.56",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -2588,9 +2588,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.49",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.49.tgz",
-      "integrity": "sha512-v17ZkqDKJvkSoL9J2DIUZ2yU3UA+kttdCXIV06F0pa/Il7V9dsoVoI2msLk1Q/tx7RI2Siow8RRlebs6O/1ctA==",
+      "version": "24.10.56",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.56.tgz",
+      "integrity": "sha512-n51xamchqY88f1AaPdnv8KkbqjBkk633tIQwqvSICV3Gvm25Z9PyYaVQk1VeZu8egR+xzU1FT5p5D8Reg7bEFQ==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
@@ -2619,10 +2619,18 @@
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-observe-visibility": "^2.0.0-alpha.1",
         "vue-router": "^4.1.6",
-        "webitel-sdk": "^24.8.2",
+        "webitel-sdk": "^24.8.5",
         "xlsx": "^0.18.5"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/@webitel/ui-sdk/node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2654,6 +2662,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
     "node_modules/@webitel/ui-sdk/node_modules/query-string": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz",
@@ -2670,6 +2694,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -11227,9 +11262,9 @@
       }
     },
     "node_modules/webitel-sdk": {
-      "version": "24.8.3",
-      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.3.tgz",
-      "integrity": "sha512-NdRhJbCZZTg4JxxQCK6EgVLyeztO50tFn163dLHDhrb58reIECN8MKg7HPBkB8wghZhvBimKKDww6e/mQB+LdQ==",
+      "version": "24.8.5",
+      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.5.tgz",
+      "integrity": "sha512-OHqAYVzcAqUns3n8qrfP/oW1o7pQlC++MyEC+u2kOOE69krWEFlrnNPqEm3S0XnBzIQa9mAIlZ1v5y+13hCv7w==",
       "dependencies": {
         "@types/webrtc": "~0.0.41",
         "deep-copy": "1.4.2",
diff --git a/package.json b/package.json
index b61490b7f..e70c560d9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.49",
+    "@webitel/ui-sdk": "^24.10.56",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 8827d9d5c..7dce20ff9 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,26 +4,16 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <router-view v-slot="{ Component }">
-          <transition-slide
-            :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-            <component :is="Component" />
-          </transition-slide>
-        </router-view>
+        <wt-route-transition>
+          <router-view />
+        </wt-route-transition>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import { TransitionSlide } from '@morev/vue-transitions';
+import WtRouteTransition from '@webitel/ui-sdk/src/components/on-demand/wt-route-transition/wt-route-transition.vue';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index 6a29d0c99..a638d9898 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :disabled="disableUserInput"
         :label="t('objects.directory.users.defaultDevice')"
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 81790e9a0..1fc89a03b 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.generalInfo') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-input
         :disabled="disableUserInput"
         :label="t('objects.name')"
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index b7644af6b..a507ce287 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index d4394f0e0..17e01e544 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 3f93f198d..2637d1ac9 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
@@ -10,7 +10,7 @@
         @click="addVariable"
       />
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <div class="variables">
         <div
           v-for="(variable, key) in itemInstance.variables"
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 88cb2b3d4..87ad704c4 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,5 +1,6 @@
 <template>
   <wt-page-wrapper
+    class="table-page"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
@@ -23,7 +24,7 @@
 
     <template #main>
       <form
-        class="main-container"
+        class="opened-card-form"
         @submit.prevent="save"
       >
         <wt-tabs
@@ -33,6 +34,7 @@
         />
         <router-view v-slot="{ Component }">
           <component
+            class="opened-card-tabs__tab"
             :is="Component"
             :namespace="cardNamespace"
             :v="v$"
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index e79e13764..1827b5c0f 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,7 +1,7 @@
 <template>
   <wt-page-wrapper
+    class="users table-page"
     :actions-panel="false"
-    class="users"
   >
     <template #header>
       <wt-page-header
@@ -23,12 +23,12 @@
         @close="closeDelete"
       />
 
-      <section class="main-section__wrapper">
-        <header class="content-header">
-          <h3 class="content-title">
+      <section class="table-section">
+        <header class="table-title">
+          <h3 class="table-title__title">
             {{ t('objects.directory.users.allUsers') }}
           </h3>
-          <div class="content-header__actions-wrap">
+          <div class="table-title__actions-wrap">
             <filter-search
               :namespace="filtersNamespace"
               name="search"
@@ -65,20 +65,8 @@
           class="dummy-wrapper"
         />
         <div class="table-wrapper">
-          <div
-            style="display:contents;"
-            v-if="dataList.length && !isLoading"
-          >
-          <transition-slide
-            :offset="{
-              enter: ['-5%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-          <wt-table
+          <wt-table-transition v-if="dataList.length && !isLoading">
+            <wt-table
             :selected="selected"
             :data="dataList"
             :grid-actions="hasEditAccess || hasDeleteAccess"
@@ -87,53 +75,52 @@
             @update:selected="setSelected"
             @sort="sort"
           >
-            <template #name="{ item }">
-              <adm-item-link
-                :id="item.id"
-                :route-name="RouteNames.USERS"
-              >
-                {{ item.name }}
-              </adm-item-link>
-            </template>
-            <template #status="{ item }">
-              <user-status :presence="item.presence" />
-            </template>
-            <template #username="{ item }">
-              {{ item.username }}
-            </template>
-            <template #extensions="{ item }">
-              {{ item.extension }}
-            </template>
-            <template #DnD="{ item }">
-              <wt-switcher
-                :disabled="!hasEditAccess"
-                :value="getDND(item.presence)"
-                @change="setDND({item, value: $event})"
-              />
-            </template>
-            <template #actions="{ item }">
-              <adm-item-link
-                v-if="hasEditAccess"
-                :id="item.id"
-                :route-name="RouteNames.USERS">
-
+              <template #name="{ item }">
+                <adm-item-link
+                  :id="item.id"
+                  :route-name="RouteNames.USERS"
+                >
+                  {{ item.name }}
+                </adm-item-link>
+              </template>
+              <template #status="{ item }">
+                <user-status :presence="item.presence" />
+              </template>
+              <template #username="{ item }">
+                {{ item.username }}
+              </template>
+              <template #extensions="{ item }">
+                {{ item.extension }}
+              </template>
+              <template #DnD="{ item }">
+                <wt-switcher
+                  :disabled="!hasEditAccess"
+                  :value="getDND(item.presence)"
+                  @change="setDND({item, value: $event})"
+                />
+              </template>
+              <template #actions="{ item }">
+                <adm-item-link
+                  v-if="hasEditAccess"
+                  :id="item.id"
+                  :route-name="RouteNames.USERS">
+
+                  <wt-icon-action
+                    action="edit"
+                  />
+                </adm-item-link>
                 <wt-icon-action
-                  action="edit"
+                  v-if="hasDeleteAccess"
+                  action="delete"
+                  class="table-action"
+                  @click="askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteData(item),
+                  })"
                 />
-              </adm-item-link>
-              <wt-icon-action
-                v-if="hasDeleteAccess"
-                action="delete"
-                class="table-action"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-              />
-            </template>
-          </wt-table>
-          </transition-slide>
-          </div>
+              </template>
+            </wt-table>
+          </wt-table-transition>
           <filter-pagination
             :namespace="filtersNamespace"
             :next="isNext"
@@ -148,6 +135,7 @@
 import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
 import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';

From 129d58fb9b5a778e55daac451197d15db47c0bf9 Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Fri, 1 Nov 2024 12:05:20 +0200
Subject: [PATCH 10/10] feat/ fixes according to comments
 [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)

---
 src/modules/_shared/object-wrap/the-object-wrap.vue       | 8 +++++---
 .../directory/modules/users/components/opened-user.vue    | 2 +-
 .../directory/modules/users/components/the-users.vue      | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 7dce20ff9..5c6a816e7 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,9 +4,11 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <wt-route-transition>
-          <router-view />
-        </wt-route-transition>
+        <router-view v-slot="{ Component }">
+          <wt-route-transition>
+            <component :is="Component" />
+          </wt-route-transition>
+        </router-view>
       </div>
     </section>
   </main>
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 87ad704c4..bab682dbf 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,6 +1,6 @@
 <template>
   <wt-page-wrapper
-    class="table-page"
+    class="opened-card"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index 1827b5c0f..b5451730d 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,6 +1,6 @@
 <template>
   <wt-page-wrapper
-    class="users table-page"
+    class="table-page users"
     :actions-panel="false"
   >
     <template #header>