diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 010cf09..2873b1d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -43,7 +43,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
       "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -53,17 +52,19 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
       "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -72,10 +73,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
-      "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
-      "dev": true,
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
@@ -495,9 +495,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.0.tgz",
-      "integrity": "sha512-A68TBu6/1mHHuc5YJL0U0VVeGNiklLAL6rRmhTCP2B5XjWLMnrX+HkO+IAXyHvks5cyyY1jjK5ITPQ1HGS2EVA==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz",
+      "integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==",
       "dev": true,
       "license": "Apache-2.0",
       "peer": true,
@@ -536,9 +536,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.7.0.tgz",
-      "integrity": "sha512-ChuWDQenef8OSFnvuxv0TCVxEwmu3+hPNKvM9B34qpM0rDRbjL8t5QkQeHHeAfsKQjuH9wS82WeCi1J/owatng==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.8.0.tgz",
+      "integrity": "sha512-MfluB7EUfxXtv3i/++oh89uzAr4PDI4nn201hsp+qaXqsjAWzinlZEHEfPgAX4doIlKvPG/i0A9dpKxOLII8yA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -688,9 +688,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
-      "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz",
+      "integrity": "sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==",
       "cpu": [
         "arm"
       ],
@@ -701,9 +701,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz",
-      "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.20.0.tgz",
+      "integrity": "sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==",
       "cpu": [
         "arm64"
       ],
@@ -714,9 +714,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz",
-      "integrity": "sha512-vk+ma8iC1ebje/ahpxpnrfVQJibTMyHdWpOGZ3JpQ7Mgn/3QNHmPq7YwjZbIE7km73dH5M1e6MRRsnEBW7v5CQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.20.0.tgz",
+      "integrity": "sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==",
       "cpu": [
         "arm64"
       ],
@@ -727,9 +727,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz",
-      "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.20.0.tgz",
+      "integrity": "sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==",
       "cpu": [
         "x64"
       ],
@@ -740,9 +740,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz",
-      "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.20.0.tgz",
+      "integrity": "sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==",
       "cpu": [
         "arm"
       ],
@@ -753,9 +753,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz",
-      "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.20.0.tgz",
+      "integrity": "sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==",
       "cpu": [
         "arm"
       ],
@@ -766,9 +766,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz",
-      "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.20.0.tgz",
+      "integrity": "sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==",
       "cpu": [
         "arm64"
       ],
@@ -779,9 +779,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz",
-      "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.20.0.tgz",
+      "integrity": "sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==",
       "cpu": [
         "arm64"
       ],
@@ -792,9 +792,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz",
-      "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.20.0.tgz",
+      "integrity": "sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==",
       "cpu": [
         "ppc64"
       ],
@@ -805,9 +805,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz",
-      "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.20.0.tgz",
+      "integrity": "sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==",
       "cpu": [
         "riscv64"
       ],
@@ -818,9 +818,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz",
-      "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.20.0.tgz",
+      "integrity": "sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==",
       "cpu": [
         "s390x"
       ],
@@ -831,9 +831,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
-      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz",
+      "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==",
       "cpu": [
         "x64"
       ],
@@ -844,9 +844,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz",
-      "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.20.0.tgz",
+      "integrity": "sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==",
       "cpu": [
         "x64"
       ],
@@ -857,9 +857,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz",
-      "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.20.0.tgz",
+      "integrity": "sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==",
       "cpu": [
         "arm64"
       ],
@@ -870,9 +870,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz",
-      "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.20.0.tgz",
+      "integrity": "sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==",
       "cpu": [
         "ia32"
       ],
@@ -883,9 +883,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz",
-      "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.20.0.tgz",
+      "integrity": "sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==",
       "cpu": [
         "x64"
       ],
