Update Filters component in multiple files

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -49,14 +48,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -35,14 +35,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -18,7 +18,8 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn alignment="center" data-field="id_jenis_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="id_jenis_gangguan" caption="ID Gangguan"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" data-field="nama_jenis_gangguan" caption="Jenis Gangguan"
         css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
@@ -40,14 +41,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div>
@@ -83,14 +83,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -49,14 +48,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -37,14 +37,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -84,14 +84,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -49,14 +48,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -35,14 +35,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -50,14 +49,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -49,14 +48,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
@@ -49,14 +48,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -46,6 +46,7 @@
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
       </template>
+
       <template #cell-left="{ data }">
         <p class="text-left">
           {{ data.text }}
@@ -61,14 +62,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -48,14 +48,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -26,10 +26,10 @@
             caption="Total Gangguan" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number" caption="Jan 2020"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number" caption="Total Keluhan"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
+            caption="Jan 2020" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
+            caption="Total Keluhan" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
@@ -38,6 +38,7 @@
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
       </template>
+
       <template #cell-left="{ data }">
         <p class="text-left">
           {{ data.text }}
@@ -53,14 +54,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
@@ -16,8 +16,8 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        cell-template="cell-left" />
+      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" cell-template="cell-left" />
 
       <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
         css-class="custom-table-column">
@@ -51,8 +51,8 @@
           <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
             caption="Total" css-class="custom-table-column" />
         </DxColumn>
-        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_tahun_ini"
-          data-type="number" />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_tahun_ini" data-type="number" />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
@@ -67,8 +67,8 @@
       <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
           css-class="custom-table-column" cell-template="percent" />
-        <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number" caption="Gangguan"
-          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" cell-template="percent" />
         <DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
           caption="Informasi" css-class="custom-table-column" cell-template="percent" />
         <DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
@@ -78,6 +78,7 @@
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
       </template>
+
       <template #cell-left="{ data }">
         <p class="text-left">
           {{ data.text }}
@@ -93,14 +94,14 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'