diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index e46260c..ddc1945 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -1,108 +1,172 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :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="170" alignment="center" data-field="" 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" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
-                    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="InProgress"
-                    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"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> 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 alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="170" alignment="center" data-field="" 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" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
+          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="InProgress"
+          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"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> 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 alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+          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 daftarKeluhanDiselesaikanCC123
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    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
+        }
+}`
+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',
-        reportButton: true
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+      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',
+    reportButton: true
+  })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 24ae135..224e8c9 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -1,6 +1,7 @@
+<!-- Rekapitulasi Keluhan All -->
 <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">
@@ -67,21 +68,31 @@
                         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') {
@@ -90,7 +101,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -101,7 +112,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')
@@ -117,12 +128,75 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanAll
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanAll
+(
+        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 { 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.rekapitulasiKeluhanAll
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-13',
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>