From 2758481259c7a78510f9331a6ddeffff679f4b74 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 19 Feb 2024 13:49:49 +0700
Subject: [PATCH] Update loading visibility in Table components

---
 src/components/Pages/Gangguan/Table_10.vue |  24 ++--
 src/components/Pages/Gangguan/Table_11.vue |  13 +-
 src/components/Pages/Gangguan/Table_12.vue | 100 +++++++-------
 src/components/Pages/Gangguan/Table_13.vue |   5 +-
 src/components/Pages/Gangguan/Table_14.vue |   4 +-
 src/components/Pages/Gangguan/Table_15.vue |   4 +-
 src/components/Pages/Gangguan/Table_16.vue |   4 +-
 src/components/Pages/Gangguan/Table_17.vue |   4 +-
 src/components/Pages/Gangguan/Table_18.vue |   4 +-
 src/components/Pages/Gangguan/Table_19.vue |   4 +-
 src/components/Pages/Gangguan/Table_20.vue |   4 +-
 src/components/Pages/Gangguan/Table_3.vue  |   2 +-
 src/components/Pages/Gangguan/Table_4.vue  |   2 +-
 src/components/Pages/Gangguan/Table_5.vue  |   2 +-
 src/components/Pages/Gangguan/Table_6.vue  |   2 +-
 src/components/Pages/Gangguan/Table_7.vue  |   2 +-
 src/components/Pages/Gangguan/Table_8.vue  |   6 +-
 src/components/Pages/Gangguan/Table_9.vue  |  16 +--
 src/components/Pages/Monalisa/Table_52.vue | 130 ++++++++++++++----
 src/components/Pages/Monalisa/Table_53.vue |  93 ++++++++++---
 src/components/Pages/Monalisa/Table_54.vue |  83 ++++++++++--
 src/components/Pages/Monalisa/Table_55.vue |  83 ++++++++++--
 src/components/Pages/Monalisa/Table_56.vue | 147 ++++++++++++++-------
 src/components/Pages/Monalisa/Table_57.vue |  91 +++++++++++--
 src/components/Pages/Monalisa/Table_58.vue |  84 ++++++++++--
 src/components/Pages/Monalisa/Table_59.vue |  86 ++++++++++--
 26 files changed, 747 insertions(+), 252 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 470e115..4762d32 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,11 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -15,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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" />
@@ -188,13 +187,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 
@@ -213,6 +213,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const filters= ref();
+const filters = ref();
 
 </script>
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index e450aa5..944e1d7 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -15,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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" />
@@ -248,7 +247,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
     posko: "",
@@ -257,13 +256,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 0686f3c..91c8a56 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -1,31 +1,31 @@
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type9 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type9 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="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">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="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" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
-            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+                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" />
@@ -46,36 +46,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </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" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        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" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </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_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </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" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        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" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -85,7 +85,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
-import { onMounted ,ref} from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -175,22 +175,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -203,7 +203,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-   
+
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index dbb2d33..972c5ee 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -13,8 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index b764a8e..999e050 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index eb4420c..8a0c7f1 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index b818e32..af32f15 100755
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index e4f02f1..9b644a2 100755
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 2089acc..bb9a442 100755
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 826845b..be56138 100755
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index c7deac2..d92efe5 100755
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index ea4ab88..b4f672d 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -14,7 +14,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 2871a26..42c5dc2 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -14,7 +14,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index fb323a9..aaffbd3 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -14,7 +14,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index a5a2671..a06674a 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -14,7 +14,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true"/>
+            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"
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index b3880ab..7a93e1f 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -14,7 +14,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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"
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index f3168e8..18cdddd 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -15,7 +15,7 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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"
@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index cac2c04..8700621 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,11 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -15,7 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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" />
@@ -306,5 +306,5 @@ const filterData = (params: any) => {
     })
 }
 
-const filters= ref();
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index 6db98bc..d84877f 100755
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="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">
@@ -19,18 +19,18 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -39,21 +39,21 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
                     data-type="number" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -62,25 +62,25 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
                     data-type="number" />
             </DxColumn>
             <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -99,6 +99,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -106,7 +108,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -135,14 +136,87 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainBulanan = gql`
+  query DaftarpenurunanJumlahKomplainBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index 680806e..b858457 100755
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="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">
@@ -20,30 +20,30 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -62,6 +62,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -69,7 +71,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +101,74 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index cc689e9..c9d45a9 100755
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="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">
@@ -20,20 +20,20 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -92,9 +93,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        ens_bencana_alam
+ens_terencana
+ens_tidak_terencana
+kpi_ens
+nama_posko
+total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index d980bee..c55c72a 100755
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="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">
@@ -19,23 +19,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :min-width="250" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -53,6 +53,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +62,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +95,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index 8a70cc3..e8788f2 100755
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -18,58 +18,32 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
-
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="s.d Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            </DxColumn>
+            <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="s.d Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+            </DxColumn>
+            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -86,6 +60,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -93,7 +69,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -124,12 +99,86 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainKumulatif = gql`
+  query DaftarpenurunanJumlahKomplainKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index 5341f68..b776acd 100755
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -19,31 +19,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn alignment="center" caption="Aging Complains(Kum)" css-class="custom-table-column">
+            <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -61,6 +61,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -68,7 +70,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -102,9 +103,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintKumulatif = gql`
+  query DaftaragingComplaintKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index d3882f0..1974d18 100755
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -19,21 +19,21 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -92,9 +94,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index cbfde2e..6125e65 100755
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -19,24 +19,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -54,13 +53,16 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const data = ref<any[]>([])
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +96,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file