change datepicker style

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) {

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>

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' 

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;

src/components/Pages/Gangguan/Table_1.vue

@@ -151,8 +151,7 @@ onMounted(() => {
 
     createDummy()
     filters.setConfig({
-        type: 'type-15',
-        reportButton: false
+        type: 'type-1',
     })
 })
 

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()
 

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)
     }
   }