From 09d4d1a714104b5064d62bf678de5c21212b0942 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Fri, 3 Nov 2023 12:35:43 +0700
Subject: [PATCH] change datepicker style

---
 package-lock.json                         | 126 ++++++++++++++++------
 package.json                              |   4 +-
 src/assets/css/style.css                  |  74 ++-----------
 src/components/DatePicker.vue             |   7 +-
 src/components/Form/FiltersType/index.ts  |  17 +++
 src/components/Form/InlineRadioGroup.vue  |   2 +-
 src/components/Pages/Gangguan/Table_1.vue |   3 +-
 src/components/Pages/MenuProvider.vue     |  39 +------
 src/stores/filters.ts                     |  41 ++++++-
 9 files changed, 168 insertions(+), 145 deletions(-)
 create mode 100644 src/components/Form/FiltersType/index.ts

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/assets/css/style.css b/src/assets/css/style.css
index cfef93b..30b0ad8 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1051,10 +1051,6 @@ select {
   margin-right: 0.5rem;
 }
 
-.mr-2\.5 {
-  margin-right: 0.625rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1170,10 +1166,6 @@ select {
   height: 2.25rem;
 }
 
-.h-\[16px\] {
-  height: 16px;
-}
-
 .h-\[2\.7rem\] {
   height: 2.7rem;
 }
@@ -1182,10 +1174,6 @@ select {
   height: 66px;
 }
 
-.h-\[7px\] {
-  height: 7px;
-}
-
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1283,10 +1271,6 @@ select {
   width: 2.25rem;
 }
 
-.w-\[16px\] {
-  width: 16px;
-}
-
 .w-\[2\.7rem\] {
   width: 2.7rem;
 }
@@ -1295,10 +1279,6 @@ select {
   width: 266px;
 }
 
-.w-\[7px\] {
-  width: 7px;
-}
-
 .w-auto {
   width: auto;
 }
@@ -1515,11 +1495,6 @@ select {
        column-gap: 0.5rem;
 }
 
-.gap-x-4 {
-  -moz-column-gap: 1rem;
-       column-gap: 1rem;
-}
-
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -2314,11 +2289,6 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
-.text-primary-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 73 90 / var(--tw-text-opacity));
-}
-
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2767,20 +2737,10 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
-.group:checked .group-checked\:text-primary-500 {
-  --tw-text-opacity: 1;
-  color: rgb(3 91 113 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:block {
   display: block;
 }
 
-.group:hover .group-hover\:bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2813,16 +2773,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.peer:checked ~ .peer-checked\:border-primary-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 91 113 / var(--tw-border-opacity));
-}
-
-.peer:checked ~ .peer-checked\:bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
-}
-
 .peer:checked ~ .peer-checked\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -3075,22 +3025,16 @@ select {
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
-  }
-
   .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));
     margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
   .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
@@ -3290,15 +3234,15 @@ select {
     padding-left: 20rem;
   }
 
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 
 @media (min-width: 1024px) {
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 4792bd4..6d81ac3 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,6 +1,8 @@
 <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({
@@ -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..09a3857
--- /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' 
\ No newline at end of file
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index cad4cf1..d42063d 100644
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, type PropType } from 'vue'
+import { type PropType } from 'vue'
 
 interface Item {
   id: number;
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 74b96fb..356c9bd 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/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 023b7b3..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,26 +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 Type16 from '../Form/FiltersType/Type16.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)
     }
   }