Update text alignment and number formatting

src/assets/css/style.css

@@ -3253,6 +3253,10 @@ body {
   text-align: left;
 }
 
+.\!text-left {
+  text-align: left !important;
+}
+
 .text-center {
   text-align: center;
 }
@@ -3261,6 +3265,10 @@ body {
   text-align: right;
 }
 
+.\!text-right {
+  text-align: right !important;
+}
+
 .text-start {
   text-align: start;
 }

src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue

@@ -22,13 +22,13 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
         caption="No Laporan" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
         caption="Status" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@@ -46,7 +46,7 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media"
         caption="Tgl Media" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media"
-        caption="Keterangan Media" cell-template="cellDefault" />
+        caption="Keterangan Media" cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,7 +54,7 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -19,11 +19,11 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
-                caption="No" />
+                caption="No" cell-template="cellRight" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="cellCenter" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
-                caption="Pembuat Laporan" cell-template="cellDefault" />
+                caption="Pembuat Laporan" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" cell-template="cellCenter" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
@@ -37,25 +37,25 @@
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" cell-template="data-waktu" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko Asal" cell-template="cellDefault" />
+                caption="Posko Asal" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
-                caption="Posko Tujuan" cell-template="cellDefault" />
+                caption="Posko Tujuan" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="cellCenter" />
+                caption="Status" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="cellCenter" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="cellDefault" />
+                caption="Nama Pelapor" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="cellDefault" />
+                caption="Alamat Pelapor" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" cell-template="cellCenter" />
             <DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="cellDefault" />
+                caption="Keterangan Pelapor" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="cellCenter" />
+                caption="Sumber Lapor" cell-template="cellLeft" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko" cell-template="cellDefault" />
+                caption="Posko" cell-template="cellLeft" />
 
             <template #cellCenter="{ data }">
                 <p class="cursor-pointer" @click="showData()">
@@ -63,7 +63,7 @@
                 </p>
             </template>
 
-            <template #cellDefault="{ data }">
+            <template #cellLeft="{ data }">
                 <p class="text-left cursor-pointer" @click="showData()">
                     {{ data.text }}
                 </p>

src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue

@@ -36,17 +36,17 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
         caption="IDPEL/NO METER" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
         caption="Sumber Lapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellDefault" />
+        cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,7 +54,7 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -27,7 +27,7 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
         caption="Tgl Recovery" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        cell-template="cellCenter" />
+        cell-template="cellRight" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
         caption="Durasi Response Time" cell-template="data-waktu" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
@@ -37,17 +37,17 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
         caption="IDPEL/NO METER" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellDefault" />
+        caption="Sumber Lapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellDefault" />
+        cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -55,12 +55,18 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -175,6 +181,7 @@ import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue

@@ -51,17 +51,17 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
         caption="IDPEL/NO METER" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellDefault" />
+        caption="Sumber Lapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellDefault" />
+        cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -69,7 +69,7 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>

src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue

@@ -39,15 +39,15 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
         caption="IDPEL/NO METER" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellDefault" />
+        cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -55,7 +55,7 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>

src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue

@@ -36,17 +36,17 @@
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
         caption="IDPEL/NO METER" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellDefault" />
+        caption="Nama Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellDefault" />
+        caption="Alamat Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
         caption="No Telp Pelapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellDefault" />
+        caption="Keterangan Pelapor" cell-template="cellLeft" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
         caption="Sumber Lapor" cell-template="cellCenter" />
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellDefault" />
+        cell-template="cellLeft" />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,7 +54,7 @@
         </p>
       </template>
 