@@ -903,9 +903,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.14.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
-      "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
+      "version": "20.14.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.14.tgz",
+      "integrity": "sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -913,9 +913,9 @@
       }
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
-      "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
+      "integrity": "sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -927,82 +927,93 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.0-alpha.16",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.16.tgz",
-      "integrity": "sha512-oOTnIZlx0P/idFwVw+W0NbzKDtZAQMzXSdIFfTePCKcXlb4Ys12GaGkx8NF9dsvPYV3nbv3ZsSxnkZWBmNKd7A==",
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.4.0-alpha.16"
+        "@volar/source-map": "2.4.0-alpha.18"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.0-alpha.16",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.16.tgz",
-      "integrity": "sha512-sL9vNG7iR2hiKZor7UkD5Sufu3QCia4cbp2gX/nGRNSdaPbhOpdAoavwlBm0PrVkpiA19NZuavZoobD8krviFg==",
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.0-alpha.16",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.16.tgz",
-      "integrity": "sha512-WCx7z5O81McCQp2cC0c8081y+MgTiAR2WAiJjVL4tr4Qh4GgqK0lgn3CqAjcKizaK1R5y3wfrUqgIYr+QeFYcw==",
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.4.0-alpha.16",
+        "@volar/language-core": "2.4.0-alpha.18",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
-      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.35.tgz",
+      "integrity": "sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.31",
+        "@vue/shared": "3.4.35",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
-      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.35.tgz",
+      "integrity": "sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-core": "3.4.35",
+        "@vue/shared": "3.4.35"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
-      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.35.tgz",
+      "integrity": "sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.31",
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/compiler-ssr": "3.4.31",
-        "@vue/shared": "3.4.31",
+        "@vue/compiler-core": "3.4.35",
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/compiler-ssr": "3.4.35",
+        "@vue/shared": "3.4.35",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.40",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
-      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.35.tgz",
+      "integrity": "sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/shared": "3.4.35"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1012,20 +1023,20 @@
       "license": "MIT"
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.26",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.26.tgz",
-      "integrity": "sha512-/lt6SfQ3O1yDAhPsnLv9iSUgXd1dMHqUm/t3RctfqjuwQf1LnftZ414X3UBn6aXT4MiwXWtbNJ4Z0NZWwDWgJQ==",
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz",
+      "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.4.0-alpha.15",
+        "@volar/language-core": "~2.4.0-alpha.18",
         "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.4.1",
-        "path-browserify": "^1.0.1",
-        "vue-template-compiler": "^2.7.14"
+        "path-browserify": "^1.0.1"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1063,53 +1074,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
-      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
+      "integrity": "sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.4.35"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
-      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.35.tgz",
+      "integrity": "sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/reactivity": "3.4.35",
+        "@vue/shared": "3.4.35"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
-      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.35.tgz",
+      "integrity": "sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
-        "@vue/runtime-core": "3.4.31",
-        "@vue/shared": "3.4.31",
+        "@vue/reactivity": "3.4.35",
+        "@vue/runtime-core": "3.4.35",
+        "@vue/shared": "3.4.35",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
-      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.35.tgz",
+      "integrity": "sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-ssr": "3.4.35",
+        "@vue/shared": "3.4.35"
       },
       "peerDependencies": {
-        "vue": "3.4.31"
+        "vue": "3.4.35"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
-      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.35.tgz",
+      "integrity": "sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==",
       "license": "MIT"
     },
     "node_modules/@vuetify/loader-shared": {
@@ -1224,9 +1235,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -1421,9 +1432,9 @@
       "license": "MIT"
     },
     "node_modules/core-js": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
-      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
+      "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -1474,9 +1485,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -1580,18 +1591,18 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.7.0.tgz",
-      "integrity": "sha512-FzJ9D/0nGiCGBf8UXO/IGLTgLVzIxze1zpfA8Ton2mjLovXdAPlYDv+MQDcqj3TmrhAGYfOpz9RfR+ent0AgAw==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.8.0.tgz",
+      "integrity": "sha512-K8qnZ/QJzT2dLKdZJVX6W4XOwBzutMYmt0lqUS+JdXgd+HTYFlonFgkJ8s44d/zMPPCnOOk0kMWCApCPhiOy9A==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.11.0",
-        "@eslint/config-array": "^0.17.0",
+        "@eslint/config-array": "^0.17.1",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.7.0",
+        "@eslint/js": "9.8.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.3.0",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2052,9 +2063,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
-      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
       "devOptional": true,
       "license": "MIT"
     },
