diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 7ee4a24..dd94ab1 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -127,6 +127,56 @@
           }}
         </p>
       </template>
+
+      <DxSummary>
+        <DxTotalItem
+          display-format="TOTAL"
+          show-in-column="user_regu"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="jumlah_wo_gangguan_individual"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="avg_durasi_wo_gangguan_individual"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="avg_rpt_wo_gangguan_individual"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="avg_rct_wo_gangguan_individual"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="jumlah_wo_penugasan_khusus"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="avg_wo_penugasan_khusus"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 
@@ -748,7 +798,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -853,17 +905,19 @@ const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanChe
 const filters = ref()
 
 onMounted(() => {
-  data.value = [
-    {
-      user_regu: '11110.REGU1',
-      personil_yantek: '11110_FAUZI',
-      jumlah_wo_gangguan_individual: 54,
-      avg_durasi_wo_gangguan_individual: 70.67,
-      avg_rpt_wo_gangguan_individual: 40.69,
-      avg_rct_wo_gangguan_individual: 71.61,
-      jumlah_wo_penugasan_khusus: 31,
-      avg_wo_penugasan_khusus: 63.79
-    }
-  ]
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        user_regu: '11110.REGU1',
+        personil_yantek: '11110_FAUZI',
+        jumlah_wo_gangguan_individual: 54,
+        avg_durasi_wo_gangguan_individual: 70.67,
+        avg_rpt_wo_gangguan_individual: 40.69,
+        avg_rct_wo_gangguan_individual: 71.61,
+        jumlah_wo_penugasan_khusus: 31,
+        avg_wo_penugasan_khusus: 63.79
+      }
+    ]
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 6ba3f8f..dd7cc63 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -250,6 +250,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 8c6a34e..8a96b23 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -512,6 +512,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const showData = () => (showDetail.value = true)
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index 7189ef0..bc35c9e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -252,6 +252,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 8e083e9..beaf141 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -385,6 +385,8 @@ const filterData = (params: any) => {
 }
 
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index a862dc0..b740d43 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -405,6 +405,8 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.gangguanRecoveryTime
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.gangguanRecoveryTime
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 8784fc6..bbe19ec 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -380,6 +380,8 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.gangguanResponseTime
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.gangguanResponseTime
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 92c3a9a..975c5d4 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -251,6 +251,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index a99bd59..3560c6a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -1164,7 +1164,9 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
-  dataSub.value = dummyData.gangguan.rekap.detailGangguan
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
+    dataSub.value = dummyData.gangguan.rekap.detailGangguan
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 68457c9..2584136 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -249,6 +249,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 3edaf73..a3c88aa 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -245,6 +245,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index c0394ff..e7515eb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -562,50 +562,52 @@ 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
-          },
+  if (import.meta.env.DEV) {
+    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: {
-            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
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
           },
-          laporan: {
-            lebihSla: item.total_diatas_sla_recovery,
-            kurangSla: item.total_dibawah_sla_recovery
+          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>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 40ebb55..cba9e96 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -381,6 +381,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
+  }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 4cd847e..42b596e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -661,48 +661,50 @@ 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
-          },
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
+      (item: any, index: number) => {
+        return {
+          no: ++index,
+          nama_posko: item.nama_posko,
           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
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
           },
-          laporan: {
-            lebihSla: item.total_diatas_sla_recovery,
-            kurangSla: item.total_dibawah_sla_recovery
+          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>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 449f0b0..6281747 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -669,49 +669,51 @@ const filters = ref({
 })
 
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
-    (item: any, index: number) => {
-      return {
-        no: ++index,
-        kode_regu: item.kode_regu,
-        nama_regu: item.nama_regu,
-        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
-          },
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
+      (item: any, index: number) => {
+        return {
+          no: ++index,
+          kode_regu: item.kode_regu,
+          nama_regu: item.nama_regu,
           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
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
           },
-          laporan: {
-            lebihSla: item.total_diatas_sla_recovery,
-            kurangSla: item.total_dibawah_sla_recovery
+          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>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index c67e3d9..4100df5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -380,6 +380,8 @@ const filterData = (params: any) => {
 
 const filters = ref({ groupBy: false })
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 8f43533..49f9343 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -408,6 +408,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 4971a6a..311d8b2 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -313,6 +313,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 276a6bd..4cdf965 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -438,6 +438,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index fabbe85..7165959 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -397,6 +397,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index b46ee15..ace3988 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -417,6 +417,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index ab385d5..39c37a3 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -401,6 +401,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index b362467..14b234d 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -299,6 +299,8 @@ const filterData = (params: any) => {
 }
 
 onMounted(() => {
-  data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index f48de31..9853735 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -699,6 +699,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref()
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 6ac5bde..628c056 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -95,7 +95,7 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -585,6 +585,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref()
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index b0d2a68..50bbd42 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -585,7 +585,13 @@
 
           <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
-              {{ data.text }}
+              {{
+                isNumber(data.text)
+                  ? data.column.caption == '%'
+                    ? formatPercentage(data.text)
+                    : formatNumber(data.text)
+                  : data.text
+              }}
             </p>
           </template>
 
@@ -867,6 +873,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref({ groupBy: false })
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index d7d00f9..962310a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -51,6 +51,7 @@
         data-type="number"
         data-field="no"
         caption="No"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
@@ -77,6 +78,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -86,6 +88,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -94,7 +97,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -105,6 +108,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -113,7 +117,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -126,6 +130,7 @@
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -134,6 +139,7 @@
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -162,6 +168,7 @@
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -170,6 +177,7 @@
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -182,6 +190,7 @@
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -190,6 +199,7 @@
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -218,6 +228,7 @@
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -226,6 +237,7 @@
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -235,236 +247,272 @@
           summary-type="sum"
           display-format="Total"
           show-in-column="no"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
           :show-in-group-footer="true"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
 
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
           show-in-column="no"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
       </DxSummary>
 
@@ -474,12 +522,20 @@
         </p>
       </template>
 
-      <template #percent="{ data }">
-        <p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -857,6 +913,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -969,6 +1026,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref()
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 7d13528..3343b21 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -353,7 +353,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -842,6 +842,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref({ groupBy: false })
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 9771964..3c1a038 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -352,7 +352,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -841,6 +841,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref({ groupBy: false })
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
+  }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index b95b6dc..fc6ad52 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -480,7 +480,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -968,6 +968,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref()
 
 onMounted(() => {
-  data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  if (import.meta.env.DEV) {
+    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  }
 })
 </script>