applied all filters to the page

src/components/Pages/Keluhan/Table_21.vue

@@ -47,6 +47,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -89,4 +91,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_22.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -92,4 +94,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-10'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_23.vue

@@ -47,6 +47,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -89,4 +91,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-11'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_24.vue

@@ -48,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -90,4 +92,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-11'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_25.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -92,4 +94,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_26.vue

@@ -45,6 +45,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -87,4 +89,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_27.vue

@@ -46,6 +46,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -88,4 +90,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_28.vue

@@ -53,6 +53,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -95,4 +97,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_29.vue

@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-13',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_30.vue

@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -115,4 +117,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_31.vue

@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-13',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_32.vue

@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-13',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_33.vue

@@ -72,6 +72,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -114,4 +116,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-8',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_34.vue

@@ -32,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -74,4 +76,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3'
+    })
+})
 </script>

src/components/Pages/Keluhan/Table_35.vue

@@ -63,6 +63,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -105,4 +107,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-8',
+        reportButton: true
+    })
+})
 </script>