@@ -2272,12 +2283,12 @@
       "peer": true
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/material-design-icons-iconfont": {
@@ -2595,13 +2606,13 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
-      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.0.tgz",
+      "integrity": "sha512-iPrIh26GMqfpUlMOGyxuDowGmYousTecbTHFwT0xZ1zJvh23oQ+Cj99ZoPQA1TnUPhU6AuRPv6/drkTCJ0VHQA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.0",
-        "vue-demi": ">=0.14.5"
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -2621,9 +2632,9 @@
       }
     },
     "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2647,9 +2658,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "version": "8.4.40",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
+      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -2804,9 +2815,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/rollup": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.1.tgz",
-      "integrity": "sha512-Elx2UT8lzxxOXMpy5HWQGZqkrQOtrVDDa/bm9l10+U4rQnVzbL/LgZ4NOM1MPIDyHk69W4InuYDF5dzRh4Kw1A==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.20.0.tgz",
+      "integrity": "sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2820,22 +2831,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.1",
-        "@rollup/rollup-android-arm64": "4.18.1",
-        "@rollup/rollup-darwin-arm64": "4.18.1",
-        "@rollup/rollup-darwin-x64": "4.18.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.1",
-        "@rollup/rollup-linux-arm64-musl": "4.18.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-musl": "4.18.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.1",
-        "@rollup/rollup-win32-x64-msvc": "4.18.1",
+        "@rollup/rollup-android-arm-eabi": "4.20.0",
+        "@rollup/rollup-android-arm64": "4.20.0",
+        "@rollup/rollup-darwin-arm64": "4.20.0",
+        "@rollup/rollup-darwin-x64": "4.20.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.20.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.20.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.20.0",
+        "@rollup/rollup-linux-arm64-musl": "4.20.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.20.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.20.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.20.0",
+        "@rollup/rollup-linux-x64-gnu": "4.20.0",
+        "@rollup/rollup-linux-x64-musl": "4.20.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.20.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.20.0",
+        "@rollup/rollup-win32-x64-msvc": "4.20.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -2994,7 +3005,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -3041,9 +3051,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3062,16 +3072,16 @@
       "license": "MIT"
     },
     "node_modules/unplugin": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.11.0.tgz",
-      "integrity": "sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.12.0.tgz",
+      "integrity": "sha512-KeczzHl2sATPQUx1gzo+EnUkmN4VmGBYRRVOZSGvGITE9rGHRDGqft6ONceP3vgXcyJ2XjX5axG5jMWUwNCYLw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.11.3",
+        "acorn": "^8.12.1",
         "chokidar": "^3.6.0",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.1"
+        "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3127,9 +3137,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz",
-      "integrity": "sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
+      "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3183,9 +3193,9 @@
       }
     },
     "node_modules/vite-plugin-vuetify": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.3.tgz",
