diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 96b3427..ad123e6 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -9,16 +9,12 @@
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel
-                v-model:visible="loadingVisible"
-             :enabled="true" />
+            <DxLoadPanel v-model:visible="loadingVisible" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+                :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="no_laporan"
                 caption="No Laporan" cell-template="data" />
 
@@ -40,8 +36,8 @@
                 caption="Posko Awal" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
                 caption="Posko Tujuan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
-                cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@@ -304,8 +300,13 @@ onMounted(() => {
         idUp3: 0,
     })
     onResult(queryResult => {
-        if(queryResult.data != undefined){
-            data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain;
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [...data.value,{
+                    ...item,
+                    pembuat_laporan: 'BELUM ADA'
+                }];
+            });
             loadingVisible.value = false
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index ad91d16..c7d0566 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -14,7 +14,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn 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="" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 332e6ba..87a4207 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -12,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index 2c9f03c..3ed07b9 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -12,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index 9470583..c6efabe 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -12,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 5c9e26f..664fb49 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -11,7 +11,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <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" />
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 5ce5d26..68bd1e2 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -12,7 +12,9 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-                <DxColumn :width="50" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
+                <DxColumn :width="50" alignment="center" 
+                :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+                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="regu" caption="b" css-class="custom-table-column" />
@@ -123,10 +125,10 @@
 
                         <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" data-field="avg_waktu_response_nonmobile_nonmarking" caption="w" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" 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 :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 5276dcd..257001f 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -12,7 +12,9 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+            caption="NO" data-type="number"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 9cab502..e71bb09 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -1,8 +1,9 @@
 <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">
+        <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" />
@@ -11,7 +12,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center" 
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
                 css-class="custom-table-column" />
             <DxColumn :width="150" 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" />
@@ -56,7 +58,6 @@
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
@@ -65,7 +66,16 @@
 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'
+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'
@@ -81,7 +91,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -92,7 +102,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')
@@ -103,7 +113,6 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -111,56 +120,54 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-query rekapitulasiGangguanRatingPerRegu
-(
+  query rekapitulasiGangguanRatingPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanRatingPerRegu
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    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
-        }
-}`;
+      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: "",
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
         idUid: 0,
-        idUp3: 0,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-                ;
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -175,4 +182,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 6a31637..827f37c 100644
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -11,31 +11,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index a7900fa..fcebd54 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -1,8 +1,9 @@
 <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">
+        <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" />
@@ -11,31 +12,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -46,7 +47,16 @@
 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'
+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'
@@ -62,7 +72,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -73,7 +83,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')
@@ -84,7 +94,6 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -92,54 +101,52 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-query rekapitulasiGangguanCleansingTransaksiTM
-(
+  query rekapitulasiGangguanCleansingTransaksiTM(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanCleansingTransaksiTM
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    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
-        }
-}`;
+      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: "",
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
         idUid: 0,
