diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 08f2a0f..edc87e8 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -127,11 +127,9 @@ const fetchStatus = (data : any) => {
     {"id": "2", "name": "Penugasan Regu"},
     {"id": "1", "name": "lapor"}
   ]
-  return status.filter((item: any) => {
-    if (item.id == data) {
-      return item.name
-    }
-  });
+  const filteredStatus = status.find(item => item.id == data);
+  const name = filteredStatus ? filteredStatus.name : null;
+  return name;
 }
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id);
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 8120686..c59ba37 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -17,32 +17,32 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index d552b8d..b2c803e 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -17,33 +17,33 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index a31dc91..631f2fb 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,41 +13,42 @@
             <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="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <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="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
@@ -56,7 +57,17 @@
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -72,7 +83,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -83,7 +94,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -101,55 +112,51 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query daftarKeluhanSelesaiTanpaIdPelanggan
-(
+  query daftarKeluhanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanSelesaiTanpaIdPelanggan
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    daftarKeluhanSelesaiTanpaIdPelanggan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        in_process 
-        indeks_rating 
-        jumlah_non_rating 
-        jumlah_rating 
-        nama_posko      
-        persen_in_process 
-        persen_non_rating 
-        persen_rating 
-        persen_selesai 
-        rating_1 
-        rating_2 
-        rating_3 
-        rating_4 
-        rating_5 
-        regu        
-        selesai 
-        total 
-        }
-}`;
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
     const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        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,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan;
+            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -163,4 +170,4 @@ onMounted(() => {
         type: 'type-3'
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index d7fba5d..2878695 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -17,31 +17,31 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Response Time"
+            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time"
+            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media"
+            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 537e0ca..2df9da5 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <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">
@@ -17,29 +17,29 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index e5d541d..aee8372 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,197 +1,70 @@
 <template>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :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 :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-        caption="NO"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        caption="Unit"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          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="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 6fe1aeb..fc2a226 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <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">
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index b63bcd6..6e95ae6 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <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">
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index 7ba947c..e4b7006 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -1,33 +1,38 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :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 :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,15 +41,40 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { fetchStatus } from '@/components/Form/FiltersType/reference'
+import { useDateStore } from '@/stores/date'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -53,7 +83,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +94,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,7 +104,67 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const MONALISAJUMLAHKALIGANGGUAN = gql`
+  query DaftarMonalisaJumlahKaliGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        bulan: 10,
+        tahun: 2023,
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+           data.value = queryResult.data.monalisaJumlahKaliGangguan
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -82,10 +172,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-2',
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index 9689a17..592beec 100644
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +40,37 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +78,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +89,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,7 +99,74 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const monalisaDispatchingTimeGangguan = gql`
+  query DaftarmonalisaDispatchingTimeGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        bulan: 10,
+        tahun: 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeGangguan.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 onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -88,4 +180,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 3bf4ae5..8ec6da1 100644
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
@@ -45,6 +49,79 @@ 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: "",
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index a46cd82..05e53dd 100644
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,15 +40,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 gql from 'graphql-tag'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaResponseTimeKeluhan = gql`
+  query DaftarmonalisaResponseTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaResponseTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaResponseTimeKeluhan.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -53,7 +147,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +158,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +182,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index 93ec2d8..dadc8af 100644
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -1,127 +1,327 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <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"
+      @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-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 :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-                <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Jumlah dan Durasi RPT & RCT Gangguan"
+        css-class="custom-table-column"
+      >
+        <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field="total_rpt_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field="rpt_gangguan_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field="total_rct_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field="jumlah_gangguan_rct_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field="rct_gangguan_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+        </DxColumn>
+        <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field="total_rpt_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field="rpt_gangguan_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field="total_rct_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field="rch_gangguan_sampai_bulan"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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'
-
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaJumlahDurasiRptRctGangguan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_gangguan_rct_bulan
+      jumlah_gangguan_rct_sampai_bulan
+      jumlah_gangguan_rpt_bulan
+      jumlah_gangguan_rpt_sampai_bulan
+      nama_posko
+      rct_gangguan_bulan
+      rct_gangguan_sampai_bulan
+      rpt_gangguan_bulan
+      rpt_gangguan_sampai_bulan
+      total_rct_bulan
+      total_rct_sampai_bulan
+      total_rpt_bulan
+      total_rpt_sampai_bulan
     }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+  const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+  const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+  const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+  refetch({
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: posko,
+    idUid: uid,
+    idUp3: up3
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctGangguan.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 onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 onMounted(() => {
-    const filters = useFiltersStore()
+  const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
+  filters.setConfig({
+    type: 'type-2',
+    reportButton: true
+  })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index 39c06a9..658272c 100644
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -1,37 +1,125 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <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" @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 :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
-
+            <DxColumn :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanPerJenisGangguan = gql`
+  query DaftarmonalisaGangguanPerJenisGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanPerJenisGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_gangguan
+      jumlah
+      persen_gangguan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanPerJenisGangguan.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -39,7 +127,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -50,7 +138,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,4 +162,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index 39a3ee3..e6e322c 100644
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -1,9 +1,9 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,22 +12,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +37,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiLaporUlangGangguan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangGangguan.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +143,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +154,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +178,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index 35f0495..263a081 100644
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -1,9 +1,9 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
+    <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,22 +12,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +37,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiEnsGangguan = gql`
+  query DaftarmonalisaRekapitulasiEnsGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiEnsGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiEnsGangguan.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +143,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +154,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +178,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 4347892..80ef723 100644
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@@ -25,16 +25,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanBelumSelesai = gql`
+  query DaftarmonalisaGangguanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanBelumSelesai.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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -42,7 +131,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -53,7 +142,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -77,4 +166,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index 7ba947c..78703e7 100644
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index a2fd52a..9ea8d12 100644
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index 9393684..bc1941d 100644
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index 3156041..a909d83 100644
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -12,7 +12,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
index d8a4635..1578ef5 100644
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index 80f6978..8a7a12a 100644
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
index 4d7dbff..fb2a0a2 100644
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index 022c57b..9874dee 100644
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index 1b8cee5..6b02142 100644
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index fe355bd..09ce8dd 100644
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index e1bec20..34cd67a 100644
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index 1370814..bbf2519 100644
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index 55a1fbc..aedb3fc 100644
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index 254e7d7..6cc64ca 100644
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index 954b5e1..e6b56b6 100644
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"