diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 8734c3c..5bcf9b4 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1,7 +1,26 @@
 @import './base.css';
-/* @import 'devextreme/dist/css/dx.material.blue.light.css'; */
 @import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-/* @import 'devextreme/dist/css/dx.light.css'; */
-/* @import 'devextreme/dist/css/dx.light.compact.css'; */
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');
-@import './style.css';
\ No newline at end of file
+@import './style.css';
+
+.dx-datagrid-total-footer{
+    background-color: #035b71 !important;
+}
+.dx-datagrid-total-footer .dx-row.dx-footer-row{
+    background-color: #035b71 !important;
+}
+.dx-datagrid-total-footer > td{
+    background-color: #035b71 !important;
+}
+.dx-row.dx-datagrid-group-footer > td{
+    background-color: #e6eff1 !important;
+}
+.dx-datagrid-rowsview .dx-row.dx-group-row {
+    background-color: #F7F7F7 !important;
+}
+.dx-datagrid-group-footer{
+    background-color: #e6eff1 !important;
+}
+.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection{
+    background-color: #035b71 !important;
+}
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 5829961..a7c42d2 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,8 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-/* DevExpress */
-
 /* NavBar */
 
 .menu-item {
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 70189b1..cb1564b 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -3,13 +3,6 @@
 @tailwind utilities;
 
 @layer components {
-    /* DevExpress */
-    .dx-datagrid-rowsview .dx-row.dx-group-row {
-        @apply !bg-['#F7F7F7'];
-    }
-    .dx-datagrid-group-footer{
-        @apply !bg-primary-500;
-    }
     /* NavBar */
     .menu-item {
         @apply w-full text-left block px-4 py-3 text-base text-gray-800;
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
index 7bf412d..90b56cb 100644
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -39,7 +39,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Pencarian:</label>
 
     <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
   </div>
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
index f31fadc..bddb20c 100644
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -100,6 +100,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'
@@ -143,4 +145,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-4'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
index eb7f1e9..c2bb30d 100644
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -68,6 +68,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'
@@ -111,4 +113,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-4'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
index 053bcb4..08bb921 100644
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -76,6 +76,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'
@@ -119,4 +121,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-4'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
index 2518b19..3bd57d1 100644
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -33,6 +33,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'
@@ -75,4 +77,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
index 13942dd..b3ff284 100644
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -55,6 +55,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'
@@ -97,4 +99,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-3',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 7851893..765c412 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,60 +12,136 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
+            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column"
+                :group-index="0" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
+                        caption="Jml" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+                        caption="%" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
+                        caption="Jml" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+                        caption="%" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
+
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
+
+                <DxTotalItem name="total" summary-type="sum" display-format="Total" show-in-column="no"
+                    css-class="text-white" />
+                <DxTotalItem name="total" summary-type="sum" display-format="{0}" show-in-column="laporan.total"
+                    column="laporan.total" css-class="text-white" />
+                <DxTotalItem name="total" column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="responseTime.menit.total" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="responseTime.menit.max" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem name="total" column="responseTime.menit.min" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+                <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+                    css-class="text-white" />
+            </DxSummary>
+
         </DxDataGrid>
     </div>
 </template>
@@ -74,7 +150,7 @@
 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 { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } 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'
@@ -115,6 +191,126 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = [
+    {
+        no: 1,
+        posko: 'POSKO CONDET',
+        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,
+            },
+        }
+    },
+    {
+        no: 2,
+        posko: 'POSKO CONDET',
+        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,
+            },
+        }
+    },
+    {
+        no: 3,
+        posko: 'POSKO ANGKREK',
+        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,
+            },
+        }
+    },
+]
+
 onMounted(() => {
     const filters = useFiltersStore()
 
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 30f8e46..beb714c 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -14,7 +14,7 @@
             <DxGroupPanel :visible="true" />
             <DxGrouping :auto-expand-all="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
                 css-class="custom-table-column" :group-index="0" />
@@ -71,13 +71,41 @@
                 </DxColumn>
             </DxColumn>
 
-            <DxSummary css-class="!bg-primary-500">
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
                 <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-                    display-format="{0}" css-class="text-white" />
+                    display-format="{0}" />
                 <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-                    display-format="{0}" css-class="text-white" />
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
             </DxSummary>
         </DxDataGrid>
     </div>
@@ -169,6 +197,86 @@ const data = [
             },
         }
     },