-      <template #cellDefault="{ data }">
+      <template #cellLeft="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -1,261 +1,93 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :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 :page-size="5" :enabled="true" />
-      <DxPager
+      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :visible="true"
+        :show-info="true" :show-navigation-buttons="true" />
-        :allowed-page-sizes="[5, 10, 20]"
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        display-mode="full"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :formats="['pdf', 'xlsx', 'document']"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-        :allow-export-selected-data="false"
-      />
-      <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
+      <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
-        :width="150"
+        css-class="custom-table-column" cell-template="cellLeft" />
-        alignment="center"
+      <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-        data-field="nama_posko"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        caption="Nama Unit"
+      <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
-        css-class="custom-table-column"
+        css-class="custom-table-column" cell-template="cellRight" />
-      />
+      <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-      <DxColumn
+        :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        :width="150"
+      <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
-        alignment="center"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        data-field="total"
+      <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-        data-type="number"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        caption="Total"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="total_selesai"
-        caption="Selesai"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="persen_selesai"
-        data-type="number"
-        caption="%"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="total_inproses"
-        data-type="number"
-        caption="In Progress"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="persen_inproses"
-        data-type="number"
-        caption="%"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
-          :width="150"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
-          data-field="avg_durasi_dispatch"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
-          caption="Rata-Rata"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          :allow-resizing="false"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
-          css-class="custom-table-column"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
-        <DxColumn
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_dispatch"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_dispatch"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_dispatch"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_dispatch"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-          :width="150"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          data-field="avg_durasi_response"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          caption="Rata-Rata"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          :allow-resizing="false"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          css-class="custom-table-column"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-        <DxColumn
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_response"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_response"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_response"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_response"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-          :width="150"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          data-field="avg_durasi_recovery"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          caption="Rata-Rata"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
-          :allow-resizing="false"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-          css-class="custom-table-column"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-        />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-        <DxColumn
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_recovery"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_recovery"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="data-waktu"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_recovery"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_recovery"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-        />
       </DxColumn>
 
+      <template #cellCenter="{ data }">
+        <p class="cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -279,7 +111,7 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -287,6 +119,8 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -363,4 +197,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
+})
 </script>

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue

@@ -1,345 +1,145 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
+
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="dataReal = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="dataReal"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
       <DxGroupPanel :visible="true" />
       <DxGrouping :auto-expand-all="true" />
 
-      <DxColumn
+      <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        :width="60"
+        cell-template="cellRight" />
-        alignment="center"
+      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
-        data-field="no"
+        cell-template="cellLeft" />
-        caption="NO"
+      <DxColumn :width="120" alignment="center" data-field="sub_kelompok" caption="Kelompok"
-        css-class="custom-table-column"
+        css-class="custom-table-column" group-index="0" cell-template="cellLeft" />
-      />
+      <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
-      <DxColumn
+        css-class="custom-table-column" cell-template="cellLeft" />
-        :width="120"
-        alignment="center"
-        data-field="kode"
-        caption="Kode"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="sub_kelompok"
-        caption="Kelompok"
-        css-class="custom-table-column"
-        group-index="0"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="jenisGangguan"
-        caption="Jenis Gangguan"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          :width="120"
+          css-class="custom-table-column" cell-template="cellRight" />
-          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
+          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-            :width="120"
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            data-field="laporan.sudahSelesai.jml"
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-            :width="120"
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            data-field="laporan.belumSelesai.jml"
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            data-field="responseTime.menit.total"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
-          />
+            css-class="custom-table-column" cell-template="data-waktu" />
-          <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
+          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            data-field="responseTime.laporan.lebihSla"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            data-field="recoveryTime.menit.total"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
-          />
+            css-class="custom-table-column" cell-template="data-waktu" />
-          <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
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            data-field="recoveryTime.laporan.lebihSla"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
-          :show-in-group-footer="true"
+          cell-template="cellRight" />
-          column="laporan.total"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-        />
+          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          :show-in-group-footer="true"
+          display-format="{0}" cell-template="cellRight" />
-          column="laporan.sudahSelesai.jml"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-        />
+          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
-          :show-in-group-footer="true"
+          display-format="{0}" cell-template="cellRight" />
-          column="laporan.sudahSelesai.persen"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
-        />
+          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          :show-in-group-footer="true"
+          display-format="{0}" cell-template="cellRight" />
-          column="laporan.belumSelesai.jml"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-        />
+          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
-          :show-in-group-footer="true"
+          display-format="{0}" cell-template="cellRight" />
-          column="laporan.belumSelesai.persen"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
-        />
+          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-          :show-in-group-footer="true"
+          display-format="{0}" cell-template="cellRight" />
-          column="responseTime.menit.total"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-          summary-type="sum"
+          display-format="{0}" cell-template="cellRight" />
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.max"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.min"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
       </DxSummary>
 
