From 949607f025acb4af84ce3cd8a1ef040d3b4695a7 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Wed, 31 Jan 2024 11:01:55 +0700
Subject: [PATCH] Rekapitulasi Gangguan ALL s/d Diselesaikan Mobile APKT 7- 17

---
 src/components/Pages/Gangguan/Table_11.vue | 115 +++++++++++++++++++-
 src/components/Pages/Gangguan/Table_12.vue | 107 +++++++++++++++----
 src/components/Pages/Gangguan/Table_13.vue | 106 +++++++++++++++----
 src/components/Pages/Gangguan/Table_14.vue |  99 ++++++++++++++---
 src/components/Pages/Gangguan/Table_15.vue |  61 +++++++++--
 src/components/Pages/Gangguan/Table_16.vue | 117 ++++++++++++++++-----
 src/components/Pages/Gangguan/Table_17.vue |  72 +++++++++++--
 src/components/Pages/Gangguan/Table_18.vue |  64 ++++++++++-
 src/components/Pages/Gangguan/Table_19.vue |  62 ++++++++++-
 src/components/Pages/Gangguan/Table_20.vue |  62 ++++++++++-
 src/components/Pages/Gangguan/Table_7.vue  |  28 ++---
 src/components/Pages/Gangguan/Table_8.vue  |   8 +-
 12 files changed, 774 insertions(+), 127 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index f1d95d8..98c57eb 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -157,6 +157,51 @@ 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 { useQuery } from '@vue/apollo-composable'
+
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
+query rekapitulasiGangguanPerPosko(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerPosko(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -264,15 +309,81 @@ const createDummy = () => {
     data.value = dummy;
 }
 
-const data = ref<any[]>([])
 
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+          
+            var i = 1;
+            queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
+                const entry = {
+                    no : Number(i++),
+                    posko: item.posko,
+                    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: 0,
+                            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: 0,
+                            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,
+                        },
 
+                    }
+                };
+                data.value = [...data.value, entry];
+
+
+            })
+
+            data.value = [...data.value];
+            console.log(data.value)
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-8',
         reportButton: true
     })
-    createDummy()
+    // createDummy()
 })
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 8c74234..332e6ba 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.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">
@@ -13,57 +13,57 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" 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="total_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="total_inproses" 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_inproses" 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"
+                    <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <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="" data-type="number" caption="Min"
+                    <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"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <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="" data-type="number" caption="Min"
+                    <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"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted ,ref} from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -81,7 +81,51 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag';
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
+query rekapitulasiGangguanPerRegu(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerRegu(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        nama_regu
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -115,10 +159,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const loadingVisible = ref<boolean>(true)
 
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerRegu;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-9'
     })
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index b250090..2c9f03c 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.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">
@@ -13,57 +13,57 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+            <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
                 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="total_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="total_inproses" 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_inproses" 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"
+                    <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <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="" data-type="number" caption="Min"
+                    <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"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <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="" data-type="number" caption="Min"
+                    <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"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -81,7 +81,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag';
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -116,9 +117,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
+query rekapitulasiGangguanPerTanggal(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerTanggal(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        tanggal
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
+const  loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+        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,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-9'
     })
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index cc0df4c..9470583 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.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 :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -13,18 +13,11 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
+                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
             </DxColumn>
 
         </DxDataGrid>
