From f482f10e5b23a498f0e1a5681cb101ad250f7a3f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 6 Mar 2024 08:59:19 +0700
Subject: [PATCH] Add report button to Filters component

---
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |   2 +-
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |   2 +-
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    |   2 +-
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 388 ++++--------------
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 242 +++--------
 .../Rekap/RGangguan_RatingPerPosko.vue        |   2 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |   2 +-
 7 files changed, 130 insertions(+), 510 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 38ac0c9..6cc70f1 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.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">
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 8bd1283..970dad6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.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">
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 5a8945c..f16fa19 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.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">
     <Type18 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index ffe649b..804a123 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -1,346 +1,112 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type9 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="60"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-field="no"
-        data-type="number"
-        caption="No"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="kode_regu"
-        caption="Kode"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="kode_regu"
-        caption="Kode"
-        css-class="custom-table-column"
-        group-index="0"
-        v-if="filters.groupBy"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_regu"
-        caption="Nama Regu"
-        css-class="custom-table-column"
-      />
+      <DxColumn css-class="custom-table-column" :width="60" alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-field="no" data-type="number"
+        caption="No" />
+      <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
+      <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
+        group-index="0" v-if="filters.groupBy" />
+      <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="laporan.total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <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="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 :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="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 :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="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"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="responseTime.menit.min"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <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" cell-template="data-waktu" />
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" 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 :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="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"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="recoveryTime.menit.min"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <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" cell-template="data-waktu" />
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" 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 :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>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="no"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          show-in-column="laporan.total"
-          column="laporan.total"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="laporan.sudahSelesai.jml"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="laporan.sudahSelesai.persen"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="laporan.belumSelesai.jml"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="laporan.belumSelesai.persen"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="responseTime.menit.total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="responseTime.menit.rataRata"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          column="responseTime.menit.max"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          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"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
+          css-class="text-white" />
+        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
+          css-class="text-white" />
+        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
+          css-class="text-white" />
+        <DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
+          css-class="text-white" />
+        <DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxTotalItem 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>
 
       <template #data-waktu="{ data }">
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 48acf2d..8b96192 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -1,225 +1,79 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type9 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :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"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        group-index="0"
-        v-if="filters.groupBy"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-      />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
+        group-index="0" v-if="filters.groupBy" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="120" alignment="center" data-field="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="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="persen_selesai" 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="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="persen_inproses" 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="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" 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="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 0c90173..e6862d6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.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">
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 36c73c8..a950a4b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.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">
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
   <div id="data">