-        idUp3: 0,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
-                ;
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -154,4 +161,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index aa2c0fa..289339a 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -13,7 +13,6 @@
             <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="150" alignment="center" data-field="nama_unit" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 8f0ca8b..c8095f1 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -13,32 +13,35 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="tgl_laporan" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index a66493c..2148b14 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -13,36 +13,37 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -118,6 +119,8 @@ const GET_DATA = gql`
     daftarKeluhanMelaporLebihDariSatuKali(
       dateFrom: $dateFrom
       dateTo: $dateTo
+      minJmlLapor: $minJmlLapor
+      maxJmlLapor: $maxJmlLapor
       posko: $posko
       idUid: $idUid
       idUp3: $idUp3
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 386d269..8120686 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 5fd60d7..d552b8d 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
@@ -104,7 +107,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiGangguanRatingPerPosko(
+  query daftarKeluhanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
@@ -113,7 +116,7 @@ const GET_DATA = gql`
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiGangguanRatingPerPosko(
+    daftarKeluhanRecoveryTime(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -154,7 +157,7 @@ onMounted(() => {
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+            data.value = queryResult.data.daftarKeluhanRecoveryTime
             loadingVisible.value = false
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index b112754..a31dc91 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index cb411b5..d7fba5d 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
                 css-class="custom-table-column" />
@@ -103,19 +106,21 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query daftarKeluhanSelesaiTanpaIdPelanggan(
+  query daftarKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
+    $media: String!
   ) {
-    daftarKeluhanSelesaiTanpaIdPelanggan(
+    daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
       idUid: $idUid
       idUp3: $idUp3
+      media: $media
     ) {
       alamat_pelapor
       durasi_recovery_time
@@ -147,7 +152,7 @@ onMounted(() => {
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
+            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
             loadingVisible.value = false
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 49384a1..537e0ca 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
@@ -104,38 +107,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query daftarKeluhanBerdasarkanMedia(
+ query daftarKeluhanDiselesaikanCC123
+(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-    $media: String!
-  ) {
-    daftarKeluhanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      media: $media
+) {
+    daftarKeluhanDiselesaikanCC123
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
-    }
-  }
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_keluhan!
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir!
+        waktu_recovery
+        waktu_response
+        }
+        }
 `
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
@@ -151,7 +154,7 @@ onMounted(() => {
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
             loadingVisible.value = false
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index ddc1945..b316033 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -1,9 +1,9 @@
 <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" />
@@ -12,7 +12,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -24,15 +24,15 @@
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption="> SLA"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤ SLA"
           css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@@ -109,7 +109,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query daftarKeluhanDiselesaikanCC123
+query rekapitulasiKeluhanAll
 (
     $dateFrom: Date!
     $dateTo: Date!
@@ -117,7 +117,7 @@ query daftarKeluhanDiselesaikanCC123
     $idUid: Int!
     $idUp3: Int!
 ) {
-    daftarKeluhanDiselesaikanCC123
+  rekapitulasiKeluhanAll
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
@@ -125,20 +125,29 @@ query daftarKeluhanDiselesaikanCC123
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_keluhan!
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
+        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
-        status_akhir!
-        waktu_recovery
-        waktu_response
+        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)
@@ -154,7 +163,7 @@ onMounted(() => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+      data.value = queryResult.data.rekapitulasiKeluhanAll
       loadingVisible.value = false
     }
     console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 224e8c9..7147ac0 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -1,4 +1,3 @@
-<!-- Rekapitulasi Keluhan All -->
 <template>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -13,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -130,7 +132,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanAll
+query rekapitulasiKeluhanPerFungsiBidang
 (
     $dateFrom: Date!
     $dateTo: Date!
@@ -138,7 +140,7 @@ query rekapitulasiKeluhanAll
     $idUid: Int!
     $idUp3: Int!
 ) {
-    rekapitulasiKeluhanAll
+    rekapitulasiKeluhanPerFungsiBidang
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
@@ -150,7 +152,7 @@ query rekapitulasiKeluhanAll
         avg_durasi_recovery
         avg_durasi_response
         id_uid
-        id_up3!
+        id_up3
         max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
@@ -184,7 +186,7 @@ onMounted(() => {
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanAll
+            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
             loadingVisible.value = false
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index a5e17a6..5b467a2 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -1,4 +1,3 @@
-<!-- Rekapitulasi Keluhan Per Fungsi Bidang -->
 <template>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -13,8 +12,11 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
@@ -122,8 +124,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
-query rekapitulasiGangguanRatingPerPosko
+const GET_DATA = gql`
+query rekapitulasiKeluhanPerJenisKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
@@ -131,7 +133,7 @@ query rekapitulasiGangguanRatingPerPosko
     $idUid: Int!
     $idUp3: Int!
 ) {
-    rekapitulasiGangguanRatingPerPosko
+    rekapitulasiKeluhanPerJenisKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
@@ -139,29 +141,33 @@ query rekapitulasiGangguanRatingPerPosko
         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 
+            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_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_RATING_PER_POSKO, {
+    const { onResult, onError } = useQuery(GET_DATA, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
         posko: "",
@@ -171,7 +177,7 @@ onMounted(() => {
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
                 ;
             loadingVisible.value = false
         }
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index e684ede..bab5e54 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -1,7 +1,6 @@
-<!-- Rekapitulasi Keluhan Per Jenis Keluhan -->
 <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,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -123,7 +125,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerJenisKeluhan
+query rekapitulasiKeluhanPerKelompokKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
@@ -131,7 +133,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
     $idUid: Int!
     $idUp3: Int!
 ) {
-    rekapitulasiKeluhanPerJenisKeluhan
+    rekapitulasiKeluhanPerKelompokKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
@@ -175,7 +177,7 @@ onMounted(() => {
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+            data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
                 ;
             loadingVisible.value = false
         }
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 2043eb7..40a3b98 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -5,6 +5,7 @@
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
+      :data-source="data"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
@@ -29,14 +30,14 @@
       <DxColumn
         :width="50"
         alignment="center"
-        data-field=""
+        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
         caption="NO"
         css-class="custom-table-column"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="tanggal"
         caption="Tanggal Lapor"
         css-class="custom-table-column"
       />
@@ -256,14 +257,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiKeluhanPerUnit(
+  query rekapitulasiKeluhanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiKeluhanPerUnit(
+    rekapitulasiKeluhanPerTanggal(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -283,7 +284,7 @@ const GET_DATA = gql`
       min_durasi_response
       persen_inproses
       persen_selesai
-      posko
+      tanggal
       total
       total_diatas_sla_dispatch
       total_diatas_sla_recovery
@@ -309,7 +310,7 @@ onMounted(() => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+      data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
       loadingVisible.value = false
     }
     console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index b879473..e5d541d 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,127 +1,327 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div>
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </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'
+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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanPerUnit(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanPerUnit(
+      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)
 onMounted(() => {
-    const filters = useFiltersStore()
+  const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+      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
+  })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index fb032a8..6fe1aeb 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,86 +1,168 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
 
-            <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 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>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="" caption="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>
+    </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'
+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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanBerdasarkanMedia(
+      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 filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
-    filters.setConfig({
-        type: 'type-3'
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+  filters.setConfig({
+    type: 'type-3'
+  })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 695ad2d..b63bcd6 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -12,7 +12,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn 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="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -63,7 +64,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'
@@ -72,6 +73,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 +110,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanRatingPerUnit
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanRatingPerUnit
+(
+        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_DATA, {
+        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.rekapitulasiKeluhanRatingPerUnit;
+            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