@@ -32,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -41,7 +34,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag';
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -76,9 +70,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
+query rekapitulasiGangguanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanBerdasarkanMedia(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+                media
+            tgl1
+            tgl10
+            tgl11
+            tgl12
+            tgl13
+            tgl14
+            tgl15
+            tgl16
+            tgl17
+            tgl18
+            tgl19
+            tgl2
+            tgl20
+            tgl21
+            tgl22
+            tgl23
+            tgl24
+            tgl25
+            tgl26
+            tgl27
+            tgl28
+            tgl29
+            tgl3
+            tgl30
+            tgl31
+            tgl4
+            tgl5
+            tgl6
+            tgl7
+            tgl8
+            tgl9
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+        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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 2401a66..5c9e26f 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.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"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
@@ -12,17 +12,17 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -31,6 +31,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -65,10 +67,55 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+query rekapitulasiGangguanAlihPosko
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanAlihPosko
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        id_uid
+        id_up3
+        posko
+        posko_in
+        posko_out
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 754c03b..5ce5d26 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.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"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
@@ -15,30 +15,30 @@
                 <DxColumn :width="50" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" caption="b" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" caption="c" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" caption="d=(e+g)" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=(e/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="g" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="h=(g/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
             </DxColumn>
@@ -48,20 +48,20 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="i" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="j=(i/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="k" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"  data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -69,20 +69,20 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="m" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"  caption="m" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="n=(m/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="o" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="p" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -92,20 +92,20 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="q" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="r=(q/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="s" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="t" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -113,20 +113,20 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="u" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="v=(u/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="w" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="w" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="x" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -138,7 +138,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -147,6 +147,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -181,10 +183,73 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
+query rekapitulasiGangguanDiselesaikanMobileAPKT
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanDiselesaikanMobileAPKT
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_waktu_recovery_mobile_marking
+        avg_waktu_recovery_mobile_nonmarking
+        avg_waktu_recovery_nonmobile_marking
+        avg_waktu_recovery_nonmobile_nonmarking
+        avg_waktu_response_mobile_marking
+        avg_waktu_response_mobile_nonmarking
+        avg_waktu_response_nonmobile_marking
+        avg_waktu_response_nonmobile_nonmarking
+        kode_regu
+        persen_belum_selesai
+        persen_laporan_mobile_marking
+        persen_laporan_mobile_nonmarking
+        persen_laporan_nonmobile_marking
+        persen_laporan_nonmobile_nonmarking
+        persen_selesai
+        regu
+        total_belum_selesai
+        total_laporan
+        total_laporan_mobile_marking
+        total_laporan_mobile_nonmarking
+        total_laporan_nonmobile_marking
+        total_laporan_nonmobile_nonmarking
+        total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
+        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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 9ef5ff6..5276dcd 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -1,8 +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">
+        <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -72,8 +73,8 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
-const data = ref<Rekap1[]>([])
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -139,10 +140,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
+query rekapitulasiGangguanRatingPerPosko
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanRatingPerPosko
+(
+        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 
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
-    createDummy()
-    
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_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,
+    })
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 
     filters.setConfig({
         type: 'type-1',
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index eef6b31..9cab502 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.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">
             <DxSelection mode="single" />
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -71,6 +71,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -107,9 +109,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+query rekapitulasiGangguanRatingPerRegu
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanRatingPerRegu
+(
+        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
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 0c02ace..6a31637 100644
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.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">
             <DxSelection mode="single" />
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -52,6 +52,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -88,9 +90,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
+query rekapitulasiGangguanKoreksiTransaksiIndividual
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanKoreksiTransaksiIndividual
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        agustus
+        april
+        desember
+        februari
+        januari
+        juli
+        juni
+        maret
+        mei
+        november
+        oktober
+        september
+        uid
+        ulp
+        up3
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
+        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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index 0c02ace..a7900fa 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.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">
             <DxSelection mode="single" />
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -52,6 +52,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -88,9 +90,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+query rekapitulasiGangguanCleansingTransaksiTM
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanCleansingTransaksiTM
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        agustus
+        april
+        desember
+        februari
+        januari
+        juli
+        juni
+        maret
+        mei
+        november
+        oktober
+        september
+        uid
+        ulp
+        up3
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 29ff606..0134572 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -13,30 +13,30 @@
             <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="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index e7cecf5..aa2c0fa 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -18,7 +18,7 @@
             <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
-                css-class="custom-table-column" />
+                css-class="custom-table-column" />  
             <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" :allow-resizing="false"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
@@ -73,7 +73,6 @@ import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
@@ -171,8 +170,9 @@ onMounted(() => {
         loadingVisible.value = true
         if (queryResult.data != undefined) {
             queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value,item,{
-                    nama_unit:'-'
+                data.value = [...data.value,{
+                    ...item,
+                    nama_unit: 'UNIT'
                 }];
                
             })