diff --git a/package-lock.json b/package-lock.json
index 0dddb7a..ceb33f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "uuid": "^9.0.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2",
-        "vue-tailwind-datepicker": "^1.4.5"
+        "vue-tailwind-datepicker": "^1.6.1"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.5.1",
@@ -539,6 +539,8 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -550,6 +552,8 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -1298,22 +1302,30 @@
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
-      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
-      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@tsconfig/node18": {
       "version": "2.0.1",
@@ -1362,7 +1374,8 @@
     "node_modules/@types/node": {
       "version": "18.18.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
-      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ=="
+      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==",
+      "devOptional": true
     },
     "node_modules/@types/pako": {
       "version": "1.0.5",
@@ -2201,6 +2214,7 @@
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2221,6 +2235,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3236,7 +3251,9 @@
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -3578,6 +3595,8 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -6002,7 +6021,9 @@
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/md5.js": {
       "version": "1.3.5",
@@ -8213,6 +8234,8 @@
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -8254,7 +8277,9 @@
     "node_modules/ts-node/node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/tslib": {
       "version": "2.0.1",
@@ -8371,6 +8396,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8513,7 +8539,9 @@
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
@@ -8777,12 +8805,11 @@
       }
     },
     "node_modules/vue-tailwind-datepicker": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.5.2.tgz",
-      "integrity": "sha512-lKnDelGqrqvSpmBfuRox+efC7pqnJYu8lPSN+kZOq/uuMg7NF81Uf0HKl2ZwG95wivm7H1cmbJE2Q4fHBWnFLA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz",
+      "integrity": "sha512-+X4f+JTUc65hemfm15R9I4lCgJ3ChwGJzVrbiS64qIDujrI6HnfPXk53r/uO6Li3inplkiAta1M/xyHuLCcU6w==",
       "dependencies": {
-        "@vueuse/core": "^10.4.1",
-        "ts-node": "^10.9.1",
+        "@vueuse/core": "^10.5.0",
         "vite-plugin-css-injected-by-js": "^3.3.0"
       },
       "peerDependencies": {
@@ -9109,6 +9136,8 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -9539,6 +9568,8 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "optional": true,
+      "peer": true,
       "requires": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -9547,6 +9578,8 @@
           "version": "0.3.9",
           "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
           "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+          "optional": true,
+          "peer": true,
           "requires": {
             "@jridgewell/resolve-uri": "^3.0.3",
             "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -10016,22 +10049,30 @@
     "@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
-      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "optional": true,
+      "peer": true
     },
     "@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "optional": true,
+      "peer": true
     },
     "@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "optional": true,
+      "peer": true
     },
     "@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
-      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "optional": true,
+      "peer": true
     },
     "@tsconfig/node18": {
       "version": "2.0.1",
@@ -10080,7 +10121,8 @@
     "@types/node": {
       "version": "18.18.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
-      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ=="
+      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==",
+      "devOptional": true
     },
     "@types/pako": {
       "version": "1.0.5",
@@ -10683,7 +10725,8 @@
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "devOptional": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -10695,7 +10738,8 @@
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "devOptional": true
     },
     "agent-base": {
       "version": "6.0.2",
@@ -11444,7 +11488,9 @@
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "optional": true,
+      "peer": true
     },
     "cross-spawn": {
       "version": "7.0.3",
@@ -11712,7 +11758,9 @@
     "diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "optional": true,
+      "peer": true
     },
     "diff-sequences": {
       "version": "29.6.3",
@@ -13537,7 +13585,9 @@
     "make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "optional": true,
+      "peer": true
     },
     "md5.js": {
       "version": "1.3.5",
@@ -15155,6 +15205,8 @@
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "optional": true,
+      "peer": true,
       "requires": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -15174,7 +15226,9 @@
         "arg": {
           "version": "4.1.3",
           "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-          "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+          "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -15262,7 +15316,8 @@
     "typescript": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w=="
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "devOptional": true
     },
     "ufo": {
       "version": "1.3.1",
@@ -15362,7 +15417,9 @@
     "v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "optional": true,
+      "peer": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -15505,12 +15562,11 @@
       }
     },
     "vue-tailwind-datepicker": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.5.2.tgz",
-      "integrity": "sha512-lKnDelGqrqvSpmBfuRox+efC7pqnJYu8lPSN+kZOq/uuMg7NF81Uf0HKl2ZwG95wivm7H1cmbJE2Q4fHBWnFLA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz",
+      "integrity": "sha512-+X4f+JTUc65hemfm15R9I4lCgJ3ChwGJzVrbiS64qIDujrI6HnfPXk53r/uO6Li3inplkiAta1M/xyHuLCcU6w==",
       "requires": {
-        "@vueuse/core": "^10.4.1",
-        "ts-node": "^10.9.1",
+        "@vueuse/core": "^10.5.0",
         "vite-plugin-css-injected-by-js": "^3.3.0"
       }
     },
@@ -15740,7 +15796,9 @@
     "yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "optional": true,
