Merge branch 'development' of https://github.com/defuj/eis

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';
+
+.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;
+}

src/assets/css/style.css

@@ -705,8 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-/* DevExpress */
-
 /* NavBar */
 
 .menu-item {

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;

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>

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>

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>

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>

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>

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>

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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Posko" 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"
+                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-                        css-class="custom-table-column" />
+                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-                        css-class="custom-table-column" />
+                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-                        css-class="custom-table-column" />
+                        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()
 

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">
+            <DxSummary>
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
+                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                    css-class="text-white" />
+                <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(() => {

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

src/stores/filters.ts

@@ -52,7 +52,7 @@ export const useFiltersStore = defineStore('filters', () => {
     component: getFilters('')
   })
 
-  const setConfig = ({reportButton = false, type}: {reportButton?: boolean, type: string}) => {
+  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
     config.value = {
       reportButton,
       type,