Update CSS styles and GraphQL queries

src/assets/css/style.css

@@ -6058,6 +6058,10 @@ body {
     width: 2.5rem;
   }
 
+  .lg\:w-2\/6 {
+    width: 33.333333%;
+  }
+
   .lg\:w-80 {
     width: 20rem;
   }
@@ -6070,6 +6074,10 @@ body {
     width: 70%;
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:flex-col {
     flex-direction: column;
   }
@@ -6078,6 +6086,16 @@ body {
     flex-wrap: nowrap;
   }
 
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
+  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .lg\:rounded-t-3xl {
     border-top-left-radius: 1.5rem;
     border-top-right-radius: 1.5rem;

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -17,28 +17,42 @@ import { ref } from 'vue'
 const data = ref<any[]>([])
 
 const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query anomaliPenangananPengaduanGangguanUnitBerulang(
-    laporanAnomaliPenangananPengaduanGangguanPetugas(
+    $dateFrom: Date!, 
+    $dateTo: Date!, 
+    $posko: String, 
+    $idUid: Int, 
+    $idUp3: Int) {
+    anomaliPenangananPengaduanGangguanUnitBerulang(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        nama_posko
+        id_uid
-        persen_penyelesaian_petugas_anomali_cc_123_marking
+        nama_uid
-        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        id_up3
-        persen_penyelesaian_petugas_anomali_marking
+        nama_up3
-        persen_penyelesaian_petugas_anomali_non_marking
+        id_ulp
-        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        nama_ulp
-        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        wo_cc123
-        total_penyelesaian_petugas_anomali_cc_123_marking
+        wo_pln_mobile
-        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        wo_loket
-        total_penyelesaian_petugas_anomali_marking
+        wo_lainnya
-        total_penyelesaian_petugas_anomali_non_marking
+        wo_total
-        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        anomali_pln_mobile_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        anomali_pln_mobile_non_marking
-        total_petugas
+        anomali_cc123_marking
+        anomali_cc123_non_marking
+        total_anomali_marking
+        total_anomali_non_marking
+        persen_anomali_pln_mobile_marking
+        persen_anomali_pln_mobile_non_marking
+        persen_anomali_cc123_marking
+        persen_anomali_cc123_non_marking
+        persen_anomali_marking
+        persen_anomali_non_marking
     }
   }
 `

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue

@@ -48,9 +48,13 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
+const loading = ref(computed(() => props.loading))
 const props = defineProps({
   data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
 

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue

@@ -109,11 +109,15 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 const position = { of: '#data' }
 const showIndicator = ref(true)
-const loading = ref(false)
+const loading = ref(computed(() => props.loading))
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 })
 const data = computed(() => props.data)
 const onExporting = (e: any) => {

src/router/index.ts

@@ -551,7 +551,7 @@ export const routes: RouteRecordRaw[] = [
       },
       {
         path: 'anomali-pengaduan',
-        name: 'Anomali Penangan Pengaduan',
+        name: 'Anomali Penanganan Pengaduan',
         children: [
           {
             path: 'gangguan',
@@ -559,12 +559,12 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
+                name: 'Laporan Anomali Penanganan Pengaduan Gangguan Unit',
                 component: Anomali_LAPPGU
               },
               {
                 path: '2',
-                name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
+                name: 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas',
                 component: Anomali_LAPPGP
               },
               {
@@ -579,7 +579,7 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
+                name: 'Laporan Anomali Penanganan Pengaduan Keluhan Unit',
                 component: Anomali_LAPPKU
               },
               {