From 415f1c8deb2a8b513bb252888e82b7e5faa3e7b1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 5 Mar 2024 19:06:25 +0700
Subject: [PATCH] Refactor RGangguan_KTI.vue component

---
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   | 171 +++--------
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue | 267 ++++--------------
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 171 +++--------
 .../Rekap/RGangguan_RatingPerPosko.vue        | 209 +++-----------
 .../Rekap/RGangguan_RatingPerRegu.vue         | 209 +++-----------
 5 files changed, 202 insertions(+), 825 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 8921cc0..38ac0c9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -1,153 +1,48 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+    <Type1 @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"
-    >
+    <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">
       <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
-        :width="170"
-        alignment="center"
-        data-field="uid"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="januari"
-          data-type="number"
-          caption="Januari"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="februari"
-          data-type="number"
-          caption="Februari"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="maret"
-          data-type="number"
-          caption="Maret"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="april"
-          data-type="number"
-          caption="April"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="mei"
-          data-type="number"
-          caption="Mei"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juni"
-          data-type="number"
-          caption="Juni"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juli"
-          data-type="number"
-          caption="Juli"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="agustus"
-          data-type="number"
-          caption="Agustus"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="september"
-          data-type="number"
-          caption="September"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="oktober"
-          data-type="number"
-          caption="Oktober"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="november"
-          data-type="number"
-          caption="November"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="desember"
-          data-type="number"
-          caption="Desember"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 942ea25..8bd1283 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -1,132 +1,57 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+    <Type1 @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"
-      @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" @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
-        :width="50"
-        alignment="center"
-        caption="NO"
-        css-class="custom-table-column"
-        rowspan="4"
-        colspan="2"
-      >
-        <DxColumn
-          :width="50"
-          alignment="center"
-          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-          caption="a"
-          css-class="custom-table-column"
-        />
+      <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
+        <DxColumn :width="50" alignment="center"
+          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
+          css-class="custom-table-column" />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="regu"
-          caption="b"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="kode_regu"
-          caption="c"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_laporan"
-            caption="d=(e+g)"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="total_selesai"
-              caption="e"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="persen_selesai"
-              caption="f=(e/d)*100"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
+              css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="total_belum_selesai"
-              caption="g"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="persen_belum_selesai"
-              caption="h=(g/d)*100"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
+              css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -136,43 +61,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_laporan_mobile_nonmarking"
-                  caption="i"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="persen_laporan_mobile_nonmarking"
-                  caption="j=(i/d)*100"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
+                  caption="j=(i/d)*100" css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_response_mobile_nonmarking"
-                  caption="k"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_recovery_mobile_nonmarking"
-                  caption="l"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l"
+                  css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -180,43 +85,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_laporan_mobile_marking"
-                  caption="m"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="persen_laporan_mobile_marking"
-                  caption="n=(m/d)*100"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
+                  caption="n=(m/d)*100" css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_response_mobile_marking"
-                  caption="o"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_recovery_mobile_marking"
-                  caption="p"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p"
+                  css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -226,43 +111,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_laporan_nonmobile_nonmarking"
-                  caption="q"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="persen_laporan_nonmobile_nonmarking"
-                  caption="r=(q/d)*100"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
+                  caption="r=(q/d)*100" css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_response_nonmobile_nonmarking"
-                  caption="s"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking"
+                  caption="s" css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_nonmarking"
-                  caption="t"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking"
+                  caption="t" css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -270,43 +135,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_laporan_nonmobile_marking"
-                  caption="u"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="persen_laporan_nonmobile_marking"
-                  caption="v=(u/d)*100"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
+                  caption="v=(u/d)*100" css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_response_nonmobile_marking"
-                  caption="w"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w"
+                  css-class="custom-table-column" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_marking"
-                  caption="x"
-                  css-class="custom-table-column"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x"
+                  css-class="custom-table-column" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 6a96de3..6719225 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1,153 +1,48 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type18
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+    <Type18 @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"
-    >
+    <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">
       <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
-        :width="170"
-        alignment="center"
-        data-field="uid"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="januari"
-          data-type="number"
-          caption="Januari"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="februari"
-          data-type="number"
-          caption="Februari"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="maret"
-          data-type="number"
-          caption="Maret"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="april"
-          data-type="number"
-          caption="April"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="mei"
-          data-type="number"
-          caption="Mei"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juni"
-          data-type="number"
-          caption="Juni"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juli"
-          data-type="number"
-          caption="Juli"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="agustus"
-          data-type="number"
-          caption="Agustus"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="september"
-          data-type="number"
-          caption="September"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="oktober"
-          data-type="number"
-          caption="Oktober"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="november"
-          data-type="number"
-          caption="November"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="desember"
-          data-type="number"
-          caption="Desember"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
+          css-class="custom-table-column" />
+        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 6729405..0c90173 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -1,195 +1,66 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+    <Type1 @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"
-    >
+    <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">
       <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
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO"
-        data-type="number"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Kode Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" data-type="number" css-class="custom-table-column" />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="1"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="2"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="3"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="4"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="5"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Index"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Jml"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 33ac253..36c73c8 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -1,195 +1,66 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+    <Type1 @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"
-    >
+    <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">
       <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
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO"
-        data-type="number"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Kode"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Nama Regu"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" data-type="number" css-class="custom-table-column" />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="1"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="2"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="3"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="4"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="5"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Index"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
+            css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Jml"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>