Update Anomali_LAPPGU_LPP and Anomali_LAPPGP_LPP components

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue

@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -17,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,7 +28,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -40,18 +41,20 @@
 
     <DxColumn
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="wo_total"
         data-type="number"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -62,10 +65,11 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="total_anomali"
         data-type="number"
         caption="b"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -76,12 +80,45 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="persen_anomali_pln_mobile_marking"
         data-type="number"
         caption="c=b/a"
         css-class="custom-table-column"
+        :calculate-display-value="
+          (rowData: any) => (rowData.total_anomali / rowData.wo_total) * 100
+        "
+        cell-template="formatPercentage"
       />
     </DxColumn>
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
   </DxDataGrid>
 </template>
 
@@ -91,6 +128,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -103,12 +141,18 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
 const loading = ref(false)