+      <template #cellCenter="{ data }">
+        <p class="cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -353,7 +153,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -376,12 +176,14 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataReal = ref<any[]>([])
+const data = ref<any[]>([])
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, {
   dateFrom: new Date().toISOString().slice(0, 10),
@@ -442,7 +244,7 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataReal.value = queryResult.data.rekapitulasiPerJenisGangguan.map(
+      data.value = queryResult.data.rekapitulasiPerJenisGangguan.map(
         (item: any, index: number) => {
           return {
             no: ++index,
@@ -497,4 +299,51 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.gangguan.rekap.rekapitulasiPerJenisGangguan.map(
+    (item: any, index: number) => {
+      return {
+        no: ++index,
+        sub_kelompok: item.sub_kelompok,
+        kode: item.kode,
+        jenisGangguan: item.tipe_permasalahan,
+        laporan: {
+          total: item.total,
+          sudahSelesai: {
+            jml: item.total_selesai,
+            persen: item.persen_selesai
+          },
+          belumSelesai: {
+            jml: item.total_inproses,
+            persen: item.persen_inproses
+          }
+        },
+        responseTime: {
+          menit: {
+            total: item.total_durasi_response,
+            rataRata: item.avg_durasi_response,
+            max: item.max_durasi_response,
+            min: item.min_durasi_response
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_response,
+            kurangSla: item.total_dibawah_sla_response
+          }
+        },
+        recoveryTime: {
+          menit: {
+            total: item.total_durasi_recovery,
+            rataRata: item.avg_durasi_recovery,
+            max: item.max_durasi_recovery,
+            min: item.min_durasi_recovery
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_recovery,
+            kurangSla: item.total_dibawah_sla_recovery
+          }
+        }
+      }
+    }
+  )
+})
 </script>

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -1,231 +1,104 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
+
 <template>
-  <Filters
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type1 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn css-class="custom-table-column" :width="60" alignment="center"
-        css-class="custom-table-column"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        :width="50"
+        cell-template="cellRight" />
-        alignment="center"
+      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        cell-template="cellCenter" />
-        data-type="number"
+      <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
-        caption="No"
+        css-class="custom-table-column" cell-template="cellLeft" />
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="kode"
-        caption="Kode"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="sub_kelompok"
-        caption="Sub Kelompok (Equipment)"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-          :width="120"
+          css-class="custom-table-column" cell-template="cellRight" />
-          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
+          <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
-            :width="120"
+            css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            data-field="selesai"
+            css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
-            :width="120"
+            css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            data-field="in_process"
+            css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="persen_in_process"
-            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
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-            data-field="total_durasi_response"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <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="avg_waktu_response_time"
-            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
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            data-field="di_atas_sla_durasi_response"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="dibawah_sla_durasi_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
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            data-field="total_durasi_recovery"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <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="avg_waktu_recovery_time"
-            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
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            data-field="diatas_sla_durasi_recovery"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="dibawah_sla_durasi_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
 
+      <template #cellCenter="{ data }">
+        <p class="cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -238,7 +111,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -259,6 +132,8 @@ import { Workbook } from 'exceljs'
 
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -334,4 +209,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
+})
 </script>

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -1,448 +1,178 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
+
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type8 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        :width="60"
+        cell-template="cellRight" />
-        alignment="center"
+      <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
-        data-field="no"
+        css-class="custom-table-column" :group-index="0" cell-template="cellLeft" />
-        caption="NO"
+      <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column"
-        css-class="custom-table-column"
+        cell-template="cellLeft" />
-      />
-      <DxColumn
-        :width="150"
-        name="poskoGroup"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Posko"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Posko"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          :width="120"
+          css-class="custom-table-column" cell-template="cellRight" />
-          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
+          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-            :width="120"
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            data-field="laporan.sudahSelesai.jml"
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-            :width="120"
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            data-field="laporan.belumSelesai.jml"
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            data-field="responseTime.menit.total"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
-          />
+            css-class="custom-table-column" cell-template="data-waktu" />
-          <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
+          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            data-field="responseTime.laporan.lebihSla"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            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
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            :width="120"
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            data-field="recoveryTime.menit.total"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
-            caption="Total"
+            css-class="custom-table-column" cell-template="data-waktu" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
-          />
+            css-class="custom-table-column" cell-template="data-waktu" />
-          <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
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            :width="120"
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            data-field="recoveryTime.laporan.lebihSla"
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="laporan.total"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
-        />
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="laporan.sudahSelesai.jml"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
-          summary-type="sum"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-        />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="laporan.sudahSelesai.persen"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
-        />
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="laporan.belumSelesai.jml"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-        />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="laporan.belumSelesai.persen"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-          display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
-        />
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-          :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          column="responseTime.menit.total"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.max"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.menit.min"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
-          summary-type="sum"
-          display-format="{0}"
-        />
 
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
-          summary-type="sum"
+        <DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
-          display-format="Total"
+          css-class="text-white !text-right"
-          show-in-column="no"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          css-class="text-white"
+        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem
+        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-          display-format="{0}"
+        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-          show-in-column="laporan.total"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          column="laporan.total"
+        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          css-class="text-white"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-        />
+        <DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          column="laporan.sudahSelesai.jml"
+        <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          display-format="{0}"
+        <DxTotalItem column="responseTime.menit.max" summary-type="sum" css-class="text-white !text-right"
-          css-class="text-white"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        />
+        <DxTotalItem column="responseTime.menit.min" summary-type="sum" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-          column="laporan.sudahSelesai.persen"
+        <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          display-format="{0}"
+        <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          css-class="text-white"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        />
+        <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          column="laporan.belumSelesai.jml"
+        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          display-format="{0}"
+        <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" css-class="text-white !text-right"
-          css-class="text-white"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        />
+        <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-          column="laporan.belumSelesai.persen"
+        <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-          display-format="{0}"
+        <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          css-class="text-white"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        />
-        <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 #cellCenter="{ data }">
+        <p class="cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -456,7 +186,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -478,6 +208,8 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -595,4 +327,47 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map((item: any, index: number) => {
+    return {
+      no: ++index,
+      nama_posko: item.nama_posko,
+      laporan: {
+        total: item.total,
+        sudahSelesai: {
+          jml: item.total_selesai,
+          persen: item.persen_selesai
+        },
+        belumSelesai: {
+          jml: item.total_inproses,
+          persen: item.persen_inproses
+        }
+      },
+      responseTime: {
+        menit: {
+          total: item.total_durasi_response,
+          rataRata: item.avg_durasi_response,
+          max: item.max_durasi_response,
+          min: item.min_durasi_response
+        },
+        laporan: {
+          lebihSla: item.total_diatas_sla_response,
+          kurangSla: item.total_dibawah_sla_response
+        }
+      },
+      recoveryTime: {
+        menit: {
+          total: item.total_durasi_recovery,
+          rataRata: item.avg_durasi_recovery,
+          max: item.max_durasi_recovery,
+          min: item.min_durasi_recovery
+        },
+        laporan: {
+          lebihSla: item.total_diatas_sla_recovery,
+          kurangSla: item.total_dibawah_sla_recovery
+        }
+      }
+    }
+  })
+})
 </script>

