diff --git a/package-lock.json b/package-lock.json
index 0cb81626a..8cb005330 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "pinia": "^2.0.29",
         "quasar": "^2.11.1",
         "structure-chart": "^0.0.9",
-        "vue": "^3.2.45",
+        "vue": "^3.4.15",
         "vue-currency-input": "^3.0.5",
         "vue-router": "^4.1.6",
         "vue3-datepicker": "^0.3.4",
@@ -423,9 +423,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -2007,49 +2007,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
+      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.15",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
+      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
+      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.15",
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.33",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
+      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -2144,60 +2144,48 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
+      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
       "dependencies": {
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "@vue/shared": "3.4.15"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
+      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
+      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.4.15",
+        "@vue/shared": "3.4.15",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
+      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.4.15"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
+      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.4.1",
@@ -3442,9 +3430,9 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
       "version": "12.17.4",
@@ -4011,7 +3999,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -6652,9 +6639,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -7204,9 +7191,9 @@
       "devOptional": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -8288,9 +8275,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8306,7 +8293,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -10370,15 +10357,23 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
+      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-sfc": "3.4.15",
+        "@vue/runtime-dom": "3.4.15",
+        "@vue/server-renderer": "3.4.15",
+        "@vue/shared": "3.4.15"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-component-type-helpers": {
@@ -11204,9 +11199,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ=="
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
     },
     "@babel/plugin-syntax-jsx": {
       "version": "7.22.5",
@@ -12293,49 +12288,49 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
+      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
       "requires": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.15",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
+      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
       "requires": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
+      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
       "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.15",
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.33",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
+      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/devtools-api": {
@@ -12401,57 +12396,45 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
+      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
       "requires": {
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
+      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
       "requires": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
+      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
       "requires": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.4.15",
+        "@vue/shared": "3.4.15",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
+      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
+      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
     "@vue/test-utils": {
       "version": "2.4.1",
@@ -13365,9 +13348,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "cypress": {
       "version": "12.17.4",
@@ -13808,8 +13791,7 @@
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
     },
     "env-paths": {
       "version": "2.2.1",
@@ -15764,9 +15746,9 @@
       "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA=="
     },
     "magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -16195,9 +16177,9 @@
       "devOptional": true
     },
     "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -16996,11 +16978,11 @@
       }
     },
     "postcss": {
-      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -18489,15 +18471,15 @@
       }
     },
     "vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
+      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-sfc": "3.4.15",
+        "@vue/runtime-dom": "3.4.15",
+        "@vue/server-renderer": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "vue-component-type-helpers": {
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index cf9e5cb00..c63f42118 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
+const showData = ref<boolean>(false);
 </script>
 <template>
   <div class="col-12">
@@ -16,7 +18,9 @@ import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
       </div>
 
       <div class="col-xs-12 col-sm-9 q-pa-md">
-        <div class="col-12 row items-center"><TableView /></div>
+        <div class="col-12 row items-center">
+          <TableView v-model:showData="showData" />
+        </div>
       </div>
     </q-card>
   </div>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 1c7e2ff6e..4b8db9e09 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -329,14 +329,6 @@ onMounted(async () => {
           </template>
         </q-tree>
       </div>
-      <div>
-        <q-checkbox
-          keep-color
-          v-model="showData"
-          label="แสดงโครงสร้างทั้งหมด"
-          color="primary"
-        />
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index dd81b9095..ca797b7ca 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+const showData = defineModel<boolean>("showData", { required: true });
 const stroe = useOrganizational();
 const filter = ref<string>("");
 const document = ref<any>([
@@ -20,35 +24,153 @@ const document = ref<any>([
     val: "3",
   },
 ]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "noPosition",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "noPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "namePosition",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    field: "namePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "typePosition",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "typePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "levelPositoion",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "levelPositoion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isStatus",
+    align: "left",
+    label: "มีคนครองหรือไม่",
+    sortable: true,
+    field: "isStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([]);
 </script>
 <template>
-  <q-toolbar class="text" style="padding: 0">
-    <div v-if="stroe.typeOrganizational === 'draft'">
-      <q-btn flat round dense color="primary" icon="add">
-        <q-tooltip>เพิ่ม</q-tooltip></q-btn
-      >
-      <q-btn flat round dense color="blue" icon="filter_list">
-        <q-tooltip>ค้นหา</q-tooltip>
-      </q-btn>
-    </div>
-
-    <q-btn flat round dense color="blue-10" icon="save_alt">
-      <q-menu>
-        <q-list
-          style="min-width: 100px"
-          v-for="(item, index) in document"
-          :key="index"
+  <!-- TOOLBAR -->
+  <div class="col-12">
+    <q-toolbar style="padding: 0">
+      <div v-if="stroe.typeOrganizational === 'draft'">
+        <q-btn flat round dense color="primary" icon="add">
+          <q-tooltip>เพิ่ม</q-tooltip></q-btn
         >
-          <q-item clickable v-close-popup>
-            <q-item-section>{{ item.name }}</q-item-section>
-          </q-item>
-        </q-list>
-      </q-menu>
-      <q-tooltip>ดาวน์โหลด</q-tooltip>
-    </q-btn>
-    <q-space />
-    <q-input outlined dense v-model="filter" label="ค้นหา" />
-  </q-toolbar>
+        <q-btn flat round dense color="blue" icon="filter_list">
+          <q-tooltip>ค้นหา</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-btn flat round dense color="blue-10" icon="save_alt">
+        <q-menu>
+          <q-list
+            style="min-width: 100px"
+            v-for="(item, index) in document"
+            :key="index"
+          >
+            <q-item clickable v-close-popup>
+              <q-item-section>{{ item.name }}</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-md">
+        <div>
+          <q-checkbox
+            keep-color
+            v-model="showData"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          />
+        </div>
+        <div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
+      </div>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :rows-per-page-options="[10, 25, 50, 100]"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <!-- <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template> -->
+    </d-table>
+  </div>
 </template>
 
 <style scoped></style>