Refactor data assignment in onMounted hooks

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,6 +905,7 @@ const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanChe
 const filters = ref()
 
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = [
       {
         user_regu: '11110.REGU1',
@@ -865,5 +918,6 @@ onMounted(() => {
         avg_wo_penugasan_khusus: 63.79
       }
     ]
+  }
 })
 </script>

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

@@ -250,6 +250,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  }
 })
 </script>

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

@@ -252,6 +252,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
+  }
 })
 </script>

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

@@ -385,6 +385,8 @@ const filterData = (params: any) => {
 }
 
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.gangguanRecoveryTime
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.gangguanResponseTime
+  }
 })
 </script>

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

@@ -251,6 +251,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan
+  }
 })
 </script>

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

@@ -1164,7 +1164,9 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
     dataSub.value = dummyData.gangguan.rekap.detailGangguan
+  }
 })
 </script>

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

@@ -249,6 +249,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
+  }
 })
 </script>

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

@@ -245,6 +245,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
+  }
 })
 </script>

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

@@ -562,6 +562,7 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiPerJenisGangguan.map(
       (item: any, index: number) => {
         return {
@@ -607,5 +608,6 @@ onMounted(() => {
         }
       }
     )
+  }
 })
 </script>

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

@@ -381,6 +381,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
+  }
 })
 </script>

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

@@ -661,6 +661,7 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
       (item: any, index: number) => {
         return {
@@ -704,5 +705,6 @@ onMounted(() => {
         }
       }
     )
+  }
 })
 </script>

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

@@ -669,6 +669,7 @@ const filters = ref({
 })
 
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
       (item: any, index: number) => {
         return {
@@ -713,5 +714,6 @@ onMounted(() => {
         }
       }
     )
+  }
 })
 </script>

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

@@ -380,6 +380,8 @@ const filterData = (params: any) => {
 
 const filters = ref({ groupBy: false })
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -408,6 +408,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -313,6 +313,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -438,6 +438,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -397,6 +397,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -417,6 +417,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -401,6 +401,8 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
+  }
 })
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -299,6 +299,8 @@ const filterData = (params: any) => {
 }
 
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
+  }
 })
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -699,6 +699,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filters = ref()
 
 onMounted(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+  }
 })
 </script>

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 }">
+      <template #formatNumber="{ data }">
-        <p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
+        <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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
+  }
 })
 </script>

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(() => {
+  if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  }
 })
 </script>