Fix alignment issues in CSS and table columns

src/assets/css/style.css

@@ -3249,26 +3249,26 @@ body {
   padding-top: 1.25rem;
 }
 
-.text-left {
-  text-align: left;
-}
-
 .\!text-left {
   text-align: left !important;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
 
-.text-right {
-  text-align: right;
-}
-
 .\!text-right {
   text-align: right !important;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-start {
   text-align: start;
 }

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

@@ -17,9 +17,9 @@
                 v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            <DxColumn css-class="custom-table-column !text-right" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
-                caption="No" cell-template="cellRight" />
+                caption="No" />
             <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"

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

@@ -94,9 +94,9 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
         <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
           css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
           css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
         <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
@@ -106,9 +106,9 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
         <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
           css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
           :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
         <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
@@ -129,11 +129,11 @@
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
         <DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" css-class="text-white !text-right"
+        <DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.max" summary-type="sum" css-class="text-white !text-right"
+        <DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
           :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 column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
           :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
         <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
@@ -141,11 +141,11 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
         <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" css-class="text-white !text-right"
+        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" css-class="text-white !text-right"
+        <DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
           :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 column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
           :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
         <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />

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

@@ -4,8 +4,8 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-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" />
@@ -13,41 +13,40 @@
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
-
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="60" alignment="center"
+      <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-field="no" data-type="number"
+        cell-template="cellRight" />
-        caption="No" />
-      <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
       <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
         group-index="0" v-if="filters.groupBy" />
-      <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+      <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
-        css-class="custom-table-column" />
+        cell-template="cellLeft" />
+      <DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="cellRight" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-            caption="Jml" css-class="custom-table-column" />
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" />
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-            caption="Jml" css-class="custom-table-column" />
+            caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" />
+            caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" />
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
           <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"
@@ -55,17 +54,17 @@
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" />
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
           <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"
@@ -73,42 +72,107 @@
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
-        <DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
-          css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
-        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}" css-class="text-white" />
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
-        <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-          css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-        <DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}" css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
-        <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-          css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
-        <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-          css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
-        <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}" css-class="text-white" />
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}" css-class="text-white" />
+        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-        <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}" css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-          css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
-          css-class="text-white" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
+          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
+        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
+
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
+        <DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
+        <DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
+        <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
+        <DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
+          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
+        <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
       </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) : '-' }}
@@ -122,7 +186,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -143,6 +207,8 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -263,4 +329,49 @@ const filterData = (params: any) => {
 const filters = ref({
   groupBy: false
 })
+
+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
+        },
+        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_PerTanggal.vue

@@ -19,33 +19,34 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        cell-template="cellRight" />
       <DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
         group-index="0" v-if="filters.groupBy" />
       <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="cellRight" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
-            caption="Total" css-class="custom-table-column" />
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
           <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"
@@ -53,17 +54,17 @@
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
-            caption="Total" css-class="custom-table-column" />
+            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
           <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"
@@ -71,12 +72,32 @@
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
+            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
           <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
         </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) : '-' }}
@@ -90,7 +111,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -109,6 +130,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)
@@ -185,4 +208,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref({ groupBy: false })
+onMounted(() => {
+  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
+})
 </script>