src/utils/graphql.ts

@@ -810,24 +810,25 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            kode
             sub_kelompok
             total
-            selesai
+            total_selesai
             persen_selesai
-            in_process
+            total_inproses
-            persen_in_process
+            persen_inproses
             total_durasi_response
-            avg_waktu_response_time
+            avg_durasi_response
-            max_durasi_response
             min_durasi_response
-            diatas_sla_durasi_response
+            max_durasi_response
-            dibawah_sla_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
             total_durasi_recovery
-            avg_waktu_recovery_time
+            avg_durasi_recovery
-            max_durasi_recovery
             min_durasi_recovery
-            diatas_sla_durasi_recovery
+            max_durasi_recovery
-            dibawah_sla_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
           }
         }
       `,

src/utils/numbers.ts

@@ -13,10 +13,26 @@ const splitRoutePath = (routePath: string): string[] => {
 }
 
 const formatNumber = (number: number): string => {
-    return new Intl.NumberFormat('en-US').format(number)
+    return new Intl.NumberFormat('id-ID').format(number)
+}
+
+const formatPercentage = (number: string | number): string => {
+    const value = parseFloat(number.toString())
+    const result = `${value.toFixed(2)}`
+    if (result.includes('.00')) {
+        return `${result.replace('.00', '')}%`
+    } else {
+        return `${result}%`
+    }
+}
+
+const isNumber = (value: any): boolean => {
+    return !isNaN(value)
 }
 
 export {
     splitRoutePath,
-    formatNumber
+    formatNumber,
+    formatPercentage,
+    isNumber
 }