From c61aeb695ac8facca3065031d09a7aaa52ae16a7 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 18:11:50 +0700
Subject: [PATCH] Fix filters configuration and load panel in Table_2.vue, and
 import fetchData in Table_36.vue

---
 src/components/Pages/Gangguan/Table_10.vue | 178 ++++----
 src/components/Pages/Gangguan/Table_2.vue  |   1 -
 src/components/Pages/Gangguan/Table_9.vue  | 490 ++++++++++++---------
 src/components/Pages/Monalisa/Table_36.vue |  15 +-
 4 files changed, 373 insertions(+), 311 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index d031035..52dd7f9 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,10 +1,10 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <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">
+        <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" />
@@ -15,63 +15,61 @@
             <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 css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" 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="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -82,56 +80,69 @@
 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 gql from 'graphql-tag'
 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'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
-query daftarGangguanRecoveryTime(
+  query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiJenisGangguanSE004(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_gangguan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        posko
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const loadingVisible = ref<boolean>(true)
+      sub_kelompok
+      total
+      selesai
+      persen_selesai
+      in_process
+      persen_in_process
+      total_durasi_response
+      avg_waktu_response_time
+      max_durasi_response
+      min_durasi_response
+      diatas_sla_durasi_response
+      dibawah_sla_durasi_response
+      total_durasi_recovery
+      avg_waktu_recovery_time
+      max_durasi_recovery
+      min_durasi_recovery
+      diatas_sla_durasi_recovery
+      dibawah_sla_durasi_recovery
+    }
+  }
+`
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -139,7 +150,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -150,7 +161,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')
@@ -163,15 +174,15 @@ const onExporting = (e: any) => {
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: '',
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
 })
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const dateValue = useDateStore().getDateValue().split(' s/d ')
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
@@ -179,22 +190,17 @@ watch(detected, () => {
         dateTo: dateValue[1].split('-').reverse().join('-'),
         posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                    kode: 'Kode'
-                }];
 
-            })
+            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
+            console.log(queryResult.loading)
+            console.log(queryResult.networkStatus)
         }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
     })
-    onError(queryError => {
+    onError((queryError) => {
         console.log(queryError)
     })
 })
@@ -212,4 +218,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index d27ea20..fd32bbd 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -272,7 +272,6 @@ watch(detected, () => {
 })
 onMounted(() => {
     const filters = useFiltersStore()
-   
     filters.setConfig({
         type: 'type-6',
     })
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index a9208a5..711defc 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,14 +1,14 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
     <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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -119,64 +119,83 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxGroupItem,
+    DxGroupPanel,
+    DxGrouping,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection,
+    DxSummary
+} 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 gql from 'graphql-tag'
 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'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const dataReal = ref<any[]>([])
 
-const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
-query daftarGangguanRecoveryTime(
+const GET_REKAP_JENIS_GANGGUAN = gql`
+  query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        minDurasiRecoveryTime: $minDurasiRecoveryTime
-        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiJenisGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_gangguan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        posko
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+      avg_durasi_dispatch
+      avg_durasi_recovery
+      avg_durasi_response
+      max_durasi_dispatch
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_dispatch
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      tipe_permasalahan
+      total
+      total_diatas_sla_dispatch
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_dibawah_sla_dispatch
+      total_inproses
+      total_selesai
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: '',
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
 })
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -185,7 +204,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -196,7 +215,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')
@@ -221,36 +240,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -261,36 +280,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -301,36 +320,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -341,36 +360,36 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 6,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 6,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 15,
                 rataRata: 12.5,
                 max: 18,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 18,
                 rataRata: 15,
                 max: 20,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         }
     },
     {
@@ -381,36 +400,36 @@ const data = [
             total: 8,
             sudahSelesai: {
                 jml: 4,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 4,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 14,
                 rataRata: 14,
                 max: 16,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         },
         recoveryTime: {
             menit: {
                 total: 22,
                 rataRata: 16,
                 max: 26,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -421,36 +440,36 @@ const data = [
             total: 8,
             sudahSelesai: {
                 jml: 4,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 4,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 12,
                 rataRata: 15,
                 max: 18,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         },
         recoveryTime: {
             menit: {
                 total: 16,
                 rataRata: 18,
                 max: 22,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 0,
-            },
+                kurangSla: 0
+            }
         }
     },
     {
@@ -461,36 +480,36 @@ const data = [
             total: 15,
             sudahSelesai: {
                 jml: 10,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 5,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 13.33,
                 max: 24,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 25,
                 rataRata: 16.67,
                 max: 30,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 12,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -501,36 +520,36 @@ const data = [
             total: 7,
             sudahSelesai: {
                 jml: 2,
-                persen: 28.57,
+                persen: 28.57
             },
             belumSelesai: {
                 jml: 5,
-                persen: 71.43,
-            },
+                persen: 71.43
+            }
         },
         responseTime: {
             menit: {
                 total: 18,
                 rataRata: 9,
                 max: 20,
-                min: 6,
+                min: 6
             },
             laporan: {
                 lebihSla: 1,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 28,
                 rataRata: 14,
                 max: 30,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 4,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -541,36 +560,36 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 8,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 4,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 24,
                 rataRata: 20,
                 max: 28,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 26,
                 max: 36,
-                min: 22,
+                min: 22
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         }
     },
     {
@@ -581,36 +600,36 @@ const data = [
             total: 15,
             sudahSelesai: {
                 jml: 12,
-                persen: 80,
+                persen: 80
             },
             belumSelesai: {
                 jml: 3,
-                persen: 20,
-            },
+                persen: 20
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 14.67,
                 max: 26,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 30,
                 rataRata: 20,
                 max: 36,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 13,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -621,36 +640,36 @@ const data = [
             total: 9,
             sudahSelesai: {
                 jml: 6,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 3,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 18,
                 rataRata: 12,
                 max: 22,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         },
         recoveryTime: {
             menit: {
                 total: 28,
                 rataRata: 18.67,
                 max: 34,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 10,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -661,36 +680,36 @@ const data = [
             total: 11,
             sudahSelesai: {
                 jml: 7,
-                persen: 63.64,
+                persen: 63.64
             },
             belumSelesai: {
                 jml: 4,
-                persen: 36.36,
-            },
+                persen: 36.36
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 14.29,
                 max: 24,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 22.86,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         }
     },
     {
@@ -701,36 +720,36 @@ const data = [
             total: 7,
             sudahSelesai: {
                 jml: 5,
-                persen: 71.43,
+                persen: 71.43
             },
             belumSelesai: {
                 jml: 2,
-                persen: 28.57,
-            },
+                persen: 28.57
+            }
         },
         responseTime: {
             menit: {
                 total: 16,
                 rataRata: 12.8,
                 max: 20,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 4,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 26,
                 rataRata: 20.8,
                 max: 30,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 0,
-            },
+                kurangSla: 0
+            }
         }
     },
     {
@@ -741,36 +760,36 @@ const data = [
             total: 14,
             sudahSelesai: {
                 jml: 10,
-                persen: 71.43,
+                persen: 71.43
             },
             belumSelesai: {
                 jml: 4,
-                persen: 28.57,
-            },
+                persen: 28.57
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 15.71,
                 max: 28,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 22.86,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         }
     },
     {
@@ -781,36 +800,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 8,
-                persen: 80,
+                persen: 80
             },
             belumSelesai: {
                 jml: 2,
-                persen: 20,
-            },
+                persen: 20
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 16,
                 max: 26,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 30,
                 rataRata: 23,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -821,36 +840,36 @@ const data = [
             total: 13,
             sudahSelesai: {
                 jml: 9,
-                persen: 69.23,
+                persen: 69.23
             },
             belumSelesai: {
                 jml: 4,
-                persen: 30.77,
-            },
+                persen: 30.77
+            }
         },
         responseTime: {
             menit: {
                 total: 24,
                 rataRata: 18.46,
                 max: 28,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         },
         recoveryTime: {
             menit: {
                 total: 34,
                 rataRata: 25.38,
                 max: 40,
-                min: 20,
+                min: 20
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         }
     },
     {
@@ -861,36 +880,36 @@ const data = [
             total: 16,
             sudahSelesai: {
                 jml: 11,
-                persen: 68.75,
+                persen: 68.75
             },
             belumSelesai: {
                 jml: 5,
-                persen: 31.25,
-            },
+                persen: 31.25
+            }
         },
         responseTime: {
             menit: {
                 total: 26,
                 rataRata: 19.38,
                 max: 32,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 36,
                 rataRata: 24,
                 max: 42,
-                min: 20,
+                min: 20
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -901,44 +920,44 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 8,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 4,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 18.33,
                 max: 28,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 24,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         }
-    },
+    }
 ]
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const dateValue = useDateStore().getDateValue().split(' s/d ')
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
@@ -946,22 +965,61 @@ watch(detected, () => {
         dateTo: dateValue[1].split('-').reverse().join('-'),
         posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                dataReal.value = [...dataReal.value, {
-                    ...item,
-                    nama_unit: 'UNIT'
-                }];
-
+            let no = 0
+            queryResult.data.rekapitulasiJenisGangguan.forEach((item: any) => {
+                dataReal.value = [
+                    ...dataReal.value,
+                    {
+                        no: ++no,
+                        kode: item.tipe_permasalahan,
+                        jenisGangguan: item.tipe_permasalahan,
+                        laporan: {
+                            total: item.total,
+                            sudahSelesai: {
+                                jml: item.total_selesai,
+                                persen: item.persen_selesai
+                            },
+                            belumSelesai: {
+                                jml: item.total_inproses,
+                                persen: item.persen_inproses
+                            }
+                        },
+                        responseTime: {
+                            menit: {
+                                total: item.avg_durasi_response,
+                                rataRata: item.avg_durasi_response,
+                                max: item.max_durasi_response,
+                                min: item.min_durasi_response
+                            },
+                            laporan: {
+                                lebihSla: item.total_diatas_sla_response,
+                                kurangSla: item.total_dibawah_sla_response
+                            }
+                        },
+                        recoveryTime: {
+                            menit: {
+                                total: item.avg_durasi_recovery,
+                                rataRata: item.avg_durasi_recovery,
+                                max: item.max_durasi_recovery,
+                                min: item.min_durasi_recovery
+                            },
+                            laporan: {
+                                lebihSla: item.total_diatas_sla_recovery,
+                                kurangSla: item.total_dibawah_sla_recovery
+                            }
+                        }
+                    }
+                ]
             })
         }
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
-    onError(queryError => {
+    onError((queryError) => {
         console.log(queryError)
     })
 })
@@ -973,4 +1031,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index e4b7006..31fd66b 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -2,16 +2,13 @@
     <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"
+            :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"  />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible.sync="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" />
@@ -60,7 +57,7 @@ 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 { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
@@ -73,6 +70,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
@@ -139,6 +137,7 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     bulan: 10,
     tahun: 2023
 })
+
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
@@ -155,7 +154,7 @@ watch(detected, () => {
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-           data.value = queryResult.data.monalisaJumlahKaliGangguan
+            data.value = queryResult.data.monalisaJumlahKaliGangguan;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)