-      "integrity": "sha512-HbYajgGgb/noaVKNRhnnXIiQZrNXfNIeanUGAwXgOxL6h/KULS40Uf51Kyz8hNmdegF+DwjgXXI/8J1PNS83xw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.4.tgz",
+      "integrity": "sha512-A4cliYUoP/u4AWSRVRvAPKgpgR987Pss7LpFa7s1GvOe8WjgDq92Rt3eVXrvgxGCWvZsPKziVqfHHdCMqeDhfw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3210,16 +3220,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
-      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.35.tgz",
+      "integrity": "sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/compiler-sfc": "3.4.31",
-        "@vue/runtime-dom": "3.4.31",
-        "@vue/server-renderer": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/compiler-sfc": "3.4.35",
+        "@vue/runtime-dom": "3.4.35",
+        "@vue/server-renderer": "3.4.35",
+        "@vue/shared": "3.4.35"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -3334,12 +3344,12 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
-      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.2.tgz",
+      "integrity": "sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.1"
+        "@vue/devtools-api": "^6.6.3"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -3348,26 +3358,15 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-template-compiler": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
-      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.2.0"
-      }
-    },
     "node_modules/vue-tsc": {
-      "version": "2.0.26",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.26.tgz",
-      "integrity": "sha512-tOhuwy2bIXbMhz82ef37qeiaQHMXKQkD6mOF6CCPl3/uYtST3l6fdNyfMxipudrQTxTfXVPlgJdMENBFfC1CfQ==",
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz",
+      "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~2.4.0-alpha.15",
-        "@vue/language-core": "2.0.26",
+        "@volar/typescript": "~2.4.0-alpha.18",
+        "@vue/language-core": "2.0.29",
         "semver": "^7.5.4"
       },
       "bin": {
@@ -3387,9 +3386,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.6.13",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.13.tgz",
-      "integrity": "sha512-Gz7jxXAkmff2m6CM0EUWOo/72TM322/3I6aDna++k1nPOW1/hNx4td1MZG4u75fzdn3r+uIe0dbF7SWuhu6DWA==",
+      "version": "3.6.14",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.14.tgz",
+      "integrity": "sha512-iSa3CgdTEt/7B0aGDmkBARe8rxDDycEYHu1zNtOf1Xpvs/Tv7Ql5yHGqM2XCY0h7SL8Dme39pJIovzg3q4JLbQ==",
       "license": "MIT",
       "engines": {
         "node": "^12.20 || >=14.13"
diff --git a/frontend/src/layouts/default/AppBar.vue b/frontend/src/layouts/default/AppBar.vue
index e0ed2f2..d59e895 100644
--- a/frontend/src/layouts/default/AppBar.vue
+++ b/frontend/src/layouts/default/AppBar.vue
@@ -2,7 +2,7 @@
   <v-app-bar :elevation="5">
     <v-icon v-if="isMobile" icon="mdi-menu" @click="$emit('toggleDrawer')" />
     <span v-else style="width: 24px"></span>
-    <v-app-bar-title :text="$t(<string>$router.currentRoute.value.name)" class="align-center text-center " />
+    <v-app-bar-title :text="$t(<string>route.name)" class="align-center text-center " />
     <v-btn prepend-icon="mdi-content-save" v-if="stateChange" :text="$t('actions.save')" @click="saveChanges"></v-btn>
     <v-icon icon="mdi-theme-light-dark" @click="toggleTheme()" style="margin: 0 10px;"></v-icon>
   </v-app-bar>
@@ -13,9 +13,11 @@ import { computed, ref } from "vue"
 import { useTheme } from "vuetify"
 import { FindDiff } from "@/plugins/utils"
 import Data from "@/store/modules/data"
+import { useRoute } from "vue-router";
 
 defineProps(['isMobile'])
 
+const route = useRoute();
 const theme = useTheme()
 const darkMode = ref(localStorage.getItem('theme') == "dark")
 
diff --git a/frontend/src/types/clients.ts b/frontend/src/types/clients.ts
index 671ed6e..6479eba 100644
--- a/frontend/src/types/clients.ts
+++ b/frontend/src/types/clients.ts
@@ -56,7 +56,8 @@ export function updateConfigs(configs: Config, newUserName: string): Config {
 
 export function randomConfigs(user: string): Config {
   const mixedPassword = RandomUtil.randomSeq(10)
-  const ssPassword = RandomUtil.randomShadowsocksPassword(32)
+  const ssPassword16 = RandomUtil.randomShadowsocksPassword(16)
+  const ssPassword32 = RandomUtil.randomShadowsocksPassword(32)
   const uuid = RandomUtil.randomUUID()
   return {
     mixed: {
@@ -73,11 +74,15 @@ export function randomConfigs(user: string): Config {
     },
     shadowsocks: {
       name: user,
-      password: ssPassword,
+      password: ssPassword32,
+    },
+    shadowsocks16: {
+      name: user,
+      password: ssPassword16,
     },
     shadowtls: {
       name: user,
-      password: ssPassword,
+      password: ssPassword32,
     },
     vmess: {
       name: user,
diff --git a/frontend/src/views/Clients.vue b/frontend/src/views/Clients.vue
index 8ce6588..11f4357 100644
--- a/frontend/src/views/Clients.vue
+++ b/frontend/src/views/Clients.vue
@@ -29,19 +29,91 @@
       <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
     </v-col>
     <v-col cols="auto">
-      <v-select
-      hide-details
-      variant="underlined"
-      density="compact"
-      :label="$t('filter')"
-      :items="filterItems"
-      v-model="filter">
-      </v-select>
+      <v-menu v-model="filterMenu" :close-on-content-click="false" location="bottom center">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('filter') }}
+            <v-badge color="error" dot v-if="filterSettings.enabled" floating />
+          </v-btn>
+        </template>
+        <v-card>
+          <v-container>
+            <v-row>
+              <v-col>
+                <v-select
+                variant="underlined"
+                density="compact"
+                :label="$t('type')"
+                :items="filterItems"
+                v-model="filterSettings.state">
+                </v-select>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-select
+                variant="underlined"
+                density="compact"
+                :label="$t('client.group')"
+                :items="[ {title: $t('all'), value: '-'}, ...groups.map(g => ({ title: g.length>0 ? g : $t('none'), value: g}))]"
+                v-model="filterSettings.group">
+                </v-select>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                variant="underlined"
+                density="compact"
+                :label="$t('client.name')"
+                v-model="filterSettings.text">
+                </v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+          <v-card-actions>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="blue-darken-1"
+                variant="outlined"
+                @click="clearFilter"
+              >
+                {{ $t('actions.del') }}
+              </v-btn>
+              <v-btn
+                color="blue-darken-1"
+                variant="tonal"
+                @click="doFilter"
+              >
+                {{ $t('actions.update') }}
+              </v-btn>
+            </v-card-actions>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+    </v-col>
+    <v-col cols="auto">
+      <v-switch v-model="tableView" color="primary" hide-details>
+        <template v-slot:label><v-icon icon="mdi-table"></v-icon></template>
+      </v-switch>
     </v-col>
   </v-row>
-  <v-row>
-    <template v-for="(item, index) in clients" :key="item.id">
-      <v-col cols="12" sm="4" md="3" lg="2" :style="checkFilter(item)? '' : 'opacity: .2'">
+  <template v-for="group in groups" v-if="!tableView">
+    <v-row>
+      <v-col class="v-card-subtitle">
+        {{ group.length>0 ? group : $t('none') }}
+        <v-badge :content="(filterSettings.enabled ? filterSettings.filteredClients : clients).filter(c => c.group == group).length" inline color="info" />
+        <v-icon
+          :icon="openedGroups.includes(group) ? 'mdi-arrow-collapse-up' : 'mdi-arrow-collapse-down'"
+          size="small"
+          variant="text"
+          @click="toggleGroupOpen(group)"
+        ></v-icon>
+      </v-col>
+    </v-row>
+    <v-row v-if="openedGroups.includes(group)">
+    <template v-for="item in (filterSettings.enabled ? filterSettings.filteredClients : clients).filter(c => c.group == group)" :key="item.id">
+      <v-col cols="12" sm="4" md="3" lg="2">
         <v-card rounded="xl" elevation="5" min-width="200">
           <v-card-title>
             <v-row>
@@ -49,7 +121,7 @@
               <v-spacer></v-spacer>
               <v-col cols="auto">
                 <v-switch color="primary"
-                v-model="clients[index].enable"
+                v-model="item.enable"
                 @update:model-value="buildInboundsUsers(item.inbounds)"
                 hideDetails density="compact" />
               </v-col>
@@ -98,7 +170,7 @@
             <v-row>
               <v-col>{{ $t('online') }}</v-col>
               <v-col dir="ltr">
-                <template v-if="onlines[index]">
+                <template v-if="isOnline(item.name).value">
                   <v-chip density="comfortable" size="small" color="success" variant="flat">{{ $t('online') }}</v-chip>
                 </template>
                 <template v-else>-</template>
@@ -107,16 +179,16 @@
           </v-card-text>
           <v-divider></v-divider>
           <v-card-actions style="padding: 0;">
-            <v-btn icon="mdi-account-edit" @click="showModal(index)">
+            <v-btn icon="mdi-account-edit" @click="showModal(item.id)">
               <v-icon />
-              <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
+              <v-tooltip activator="parent" location="top" :text="$t('actions.edit') + item.id"></v-tooltip>
             </v-btn>
-            <v-btn style="margin-inline-start:0;" icon="mdi-account-minus" color="warning" @click="delOverlay[index] = true">
+            <v-btn style="margin-inline-start:0;" icon="mdi-account-minus" color="warning" @click="delOverlay[clients.findIndex(c => c.id == item.id)] = true">
               <v-icon />
               <v-tooltip activator="parent" location="top" :text="$t('actions.del')"></v-tooltip>
             </v-btn>
             <v-overlay
-              v-model="delOverlay[index]"
+              v-model="delOverlay[clients.findIndex(c => c.id == item.id)]"
               contained
               class="align-center justify-center"
             >
@@ -124,12 +196,12 @@
                 <v-divider></v-divider>
                 <v-card-text>{{ $t('confirm') }}</v-card-text>
                 <v-card-actions>
-                  <v-btn color="error" variant="outlined" @click="delClient(index)">{{ $t('yes') }}</v-btn>
-                  <v-btn color="success" variant="outlined" @click="delOverlay[index] = false">{{ $t('no') }}</v-btn>
+                  <v-btn color="error" variant="outlined" @click="delClient(item.id)">{{ $t('yes') }}</v-btn>
+                  <v-btn color="success" variant="outlined" @click="delOverlay[clients.findIndex(c => c.id == item.id)] = false">{{ $t('no') }}</v-btn>
                 </v-card-actions>
               </v-card>
             </v-overlay>
-            <v-btn icon="mdi-qrcode" @click="showQrCode(index)">
+            <v-btn icon="mdi-qrcode" @click="showQrCode(item.id)">
               <v-icon />
               <v-tooltip activator="parent" location="top" text="QR-Code"></v-tooltip>
             </v-btn>
@@ -141,8 +213,109 @@
         </v-card>      
       </v-col>
     </template>
+    </v-row>
+  </template>
+  <v-row v-else>
+    <v-col cols="12">
+      <v-data-table
+        :headers="headers"
+        :items="filterSettings.enabled ? filterSettings.filteredClients : clients"
+        :hide-default-footer="filterSettings.enabled ? filterSettings.filteredClients.length<=10 : clients.length<=10"
+        hide-no-data
+        fixed-header
+        :group-by="groupBy"
+        item-value="name"
+        :mobile="smAndDown"
+        mobile-breakpoint="sm"
+        width="100%"
+        class="elevation-3 rounded"
+        >
+        <template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }">
+          <tr>
+            <td :colspan="columns.length" @click="toggleGroup(item)" style="min-height: fit-content; text-align: center;">
+              <v-icon :icon="isGroupOpen(item) ? '$expand' : '$next'"></v-icon>
+              {{ item.value.length>0 ? item.value : $t('none') }}
+              <v-badge :content="(filterSettings.enabled ? filterSettings.filteredClients : clients).filter(c => c.group == item.value).length" inline color="success" />
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.volume="{ item }">
+          <div class="text-start">
+            <v-chip
+              size="small"
+              label
+            >{{ item.volume == 0 ? $t('unlimited') : HumanReadable.sizeFormat(item.volume) }}</v-chip>
+          </div>
+        </template>
+        <template v-slot:item.expiry="{ item }">
+          <div class="text-start">
+            <v-chip
+              size="small"
+              label
+            >{{ item.expiry == 0 ? $t('unlimited') : HumanReadable.remainedDays(item.expiry)?? $t('date.expired') }}</v-chip>
+          </div>
+        </template>
+        <template v-slot:item.online="{ item }">
+          <div class="text-start">
+            <template v-if="isOnline(item.name).value">
+              <v-chip density="comfortable" size="small" color="success" variant="flat">{{ $t('online') }}</v-chip>
+            </template>
+            <template v-else>-</template>
+          </div>
+        </template>
+        <template v-slot:item.actions="{ item }">
+        <v-icon
+          class="me-2"
+          @click="showModal(item.id)"
+        >
+          mdi-pencil
+        </v-icon>
+        <v-menu
+          v-model="delOverlay[clients.findIndex(c => c.id == item.id)]"
+          :close-on-content-click="false"
+          location="top center"
+        >
+          <template v-slot:activator="{ props }">
+            <v-icon
+              class="me-2"
+              color="error"
+              v-bind="props"
+            >
+              mdi-delete
+            </v-icon>
+          </template>
+          <v-card :title="$t('actions.del')" rounded="lg">
+            <v-divider></v-divider>
+            <v-card-text>{{ $t('confirm') }}</v-card-text>
+            <v-card-actions>
+              <v-btn color="error" variant="outlined" @click="delClient(item.id)">{{ $t('yes') }}</v-btn>
+              <v-btn color="success" variant="outlined" @click="delOverlay[clients.findIndex(c => c.id == item.id)] = false">{{ $t('no') }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-menu>
+        <v-icon
+          class="me-2"
+          @click="showQrCode(item.id)"
+        >
+          mdi-qrcode
+        </v-icon>
+        <v-icon icon="mdi-chart-line" @click="showStats(item.name)" v-if="v2rayStats.users.includes(item.name)">
+          <v-tooltip activator="parent" location="top" :text="$t('stats.graphTitle')"></v-tooltip>
+        </v-icon>
+      </template>
+      </v-data-table>
+    </v-col>
   </v-row>
 </template>
+<style>
+.v-data-table__tr--mobile td {
+  height: fit-content;
+  min-height: 36px !important;
+}
+.v-data-table__tr--mobile td div {
+  width:max-content;
+}
+</style>
 <script lang="ts" setup>
 import Data from '@/store/modules/data'
 import ClientModal from '@/layouts/modals/Client.vue'
@@ -156,13 +329,16 @@ import { Link, LinkUtil } from '@/plugins/link'
 import { HumanReadable } from '@/plugins/utils'
 import { i18n } from '@/locales'
 import { push } from 'notivue'
+import { useDisplay } from 'vuetify'
+
+const { smAndDown } = useDisplay()
 
 const clients = computed((): any[] => {
   return Data().clients
 })
 
-const onlines = computed(() => {
-  return Data().onlines.user ? clients.value.map(c => Data().onlines.user.includes(c.name)) : []
+const isOnline = (cname: string) => computed(() => {
+  return Data().onlines?.user ? Data().onlines.user.includes(cname) : false
 })
 
 const appConfig = computed((): Config => {
@@ -184,9 +360,19 @@ const inboundTags = computed((): string[] => {
 
 const groups = computed((): string[] => {
   if (!clients.value) return []
+  if (filterSettings?.value.enabled) return Array.from(new Set(filterSettings.value.filteredClients?.map(c => c.group)))
   return Array.from(new Set(clients.value?.map(c => c.group)))
 })
-const filter = ref("")
+
+const filterMenu = ref(false)
+const filterSettings = ref({
+  enabled: false,
+  state: '',
+  group: '-',
+  text: '',
+  filteredClients: <any[]>[]
+})
+const tableView = ref(false)
 
 const filterItems = [
   { title: i18n.global.t('none'), value: '' },
@@ -195,18 +381,20 @@ const filterItems = [
   { title: i18n.global.t('online'), value: 'online' },
 ]
 
-const checkFilter = (c:any) :boolean => {
-  switch (filter.value) {
-    case "disable":
-      return !c.enable
-    case "expired":
-      return HumanReadable.remainedDays(c.expiry) == null
-    case "online":
-      return Data().onlines?.user?.includes(c.name)
-    default:
-      return true
+const headers = [
+  { title: i18n.global.t('client.name'), key: 'name' },
+  { title: i18n.global.t('client.desc'), key: 'desc', sortable: false },
+  { title: i18n.global.t('actions.action'), key: 'actions', sortable: false},
+  { title: i18n.global.t('stats.volume'), key: 'volume' },
+  { title: i18n.global.t('date.expiry'), key: 'expiry' },
+  { title: i18n.global.t('online'), key: 'online' },
+  { key: 'data-table-group', width: 0 },
+]
+const groupBy = [
+  {
+    key: 'group'
   }
-}
+]
 
 const modal = ref({
   visible: false,
@@ -217,7 +405,8 @@ const modal = ref({
 
 const delOverlay = ref(new Array<boolean>(clients.value.length).fill(false))
 
-const showModal = (index: number) => {
+const showModal = (id: number) => {
+  const index = id == -1 ? -1 : clients.value.findIndex(c => c.id == id)
   modal.value.index = index
   modal.value.data = index == -1 ? '' : JSON.stringify(clients.value[index])
   modal.value.stats = index == -1 ? false : v2rayStats.value.users.includes(clients.value[index].name)
@@ -316,8 +505,8 @@ const updateLinks = (c:Client):Link[] => {
 
   return links
 }
-const delClient = (clientIndex: number) => {
-  const id = clients.value[clientIndex].id
+const delClient = (id: number) => {
+  const clientIndex = clients.value.findIndex(c => c.id === id)
   const oldData = createClient(clients.value[clientIndex])
 
   // Delete stats if exists and will be orphaned
@@ -338,8 +527,9 @@ const qrcode = ref({
   index: 0,
 })
 
-const showQrCode = (index: number) => {
-  qrcode.value.index = index
+const showQrCode = (id: number) => {
+  const clientIndex = clients.value.findIndex(c => c.id === id)
+  qrcode.value.index = clientIndex
   qrcode.value.visible = true
 }
 const closeQrCode = () => {
@@ -359,4 +549,47 @@ const showStats = (tag: string) => {
 const closeStats = () => {
   stats.value.visible = false
 }
+
+var openedGroups = ref(<string[]>[""])
+
+const toggleGroupOpen = (g: string) => {
+  const index = openedGroups.value.findIndex(og => og == g)
+  index == -1 ? openedGroups.value.push(g) : openedGroups.value.splice(index,1)
+}
+
+const doFilter = () => {
+  let filteredClients = clients.value.slice()
+  if (filterSettings.value.group != '-') {
+    filteredClients = filteredClients.filter(c => c.group == filterSettings.value.group)
+  }
+  if (filterSettings.value.text.length>0) {
+    const txt = filterSettings.value.text
+    filteredClients = filteredClients.filter(c => c.name.search(txt) != -1 || c.desc.search(txt) != -1)
+  }
+  switch (filterSettings.value.state) {
+    case "disable":
+      filteredClients = filteredClients.filter(c => c.enable == false)
+      break
+    case "expired":
+      filteredClients = filteredClients.filter(c => HumanReadable.remainedDays(c.expiry) == null)
+      break
+    case "online":
+      filteredClients = filteredClients.filter(c => Data().onlines?.user?.includes(c.name))
+      break
+  }
+  filterSettings.value.filteredClients = filteredClients
+  filterSettings.value.enabled = true
+  filterMenu.value = false
+}
+
+const clearFilter = () => {
+  filterSettings.value = {
+    enabled: false,
+    state: '',
+    group: '-',
+    text: '',
+    filteredClients: <any[]>[]
+  }
+  filterMenu.value = false
+}
 </script>
\ No newline at end of file