+    {
+        no: 2,
+        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,
+            },
+        }
+    },
+    {
+        no: 3,
+        kode: 'B',
+        jenisGangguan: 'Gangguan B',
+        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,
+            },
+        }
+    },
 ]
 
 onMounted(() => {
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index fa2d2ff..7a24da1 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 45fdd42..fff7549 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 545f0a6..9ab55fe 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 4bb914e..3f9c53a 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 45fdd42..9a73c42 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 9ddd6cd..7574554 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 61b4c79..71cc8ec 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index d189bac..e46260c 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 107b53b..24ae135 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 998e030..4816c2d 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index e8e2ef3..48a1708 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index c7c180b..d3eaa66 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index 518247b..b879473 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 276851d..fb032a8 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index d794954..695ad2d 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index 678815e..028ca60 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -35,7 +35,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-14'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index b96b3c4..0286cf2 100644
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -30,7 +30,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-14'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index a8a01ee..7ba947c 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index 22be567..9689a17 100644
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 6018b06..3bf4ae5 100644
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index 75195e8..a46cd82 100644
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index 0cf2303..93ec2d8 100644
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.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-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index 902134f..39c06a9 100644
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -22,6 +22,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'
@@ -64,4 +66,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index a0c6d78..39a3ee3 100644
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index d7bd85e..35f0495 100644
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 286a07a..4347892 100644
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -25,6 +25,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'
@@ -67,4 +69,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index a8a01ee..7ba947c 100644
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index d18cb02..a2fd52a 100644
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index 7725a2a..9393684 100644
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index b2fee1a..3156041 100644
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.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-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
index 57ff6cd..d8a4635 100644
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -22,6 +22,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'
@@ -64,4 +66,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index 5d8a932..80f6978 100644
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
index a6c8a81..4d7dbff 100644
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -25,6 +25,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'
@@ -67,4 +69,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index 3910573..022c57b 100644
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -82,6 +82,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'
@@ -124,4 +126,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index de50a70..1b8cee5 100644
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -44,6 +44,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'
@@ -86,4 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index 79296e0..fe355bd 100644
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -34,6 +34,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'
@@ -76,4 +78,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index 942242f..e1bec20 100644
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -36,6 +36,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'
@@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index db105d6..1370814 100644
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -69,6 +69,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'
@@ -111,4 +113,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index 409c190..55a1fbc 100644
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -44,6 +44,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'
@@ -86,4 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index 3be2336..254e7d7 100644
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -34,6 +34,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'
@@ -76,4 +78,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index 7ed615d..954b5e1 100644
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -37,6 +37,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'
@@ -79,4 +81,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-2',
+        reportButton: true
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index 320a9cc..cf587b8 100644
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -36,7 +36,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-15'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
index 2ee8bc9..b00c9c1 100644
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -3,7 +3,7 @@
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+            :word-wrap-enabled="true" @row-prepared="onRowPrepared">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -31,6 +31,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'
@@ -73,4 +75,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const onRowPrepared = (e: any) => {
+    if (e.rowType === "data") {
+        if (e.data.Speed > e.data.SpeedLimit) {
+            // e.cellElement.style.cssText = "color: white; background-color: red";
+            // or
+            e.rowElement.classList.add("my-class");
+            // To override alternation color
+            // e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
+        }
+    }
+}
+
+const data = [
+    {
+        noLapor: 'K2316081000039',
+        tipeIsu: 'PDPB',
+        nama: 'BAPAK HAIRUL',
+        unit: 'ULP BARABAI',
+        noTelp: '081350000000',
+        permasalahan: 'MCB KWH SERING TURUN',
+        deskripsi: '-',
+        tglBuat: '10/08/2016 07:18:17',
+        lapUlang: 0,
+        ketLapUlang: '-',
+        status: 'Dalam Proses Manager Unit',
+        durasi: '2638 01:59:17'
+    },
+    {
+        noLapor: 'K2316081000039',
+        tipeIsu: 'PDPB',
+        nama: 'BAPAK HAIRUL',
+        unit: 'ULP BARABAI',
+        noTelp: '081350000000',
+        permasalahan: 'MCB KWH SERING TURUN',
+        deskripsi: '-',
+        tglBuat: '10/08/2016 07:18:17',
+        lapUlang: 0,
+        ketLapUlang: '-',
+        status: 'Dalam Proses Manager Unit',
+        durasi: '2638 01:59:17'
+    },
+    {
+        noLapor: 'K2316081000039',
+        tipeIsu: 'PDPB',
+        nama: 'BAPAK HAIRUL',
+        unit: 'ULP BARABAI',
+        noTelp: '081350000000',
+        permasalahan: 'MCB KWH SERING TURUN',
+        deskripsi: '-',
+        tglBuat: '10/08/2016 07:18:17',
+        lapUlang: 0,
+        ketLapUlang: '-',
+        status: 'Dalam Proses Manager Unit',
+        durasi: '2638 01:59:17'
+    }
+]
+
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-17'
+    })
+})
 </script>
\ No newline at end of file
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index f801266..5e31569 100644
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -49,10 +49,10 @@ export const useFiltersStore = defineStore('filters', () => {
   const config = ref({
     reportButton: false,
     type: '',
-    component: getFilters('') 
+    component: getFilters('')
   })
 
-  const setConfig = ({reportButton = false, type}: {reportButton?: boolean, type: string}) => {
+  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
     config.value = {
       reportButton,
       type,