+      "peer": true
     },
     "yocto-queue": {
       "version": "0.1.0",
diff --git a/package.json b/package.json
index d3e332a..2cc84b8 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vue-tailwind-datepicker": "^1.4.5"
+    "vue-tailwind-datepicker": "^1.6.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
@@ -64,4 +64,4 @@
     "vitest": "^0.34.6",
     "vue-tsc": "^1.6.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 4792bd4..94134ad 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+  import { PhCalendarBlank } from '@phosphor-icons/vue';
   import { ref } from 'vue'
   import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+  
 
-  const dateValue = ref('')
-  const formatter = ref({
-    date: 'DD MMM YYYY',
-    month: 'MMM'
-  })
+const dateValue = ref('')
+const formatter = ref({
+  date: 'DD MMM YYYY',
+  month: 'MMM'
+})
 </script>
 
 <template>
@@ -17,17 +19,20 @@
       separator="   s/d   "
       :shortcuts="false"
       :auto-apply="false"
+      as-single 
+      use-range
       v-slot="{ value, placeholder }"
     >
       <div class="flex">
         <div class="flex-1">
           <button
             type="button"
-            class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
           >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
+            <PhCalendarBlank size="18" weight="regular"/>
           </button>
         </div>
       </div>
diff --git a/src/components/Form/FiltersType/index.ts b/src/components/Form/FiltersType/index.ts
new file mode 100644
index 0000000..b9f86ec
--- /dev/null
+++ b/src/components/Form/FiltersType/index.ts
@@ -0,0 +1,17 @@
+export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue' 
+export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue' 
+export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue' 
+export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue' 
+export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue' 
+export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue' 
+export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue' 
+export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue' 
+export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue' 
+export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue' 
+export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue' 
+export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue' 
+export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue' 
+export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue' 
+export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue' 
+export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue' 
+export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue' 
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 393d3bb..e4848c8 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -151,8 +151,7 @@ onMounted(() => {
 
     createDummy()
     filters.setConfig({
-        type: 'type-15',
-        reportButton: false
+        type: 'type-1',
     })
 })
 
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 444a609..3e34671 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -67,13 +67,18 @@
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
+
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="" summary-type="sum" value-format="number"
+                    display-format="Total: {0}" />
+            </DxSummary>
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -114,4 +119,47 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = [
+    {
+        no: 1,
+        kode: 'A',
+        jenisGangguan: 'Gangguan A',
+        laporan: {
+            total: 10,
+            sudahSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+            belumSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+        },
+        responseTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        },
+        recoveryTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        }
+    },
+]
+
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 153891f..37a21c7 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -5,23 +5,8 @@
             <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
         </div>
         <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
-                <Type1 v-if="filters.config.type == 'type-1'" />
-                <Type2 v-else-if="filters.config.type == 'type-2'" />
-                <Type3 v-else-if="filters.config.type == 'type-3'" />
-                <Type4 v-else-if="filters.config.type == 'type-4'" />
-                <Type5 v-else-if="filters.config.type == 'type-5'" />
-                <Type6 v-else-if="filters.config.type == 'type-6'" />
-                <Type7 v-else-if="filters.config.type == 'type-7'" />
-                <Type8 v-else-if="filters.config.type == 'type-8'" />
-                <Type9 v-else-if="filters.config.type == 'type-9'" />
-                <Type10 v-else-if="filters.config.type == 'type-10'" />
-                <Type11 v-else-if="filters.config.type == 'type-11'" />
-                <Type12 v-else-if="filters.config.type == 'type-12'" />
-                <Type13 v-else-if="filters.config.type == 'type-13'" />
-                <Type14 v-else-if="filters.config.type == 'type-14'" />
-                <Type15 v-else-if="filters.config.type == 'type-15'" />
-                <Type17 v-else-if="filters.config.type == 'type-17'" />
+            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
+                <component :is="filters.config.component" />
             </Filters>
 
             <slot></slot>
@@ -32,25 +17,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import Filters from '../Form/Filters.vue'
-import Type1 from '../Form/FiltersType/Type1.vue';
-import Type2 from '../Form/FiltersType/Type2.vue';
-import Type3 from '../Form/FiltersType/Type3.vue';
-import Type4 from '../Form/FiltersType/Type4.vue';
-import Type5 from '../Form/FiltersType/Type5.vue';
-import Type6 from '../Form/FiltersType/Type6.vue';
-import Type7 from '../Form/FiltersType/Type7.vue';
-import Type8 from '../Form/FiltersType/Type8.vue';
-import Type9 from '../Form/FiltersType/Type9.vue';
-import Type10 from '../Form/FiltersType/Type10.vue';
-import Type11 from '../Form/FiltersType/Type11.vue';
-import Type12 from '../Form/FiltersType/Type12.vue';
-import Type13 from '../Form/FiltersType/Type13.vue';
-import Type14 from '../Form/FiltersType/Type14.vue';
-import Type15 from '../Form/FiltersType/Type15.vue';
-import Type17 from '../Form/FiltersType/Type17.vue';
 import { useFiltersStore } from '@/stores/filters';
 
+import Filters from '../Form/Filters.vue'
+
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index 61f57e9..e8d044a 100644
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -1,19 +1,50 @@
-import { ref, computed } from 'vue'
+import { ref, computed, VueElement } from 'vue'
 import { defineStore } from 'pinia'
 import { dispatchNotification } from '@/components/Notification'
 import { readData, removeData, writeData } from '@/utils/storage'
 import router from '@/router'
 
+import {
+  Type1,
+  Type2,
+  Type3,
+  Type4,
+  Type5,
+  Type6,
+  Type7,
+  Type8,
+  Type9,
+  Type10,
+  Type11,
+  Type12,
+  Type13,
+  Type14,
+  Type15,
+  Type16,
+  Type17,
+} from '@/components/Form/FiltersType'
+
+const test1: { [key: string]: any } = {
+  'type-1': Type1,
+  'type-2': Type2
+}
+
+const getFilters = (type: string): VueElement => {
+  return test1[type]
+}
+
 export const useFiltersStore = defineStore('filters', () => {
   const config = ref({
     reportButton: false,
-    type: 'type-1'
+    type: '',
+    component: getFilters('') 
   })
 
-  const setConfig = (test: {reportButton: boolean, type: string}) => {
+  const setConfig = ({reportButton = false, type}: {reportButton?: boolean, type: string}) => {
     config.value = {
-      reportButton: test.reportButton,
-      type: test.type
+      reportButton,
+      type,
+      component: getFilters(type)
     }
   }